:root {
  /* ===== Turtle color tokens — DARK (default) =====
     Light values live under [data-theme="light"] below; bind these vars (or the
     Tailwind utilities derived from them in @theme) and components theme for free. */
  --surface-0: #141514; /* bg/page */
  --surface-1: #191a19; /* bg/surface */
  --surface-hover: #222422; /* bg/surface-hover */
  --surface-subtle: rgba(249, 249, 249, 0.02); /* bg/subtle */
  --surface-subtle-3: rgba(249, 249, 249, 0.05); /* bg/subtle-3 */
  --fill: rgba(249, 249, 249, 0.05); /* bg/fill */
  --fill-hover: rgba(249, 249, 249, 0.15); /* bg/fill-hover */
  --accent-faint: rgba(115, 243, 108, 0.04); /* selection hover */
  --accent-subtle: rgba(115, 243, 108, 0.1); /* selection selected */
  --ink-primary: #f9f9f9; /* text/primary */
  --ink-secondary: rgba(255, 255, 255, 0.55); /* text/secondary */
  --ink-muted: rgba(249, 249, 249, 0.5); /* text/muted */
  --ink-label: #c0c0c0; /* text/label */
  --ink-disabled: rgba(249, 249, 249, 0.3); /* text/disabled */
  --ink-inverse: #141514; /* text/inverse */
  --ink-faint: rgba(249, 249, 249, 0.1); /* legacy alias of fill */
  --stroke-subtle: rgba(249, 249, 249, 0.06); /* border/subtle */
  --stroke-default: rgba(249, 249, 249, 0.1); /* border/default */
  --stroke-strong: rgba(249, 249, 249, 0.15); /* border/strong */
  --stroke-control: rgba(249, 249, 249, 0.25); /* border/control */
  --stroke-accent: rgba(115, 243, 108, 0.1); /* border/accent */
  --brand-primary: #73f36c; /* accent/green */
  --brand-deep: #73f36c; /* accent/green-deep */
  --brand-soft: #aaf1d5; /* accent/aqua */
  --blob-point: #2c2d2b; /* hero point-cloud resting grey (NOT a partner colour) */
  --blob-shimmer: #dfe6ee; /* rippling shimmer over the cloud (white-in-dark → ink-in-light) */
  --accent-blue: #627eea;
  --status-error: #ff0608;
  --status-warning: #f7931a;
  --status-success: #23c880;
  /* Heading gradient: bright -> grey. Per the spec, white-in-dark flips to
     ink-in-white; the grey tail is shared. */
  --grad-heading-from: #f9f9f9;
  --grad-heading-to: #8d928c;
  --card-shadow: rgba(0, 0, 0, 0.25);

  --background: var(--surface-0);
  --foreground: var(--ink-primary);
  /* SiteHeader: pt-5 + pb-4 + nav row */
  --site-header-height: 4.75rem;
  --z-mobile-nav: 2147483647;
  /* Section intro: title → copy / copy → CTA */
  --section-intro-gap: clamp(10px, 1.2vw, 16px);
  /* Stacked paragraphs inside copy */
  --section-intro-copy-gap: clamp(8px, 0.8vw, 12px);
}

[data-theme="light"] {
  /* ===== Turtle color tokens — LIGHT ===== */
  --surface-0: #fafafa;
  --surface-1: #fefefe;
  --surface-hover: #eff1ef;
  --surface-subtle: #f7f7f7;
  --surface-subtle-3: rgba(20, 21, 20, 0.06);
  --fill: rgba(20, 21, 20, 0.05);
  --fill-hover: rgba(20, 21, 20, 0.13);
  --accent-faint: rgba(20, 21, 20, 0.04);
  --accent-subtle: rgba(20, 21, 20, 0.07);
  --ink-primary: #141514;
  --ink-secondary: rgba(20, 21, 20, 0.7);
  --ink-muted: rgba(20, 21, 20, 0.55);
  --ink-label: #595959;
  --ink-disabled: rgba(20, 21, 20, 0.35);
  --ink-inverse: #f9f9f9;
  --ink-faint: rgba(20, 21, 20, 0.04);
  --stroke-subtle: rgba(20, 21, 20, 0.08);
  --stroke-default: rgba(20, 21, 20, 0.12);
  --stroke-strong: rgba(20, 21, 20, 0.16);
  --stroke-control: rgba(20, 21, 20, 0.25);
  --stroke-accent: rgba(0, 198, 29, 0.45);
  --brand-primary: #00c61d;
  --brand-deep: #008a15;
  --brand-soft: #0f766e;
  --blob-point: #aeb2ae;
  --blob-shimmer: #141514;
  --accent-blue: #627eea;
  --grad-heading-from: #141514;
  --grad-heading-to: #8d928c;
  --card-shadow: rgba(0, 0, 0, 0.08);
}

html {
  overflow-x: clip;
}

/* Landing root layout pins body to the viewport; HomeV2 expects window scroll. */
html.home-v2-route,
body.home-v2-route {
  height: auto !important;
  min-height: 100% !important;
}

body.home-v2-route {
  display: block !important;
  overflow: visible !important;
}

body.home-v2-route > main.home-v2-route {
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Reset landing site body typography inside the redesign shell */
.home-v2 {
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
}

body {
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* Gradient text — explicit -webkit-background-clip for Chromium <120 (e.g.
   Responsively App’s embedded browser) where unprefixed background-clip:text
   is ignored and the gradient paints as a rectangle behind the text. */
.text-gradient-heading,
.text-gradient-heading-h {
  background-image: linear-gradient(
    90deg,
    var(--grad-heading-from) 0%,
    var(--grad-heading-to) 73.5%
  );
  background-repeat: no-repeat;
  background-origin: content-box;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.text-hero-title {
  font-size: clamp(1.8rem, 4.4vw, 3.625rem);
  line-height: 1.1;
  letter-spacing: 0.4px;
}

.text-hero-subtitle {
  font-size: clamp(0.9rem, 1.92vw, 1.875rem);
  line-height: 1.3;
}

.text-section-title {
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.8px;
}

/* Benchmark Rates dots — subtle breathing "life"; staggered per dot (see
 * HeroStatsPanel) so it reads as a gentle shimmer flowing across the row. */
@keyframes benchmark-dot-pulse {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}
.benchmark-dot-pulse {
  animation: benchmark-dot-pulse 2.6s ease-in-out infinite;
}
/* The fractional tier dot: slow, obvious breathe between off and on. */
@keyframes benchmark-dot-partial {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.95;
  }
}
.benchmark-dot-partial {
  animation: benchmark-dot-partial 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .benchmark-dot-pulse,
  .benchmark-dot-partial {
    animation: none;
  }
  .benchmark-dot-partial {
    opacity: 0.55;
  }
}

.section-intro {
  gap: var(--section-intro-gap);
}

.section-intro__copy {
  gap: var(--section-intro-copy-gap);
}

/* The CTA row hangs lower — more air above the buttons than the title → copy
   rhythm gap (hero-inspired, scaled down for in-page sections). Adds to the
   flex gap: total ≈ 24px mobile / 34px desktop vs the hero's ~32/45px drop. */
.section-intro__cta {
  margin-top: clamp(14px, 1.4vw, 18px);
}

/* Phone only: center CTA pills inline as a group, even when the intro column is
   left-aligned (items-start). Tablet+ alignment is set per-section. */
@media (max-width: 767px) {
  .section-intro__cta {
    align-self: center;
  }

  div.section-intro__cta {
    display: inline-flex;
    justify-content: center;
  }
}

.section-intro__copy p {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.4;
  color: var(--color-ink-subtle);
}



/* ---------- horizontal logo marquee ---------- */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 100px;
  /* Trailing gap: flex `gap` puts nothing after the last item, leaving the
     track half a gap short of two exact tiles — the -50% wrap then snaps by
     gap/2 every loop. Padding the tail makes the loop seamless. */
  padding-right: 100px;
  animation: logo-marquee-scroll 54s linear infinite;
  will-change: transform;
}

.logo-marquee__track > * {
  flex-shrink: 0;
}

.logo-marquee .logo {
  width: auto;
  object-fit: contain;
  opacity: 0.75;
}

.dashed-rule {
  height: 1px;
  border: 1px dashed var(--stroke-default);
}

@keyframes logo-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

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

/* ---------- pipeline stage ---------- */
/* Matches Pipeline section px-6 / md:px-10 / lg:px-[100px] */
.pipeline-stage {
  --pipeline-gutter: 24px;
  overflow: visible;
}

@media (min-width: 768px) {
  .pipeline-stage {
    --pipeline-gutter: 40px;
  }
}

@media (min-width: 1025px) {
  .pipeline-stage {
    /* Card row sits 30px inside the monitor rail (24px edge margin + 30). */
    --pipeline-gutter: 54px;
  }
}

.pipeline-stage-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pipeline-stage-main {
  /* Card row height; monitor sits behind cards (z-index 0) */
  --pipeline-card-row: clamp(160px, 14vw, 209px);
  /* Mobile: modest lift above card tops */
  --pipeline-visual-overlap: clamp(88px, 11vh, 116px);
  --pipeline-visual-lift: clamp(40px, 6vh, 88px);
  /* Never wider than the viewport minus a 24px margin each side — the height
     derives from this, so the monitor artwork scales down to fit the frame. */
  --pipeline-visual-width: min(clamp(638px, 105.6vw, 1188px), calc(100vw - 48px));
  --pipeline-visual-max-h: clamp(411px, 58vh, 729px);
  --pipeline-visual-height: min(
    calc(var(--pipeline-visual-width) * 701 / 711),
    var(--pipeline-visual-max-h)
  );
  --pipeline-visual-scale: 1;
  --pipeline-visual-offset-y: 0px;
  --pipeline-visual-top: auto;
  --pipeline-visual-bottom: calc(
    var(--pipeline-card-row) - var(--pipeline-visual-overlap) +
      var(--pipeline-visual-lift)
  );
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: clamp(320px, 52vw, 480px);
}

/* Monitor illustration — fluid tokens on .pipeline-stage-main */
.pipeline-visual {
  --pipeline-slide-fade-duration: 250ms;
  /* Outgoing slide is cut instantly at its origin so the old image never
     rides the moving monitor box to the new position. */
  --pipeline-slide-fade-out-duration: 0ms;
  position: absolute;
  /* Declarative edge guard on the JS anchor: the visual's edges keep at
     least the clamp margin from the stage edges. Desktop stage is
     full-bleed → 24px screen margin (set below); <lg the section padding
     already insets the stage, and where the visual spans the full stage
     the bounds collapse to dead-centre. Pure CSS — the anchor hook stays
     untouched. */
  --pipeline-visual-clamp-margin: 0px;
  left: clamp(
    calc(var(--pipeline-visual-clamp-margin) + var(--pipeline-visual-width) / 2),
    var(--pipeline-visual-x, 50%),
    calc(100% - var(--pipeline-visual-clamp-margin) - var(--pipeline-visual-width) / 2)
  );
  top: var(--pipeline-visual-top);
  bottom: var(--pipeline-visual-bottom);
  z-index: 0;
  width: var(--pipeline-visual-width);
  height: var(--pipeline-visual-height);
  max-height: var(--pipeline-visual-max-h);
  overflow: visible;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(var(--pipeline-visual-offset-y))
    scale(var(--pipeline-visual-scale));
  transition:
    left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pipeline-visual__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pipeline-visual__slide--active {
  z-index: 1;
}

/* Safari: object-fit needs an explicit % position (keywords skew per intrinsic width). */
.pipeline-visual__slide img {
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--pipeline-slide-fade-out-duration) ease-in-out;
  /* Keep every slide on its own painted/decoded layer so Chrome never shows a
     blank or stale frame (the "flash") when a slide becomes active mid-crossfade. */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.pipeline-visual__slide--active img {
  opacity: 1;
  transition: opacity var(--pipeline-slide-fade-duration) ease-in-out;
}

.pipeline-stage-main .pipeline-cards {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

@media (min-width: 1025px) {
  .pipeline-visual {
    /* Even-rail model: the monitor's five positions are evenly spaced along
       a rail wider than the card row but fully ON-SCREEN — the rail's ends
       sit --pipeline-visual-edge-margin inside the VIEWPORT edges, so edge
       selections overhang the cards while keeping screen padding. Position
       is a pure function of --pipeline-step-frac (selectedIndex /
       (count-1), set inline by Pipeline.tsx): no card measuring, no
       re-anchoring, nothing to jiggle. 0.88/0.44 convert the width var to
       rendered size (the 0.88 render scale); (100vw - 100%)/2 is the
       centred stage's offset on >1728px screens. */
    /* Rail fitted against the VISIBLE artwork (the export PNGs carry
       viewport-dependent slack inside the box, measured 114-350px): the
       linear vw term lands the end-slides' artwork ~60-100px OUTSIDE the
       card row's edge across 1280-2048 widths, and the -350px floor caps
       ultra-wide monitors so the composition tracks the container with a
       steady ~80px overhang instead of chasing the screen edges. */
    --pipeline-rail-inset: max(calc(386px - 36vw), -350px);
    left: calc(
      var(--pipeline-rail-inset) + 0.44 * var(--pipeline-visual-width) +
        (100% - 2 * var(--pipeline-rail-inset) - 0.88 * var(--pipeline-visual-width)) *
        var(--pipeline-step-frac, 0.5)
    );
    transition: opacity 0.5s ease, left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ---------- pipeline cards ---------- */
.pipeline-cards {
  width: 100%;
  min-width: 0;
}

.pipeline-cards__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(8px, 0.8vw, 10px);
  width: 100%;
}

.pipeline-card {
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .pipeline-stage-inner {
    gap: clamp(20px, 4vh, 28px);
    overflow: visible;
  }

  /* Wide anchored visual + object-position pins edge brackets to first/last cards */
  .pipeline-stage-main {
    --pipeline-visual-width: min(calc(100vw - 48px), 420px);
    /* Box must be wider-aspect than every step PNG (max 2880/2212) so contain
       fits by HEIGHT — every monitor renders the same height, sized so the
       widest (front-on) frame exactly fills the width; the tilted exports
       are narrower by geometry. Width-fitting instead would blow the tilted
       ones up taller than the front-on frame. */
    --pipeline-visual-height: calc(var(--pipeline-visual-width) * 0.76);
    --pipeline-visual-max-h: none;
    --pipeline-visual-scale: 1;
    --pipeline-visual-top: 0;
    --pipeline-visual-bottom: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: none;
    min-height: 0;
    overflow: visible;
    padding-top: calc(
      var(--pipeline-visual-height) + clamp(24px, 5vh, 32px)
    );
  }

  .pipeline-stage-main .pipeline-cards {
    margin-top: 0;
  }

  .pipeline-visual {
    top: 0;
    bottom: auto;
    max-height: none;
    margin-inline: 0;
    flex-shrink: 0;
    /* Snap to card anchor — no left transition (feels like re-centering during swipe) */
    transition: opacity 0.5s ease;
  }

  .pipeline-cards {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Full-bleed like the partner marquee: scrolling cards clip at the
       screen edges, while the resting/snap position keeps a 24px inset.
       width must grow to cover the negative margins — width:100% alone
       breaks out on the left but leaves a dead gutter on the right. */
    margin-inline: calc(-1 * var(--pipeline-gutter));
    width: calc(100% + 2 * var(--pipeline-gutter));
    padding-inline: var(--pipeline-gutter);
    scroll-padding-inline: var(--pipeline-gutter);
    scrollbar-width: none;
  }

  .pipeline-cards::-webkit-scrollbar {
    display: none;
  }

  .pipeline-cards__track {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-inline: 0;
    /* Trailing space so the last card can scroll to the leading snap line. */
    padding-inline-end: max(
      var(--pipeline-gutter),
      calc(100% - min(300px, calc(100vw - 2 * var(--pipeline-gutter) - 16px)))
    );
    box-sizing: border-box;
  }

  .pipeline-cards__track .pipeline-card {
    flex: none;
    width: min(300px, calc(100vw - 2 * var(--pipeline-gutter) - 16px));
    min-width: min(300px, calc(100vw - 2 * var(--pipeline-gutter) - 16px));
    max-width: min(300px, calc(100vw - 2 * var(--pipeline-gutter) - 16px));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: auto;
  }
}

@media (min-width: 1025px) {
  .pipeline-cards {
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    scroll-snap-type: none;
  }

  .pipeline-cards__track {
    width: 100%;
  }

  .pipeline-card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    will-change: flex-basis;
  }

  .pipeline-card[data-state="selected"] {
    flex: 1.95 1 0;
  }
  .pipeline-card[data-state="default"] {
    flex: 1 1 0;
  }
}

.pipeline-card[data-state="default"] {
  background: var(--surface-0);
  border-style: solid;
}

.pipeline-card[data-state="default"] .pipeline-card-title {
  color: var(--ink-muted);
}

/* Collapsible body: grid-rows 0fr->1fr animates to the exact content height,
 * so open/close glide smoothly with no max-height dead-zone snap. */
.pipeline-card-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.3s ease;
}
.pipeline-card-body-wrap > .pipeline-card-body {
  min-height: 0;
  overflow: hidden;
}

.pipeline-card[data-state="selected"] {
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
  border-style: solid;
}

.pipeline-card[data-state="selected"] .pipeline-card-title {
  background: linear-gradient(109.5deg, var(--grad-heading-from) 5%, var(--grad-heading-to) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pipeline-card[data-state="selected"] .pipeline-card-body-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.45s ease, opacity 0.5s ease 0.15s;
}

.pipeline-dot {
  width: clamp(16px, 1.4vw, 20px);
  height: clamp(16px, 1.4vw, 20px);
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 17.8px rgba(0, 0, 0, 0.4));
  transition: color 0.3s ease;
}

.pipeline-card[data-state="default"] .pipeline-dot {
  color: var(--ink-muted);
}

.pipeline-card[data-state="selected"] .pipeline-dot {
  color: var(--brand-primary);
}

@media (max-width: 1024px) {
  .pipeline-card[data-state="default"] .pipeline-card-body-wrap {
    opacity: 1;
    grid-template-rows: 1fr;
  }
}

@media (min-width: 1025px) {
  .scroll-stage {
    min-height: 400vh;
  }
  .scroll-stage-inner {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pipeline-stage {
    overflow: visible;
  }

  .pipeline-stage .scroll-stage-inner {
    overflow: visible;
  }

  .pipeline-stage-inner {
    padding-top: clamp(12px, 2vh, 28px);
    padding-bottom: clamp(32px, 5vh, 64px);
  }

  .pipeline-stage-header {
    flex-shrink: 0;
  }

  /* Full section width for the illustration; cards stay in the guttered column */
  .pipeline-stage-main {
    width: calc(100% + 2 * var(--pipeline-gutter));
    margin-inline: calc(-1 * var(--pipeline-gutter));
    min-height: 0;
    overflow: visible;
    --pipeline-visual-scale: 0.88;
    --pipeline-visual-lift: 0px;
    /* Anchor ~mid-card (red-line reference); PNG baseline via object-bottom + offset */
    --pipeline-visual-bottom: calc(var(--pipeline-card-row) * 0.72);
    --pipeline-visual-offset-y: 0px;
    --pipeline-visual-width: clamp(704px, 70.4vw, 1298px);
    /* 72dvh drives height; avoid a low px cap (was blocking dvh tweaks) */
    --pipeline-visual-max-h: min(67.3dvh, calc((100dvh - 10.5rem) * 0.935));
  }

  .pipeline-stage .pipeline-cards {
    flex-shrink: 0;
    padding-inline: var(--pipeline-gutter);
    box-sizing: border-box;
  }
}

/* Compact desktop (small laptop / short viewport) */
@media (min-width: 1025px) and (max-height: 860px) {
  .pipeline-stage-main {
    --pipeline-visual-bottom: calc(var(--pipeline-card-row) * 0.68);
    --pipeline-visual-offset-y: 0px;
    --pipeline-visual-width: clamp(616px, 63.8vw, 1144px);
    --pipeline-visual-max-h: min(63.6dvh, calc((100dvh - 9.5rem) * 0.935));
  }
}

/* Large desktop */
@media (min-width: 1536px) {
  .pipeline-stage-main {
    --pipeline-visual-bottom: calc(var(--pipeline-card-row) * 0.74);
    --pipeline-visual-offset-y: 0px;
    --pipeline-visual-width: clamp(792px, 74.8vw, 1408px);
    --pipeline-visual-max-h: min(67.3dvh, calc((100dvh - 10.5rem) * 0.935));
  }
}

/* 2K+ / tall desktop — keep the monitor ~the same size (don't grow it) and lift
   the composition off the bottom so the whole section centers on big monitors. */
@media (min-width: 2000px) and (min-height: 1100px) {
  .pipeline-stage-main {
    --pipeline-visual-max-h: min(64dvh, 740px);
  }
  .pipeline-stage-inner {
    padding-bottom: clamp(40px, 6vh, 140px);
  }
}

/* ---------- case-study pills ---------- */
.case-pill {
  border: 0;
  border-radius: 9999px;
  background-color: var(--surface-1);
  font-family: inherit;
  color: inherit;
  transition: background-color 0.3s ease;
}

.case-pill:hover,
.case-pill[data-state="selected"] {
  background-color: var(--surface-hover);
}

.case-pill .case-pill-arrow {
  background: none;
}

.case-pill .case-pill-arrow svg path {
  stroke: var(--ink-muted);
  transition: stroke 0.3s ease;
}

.case-pill:hover .case-pill-arrow svg path,
.case-pill[data-state="selected"] .case-pill-arrow svg path {
  stroke: var(--brand-primary);
}

.case-cards .bar-grow {
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transform-box: fill-box;
  will-change: transform;
}

.case-cards.is-animating .bar-grow {
  animation: bar-grow 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.case-cards.is-animating .bar-grow[data-index="0"] {
  animation-delay: 0.6s;
}

.case-cards.is-animating .bar-grow[data-index="1"] {
  animation-delay: 0.75s;
}

.case-cards.is-animating .bar-grow[data-index="2"] {
  animation-delay: 0.9s;
}

.case-cards.is-animating .bar-grow[data-index="3"] {
  animation-delay: 1.05s;
}

@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.case-cards .tvl-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.case-cards .tvl-area {
  opacity: 0;
}

.case-cards.is-animating .tvl-line {
  animation: tvl-draw 1.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.case-cards.is-animating .tvl-area {
  animation: tvl-fade 1.25s ease 0.7s forwards;
}

@keyframes tvl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes tvl-fade {
  to {
    opacity: 1;
  }
}

/* Touch viewports: show chart graphics even before the IO animation fires */
@media (max-width: 1024px) {
  .case-cards:not(.is-animating) .tvl-line {
    stroke-dashoffset: 0;
  }

  .case-cards:not(.is-animating) .tvl-area {
    opacity: 1;
  }

  .case-cards:not(.is-animating) .bar-grow {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-cards .tvl-line {
    stroke-dashoffset: 0;
  }
  .case-cards .tvl-area {
    opacity: 1;
  }
  .case-cards .bar-grow {
    animation: none !important;
    transform: scaleY(1) !important;
  }
}

/* ---------- partner marquees ---------- */
.partner-rows {
  --partner-card-width: 189px;
  --partner-card-height: 105px;
  --partner-card-gap-x: 20px;
  --partner-card-gap-y: 20px;
  display: flex;
  flex-direction: column;
  row-gap: var(--partner-card-gap-y);
}

.partner-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.partner-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  column-gap: var(--partner-card-gap-x);
  /* Trailing gap so the -50% wrap lands exactly on a tile boundary (without
     it the loop snaps by half a gap — see .logo-marquee__track). */
  padding-right: var(--partner-card-gap-x);
  animation: partner-marquee-scroll linear infinite;
  will-change: transform;
}

.partner-marquee[data-direction="right"] .partner-marquee__track {
  animation-direction: reverse;
}

@keyframes partner-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.partner-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
  border: 1px solid var(--stroke-default);
  border-radius: 10px;
  width: var(--partner-card-width);
  height: var(--partner-card-height);
  overflow: hidden;
  padding: 14px;
}

.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
}

/* Monochrome white logos (protocol marquee + investor cards) invert to read on
   light surfaces. Colourful raster logos/avatars are intentionally left as-is. */
[data-theme="light"] .logo-marquee .logo,
[data-theme="light"] .partner-logo {
  filter: invert(1) hue-rotate(180deg);
}

/* Imperative all-green/white canvases (the command-center radar) flip wholesale
   in light mode — bg → light, white glow → ink, green → deep green — applying
   the gradient rule the cheap way instead of re-tinting every draw call. */
[data-theme="light"] .theme-invert {
  filter: invert(1) hue-rotate(180deg);
}

/* Paired hand-authored assets (e.g. the DeFi CTA orb): each theme shows its own
   file. Used where a filter invert would wreck a gradient's luminosity. */
[data-theme="light"] .theme-asset-dark {
  display: none;
}
:root:not([data-theme="light"]) .theme-asset-light {
  display: none;
}

/* Brand wordmark/logo: neon green (#73f36c) → deeper light-mode green (~#00c61d). */
[data-theme="light"] .brand-wordmark {
  filter: saturate(1.85) brightness(0.6);
}


/* Case-study quote avatar gloss — dark values unchanged from the old inline
   style; light mode swaps the white inset highlights (invisible on light)
   for dark-tinted ones and softens the drop shadow. */
.case-avatar-gloss {
  box-shadow:
    0 4.5px 56.6px rgba(0, 0, 0, 0.4),
    inset 2.9px 2.9px 19.3px rgba(215, 215, 215, 0.15),
    inset 2.9px 0.97px 9.67px rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .case-avatar-gloss {
  box-shadow:
    0 4.5px 28px rgba(0, 0, 0, 0.12),
    inset 2.9px 2.9px 19.3px rgba(20, 21, 20, 0.06),
    inset 2.9px 0.97px 9.67px rgba(20, 21, 20, 0.1);
}

/* ---------- team section (Figma 1358:27909 / Card-Member 1358:27910) ---------- */
.team-grid {
  --team-card-pad: clamp(14px, 1.04vw, 20px);
  --team-card-gap: clamp(10px, 0.75vw, 14.31px);
  --team-card-radius: clamp(16px, 1.07vw, 20.53px);
  --team-avatar-w: clamp(72px, 42%, 129px);

  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--team-card-gap);
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.team-grid > li:not(.team-grid__cta) {
  display: flex;
  min-width: 0;
}

.team-grid__cta {
  grid-column: 1 / -1;
}

@media (min-width: 1280px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 0;
  }

  .team-grid__cta {
    grid-column: auto;
  }
}

.team-card {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(8px, 0.6vw, 12px);
  width: 100%;
  min-width: 0;
  padding: var(--team-card-pad) var(--team-card-pad) 0 var(--team-card-pad);
  border-radius: var(--team-card-radius);
  border: 1.027px solid var(--stroke-default);
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
  overflow: hidden;
}

.team-card__copy {
  display: flex;
  flex-shrink: 1;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: clamp(2px, 0.2vw, 3px);
  min-width: 0;
}

.team-card__name {
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-primary);
}

.team-card__role {
  font-size: clamp(11px, 0.625vw, 12px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-muted);
  overflow-wrap: break-word;
}

.team-card__avatar-wrap {
  position: relative;
  flex: 0 0 var(--team-avatar-w);
  align-self: stretch;
  width: var(--team-avatar-w);
  min-width: 0;
  margin-left: auto;
  overflow: visible;
}

.team-card__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
}

/* Phone Card-Member (1385:44826) — portrait stack; tablet+ keeps horizontal desktop shell */
@media (max-width: 767px) {
  .team-grid {
    --team-avatar-w: 112px;
  }

  .team-grid > li:not(.team-grid__cta) {
    align-self: stretch;
  }

  .team-card {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 16px 16px 0;
  }

  .team-card__copy {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
  }

  .team-card__name {
    font-size: 18px;
    color: var(--ink-primary);
  }

  .team-card__role {
    font-size: 12px;
  }

  .team-card__avatar-wrap {
    flex: 0 0 auto;
    align-self: flex-end;
    width: var(--team-avatar-w);
    height: var(--team-avatar-w);
    min-height: var(--team-avatar-w);
    margin-left: 0;
    margin-top: auto;
    overflow: visible;
  }

  .team-card__avatar {
    object-position: bottom center;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .team-grid {
    /* Wider avatar slot so `contain` fills the frame on iPad widths. */
    --team-avatar-w: clamp(150px, 50%, 220px);
  }

  .team-card__avatar {
    width: auto;
    height: 108%;
    max-width: 100%;
    margin-left: auto;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .team-grid {
    --team-avatar-w: clamp(170px, 54%, 240px);
  }
}

.team-grid__cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 0;
  align-self: start;
}

.team-grid__cta-link {
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-primary);
  text-align: center;
}

@media (max-width: 1279px) {
  .team-grid__cta {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: clamp(24px, 5vw, 48px);
    padding-bottom: clamp(4px, 1vw, 12px);
  }

  .team-grid__cta-link {
    font-size: clamp(17px, 2.4vw, 20px);
  }
}

@media (min-width: 1280px) {
  .team-grid__cta {
    justify-content: center;
    align-self: stretch;
  }
}

/* ---------- latest updates (GSAP horizontal on desktop) ---------- */
.updates-section__header {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(28px, 3.4vw, 54px);
}

.updates-scroll {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(8px, 1.5vw, 16px) 24px clamp(48px, 6vw, 80px);
}

.updates-more {
  flex-shrink: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 16px) 0;
}

.updates-more__link {
  font-family: var(--font-dm-sans);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.3;
  color: var(--ink-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}

.updates-more__link:hover {
  opacity: 0.8;
}

/* Tablet: 2-column grid; phone stays stacked, desktop uses horizontal GSAP row */
@media (min-width: 768px) and (max-width: 1024px) {
  .updates-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    gap: clamp(16px, 2.4vw, 24px);
    width: 100%;
    max-width: 1728px;
    margin-inline: auto;
    padding: clamp(8px, 1.5vw, 16px) 40px clamp(48px, 6vw, 80px);
  }

  .update-card {
    width: min(100%, 400px);
    max-width: 400px;
    height: clamp(380px, 42vw, 460px);
    min-height: clamp(360px, 48vw, 440px);
    max-height: none;
    justify-self: center;
  }

  .updates-more {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(12px, 2vw, 24px) 0 0;
  }
}

@media (min-width: 1025px) {
  .updates-section__header {
    padding-top: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(20px, 2.2vw, 32px);
  }

  .updates-scroll {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    overflow: hidden;
    height: auto;
    gap: 20px;
    padding-inline: max(24px, calc((100vw - 1728px) / 2));
    padding-block: clamp(12px, 1.6vw, 20px);
  }

  .update-card {
    width: 400px;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
  }

  .updates-more {
    width: 400px;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
    padding: 0;
    border-radius: clamp(20px, 2.4vw, 32px);
  }
}

.update-card {
  flex-shrink: 0;
  width: clamp(280px, 32vw, 400px);
  height: clamp(380px, 42vw, 460px);
  background: var(--surface-0);
  border: 1px solid var(--stroke-subtle);
  border-radius: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 4px 20px var(--card-shadow);
  backdrop-filter: blur(19px);
  -webkit-backdrop-filter: blur(19px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.update-card__inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 15px);
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px)
    clamp(26px, 3vw, 36px);
}

.update-card__img-wrap {
  width: 100%;
  height: clamp(170px, 18vw, 220px);
  border-radius: clamp(14px, 1.4vw, 18px);
  overflow: hidden;
}

.update-card__img-wrap > div {
  height: 100%;
  border-radius: inherit;
}

.update-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: flex-start;
  justify-content: space-between;
}

.update-card__text {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
  width: 100%;
}

.update-card__title {
  color: var(--ink-primary);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.3;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.update-card__desc {
  color: var(--ink-muted);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.4;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.update-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: clamp(40px, 3.4vw, 44px);
  padding: 0 clamp(14px, 1.4vw, 20px);
  background: var(--fill);
  border-radius: 9999px;
  color: var(--ink-primary);
  font-size: clamp(14px, 1.15vw, 16px);
  transition: background 0.15s ease;
}

.update-card__cta:hover {
  background: var(--accent-subtle);
}

.update-card__cta svg {
  flex-shrink: 0;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--surface-0);
  position: relative;
}

.footer-divider {
  width: 100%;
  height: 1px;
  border-top: 1px dashed var(--stroke-default);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Above-the-fold content must not wait on hydration/IO on touch viewports */
@media (max-width: 1024px) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    /* Nested will-change + canvas compositing blanks canvases on iOS Safari */
    will-change: auto;
  }
}

@media (min-width: 1025px) {
  /* Keep card-anchored centering when reveal shares the same node as .pipeline-visual */
  .pipeline-visual.reveal-on-scroll {
    opacity: 0;
    transform: translateX(-50%)
      translateY(calc(18px + var(--pipeline-visual-offset-y)))
      scale(var(--pipeline-visual-scale));
  }

  .pipeline-visual.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--pipeline-visual-offset-y))
      scale(var(--pipeline-visual-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pipeline-visual__slide img {
    transition: none;
  }

  @media (min-width: 1025px) {
    .pipeline-visual.reveal-on-scroll,
    .pipeline-visual.reveal-on-scroll.is-visible {
      transform: translateX(-50%) translateY(var(--pipeline-visual-offset-y))
        scale(var(--pipeline-visual-scale));
    }
  }
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  min-height: 100dvh;
  animation: mobile-nav-overlay-in 0.22s ease-out;
}

@keyframes mobile-nav-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay {
    animation: none;
  }
}

/* Header theme toggle renders both icons; html[data-theme] (set pre-paint by
   the no-flash script) picks one. display: contents keeps the SVG laying out
   as a direct flex child of the button. */
.theme-toggle-icon-dark {
  display: contents;
}
.theme-toggle-icon-light {
  display: none;
}
[data-theme="light"] .theme-toggle-icon-dark {
  display: none;
}
[data-theme="light"] .theme-toggle-icon-light {
  display: contents;
}

/* Hide/reveal applies on all inputs: desktop reveals via top-edge cursor,
   touch hides on scroll-down and pops back on scroll-up (useHeaderVisibility). */
.site-header {
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.32s ease;
}
.site-header:not(.is-visible) {
  transform: translateY(calc(-100% - 4px));
  opacity: 0;
}

/* Safari only (hanging-punctuation + -apple-system-body are WebKit-exclusive):
   backdrop-filter over the every-frame-animating blob canvas forces WebKit to
   re-blur the header strip per frame — measured ~9ms/frame on tall windows,
   the cause of the Safari-only scroll stutter. Swap glass blur for a more
   opaque fill there; Chrome/Firefox keep the full effect. */
@supports (hanging-punctuation: first) and (font: -apple-system-body) {
  .site-header,
  .mobile-nav-overlay__topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: color-mix(in srgb, var(--surface-0) 94%, transparent);
  }
}

/* Reduced motion: header still hides/reveals and pipeline cards still
   expand/move — just instantly, with no animation. !important beats the
   pipeline card's inline transition style. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .pipeline-visual,
  .pipeline-card,
  .pipeline-card-body-wrap {
    transition: none !important;
  }
}

.footer-nav-col h3 {
  color: var(--ink-primary);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

.footer-nav-col a {
  display: block;
  color: var(--ink-muted);
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.4;
  margin-bottom: clamp(8px, 1vw, 14px);
  transition: color 0.15s ease;
}

.footer-nav-col a:hover {
  color: var(--ink-primary);
}

.footer-wordmark-wrap {
  width: 100%;
}

.footer-wordmark-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.footer-legal {
  color: var(--ink-muted);
  font-size: clamp(11px, 0.95vw, 12px);
  font-weight: 500;
  line-height: 1.2;
}

.footer-legal a {
  color: inherit;
  transition: color 0.15s ease;
}

.footer-legal a:hover {
  color: var(--ink-primary);
}

.footer-copyright {
  color: var(--ink-disabled);
  font-size: clamp(11px, 0.95vw, 12px);
  font-weight: 500;
  line-height: 1.2;
}

.footer-socials {
  color: var(--ink-muted);
  font-size: clamp(11px, 0.95vw, 12px);
  font-weight: 500;
  line-height: 1.2;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color 0.15s ease;
}

.footer-socials a:hover {
  color: var(--brand-primary);
}

.footer-socials svg {
  flex-shrink: 0;
}

.glow-divider {
  position: relative;
  width: 100%;
  height: clamp(120px, 13vw, 192px);
  overflow: hidden;
  pointer-events: none;
}

.glow-divider img {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(1900px, 117vw);
  height: auto;
  transform: translateX(-50%);
  user-select: none;
}

.terrain-canvas-mask {
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 60px,
    black calc(100% - 40px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 60px,
    black calc(100% - 40px),
    transparent 100%
  );
}

/* Mobile (< lg): shrink readable type ~1px vs desktop; ≤12px labels unchanged. */
@media (max-width: 1024px) {
  /* 23px floor — matches the hero tagline and the Backed by / Latest Updates
     headers, so every section title shares one mobile size. */
  .text-section-title { font-size: clamp(1.4375rem, 2.3vw, 2.1rem); }
  .section-intro__copy p { font-size: clamp(0.875rem, 1.2vw, 1.125rem); }
  .team-card__name { font-size: clamp(15px, 1.04vw, 20px); }
  .team-grid__cta-link { font-size: 13px; }
  .update-card__desc { font-size: clamp(13px, 1.15vw, 16px); }
  .update-card__cta { font-size: clamp(13px, 1.15vw, 16px); }
}