/* Wager Sharp for Business: institutional, typographic system */

:root {
  --cobalt: #3165b0;
  --cobalt-dark: #244f8d;
  --cobalt-light: #76a4e5;
  --navy: #07111f;
  --navy-2: #0d192b;
  --ink: #0e1b33;
  --body: #40516a;
  --muted: #687991;
  --paper: #f5f8fb;
  --white: #ffffff;
  --rule: #d7e0eb;
  --rule-dark: rgba(173, 193, 220, 0.2);
  --success: #187a56;
  --error: #b23a48;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --container: 1240px;
  --header-h: 68px;
  --section-pad-top: clamp(60px, 12vw, 80px);
  --section-pad-bottom: clamp(52px, 10vw, 68px);
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--cobalt);
  color: var(--white);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea {
  font-family: var(--font-body);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

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

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.site-nav a {
  touch-action: manipulation;
}

button {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* Anchor landing: scroll-padding-top (html) and scroll-margin-top stack
   additively per spec. We exploit that deliberately - the NEGATIVE margin
   cancels the section's internal top padding so clicks land with the
   heading ~48px under the header instead of a third-screen of whitespace.
   Browsers that ignore negative values fall back to edge-landing. */
section[id] {
  scroll-margin-top: calc(16px - var(--section-pad-top));
}

[hidden] {
  display: none !important;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--white);
  border: 2px solid var(--cobalt);
  color: var(--ink);
  font-weight: 600;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--cobalt-light);
  outline-offset: 3px;
}

.eyebrow,
.chapter-kicker,
.stage-step,
.side-heading,
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 18px;
  color: var(--cobalt);
}

.eyebrow-on-dark {
  color: #a8c8f2;
}

.section {
  padding-block: var(--section-pad-top) var(--section-pad-bottom);
}

.section-intro {
  max-width: 780px;
  margin-bottom: 42px;
}

.section-intro h2,
.contact-heading h2 {
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(2.55rem, 11vw, 4.65rem);
  letter-spacing: -0.035em;
}

.section-lede {
  max-width: 670px;
  margin-top: 22px;
  color: var(--body);
  font-size: clamp(1rem, 4.3vw, 1.18rem);
  line-height: 1.62;
}

/* Header */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(215, 224, 235, 0.72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(7, 17, 31, 0.04), 0 8px 24px rgba(7, 17, 31, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  gap: 10px;
}

.brand-logo {
  width: 154px;
  height: auto;
}

.brand-tag {
  display: none;
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: 12px max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left));
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 40px rgba(7, 17, 31, 0.12);
}

.site-nav.open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.site-nav > a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
  font-size: 1rem;
  font-weight: 500;
  transition: color 150ms ease;
}

.site-nav > a:not(.btn):hover {
  color: var(--ink);
}

.nav-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 11px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle span {
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform 180ms ease;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Buttons */

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

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

.btn-primary:hover {
  background: var(--cobalt-dark);
}

.btn:active {
  transform: scale(0.96);
}

.link-quiet {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  transition: color 160ms ease;
}

.link-quiet:hover {
  color: var(--cobalt-dark);
}

.link-quiet .link-arrow {
  transition: translate 160ms ease;
}

.link-quiet:hover .link-arrow {
  translate: 3px 0;
}

.btn-nav {
  margin-top: 14px;
}

/* Hero: typographic left, illustrative payload card right */

.hero {
  position: relative;
  background: var(--paper);
}

/* Faint engineering grid, fading out toward the section's bottom. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 27, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 27, 51, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 96%);
  pointer-events: none;
}

.hero .container {
  position: relative;
}

.hero-grid {
  padding-top: calc(var(--header-h) + 44px);
  padding-bottom: 54px;
}

.hero-copy .eyebrow {
  margin-bottom: 16px;
}

.hero h1 {
  max-width: 650px;
  font-size: clamp(3.1rem, 13.5vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.hero-lede {
  max-width: 490px;
  margin-top: 20px;
  color: var(--body);
  font-size: 1.05rem;
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

/* Payload card: the hero's one artifact. Dark bounded terminal surface,
   hairline chrome, two syntax hues, static status - no pulsing "live"
   indicators, no traffic-light dots, no glow. */

.payload-card {
  max-width: 560px;
  margin: 44px 0 0;
  background: var(--navy);
  border: 1px solid rgba(173, 193, 220, 0.18);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(7, 17, 31, 0.06),
    0 10px 22px rgba(7, 17, 31, 0.08),
    0 30px 60px rgba(7, 17, 31, 0.12);
}

.payload-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(173, 193, 220, 0.12);
}

.payload-head img {
  display: none;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.payload-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #c8d3e2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payload-status {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(88, 185, 142, 0.35);
  border-radius: 2px;
  color: #58b98e;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.payload-code {
  margin: 0;
  padding: 16px 14px;
  overflow-x: auto;
  counter-reset: line;
  color: #8fa1ba;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.payload-code .cl {
  position: relative;
  display: block;
  padding-left: 30px;
  counter-increment: line;
  white-space: pre;
}

.payload-code .cl::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 18px;
  color: rgba(169, 185, 207, 0.3);
  font-size: 0.64rem;
  line-height: inherit;
  text-align: right;
}

.payload-code .k {
  color: var(--cobalt-light);
}

.payload-code .s {
  color: #e8eef7;
}

.payload-code .p {
  color: #8fa1ba;
}

.payload-foot {
  margin: 0;
  padding: 10px 16px 13px;
  border-top: 1px solid rgba(173, 193, 220, 0.1);
  color: #70839f;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.hero-transition-rule {
  height: 3px;
  background: var(--cobalt);
}

/* Audience sequence */

.section-solutions {
  background: var(--white);
}

.audience-list {
  border-top: 1px solid var(--ink);
}

.audience {
  padding: 27px 0 29px;
  border-bottom: 1px solid var(--rule);
}

.audience h3 {
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: -0.025em;
}

.audience p:last-child {
  max-width: 650px;
  margin-top: 10px;
  color: var(--body);
  font-size: 0.97rem;
  line-height: 1.64;
}

/* Platform chapters */

.section-platform {
  background: var(--paper);
  /* Hairline insures the 2% white-to-paper shift on displays that clip it. */
  border-top: 1px solid var(--rule);
}

.section-intro-wide {
  max-width: none;
}

.product-chapters {
  border-top: 1px solid var(--ink);
}

.product-chapter {
  padding: 30px 0 38px;
  border-bottom: 1px solid var(--rule);
}

.chapter-kicker {
  margin-bottom: 28px;
  color: var(--cobalt);
}

.product-chapter h3 {
  max-width: 360px;
  color: var(--ink);
  font-size: clamp(2rem, 9vw, 2.75rem);
  letter-spacing: -0.035em;
}

.product-lede {
  max-width: 430px;
  margin-top: 14px;
  color: var(--body);
  font-size: 1.05rem;
  line-height: 1.55;
}

.feature-list {
  margin-top: 31px;
  border-top: 1px solid var(--rule);
}

.feature-list li {
  position: relative;
  padding: 13px 0 13px 19px;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
  font-size: 0.91rem;
  line-height: 1.55;
}

.feature-list li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--cobalt);
}

/* Dark operating sequence */

.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}

.pipeline-watermark {
  position: absolute;
  top: 50%;
  right: max(-34vw, -170px);
  width: min(72vw, 380px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

.section-dark .container {
  position: relative;
  z-index: 1;
}

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

.section-intro-dark .section-lede {
  color: #a9b9cf;
}

.pipeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 28px;
}

.pipeline::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 4px;
  width: 1px;
  background: var(--rule-dark);
}

/* The runner dot: rides the rail station-to-station once the stages have
   revealed and the section is in view (see the motion block). It dwells at
   each node, ends its run at Deliver, and rests between passes. The dot is
   positioned at station 1 and moved via `translate` (compositor-driven, so
   the glide stays smooth); JS measures the station offsets into
   --pipe-t1..4 for the current layout. */
.pipeline::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cobalt-light);
  box-shadow: 0 0 7px 1px rgba(118, 164, 229, 0.5);
  opacity: 0;
  pointer-events: none;
}

.stage {
  position: relative;
  padding: 0 0 40px;
}

.stage:last-child {
  padding-bottom: 0;
}

.stage::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -28px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--cobalt-light);
  background: var(--navy);
}

.stage-step {
  color: var(--cobalt-light);
}

.stage h3 {
  margin-top: 10px;
  color: var(--white);
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.stage p {
  max-width: 280px;
  margin-top: 9px;
  color: #a9b9cf;
  font-size: 0.92rem;
  line-height: 1.62;
}

/* Contact */

.section-contact {
  background: var(--paper);
}

.contact-heading .section-lede {
  max-width: 620px;
}

.contact-aside {
  margin-top: 42px;
  padding-top: 25px;
  border-top: 1px solid var(--rule);
}

.side-heading {
  margin-bottom: 17px;
  color: var(--muted);
}

.expectation-list li {
  position: relative;
  max-width: 540px;
  margin-top: 12px;
  padding-left: 18px;
  color: var(--body);
  font-size: 0.93rem;
}

.expectation-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--cobalt);
}

.demo-form {
  display: grid;
  gap: 17px;
  margin-top: 52px;
  padding: 28px 22px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--cobalt);
  box-shadow: 0 1px 2px rgba(7, 17, 31, 0.04), 0 12px 28px rgba(7, 17, 31, 0.07);
}

.form-row {
  display: grid;
  gap: 17px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #bcc9da;
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field textarea {
  min-height: 118px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8795aa;
}

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(49, 101, 176, 0.16);
}

.hp {
  display: none !important;
}

.form-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 3px;
}

.form-foot .btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.form-status {
  color: var(--success);
  font-size: 0.88rem;
  font-weight: 500;
}

.form-status:empty {
  display: none;
}

.form-status.error {
  color: var(--error);
}

/* Footer */

.site-footer {
  padding: 58px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  color: #a9b9cf;
  border-top: 1px solid var(--rule-dark);
}

.footer-grid {
  display: grid;
  gap: 38px;
}

.footer-brand img {
  width: 174px;
  height: auto;
}

.footer-brand p {
  max-width: 310px;
  margin-top: 17px;
  color: #a9b9cf;
  font-size: 0.9rem;
}

.footer-heading {
  margin-bottom: 15px;
  color: #6f829e;
}

.footer-col a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 40px;
  color: #c8d3e2;
  font-size: 0.89rem;
  transition: color 150ms ease;
}

.footer-col a:hover {
  color: var(--white);
}

.footer-legal {
  display: grid;
  gap: 8px;
  margin-top: 43px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
}

.footer-legal p:first-child {
  color: #a9b9cf;
  font-size: 0.82rem;
}

.footer-legal p:last-child {
  max-width: 780px;
  color: #70839f;
  font-size: 0.78rem;
  line-height: 1.62;
}

@media (min-width: 480px) {
  .brand-logo {
    width: 174px;
  }

  .payload-head img {
    display: block;
  }

  .brand-tag {
    display: inline;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .form-foot {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 640px) {
  .container {
    width: min(100% - 64px, var(--container));
  }

  .audience {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding-block: 31px;
  }

  .audience p:last-child {
    margin-top: 0;
    padding-top: 4px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .demo-form {
    padding: 36px;
  }

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

@media (min-width: 768px) {
  :root {
    --header-h: 76px;
    --section-pad-top: clamp(76px, 7vw, 96px);
    --section-pad-bottom: clamp(60px, 6vw, 80px);
  }

  .section-intro {
    margin-bottom: 56px;
  }

  .section-intro-wide {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
    align-items: end;
    gap: 64px;
  }

  .section-intro-wide .section-lede {
    margin-top: 0;
  }

  .pipeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 0;
  }

  .pipeline::before {
    top: 5px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .stage {
    padding: 34px 0 0;
  }

  .stage::before {
    /* Centers the 9px node on the rail (rail center sits at 5.5px). */
    top: 1px;
    left: 0;
  }

  .stage h3 {
    font-size: 2rem;
  }

  .pipeline-watermark {
    right: -250px;
    width: 560px;
  }
}

@media (min-width: 900px) {
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 31px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-nav > a:not(.btn) {
    position: relative;
    min-height: 44px;
    border: 0;
    color: var(--body);
    font-size: 0.9rem;
  }

  .site-nav > a:not(.btn)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 7px;
    left: 0;
    height: 1px;
    background: var(--cobalt);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 160ms ease;
  }

  .site-nav > a:not(.btn):hover::after,
  .site-nav > a:not(.btn):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .btn-nav {
    min-height: 44px;
    margin: 0;
    padding-inline: 18px;
  }

  .nav-toggle {
    display: none;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(400px, 0.96fr);
    align-items: center;
    gap: 52px;
    padding-top: calc(var(--header-h) + 76px);
    padding-bottom: 88px;
  }

  .hero h1 {
    font-size: clamp(3.6rem, 4.9vw, 4.6rem);
  }

  .hero-actions {
    flex-wrap: nowrap;
  }

  .payload-card {
    margin-top: 0;
    width: 100%;
    justify-self: end;
  }

  .payload-code {
    padding: 18px 16px;
    font-size: 0.78rem;
  }

  .payload-code .cl {
    padding-left: 34px;
  }

  .payload-code .cl::before {
    width: 20px;
  }

  .product-chapters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .product-chapter {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
    min-width: 0;
    padding: 34px 34px 38px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--ink);
  }

  .product-chapter:first-child {
    padding-left: 0;
  }

  .product-chapter:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .product-chapter h3 {
    font-size: clamp(2rem, 3vw, 2.75rem);
  }

  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(450px, 0.78fr);
    align-items: start;
    gap: clamp(70px, 9vw, 130px);
  }

  .demo-form {
    margin-top: 0;
  }
}

@media (min-width: 1180px) {
  .audience {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);
    gap: 42px;
    padding-block: 37px;
  }

  .audience h3 {
    font-size: 2.15rem;
  }

  .audience p:last-child {
    max-width: 720px;
    font-size: 1.03rem;
  }
}

/* Motion: one orchestrated hero entrance, one-shot scroll reveals */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .payload-card {
    animation: rise-in 550ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .payload-card {
    animation-delay: 120ms;
  }

  .js-reveal [data-reveal] {
    opacity: 0;
    translate: 0 16px;
    transition:
      opacity 480ms cubic-bezier(0.2, 0, 0, 1),
      translate 480ms cubic-bezier(0.2, 0, 0, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-reveal [data-reveal].is-visible {
    opacity: 1;
    translate: none;
  }

  /* The status chip settles into its delivered state once, just after the
     card rises - a single state change, never a pulse. */
  .payload-status {
    animation: chip-settle 260ms ease-out 1100ms both;
  }

  /* The watermark fades to its resting opacity slowly, without travel. */
  .js-reveal .pipeline-watermark[data-reveal] {
    translate: 0 0;
    transition: opacity 1400ms ease;
  }

  .js-reveal .pipeline-watermark[data-reveal].is-visible {
    opacity: 0.04;
  }

  /* Pipeline runner: an 8.7s cycle with bookended pacing - breathe at
     Ingest (700ms, fading in), glide 1300ms per segment with a soft
     asymmetric arrival, quick 450ms dwells at the middle stations, the
     longest dwell at Deliver (800ms), then a final dispatch glide off the
     rail's end (700ms, accelerating and fading), then ~1.7s rest. Runs only
     after the stages reveal AND while the section is in view (.in-view via
     IntersectionObserver). Each node brightens as the dot arrives (200ms)
     and decays after departure (600ms). */
  .pipeline.in-view:has(.stage.is-visible)::after {
    animation: pipe-run 8.7s linear infinite;
    animation-delay: 900ms;
  }

  .pipeline.in-view:has(.stage.is-visible) .stage::before {
    animation: node-arrive 8.7s linear infinite;
  }

  .pipeline.in-view:has(.stage.is-visible) .stage:nth-child(1)::before {
    animation-delay: 900ms;
  }

  .pipeline.in-view:has(.stage.is-visible) .stage:nth-child(2)::before {
    animation-delay: 2900ms;
  }

  .pipeline.in-view:has(.stage.is-visible) .stage:nth-child(3)::before {
    animation-delay: 4650ms;
  }

  .pipeline.in-view:has(.stage.is-visible) .stage:nth-child(4)::before {
    animation-delay: 6400ms;
  }
}

/* Phase map (of the 8.7s cycle): fade in over 300ms and breathe at
   station 1 until 8.05%, then per segment: 1300ms glide (soft arrival),
   450ms dwell. Arrive at Deliver at 63.22%, dwell to 72.41%, then the
   dispatch glide accelerates off the rail's end while fading, done by
   80.46%; rest to 100%. */

@keyframes pipe-run {
  0% {
    translate: var(--pipe-t1, 0px 0px);
    opacity: 0;
  }
  3.45% {
    opacity: 0.9;
  }
  8.05% {
    translate: var(--pipe-t1, 0px 0px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
  }
  22.99% {
    translate: var(--pipe-t2, 0px 0px);
  }
  28.16% {
    translate: var(--pipe-t2, 0px 0px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
  }
  43.1% {
    translate: var(--pipe-t3, 0px 0px);
  }
  48.28% {
    translate: var(--pipe-t3, 0px 0px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
  }
  63.22% {
    translate: var(--pipe-t4, 0px 0px);
    opacity: 0.9;
  }
  72.41% {
    translate: var(--pipe-t4, 0px 0px);
    opacity: 0.9;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  80.46% {
    translate: var(--pipe-exit, 0px 0px);
    opacity: 0;
  }
  100% {
    translate: var(--pipe-exit, 0px 0px);
    opacity: 0;
  }
}

@keyframes node-arrive {
  0% {
    border-color: var(--cobalt-light);
    box-shadow: none;
  }
  2.3% {
    border-color: #d8e6f8;
    box-shadow: 0 0 8px rgba(118, 164, 229, 0.45);
  }
  7.47% {
    border-color: #d8e6f8;
    box-shadow: 0 0 8px rgba(118, 164, 229, 0.45);
  }
  14.37% {
    border-color: var(--cobalt-light);
    box-shadow: none;
  }
  100% {
    border-color: var(--cobalt-light);
    box-shadow: none;
  }
}

@keyframes chip-settle {
  from {
    border-color: rgba(173, 193, 220, 0.25);
    color: #8fa1ba;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}