/* Blitz Agency: polished CPG shopper / retail media splash */

/* Brand kit: canvas navy and Volt/Flash from the Blitz product surfaces.
   Volt is the working accent on light. Flash is decorative and only ever
   lives on the navy bands. The ok green is reserved for LIVE. */
:root {
  /* the page ships one deliberate palette; block WebView force-dark inversion */
  color-scheme: only light;
  --ink: #051123;
  --ink-deep: #030b18;
  --ink-soft: #22304a;
  --paper: #f3f4f8;
  --paper-2: #e8eaf1;
  --muted: #5b6478;
  --accent: #2152ff;
  --accent-hover: #1a42d4;
  --flash: #21d4fd;
  --live: #34d399;
  --line: rgba(5, 17, 35, 0.12);
  --line-strong: rgba(5, 17, 35, 0.24);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(3, 11, 24, 0.42) 0%,
    rgba(3, 11, 24, 0.18) 42%,
    rgba(3, 11, 24, 0.55) 100%
  );
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-brand: "Syne", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --space: clamp(1rem, 2.4vw, 2rem);
  --max: 82rem;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

/* Nav */

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem var(--space);
  background: linear-gradient(180deg, rgba(3, 11, 24, 0.55), transparent);
  color: #eef1f7;
  transition: background 220ms var(--ease), color 220ms var(--ease),
    border-color 220ms var(--ease), backdrop-filter 220ms var(--ease);
}

.site-nav.is-solid {
  background: rgba(238, 241, 247, 0.92);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.site-nav.is-solid .btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.site-nav.is-solid .btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.brand:hover {
  color: inherit;
  opacity: 0.9;
}

.brand__mark {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.35rem;
}

.brand__name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.site-nav__links a,
.site-nav__links .link-btn {
  text-decoration: none;
  opacity: 0.88;
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav__links a:hover,
.site-nav__links .link-btn:hover {
  opacity: 1;
  color: inherit;
}

@media (max-width: 720px) {
  .site-nav {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }
  .brand {
    gap: 0.5rem;
    min-width: 0;
  }
  .brand__mark {
    width: 1.7rem;
    height: 1.7rem;
  }
  .brand__name {
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .site-nav__links {
    gap: 0.5rem;
    flex: none;
  }
  .site-nav__links .btn {
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .site-nav__links a:not(.btn) {
    display: none;
  }
  .site-nav__links .link-btn[data-open-contact] {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
    border-radius: 9px;
    background: linear-gradient(135deg, #2f63ff 0%, #2152ff 45%, #1a3fd0 100%);
    border: 1px solid rgba(33, 82, 255, 0.6);
    color: #eef1f7;
    font-weight: 600;
    opacity: 1;
  }
}

/* Buttons */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease), transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--solid {
  background: linear-gradient(135deg, #2f63ff 0%, var(--accent) 45%, #1a3fd0 100%);
  color: #eef1f7;
  border-color: rgba(33, 82, 255, 0.6);
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.2), 0 8px 22px -8px rgba(33, 82, 255, 0.55);
}

/* sheen sweep on hover */
.btn--solid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  transition: left 500ms var(--ease);
  pointer-events: none;
}

.btn--solid:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(5, 17, 35, 0.2), 0 14px 34px -8px rgba(33, 82, 255, 0.65);
}

.btn--solid:hover::after {
  left: 125%;
}

@media (prefers-reduced-motion: reduce) {
  .btn--solid::after {
    display: none;
  }
  .btn--solid:hover {
    transform: none;
  }
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(33, 82, 255, 0.35);
}

.btn--on-dark {
  background: rgba(238, 241, 247, 0.08);
  border-color: rgba(238, 241, 247, 0.45);
  color: #eef1f7;
  backdrop-filter: blur(6px);
}

.btn--on-dark:hover {
  border-color: #eef1f7;
  color: #ffffff;
  background: rgba(238, 241, 247, 0.14);
  box-shadow: 0 8px 22px -10px rgba(33, 212, 253, 0.3);
}

.btn--wide {
  width: 100%;
}

.site-nav .btn--ghost {
  border-color: rgba(238, 241, 247, 0.4);
  color: #eef1f7;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
}

.site-nav .btn--ghost:hover {
  border-color: #eef1f7;
  color: #eef1f7;
  background: rgba(238, 241, 247, 0.08);
}

/* Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 7rem var(--space) 4.5rem;
  color: #eef1f7;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture,
.hero__img {
  width: 100%;
  height: 100%;
}

/* Two motion layers that never fight: the wrapper carries a visible Ken Burns
   zoom (scale interpolates continuously on the GPU), the img carries the
   scroll-linked parallax translate set from main.js. */
.hero__media picture {
  display: block;
  animation: herozoom 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes herozoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.hero__img {
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.02);
  will-change: transform;
  backface-visibility: hidden;
  /* pull the warm store photo toward the brand's cool range */
  filter: saturate(0.72) contrast(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media picture {
    animation: none;
  }
  .hero__img {
    transform: scale(1.05) !important;
  }
}

/* Two grading layers over the photo: a navy-to-volt multiply wash that
   cools the scene into the brand palette, then the legibility scrim. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.hero__scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(23, 43, 96, 0.75) 0%,
    rgba(48, 78, 180, 0.45) 48%,
    rgba(74, 118, 255, 0.32) 78%,
    rgba(90, 200, 240, 0.28) 100%
  );
  mix-blend-mode: multiply;
}

.hero__scrim::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(3, 11, 24, 0.55));
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.72;
  margin-bottom: 1rem;
}

.hero .eyebrow {
  opacity: 0.78;
}

.hero__title {
  font-size: clamp(3rem, 8.5vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin-bottom: 1.1rem;
}

/* Founder's call from the design canvas: the hero headline wears the
   brand face */
.hero__title--brand {
  font-family: var(--font-brand);
  font-weight: 700;
}

.hero__line {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.45;
  max-width: 34rem;
  opacity: 0.92;
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Sections */

.section {
  padding: clamp(2.25rem, 4.5vw, 3.25rem) var(--space);
  max-width: var(--max);
  margin: 0 auto;
}

.section__head {
  max-width: 38rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.section__head h2 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  margin-bottom: 0.85rem;
}

.section__sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 34rem;
}

.section .eyebrow {
  color: var(--accent);
  opacity: 1;
}

.h2-grad {
  background: linear-gradient(100deg, var(--accent) 10%, var(--flash) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

/* What Blitz is */

.blitz {
  border-top: 1px solid var(--line);
}

.blitz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 800px) {
  .blitz-grid {
    grid-template-columns: 1.7fr 1fr;
    align-items: stretch;
  }
}

/* Who Blitz is built for, inside the lead card */
.blitz-fit {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(238, 241, 247, 0.14);
}

.blitz-fit li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(238, 241, 247, 0.82);
}

.blitz-fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, var(--flash), var(--accent));
  transform: rotate(45deg);
}

/* The Blitz Model: four steps in sequence, each earning the next */
.blitz-model {
  margin-top: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fcfcfe;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.05), 0 16px 40px -18px rgba(5, 17, 35, 0.18);
}

.blitz-model__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.4rem;
}

.blitz-model__gloss {
  font-size: 0.92rem;
  color: var(--muted);
}

.sequence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem 2rem;
  counter-reset: none;
}

@media (min-width: 720px) {
  .sequence {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .sequence {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sequence li {
  position: relative;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* the wire that carries one step into the next */
@media (min-width: 1080px) {
  .sequence li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: calc(2rem + 0.9rem);
    right: -2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), var(--line));
  }
}

.sequence__index {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent);
}

.sequence__index::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid var(--accent);
  background: #fcfcfe;
  transform: rotate(45deg);
}

.sequence h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.sequence li p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.blitz-card {
  position: relative;
  background: #fcfcfe;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.05), 0 16px 40px -18px rgba(5, 17, 35, 0.18);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
    border-color 260ms var(--ease);
}

/* gradient hairline that ignites across the top on hover */
.blitz-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 300ms var(--ease), transform 420ms var(--ease);
}

.blitz-card:hover,
.blitz-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(33, 82, 255, 0.35);
  box-shadow: 0 2px 4px rgba(5, 17, 35, 0.06), 0 28px 60px -20px rgba(33, 82, 255, 0.28);
}

.blitz-card:hover::before,
.blitz-card:focus-within::before {
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .blitz-card,
  .blitz-card::before {
    transition: none;
  }
  .blitz-card:hover {
    transform: none;
  }
}

/* Lead card: canvas navy wash with viewfinder corner brackets */
.blitz-card--lead {
  background:
    linear-gradient(160deg, rgba(33, 82, 255, 0.14) 0%, transparent 45%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  border-color: rgba(33, 212, 253, 0.18);
  color: #eef1f7;
  justify-content: flex-end;
  overflow: hidden;
}

.blitz-card--lead::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(33, 212, 253, 0.55) 0 14px, transparent 14px) top left / 14px 1.5px no-repeat,
    linear-gradient(0deg, rgba(33, 212, 253, 0.55) 0 14px, transparent 14px) top left / 1.5px 14px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 14px), rgba(33, 212, 253, 0.55) 0) bottom right / 14px 1.5px no-repeat,
    linear-gradient(0deg, transparent calc(100% - 14px), rgba(33, 212, 253, 0.55) 0) bottom right / 1.5px 14px no-repeat;
  opacity: 0.6;
  transition: opacity 300ms var(--ease);
}

.blitz-card--lead:hover::after {
  opacity: 1;
}

.blitz-card__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.blitz-card--lead .blitz-card__label {
  color: var(--flash);
}

.blitz-card h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing: -0.02em;
}

.blitz-card p:not(.blitz-card__label) {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30rem;
}

.blitz-card--lead p:not(.blitz-card__label) {
  color: rgba(238, 241, 247, 0.88);
}

.blitz-card__cta {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  border-bottom: 1px solid rgba(33, 82, 255, 0.45);
  padding-bottom: 0.1rem;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}

.blitz-card__cta:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* The card visuals live at rest; hover amplifies them. Hiding them
   behind hover made the section read flat. */

.blitz-card__more {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
}

.blitz-card__more > * {
  overflow: hidden;
}

.blitz-card {
  outline: none;
  transition: border-color 200ms var(--ease);
}

/* Lead card: the six live platforms surface on hover */

.blitz-live {
  padding-top: 0.75rem;
}

.blitz-live__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 241, 247, 0.7);
  margin-bottom: 0.85rem;
}

.blitz-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: pfpulse 1.8s ease-in-out infinite;
}

.blitz-live__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.4rem;
}

.blitz-live__row img {
  height: 1.15rem;
  width: auto;
  max-width: 5.5rem;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.blitz-live__row img[src*="target-roundel"] {
  height: 1.5rem;
}

/* Model card: the weekly loop draws itself on hover */

.blitz-loop {
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  overflow: visible;
}

.blitz-loop__wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.blitz-loop__flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 10;
  animation: blitzflow 1.6s linear infinite;
}

.blitz-card:hover .blitz-loop__flow,
.blitz-card:focus .blitz-loop__flow {
  stroke: var(--flash);
  animation-duration: 0.8s;
}

@keyframes blitzflow {
  to {
    stroke-dashoffset: -32;
  }
}

.blitz-loop__nodes circle {
  fill: var(--accent);
}

.blitz-loop__nodes text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}

.blitz-loop__below {
  fill: var(--muted) !important;
  font-weight: 500 !important;
}

@media (prefers-reduced-motion: reduce) {
  .blitz-loop__flow {
    opacity: 1;
    animation: none !important;
  }
}

/* Ecosystem card: a thumbnail of the portal, skeleton style, plus the list */

.blitz-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding-top: 0.75rem;
}

@media (max-width: 480px) {
  .blitz-tools {
    grid-template-columns: 1fr;
  }
}

.blitz-mini {
  background: var(--ink);
  border: 1px solid rgba(238, 241, 247, 0.12);
  border-radius: 6px;
  padding: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.blitz-mini__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.blitz-mini__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--flash), var(--accent));
}

.blitz-mini__bar span {
  height: 4px;
  width: 42%;
  border-radius: 2px;
  background: rgba(238, 241, 247, 0.18);
}

.blitz-mini__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.blitz-mini__stat {
  height: 1.35rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.blitz-mini__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2.4rem;
}

.blitz-mini__chart i {
  flex: 1;
  height: var(--h);
  border-radius: 1px;
  background: linear-gradient(180deg, var(--flash), var(--accent));
  opacity: 0.85;
  transform-origin: bottom;
  transform: scaleY(0.25);
  transition: transform 500ms var(--ease);
}

.blitz-grid.is-in .blitz-mini__chart i,
.no-js .blitz-mini__chart i {
  transform: scaleY(1);
}

.blitz-mini__chart i:nth-child(2) { transition-delay: 40ms; }
.blitz-mini__chart i:nth-child(3) { transition-delay: 80ms; }
.blitz-mini__chart i:nth-child(4) { transition-delay: 120ms; }
.blitz-mini__chart i:nth-child(5) { transition-delay: 160ms; }
.blitz-mini__chart i:nth-child(6) { transition-delay: 200ms; }
.blitz-mini__chart i:nth-child(7) { transition-delay: 240ms; }
.blitz-mini__chart i:nth-child(8) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .blitz-mini__chart i {
    transform: scaleY(1);
    transition: none;
  }
}

.blitz-tools__list {
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.blitz-tools__list li {
  padding-left: 1.1rem;
  position: relative;
}

.blitz-tools__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* How we keep you informed: icon grid inside the card */

.informed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem;
  width: 100%;
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .informed {
    grid-template-columns: 1fr;
  }
}

.informed__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.informed__icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(33, 82, 255, 0.28);
  border-radius: 9px;
  background: rgba(33, 82, 255, 0.06);
  color: var(--accent);
}

.informed__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.informed__item b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.informed__item p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The wiremap panel: four categories in, one pipe, one record out. Dots
   ride the exact wire paths through mpath, so nothing can drift. */

.wm-panel {
  margin-top: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fcfcfe;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.05), 0 16px 40px -18px rgba(5, 17, 35, 0.18);
}

.wm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}

.wm-grp {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  padding: 0.75rem 0.85rem 0.9rem;
}

.wm-grplabel {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.wm-marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem 0.7rem;
  align-items: center;
}

.wm-marks img {
  height: 30px;
  width: 100%;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.85;
}

.wm-merge {
  display: block;
  width: 2px;
  height: 32px;
  margin: 0.8rem auto 0.3rem;
  background: var(--accent);
}

.wm-flowlab {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.3rem 0 0.9rem;
}

.wm-rec {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fcfcfe;
  overflow: hidden;
}

.wm-rechead {
  background: var(--ink);
  color: #eef1f7;
  padding: 0.55rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.17em;
}

.wm-rechead em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

.wm-recrow {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.wm-recrow b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
}

.wm-recrow span,
.wm-out span {
  font-size: 0.76rem;
  color: var(--muted);
}

.wm-recfoot {
  padding: 0.7rem 0.9rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.wm-out {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  padding: 0.7rem 0.85rem;
  margin-top: 0.5rem;
}

.wm-out b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wm-wire {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: none;
  }
  .wm-node {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Loop beside the model */

.blitz-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.1rem;
}

@media (min-width: 900px) {
  .blitz-duo {
    grid-template-columns: 1.7fr 1fr;
    align-items: stretch;
  }
  .blitz-duo .flow-card {
    order: 2;
  }
  .blitz-duo .sequence {
    grid-template-columns: repeat(2, 1fr);
  }
  .blitz-duo .sequence li:not(:last-child)::after {
    display: none;
  }
}

.blitz-duo .blitz-model {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* fill the matched card height so the steps spread instead of pooling
   whitespace under the grid */
.blitz-duo .sequence {
  flex: 1;
  align-content: space-evenly;
}

/* The two workflow panels: the loop and the wiremap */

.blitz-flows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.1rem;
}

@media (min-width: 900px) {
  .blitz-flows {
    grid-template-columns: 1fr 1.7fr;
  }
}

.flow-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fcfcfe;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.05), 0 16px 40px -18px rgba(5, 17, 35, 0.18);
  display: flex;
  flex-direction: column;
}

.flow-card__gloss {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
}

/* The loop: the four moves on a ring, current always flowing */

.loopboard {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 1.3rem;
}

.loopboard__row {
  display: grid;
  grid-template-columns: 2.15rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfbfe;
  margin-bottom: 0.5rem;
  animation: looprow 14s var(--ease) infinite;
}
.loopboard__row:last-of-type { margin-bottom: 0; }
.loopboard__row:nth-of-type(1),
.loopboard__row:nth-of-type(1) .loopboard__idx,
.loopboard__row:nth-of-type(1) .loopboard__mark { animation-delay: 0s; }
.loopboard__row:nth-of-type(2),
.loopboard__row:nth-of-type(2) .loopboard__idx,
.loopboard__row:nth-of-type(2) .loopboard__mark { animation-delay: 3.5s; }
.loopboard__row:nth-of-type(3),
.loopboard__row:nth-of-type(3) .loopboard__idx,
.loopboard__row:nth-of-type(3) .loopboard__mark { animation-delay: 7s; }
.loopboard__row:nth-of-type(4),
.loopboard__row:nth-of-type(4) .loopboard__idx,
.loopboard__row:nth-of-type(4) .loopboard__mark { animation-delay: 10.5s; }

@keyframes looprow {
  0%, 22% {
    border-color: var(--accent);
    background: rgba(33, 82, 255, 0.055);
    box-shadow: 0 6px 18px -12px rgba(33, 82, 255, 0.7);
  }
  30%, 100% {
    border-color: var(--line);
    background: #fbfbfe;
    box-shadow: none;
  }
}

.loopboard__idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 1.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fcfcfe;
  animation: loopidx 14s var(--ease) infinite;
}

@keyframes loopidx {
  0%, 22% { color: var(--accent); border-color: rgba(33, 82, 255, 0.42); }
  30%, 100% { color: var(--muted); border-color: var(--line); }
}

.loopboard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.loopboard__note {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 0.1rem;
}

.loopboard__mark {
  width: 15px;
  height: 15px;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.7);
  animation: loopmark 14s var(--ease) infinite;
}

@keyframes loopmark {
  0% { opacity: 0; transform: scale(0.7) rotate(-25deg); }
  9%, 22% { opacity: 1; transform: scale(1) rotate(0deg); }
  30%, 100% { opacity: 0.16; transform: scale(1) rotate(0deg); }
}

.loopboard__handback {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.loopboard__handback svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .loopboard__row,
  .loopboard__idx,
  .loopboard__mark { animation: none; }
  .loopboard__mark { opacity: 0.35; transform: none; }
  .loopboard__row:nth-of-type(1) {
    border-color: var(--accent);
    background: rgba(33, 82, 255, 0.055);
  }
  .loopboard__row:nth-of-type(1) .loopboard__idx { color: var(--accent); border-color: rgba(33, 82, 255, 0.42); }
  .loopboard__row:nth-of-type(1) .loopboard__mark { opacity: 1; }
}

/* The wiremap: networks in, the portal, the story out */

.wiremap {
  width: 100%;
  height: auto;
  margin-top: 1.1rem;
  overflow: visible;
}

.wiremap__cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
}

.wiremap__wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.wiremap__flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-dasharray: 5 9;
  animation: wireflow 9s linear infinite;
}

@keyframes wireflow {
  to {
    stroke-dashoffset: -280;
  }
}

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

.wiremap__hub {
  fill: var(--ink);
  stroke: rgba(33, 212, 253, 0.4);
  stroke-width: 1;
}

.wiremap__hubspark {
  fill: #ffffff;
}

.wiremap__hublabel {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: #eef1f7;
  letter-spacing: -0.01em;
}

.wiremap__out {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--ink);
}

/* Platform conveyor: the retail media networks at five depths on the ink
   band. Nearer lanes are larger, brighter and faster, so the wall reads as
   distance rather than a marquee. */

.pfwall {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  background: var(--ink);
  color: #eef1f7;
  overflow: hidden;
}

.pfwall__head {
  max-width: var(--max);
  margin: 0 auto clamp(2.5rem, 5vw, 3.75rem);
  padding: 0 var(--space);
}

.pfwall .eyebrow {
  color: var(--flash);
}

.pfwall__sub {
  color: rgba(238, 241, 247, 0.68);
}

.pfwall__head h2 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  margin-bottom: 0.85rem;
}

.pfwall__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2.25rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(238, 241, 247, 0.14);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: rgba(238, 241, 247, 0.5);
}

.pfwall__facts b {
  font-weight: 600;
  color: rgba(238, 241, 247, 0.92);
  font-variant-numeric: tabular-nums;
}

.pfconveyor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.5rem, 1.1vw, 1rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}

.pflane {
  opacity: var(--dim);
  overflow: hidden;
  transition: opacity 420ms var(--ease);
}

.pflane__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: calc(var(--depth) * 1.5rem);
  animation: pfrun var(--dur, 200s) linear infinite;
  will-change: transform;
}

.pflane--back .pflane__track {
  animation-direction: reverse;
}

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

.pftile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--depth) * 15rem * var(--stretch, 1));
  height: calc(var(--depth) * 6rem);
  padding: 0 calc(var(--depth) * 1.35rem);
  border-radius: var(--radius);
}

.pflane--near .pftile {
  border: 1px solid rgba(238, 241, 247, 0.1);
  background: linear-gradient(180deg, rgba(238, 241, 247, 0.04), rgba(238, 241, 247, 0));
}

.pftile img {
  width: auto;
  opacity: 0.94;
  transition: opacity 200ms var(--ease);
}

.pftile img[data-knockout] {
  filter: brightness(0) invert(1);
  opacity: 0.86;
}

.pflane:hover {
  opacity: 1;
}

.pftile:hover img,
.pftile:hover img[data-knockout] {
  opacity: 1;
}

/* Breakdown card: the dashboard's hover panel, on the sample chart */
.rpcard {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  min-width: 15rem;
  padding: 0.7rem 0.85rem 0.6rem;
  border-radius: 10px;
  background: rgba(5, 17, 35, 0.96);
  border: 1px solid rgba(33, 212, 253, 0.28);
  color: #eef1f7;
  box-shadow: 0 14px 40px -10px rgba(3, 11, 24, 0.65);
}

.rpcard[hidden] {
  display: none;
}

.rpcard__head {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #21d4fd;
  padding-bottom: 0.45rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid rgba(238, 241, 247, 0.12);
}

.rpcard__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.16rem 0;
  font-size: 0.76rem;
}

.rpcard__row i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.rpcard__row span {
  color: #aab4c8;
}

.rpcard__row em {
  font-style: normal;
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #eef1f7;
}

.rpcard__row--first {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(238, 241, 247, 0.12);
}

.rpcard__row--total span {
  color: #eef1f7;
  font-weight: 500;
}

.rpcard__foot {
  margin-top: 0.4rem;
  font-size: 0.66rem;
  color: #9aa3b8;
}

/* Cursor tooltip: names the mark right where you are pointing */
.pftip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  background: rgba(3, 11, 24, 0.92);
  border: 1px solid rgba(33, 212, 253, 0.35);
  color: #eef1f7;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(3, 11, 24, 0.6);
}

.pftip[hidden] {
  display: none;
}

.pfreadout {
  max-width: var(--max);
  margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  padding: 0 var(--space);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  min-height: 1.75rem;
}

.pfreadout__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  transform: translateY(-2px);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.pfreadout.is-live .pfreadout__dot {
  opacity: 1;
  animation: pfpulse 1.8s ease-in-out infinite;
}

@keyframes pfpulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
  }
}

.pfreadout__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(238, 241, 247, 0.92);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.pfreadout__live {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flash);
}

.pfreadout__hint {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: rgba(238, 241, 247, 0.4);
  transition: opacity 260ms var(--ease);
}

.pfreadout.is-active .pfreadout__name {
  opacity: 1;
}

.pfreadout.is-active .pfreadout__hint {
  opacity: 0;
}

.pfwall__cta {
  max-width: var(--max);
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding: 0 var(--space) clamp(2rem, 4vw, 2.75rem);
}

.pfwall__end {
  margin: 0 0 0.55rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.pfwall__bound {
  margin: 0 0 1rem;
  color: rgba(238, 241, 247, 0.68);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .pftile {
    min-width: calc(var(--depth) * 10rem);
    height: calc(var(--depth) * 5rem);
    padding: 0 calc(var(--depth) * 0.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfconveyor {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 var(--space);
  }

  .pflane {
    opacity: 1;
    overflow: visible;
  }

  .pflane__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .pftile {
    min-width: 11rem;
    height: 5.9rem;
  }
}

/* Divider bands: fixed-background windows between sections, so scrolling
   feels like the paper sections slide over a scene behind the page. */

/* Second band shows a different scene from the video band on purpose */
.divider {
  height: clamp(10rem, 18vw, 16rem);
  background-image: linear-gradient(rgba(3, 11, 24, 0.45), rgba(3, 11, 24, 0.45)),
    url("assets/divider-shopper.webp");
  background-size: cover;
  background-position: center 65%;
  background-attachment: fixed;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.divider--video {
  position: relative;
  overflow: hidden;
  background-attachment: scroll;
}

.divider--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.divider--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 11, 24, 0.38);
}

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

/* Mobile browsers ignore or jank on background-attachment: fixed */
@media (max-width: 860px), (hover: none) {
  .divider {
    background-attachment: scroll;
  }
}

/* Data board */

.data-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 720px) {
  .data-board {
    grid-template-columns: 1.35fr 1fr 1fr;
  }
}

.data-cell {
  background: var(--paper);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.data-cell--lead {
  position: relative;
  background: var(--accent);
  color: #eef1f7;
  overflow: hidden;
  padding: 0;
}

@media (min-width: 720px) {
  .data-cell--lead {
    grid-row: span 2;
  }
}

.data-cell__media {
  position: absolute;
  inset: 0;
}

.data-cell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.data-cell__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(33, 82, 255, 0.30) 0%,
    rgba(31, 54, 44, 0.82) 68%,
    rgba(24, 42, 34, 0.94) 100%
  );
}

.data-cell__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 16rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.data-cell__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.85rem;
}

.data-cell--lead .data-cell__label {
  opacity: 0.85;
}

.data-cell__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.data-cell__note {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 22rem;
}

.data-cell--lead .data-cell__note {
  color: rgba(244, 247, 245, 0.88);
}

/* Weekly report card (portal-light echo) */

.work {
  border-top: 1px solid var(--line);
}

.work-sample__caption {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The report artifact: the portal weekly as a light paper document, so it
   sits inside the light site instead of fighting it. Same structure as the
   real renderer's print theme. Loads with a skeleton pass, then the
   numbers land. */

.rp-stage {
  margin: 0;
  max-width: 46rem;
  perspective: 1600px;
  perspective-origin: 50% 30%;
}

@media (max-width: 979px) {
  .rp-stage {
    margin: 0 auto;
  }
}

.rp-screen {
  --rp-card: #ffffff;
  --rp-line: rgba(5, 17, 35, 0.14);
  --rp-line-soft: rgba(5, 17, 35, 0.09);
  --rp-text: #051123;
  --rp-muted: #5b6478;
  --rp-subtle: #8a91a3;
  position: relative;
  background: #fcfcfe;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  color: var(--rp-text);
  transform-style: preserve-3d;
  transform: rotateX(3.5deg) rotateZ(-0.25deg) scale(0.985);
  box-shadow:
    0 1px 2px rgba(5, 17, 35, 0.06),
    0 24px 50px -24px rgba(5, 17, 35, 0.28);
  transition: transform 0.75s var(--ease), box-shadow 0.75s var(--ease);
}

.rp-screen::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.rp-stage:hover .rp-screen,
.rp-stage:focus-within .rp-screen {
  transform: none;
  box-shadow:
    0 1px 2px rgba(5, 17, 35, 0.06),
    0 30px 60px -30px rgba(5, 17, 35, 0.24);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .rp-screen {
    transform: none;
  }
}

/* Loading pass: skeleton overlays the UI at the same size */

.rp-skeleton {
  position: absolute;
  inset: clamp(1rem, 2.4vw, 1.6rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}

.rp-screen.is-loading .rp-skeleton {
  opacity: 1;
}

.rp-skeleton__bar,
.rp-skeleton__row i,
.rp-skeleton__block {
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    rgba(5, 17, 35, 0.05) 40%,
    rgba(5, 17, 35, 0.1) 50%,
    rgba(5, 17, 35, 0.05) 60%
  );
  background-size: 220% 100%;
  animation: rpshimmer 1.1s linear infinite;
}

@keyframes rpshimmer {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -90% 0;
  }
}

.rp-skeleton__bar {
  height: 2rem;
}

.rp-skeleton__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

.rp-skeleton__row i {
  height: 4.6rem;
}

.rp-skeleton__block {
  height: 13rem;
}

.rp-ui {
  display: grid;
  gap: 0.9rem;
  transition: opacity 380ms var(--ease);
}

.rp-screen.is-loading .rp-ui {
  opacity: 0;
}

/* Read bar */

.rp-readbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rp-line-soft);
  border-radius: 10px;
  background: rgba(5, 17, 35, 0.025);
}

.rp-readbar__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--flash), var(--accent));
  flex: 0 0 auto;
}

.rp-readbar__client {
  font-family: "Space Grotesk", var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-readbar__wk {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--rp-subtle);
  padding-left: 0.75rem;
  border-left: 1px solid var(--rp-line-soft);
  white-space: nowrap;
}

.rp-readbar__lockup {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Space Grotesk", var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--rp-muted);
  white-space: nowrap;
}

.rp-readbar__lockup svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.rp-readbar__lockup b {
  font-weight: 700;
  color: var(--rp-text);
}

/* Portal hero strip inside the document */

.rp-hero {
  display: grid;
  gap: 0.55rem;
  padding: 0.2rem 0.2rem 0;
}

.rp-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-subtle);
}

.rp-sl {
  color: var(--accent);
}

.rp-bolt {
  height: 3px;
  width: 96px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.rp-stat__chips {
  margin-top: 0.45rem;
}

.rp-card__hint {
  margin-top: 0.6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: var(--rp-subtle);
  letter-spacing: 0.04em;
}

/* Stat cards */

.rp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

@media (max-width: 640px) {
  .rp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rp-stat {
  border: 1px solid var(--rp-line-soft);
  border-radius: 10px;
  padding: 0.8rem 0.85rem 0.7rem;
  background: var(--rp-card);
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.04);
}

.rp-stat__k,
.rp-card__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-subtle);
  margin-bottom: 0.5rem;
}

.rp-stat__v {
  font-family: "Space Grotesk", var(--font-body);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rp-stat__cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: var(--rp-subtle);
  margin-top: 0.4rem;
}

.rp-card {
  border: 1px solid var(--rp-line-soft);
  border-radius: 10px;
  padding: 0.9rem 0.95rem;
  background: var(--rp-card);
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.04);
}

/* Velocity line chart on paper */

.rp-vchart__svg {
  width: 100%;
  height: auto;
  display: block;
}

.rp-vchart__grid {
  stroke: rgba(5, 17, 35, 0.08);
  stroke-width: 1;
}

.rp-vchart__axis {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  fill: var(--rp-subtle);
}

.rp-vchart__media {
  stroke: rgba(15, 155, 108, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.rp-vchart__medialab {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #0f9b6c;
}

.rp-vchart__threshold {
  stroke: rgba(5, 17, 35, 0.35);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.rp-vchart__thlab {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--rp-muted);
}

.rp-vchart__area {
  opacity: 0;
  transition: opacity 700ms var(--ease) 1100ms;
}

.rp-vchart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rp-screen.is-ready .rp-vchart__line {
  transition: stroke-dashoffset 1400ms var(--ease) 200ms;
  stroke-dashoffset: 0 !important;
}

.rp-screen.is-ready .rp-vchart__area {
  opacity: 1;
}

.rp-vchart__dot {
  fill: var(--accent);
  stroke: var(--flash);
  stroke-width: 1.4;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms var(--ease), r 150ms var(--ease);
}

.rp-vchart__dot:not(.is-media) {
  fill: #ffffff;
  stroke: #9aa3b8;
}

.rp-screen.is-ready .rp-vchart__dot {
  opacity: 1;
}

.rp-vchart__dot:hover,
.rp-vchart__dot:focus-visible,
.rp-vchart__dot.is-hot {
  r: 7;
  outline: none;
}

.rp-vchart__dot.is-hot {
  stroke-width: 2.2;
}

.rp-vchart__endval {
  font-family: "Space Grotesk", var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--rp-text);
}

@media (prefers-reduced-motion: reduce) {
  .rp-vchart__line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .rp-vchart__area,
  .rp-vchart__dot {
    opacity: 1;
    transition: none;
  }
}

/* Horizontal sales bars */

.rp-bars {
  width: 100%;
  height: auto;
  display: block;
}

.rp-bars__lab {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--rp-muted);
}

.rp-bars__track {
  fill: rgba(5, 17, 35, 0.06);
}

.rp-bars__val {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  fill: var(--rp-text);
}

.rp-bars__fill {
  transform-origin: left center;
  transform: scaleX(0);
  transform-box: fill-box;
}

.rp-screen.is-ready .rp-bars__fill {
  transform: scaleX(1);
  transition: transform 900ms var(--ease) 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .rp-bars__fill {
    transform: scaleX(1);
    transition: none;
  }
}

/* Platform table */

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.rp-table th {
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-subtle);
  border-bottom: 1px solid var(--rp-line);
  padding: 0 0.5rem 0.45rem 0;
}

.rp-table td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--rp-line-soft);
  color: var(--rp-muted);
}

.rp-table td:first-child {
  color: var(--rp-text);
  font-weight: 500;
}

.rp-table tr:last-child td {
  border-bottom: 0;
}

.rp-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  color: var(--accent);
  background: rgba(33, 82, 255, 0.07);
  border: 1px solid rgba(33, 82, 255, 0.22);
}

.rp-chip--flat {
  color: var(--rp-muted);
  background: rgba(5, 17, 35, 0.04);
  border-color: rgba(5, 17, 35, 0.1);
}

.rp-caption {
  max-width: 52rem;
  margin: 1rem auto 0;
}

/* Budget vs actual clip under the report */

.work__screens {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.rp-screen2 {
  margin: 0;
  max-width: 46rem;
  background: #fcfcfe;
  border: 1px solid rgba(5, 17, 35, 0.14);
  border-radius: 12px;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  position: relative;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.06), 0 24px 50px -24px rgba(5, 17, 35, 0.22);
}

.rp-screen2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

@media (max-width: 979px) {
  .rp-screen2 {
    margin: 0 auto;
    width: 100%;
  }
}

.bva__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .bva__grid {
    grid-template-columns: 1fr;
  }
}

.bva__rows {
  display: grid;
  gap: 0.4rem;
}

.bva__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}

.bva__row span {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bva__row em,
.bva__prow em {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  color: var(--muted);
  white-space: nowrap;
}

.bva__row.is-on {
  background: rgba(33, 82, 255, 0.05);
  border-color: rgba(33, 82, 255, 0.25);
}

.bva__bar {
  position: relative;
  height: 12px;
  min-width: 0;
}

.bva__bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 6px;
  background: rgba(5, 17, 35, 0.08);
}

.bva__bar b {
  position: absolute;
  left: 0;
  top: 2px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.bva__bar b.is-over {
  background: linear-gradient(90deg, var(--accent), #7a3bff);
}

.bva__bar--sm {
  height: 10px;
}

.bva__bar--sm b {
  top: 2px;
  height: 6px;
}

.bva__detail {
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
  min-height: 8rem;
}

@media (max-width: 640px) {
  .bva__detail {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
}

.bva__detail-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-subtle, #8a91a3);
  margin-bottom: 0.75rem;
}

.bva__prow {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.bva__prow span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bva figcaption {
  margin-top: 0.8rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: #8a91a3;
}

/* Compact wiremap in the reporting side column */

.wm-side {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  background: #fcfcfe;
  border: 1px solid rgba(5, 17, 35, 0.14);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.06), 0 24px 50px -24px rgba(5, 17, 35, 0.22);
}

.wm-side::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.wm-side .rp-card__k {
  margin-bottom: 0.3rem;
}

.wm-side .wm-marks {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem 0.6rem;
}

.wm-side .wm-marks img {
  height: 22px;
}

.wm-side .wm-merge {
  height: 20px;
  margin: 0.4rem auto 0.1rem;
}

.wm-side .wm-flowlab {
  margin: 0.15rem 0 0.4rem;
}

.wm-outs {
  display: grid;
  gap: 0.4rem;
}

.wm-outs .wm-out {
  margin-top: 0;
  padding: 0.55rem 0.75rem;
}

.wm-outs .wm-out b {
  font-size: 0.84rem;
}

/* The work section pairing */

/* Wide sections break past the base column on big screens */
.section--wide {
  max-width: min(96rem, 100%);
}

.work__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 1100px) {
  .work__pair {
    grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.6fr);
  }
}

.work__pair .rp-stage {
  max-width: none;
}

.work__side {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.work__side .btn {
  justify-self: start;
}

.work__side .rp-screen2 {
  max-width: none;
  width: 100%;
}

.work__side .bva__grid {
  grid-template-columns: 1fr;
}

.work__side .bva__detail {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  min-height: 0;
}

.work__claims {
  display: grid;
  gap: 1.1rem;
}

.work__claims li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.work__claims li b {
  color: var(--ink);
  font-weight: 600;
}

.work__claims li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, var(--flash), var(--accent));
  transform: rotate(45deg);
}

/* Week detail modal */

.modal__panel--wide {
  width: min(34rem, 100%);
}

.week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.week-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0.5rem 0.5rem 0;
}

.week-table td {
  padding: 0.55rem 0.5rem 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.week-table tr:last-child td {
  border-bottom: 0;
}

.week-table__foot {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Digital growth */

.growth {
  border-top: 1px solid var(--line);
}

.growth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 860px) {
  .growth-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

.growth-how__title {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

.growth-jobs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.growth-jobs li {
  padding: 0.85rem 0 0.85rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.4;
}

.growth-jobs li:last-child {
  border-bottom: 1px solid var(--line);
}

.growth-jobs b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.growth-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.1rem;
}

.growth-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
}

.growth-steps li b {
  color: var(--ink);
  font-weight: 600;
}

.growth-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.growth-claim {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  color: var(--muted);
}

.growth-claim b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.growth-chart {
  margin: 0;
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(33, 82, 255, 0.18) 0%, transparent 55%),
    linear-gradient(165deg, var(--ink) 0%, var(--ink-deep) 100%);
  border: 1px solid rgba(33, 212, 253, 0.16);
  border-radius: 16px;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  color: #eef1f7;
  box-shadow:
    0 1px 2px rgba(3, 11, 24, 0.25),
    0 30px 70px -30px rgba(3, 11, 24, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.growth-chart::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
  opacity: 0.85;
}

.growth-chart__k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7590;
  margin-bottom: 0.9rem;
}

.growth-chart__sl {
  color: var(--flash);
}

.growth-chart__host svg {
  width: 100%;
  height: auto;
  display: block;
}

.gx__grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.gx__axis {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  fill: #6b7590;
}

.gx__media {
  stroke: rgba(52, 211, 153, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.gx__medialab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--live);
}

.gx__threshold {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.gx__thlab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #aab4c8;
}

.gx__area {
  opacity: 0;
  transition: opacity 700ms var(--ease) 900ms;
}

.gx__line {
  fill: none;
  stroke: var(--flash);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(33, 212, 253, 0.55));
}

.growth-chart.is-drawn .gx__line {
  transition: stroke-dashoffset 1500ms var(--ease);
  stroke-dashoffset: 0 !important;
}

.growth-chart.is-drawn .gx__area {
  opacity: 1;
}

.gx__dot {
  fill: #22304a;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.gx__dot.is-media {
  fill: var(--accent);
  stroke: var(--flash);
}

.growth-chart.is-drawn .gx__dot {
  opacity: 1;
}

.gx__region {
  fill: rgba(52, 211, 153, 0.045);
}

.gx__chip rect {
  fill: rgba(33, 212, 253, 0.1);
  stroke: rgba(33, 212, 253, 0.35);
}

.gx__chip text {
  font-family: "Space Grotesk", var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  fill: #eef1f7;
}

.gx__chip {
  opacity: 0;
  transition: opacity 300ms var(--ease) 1700ms;
}

.growth-chart.is-drawn .gx__chip {
  opacity: 1;
}

.gx__startval {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  fill: #aab4c8;
}

.gx__enddot {
  fill: var(--accent);
  stroke: var(--flash);
  stroke-width: 1.8;
  opacity: 0;
  transition: opacity 300ms var(--ease) 1700ms;
  filter: drop-shadow(0 0 8px rgba(33, 212, 253, 0.8));
}

.gx__endval {
  font-family: 'Space Grotesk', var(--font-body);
  font-size: 17px;
  font-weight: 700;
  fill: #eef1f7;
  opacity: 0;
  transition: opacity 300ms var(--ease) 1700ms;
}

.growth-chart.is-drawn .gx__enddot,
.growth-chart.is-drawn .gx__endval {
  opacity: 1;
}

.growth-chart__caption {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: #aab4c8;
}

.growth-math__eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0.5rem;
  align-items: stretch;
}

.growth-math__eq > div {
  padding: 0.8rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.growth-math__out {
  border-color: var(--accent);
  background: rgba(33, 82, 255, 0.16);
}

.growth-math__eq span,
.growth-math__eq em {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aab4c8;
}

.growth-math__eq strong {
  display: block;
  margin: 0.35rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.growth-math__eq i {
  align-self: center;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: var(--flash);
}

@media (max-width: 860px) {
  .growth-math__eq {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .growth-math__eq i {
    display: block;
    justify-self: center;
    font-size: 1.1rem;
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gx__line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .gx__area,
  .gx__dot,
  .gx__enddot,
  .gx__endval {
    opacity: 1;
    transition: none;
  }
}

/* Close */

.close {
  border-top: 1px solid var(--line);
}

.close__inner {
  max-width: 36rem;
}

.close h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}

.close p {
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 1.75rem;
}

/* Footer: full-bleed navy band, brand column plus link columns */

.site-footer {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(33, 82, 255, 0.12) 0%, transparent 55%),
    linear-gradient(165deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: #eef1f7;
  border-top: 1px solid rgba(33, 212, 253, 0.16);
}

.site-footer__inner {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--space) 1.5rem;
}

.site-footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 800px) {
  .site-footer__top {
    grid-template-columns: 1.3fr 1.7fr;
  }
}

.brand--footer {
  color: #eef1f7;
}

.site-footer__tagline {
  margin-top: 1rem;
  max-width: 26rem;
  color: rgba(238, 241, 247, 0.65);
  font-size: 0.95rem;
}

.site-footer__cta {
  margin-top: 1.4rem;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 540px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-footer__heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flash);
  margin-bottom: 0.9rem;
}

.site-footer__cols ul {
  display: grid;
  gap: 0.55rem;
}

.site-footer__cols a,
.site-footer__cols .link-btn {
  text-decoration: none;
  font-size: 0.95rem;
  color: rgba(238, 241, 247, 0.8);
}

.site-footer__cols a:hover,
.site-footer__cols .link-btn:hover {
  color: var(--flash);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(238, 241, 247, 0.12);
  padding-top: 1.25rem;
  color: rgba(238, 241, 247, 0.5);
  font-size: 0.85rem;
}

.soon {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Contact modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 11, 24, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  max-height: calc(100svh - 2 * var(--space));
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(3, 11, 24, 0.35);
  opacity: 0;
  transform: translateY(0.9rem) scale(0.985);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.modal__close:hover {
  color: var(--ink);
}

.modal__body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.modal__body h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.modal__sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.18);
}

.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  color: #c0392b;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Reveal motion */

/* Reveals rise, fade, and de-blur; the un-blur is what makes it feel
   finished rather than merely animated. */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
  filter: blur(7px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
    filter 700ms var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-stagger] > * {
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* No-JS and reduced motion: content always visible */

.no-js [data-reveal],
.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .modal__backdrop,
  .modal__panel {
    transition: none;
  }
}

@media (max-width: 560px) {
  .rp-readbar__wk {
    display: none;
  }
  .rp-table th:nth-child(3),
  .rp-table td:nth-child(3) {
    display: none;
  }
}

/* Fit check: the qualification split under the hero */

.fitcheck {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.fitcheck__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  color: #eef1f7;
  background:
    linear-gradient(160deg, rgba(33, 82, 255, 0.14) 0%, transparent 45%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
}

.fitcheck__copy .eyebrow {
  color: var(--flash);
  opacity: 1;
}

.fitcheck__copy h2 {
  max-width: 11ch;
  font-size: clamp(2.8rem, 5.8vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.fitcheck__sub {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--flash) 10%, #7aa2ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--flash);
}

.fitcheck__intro {
  max-width: 31rem;
  margin-top: 1rem;
  color: rgba(238, 241, 247, 0.72);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
}

.fitcheck__note {
  max-width: 27rem;
  margin-top: 3.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(238, 241, 247, 0.16);
  color: rgba(238, 241, 247, 0.6);
  font-size: 0.82rem;
  line-height: 1.5;
}

.fitcheck__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  background: #fcfcfe;
}

.fitcheck__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.fitcheck__row:last-of-type {
  border-bottom: 1px solid var(--line);
}

.fitcheck__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.35rem;
}

.fitcheck__row strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.fitcheck__row p {
  max-width: 32rem;
  margin-top: 0.5rem;
  color: var(--muted);
  line-height: 1.48;
}

.fitcheck__actions {
  margin-top: 1.75rem;
}

@media (max-width: 800px) {
  .fitcheck {
    grid-template-columns: 1fr;
  }
  .fitcheck__copy {
    border-bottom: 0;
  }
}

/* Height-matched reporting columns */

.work__pair {
  align-items: stretch !important;
}

.work__side {
  height: 100%;
}

.wm-side {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}

.wm-cats {
  display: grid;
  gap: 0.45rem;
}

.wm-side .wm-grp {
  padding: 0.55rem 0.75rem 0.65rem;
}

.wm-side .wm-grplabel {
  margin-bottom: 0.45rem;
}

.wm-side .wm-marks img {
  height: 17px;
}

/* Full-width budget vs actual */

.bva--full {
  max-width: none;
  width: 100%;
  margin-top: 1.25rem;
}

.bva--full .bva__grid {
  grid-template-columns: 1fr 1fr;
}

.bva--full .bva__detail {
  border-left: 1px solid var(--line);
  border-top: 0;
  padding-left: 1.25rem;
  padding-top: 0;
}

@media (max-width: 900px) {
  .bva--full .bva__grid {
    grid-template-columns: 1fr;
  }
  .bva--full .bva__detail {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
}

/* Claims and CTA close the reporting section */

.work__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  margin-top: 1.5rem;
}

.work__foot .work__claims {
  flex: 1 1 100%;
}

@media (min-width: 900px) {
  .work__foot .work__claims {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
  }
}



/* Mobile legibility pass: the report SVGs scale their 720 unit canvas down
   to a phone card, so px type inside them must be set for the post scale
   size, and the smallest mono caps need a floor. */
@media (max-width: 760px) {
  .rp-vchart__axis {
    font-size: 20px;
  }
  .rp-vchart__thlab,
  .rp-vchart__medialab {
    font-size: 15px;
  }
  .rp-vchart__endval {
    font-size: 30px;
  }
  .rp-bars__lab {
    font-size: 20px;
  }
  .rp-bars__val {
    font-size: 22px;
  }
  .rp-vchart__dot {
    r: 8;
  }
  .rp-stat__cap,
  .rp-card__hint,
  .rp-table th,
  .bva figcaption,
  .rp-eyebrow,
  .wm-grplabel {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  .bva__row {
    grid-template-columns: 1fr auto;
  }
  .bva__row > span:first-child {
    grid-column: 1 / -1;
  }
  .bva__prow {
    grid-template-columns: 1fr auto;
  }
  .bva__prow > span:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .pfconveyor {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  }
}

@media (max-width: 400px) {
  .site-nav__links .btn--ghost {
    display: none;
  }
}

@media (hover: none) {
  .site-footer__cols a,
  .site-footer__cols .link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .modal__close {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Demo banner: the reporting section's closing ask on a photo card */
.work__banner {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(33, 212, 253, 0.16);
  text-align: center;
  color: #eef1f7;
  background: var(--ink-deep);
}

.work__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}

.work__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(33, 82, 255, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(3, 11, 24, 0.72) 0%, rgba(3, 11, 24, 0.58) 50%, rgba(3, 11, 24, 0.78) 100%);
}

.work__banner-inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.work__banner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.work__banner p {
  color: rgba(238, 241, 247, 0.75);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  max-width: 40ch;
}

.work__banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

/* Card labels: give the section labels real weight on small screens */
@media (max-width: 760px) {
  .blitz-card__label,
  .blitz-model__head .blitz-card__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--accent);
    align-self: flex-start;
    width: fit-content;
    margin-bottom: 0.35rem;
  }
}

/* What Blitz Is as full bleed split bands: the head stays in the column,
   the four blocks run edge to edge with the navy switching sides row to
   row, in the fit section's language rather than floating cards. */
.blitz {
  max-width: none;
  padding-inline: 0;
  padding-bottom: 0;
}

.blitz .section__head {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--space);
}

.blitz-grid {
  gap: 0;
  border-top: 1px solid var(--line);
}

.blitz-grid > .blitz-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
}

.blitz-grid > .blitz-card:not(.blitz-card--lead) {
  background: var(--card);
}

.blitz-duo {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.blitz-duo .blitz-model,
.blitz-duo .flow-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
}



/* Row one swap: the service reads on paper, stay close carries the navy */
.blitz-grid > .blitz-card--lead {
  justify-content: flex-start;
}

.blitz-card--lead .informed {
  border-top-color: rgba(238, 241, 247, 0.14);
}

.blitz-card--lead .informed__icon {
  border-color: rgba(33, 212, 253, 0.34);
  background: rgba(33, 212, 253, 0.08);
  color: var(--flash);
}

.blitz-card--lead .informed__item b {
  color: #eef1f7;
}

.blitz-card--lead .informed__item p {
  color: rgba(238, 241, 247, 0.66);
}



/* Row two: the Blitz Model carries the navy, the loop reads on paper */
.blitz-duo .blitz-model {
  color: #eef1f7;
  background:
    linear-gradient(200deg, rgba(33, 82, 255, 0.14) 0%, transparent 45%),
    linear-gradient(200deg, var(--ink) 0%, var(--ink-deep) 100%);
}

.blitz-duo .blitz-model .blitz-card__label {
  color: var(--flash);
}

.blitz-duo .blitz-model__gloss {
  color: rgba(238, 241, 247, 0.66);
}

.blitz-duo .sequence h3 {
  color: #eef1f7;
}

.blitz-duo .sequence li p {
  color: rgba(238, 241, 247, 0.66);
}

.blitz-duo .sequence__index {
  color: var(--flash);
}

.blitz-duo .sequence__index::before {
  border-color: var(--flash);
  background: rgba(3, 11, 24, 0.85);
}

.blitz-duo .flow-card {
  background: var(--card);
}

/* Hero quote: the mission line, set apart from the pitch copy, anchored
   to the opposite corner on desktop and flowing under it on phones */
.hero__quote {
  position: relative;
  z-index: 1;
  margin: 2rem 0 0;
  max-width: 24rem;
  padding: 0.35rem 0 0.35rem 1.15rem;
  border-left: 2px solid var(--flash);
  color: #eef1f7;
}

.hero__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(3, 11, 24, 0.55);
}

.hero__quote p::before {
  content: "\201C";
  display: block;
  margin-bottom: -0.35em;
  color: var(--flash);
  font-size: 2.6em;
  line-height: 1;
  opacity: 0.9;
}

.hero__quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flash);
}

@media (min-width: 1000px) {
  .hero__quote {
    position: absolute;
    right: var(--space);
    bottom: 5rem;
    margin: 0;
  }
}

/* Six KPI tiles: sales and cost per unit join the row */
.rp-stats {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1180px) {
  .rp-stats {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Hero, sized up: the pitch reads bigger from the left rail */
.hero {
  padding-top: 8rem;
}

.hero__content {
  max-width: 62rem;
}

.hero__title {
  font-size: clamp(3.6rem, 10.5vw, 8rem);
  margin-bottom: 1.2rem;
}

.hero__lead {
  margin: 0 0 0.9rem;
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #eef1f7;
}

.hero__line {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

/* second series on the velocity chart: blended ROAS, dashed, right axis */
.rp-vchart__line2 {
  fill: none;
  stroke: #0fb5dd;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.rp-vchart__dot2 {
  fill: #fcfcfe;
  stroke: #0fb5dd;
  stroke-width: 1.5;
}

.rp-vchart__axis--r {
  fill: #0fa2c6;
}


/* ==========================================================================
   Motion polish pass

   Everything here is transform and opacity on the compositor, plus one
   letter-spacing settle per headline that runs once and stops. Scroll
   linked pieces read a single custom property (--p, 0 to 1) that main.js
   writes from cached geometry, so nothing measures layout per frame.
   Every rest state below is keyed to a class the existing reveal safety
   net turns on, so no content can strand invisible.
   ========================================================================== */

/* Scroll beam: a hairline under the nav that tracks read progress */

.scrollbeam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(var(--sp, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--flash), var(--accent));
  opacity: 0.85;
  pointer-events: none;
}

/* Headlines rise and settle. Letter-spacing opens from slightly tight to
   its resting value, which reads as the type finding its footing. Starting
   tight rather than loose means the line can never rewrap mid animation. */

[data-reveal] .section__head h2,
[data-reveal] .pfwall__head h2,
[data-reveal] .close h2,
[data-reveal] .fitcheck__copy h2 {
  transform: translateY(0.55rem);
  letter-spacing: -0.045em;
  transition: transform 760ms var(--ease), letter-spacing 900ms var(--ease);
}

[data-reveal] .fitcheck__copy h2 {
  letter-spacing: -0.07em;
}

[data-reveal].is-in .section__head h2,
[data-reveal].is-in .pfwall__head h2,
[data-reveal].is-in .close h2 {
  transform: none;
  letter-spacing: -0.025em;
}

[data-reveal].is-in .fitcheck__copy h2 {
  transform: none;
  letter-spacing: -0.05em;
}

[data-reveal] .section__head .eyebrow,
[data-reveal] .pfwall__head .eyebrow {
  transform: translateY(0.4rem);
  opacity: 0;
  transition: transform 600ms var(--ease), opacity 600ms var(--ease);
}

[data-reveal].is-in .section__head .eyebrow,
[data-reveal].is-in .pfwall__head .eyebrow {
  transform: none;
  opacity: 1;
}

[data-reveal] .section__head .section__sub {
  transform: translateY(0.5rem);
  opacity: 0;
  transition: transform 700ms var(--ease) 140ms, opacity 700ms var(--ease) 140ms;
}

[data-reveal].is-in .section__head .section__sub {
  transform: none;
  opacity: 1;
}

/* Cascades: rows land one after another once the group is on screen */

[data-seq] > * {
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-seq].seq-in > * {
  opacity: 1;
  transform: none;
}

/* The shelf math lands tile by tile and the operators arrive last, so the
   equation assembles in the order a person would read it out loud. */

.growth-math__eq[data-seq] > div {
  transition-delay: calc(var(--i, 0) * 110ms);
}

.growth-math__eq[data-seq] > i {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: calc(780ms + var(--i, 0) * 90ms);
}

.growth-math__eq[data-seq].seq-in > i {
  opacity: 1;
  transform: none;
}

/* The footer brand mark settles: the mark drops in, the name follows */

.site-footer__brandcol[data-seq] > .brand--footer {
  transform: translateY(0.7rem) scale(0.96);
}

.site-footer__brandcol[data-seq].seq-in > .brand--footer {
  transform: none;
}

/* What Blitz is: each band arrives from the side it lives on */

.blitz-grid,
.blitz-duo {
  overflow-x: clip;
}

[data-stagger] > [data-slide="left"] {
  transform: translate3d(-2.5rem, 0, 0);
}

[data-stagger] > [data-slide="right"] {
  transform: translate3d(2.5rem, 0, 0);
}

[data-stagger].is-in > [data-slide] {
  transform: none;
}

/* Scroll linked washes. --p runs 0 to 1 across the band's travel through
   the viewport; the wash is a separate composited layer so the drift never
   repaints the band underneath it. */

.fitcheck__copy,
.blitz-duo .blitz-model,
.work__banner,
.site-footer {
  position: relative;
  isolation: isolate;
}

[data-drift="wash"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* stays inside the band's own width: a horizontal inset on a full bleed
     band would widen the document and scroll the page sideways */
  inset: -25% 0;
  pointer-events: none;
  background: radial-gradient(
    46% 42% at 22% 30%,
    rgba(33, 212, 253, 0.16) 0%,
    rgba(33, 82, 255, 0.09) 38%,
    transparent 72%
  );
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -9rem), 0);
}

.work__banner[data-drift="wash"]::before {
  z-index: 1;
}

/* The banner photo parallaxes inside its own frame. The scale keeps the
   crop full at both ends of the travel, so no edge is ever exposed. */

.work__banner-img[data-drift="photo"] {
  transform: scale(1.16) translate3d(0, calc((var(--p, 0.5) - 0.5) * 3.2rem), 0);
}

/* Micro interactions. Transform and color only: nothing here moves a
   neighbor, and every response starts on the first frame of the hover. */

.fitcheck__row {
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.fitcheck__row:hover {
  transform: translateX(5px);
  border-top-color: var(--line-strong);
}

.fitcheck__num {
  transition: color 180ms var(--ease), transform 180ms var(--ease);
}

.fitcheck__row:hover .fitcheck__num {
  transform: translateX(-2px);
  color: var(--ink);
}

.blitz-duo > .flow-card,
.blitz-duo > .blitz-model {
  position: relative;
}

.blitz-duo > .flow-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--flash), var(--accent));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 320ms var(--ease);
}

.blitz-duo > .flow-card:hover::before {
  transform: scaleY(1);
}

.informed__icon {
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

.informed__item:hover .informed__icon {
  transform: translateY(-2px) scale(1.07);
}

.rp-stat {
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.rp-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.04), 0 12px 26px -14px rgba(5, 17, 35, 0.4);
}

.work__claims li::before {
  transition: transform 220ms var(--ease);
}

.work__claims li:hover::before {
  transform: rotate(135deg) scale(1.25);
}

.growth-math__eq > div {
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

.growth-math__eq > div:hover {
  transform: translateY(-3px);
  border-color: rgba(33, 212, 253, 0.55);
}

.site-footer__cols a,
.site-footer__cols .link-btn {
  display: inline-block;
  transition: transform 180ms var(--ease), color 180ms var(--ease);
}

.site-footer__cols a:hover,
.site-footer__cols .link-btn:hover {
  transform: translateX(3px);
}

.brand__mark {
  transition: transform 260ms var(--ease);
}

.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.06);
}

/* No JS: every rest state above is off */

.no-js [data-seq] > *,
.no-js [data-stagger] > [data-slide] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scrollbeam {
    display: none;
  }
  [data-reveal] .section__head h2,
  [data-reveal] .pfwall__head h2,
  [data-reveal] .close h2 {
    letter-spacing: -0.025em;
  }
  [data-reveal] .fitcheck__copy h2 {
    letter-spacing: -0.05em;
  }
  [data-reveal] .section__head h2,
  [data-reveal] .pfwall__head h2,
  [data-reveal] .close h2,
  [data-reveal] .fitcheck__copy h2,
  [data-reveal] .section__head .eyebrow,
  [data-reveal] .pfwall__head .eyebrow,
  [data-reveal] .section__head .section__sub,
  [data-seq] > *,
  .growth-math__eq[data-seq] > i,
  .growth-math__eq[data-seq] > div,
  .site-footer__brandcol[data-seq] > .brand--footer,
  [data-stagger] > [data-slide] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-drift="wash"]::before {
    transform: none;
  }
  .work__banner-img[data-drift="photo"] {
    transform: scale(1.02);
  }
  .fitcheck__row:hover,
  .rp-stat:hover,
  .growth-math__eq > div:hover,
  .site-footer__cols a:hover,
  .brand:hover .brand__mark,
  .informed__item:hover .informed__icon {
    transform: none;
  }
}

/* Fit section, tightened: same content, about a third less height */
.fitcheck__copy,
.fitcheck__list {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 4rem);
}

.fitcheck__copy h2 {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
}

.fitcheck__note {
  margin-top: 2rem;
}

.fitcheck__row {
  padding: 0.85rem 0;
}

.fitcheck__row strong {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
}

.fitcheck__row p {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.42;
}

.fitcheck__actions {
  margin-top: 1.1rem;
}

/* Sample data chip: rides the report header at every width so the numbers
   are never read as results */
.rp-readbar__sample {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
  flex: none;
}

@media (max-width: 560px) {
  .rp-readbar__lockup {
    display: none;
  }
  .rp-readbar__client {
    flex: 1 1 auto;
  }
}

/* standing line over the network wall: what the logos are, so nobody reads
   them as clients */
.pfwall__stand {
  max-width: var(--max);
  margin: -1.5rem auto 1.25rem;
  padding: 0 var(--space);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 241, 247, 0.55);
}


/* ==========================================================================
   About page (about.html)
   --------------------------------------------------------------------------
   The four "What Blitz runs" blocks moved off the home page and rebuilt as a
   standalone read. Everything here is prefixed .about- or scoped under
   .about-page so the home page is untouched. The page is deliberately not
   full width: one centered column, paper ground, one navy band in the middle
   and one at the close, the loop board and the Blitz Model as the two
   working visuals.
   ========================================================================== */

/* The nav has no photo hero to sit over here, so it is solid from the top.
   These mirror the .site-nav.is-solid rules; main.js still toggles is-solid
   on scroll and these win because they land later in the cascade. */
.about-page .site-nav {
  background: rgba(238, 241, 247, 0.92);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.about-page .site-nav .btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.about-page .site-nav .btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

/* The column */

.about-main {
  padding-top: clamp(5.5rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.about-wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space);
}

.about-block {
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Page head: compact, no hero, the display face carries it */

.about-head {
  max-width: 44rem;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.about-head .eyebrow {
  color: var(--accent);
  opacity: 1;
}

.about-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 1rem;
}

.about-head__sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 36rem;
  margin: 0;
}

/* Panels. The cards keep their own skin; only the heading level changed
   from h3 to h2, so the type has to be restated. */

.about-panel {
  width: 100%;
}

.about-panel h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.about-panel p:not(.blitz-card__label) {
  max-width: 46rem;
}

.about-panel--navy h2 {
  color: #eef1f7;
}

/* The rule above the two visuals */

.about-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding-bottom: 0.9rem;
  margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}

.about-rule__gloss {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}

/* The two working visuals, side by side once there is room for both */

.about-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .about-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.about-model {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* The model sits in half the column here, so the four steps stay stacked at
   every width instead of splitting into the home page's four across. Stacked,
   it also reads as the mirror of the loop board beside it. */
.about-model .sequence {
  flex: 1;
  grid-template-columns: 1fr;
  align-content: space-evenly;
  gap: 1.5rem;
}

.about-model .sequence li:not(:last-child)::after {
  display: none;
}

/* The close */

.about-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(33, 212, 253, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(33, 82, 255, 0.16) 0%, transparent 48%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: #eef1f7;
}

.about-cta .blitz-card__label {
  color: var(--flash);
  margin: 0 0 0.7rem;
}

.about-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 0.7rem;
}

.about-cta__line {
  color: rgba(238, 241, 247, 0.82);
  font-size: 1rem;
  max-width: 30rem;
  margin: 0 0 1.5rem;
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Narrow screens: the loop rows and the sequence carry long labels, so give
   the panels room rather than letting anything push the page sideways */

@media (max-width: 400px) {
  .about-flow,
  .about-model,
  .about-panel {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}

/* the footer wash layer must not push scroll height past the page */
.site-footer {
  overflow: hidden;
}

/* legal page text */
.legal h2 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.5rem;
}

.legal p {
  max-width: 44rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.site-footer__legal {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 241, 247, 0.35);
}

/* ------------------------------------------------------------------
   2026-09-08 v2 structure (Bobby and Harish design): hero copy, the
   engine cards, the client band, and the proof charts
   ------------------------------------------------------------------ */

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  max-width: 14ch;
  text-wrap: balance;
}

.hero__title em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #eef1f7;
}

.hero__line {
  max-width: 40rem;
}

/* Engine: four service cards */
.engine__head {
  max-width: 44rem;
}

.engine__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.engine__card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.4rem, 2.4vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
    border-color 320ms var(--ease);
}

.engine__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--flash), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--ease);
}

.engine__card:hover {
  transform: translateY(-3px);
  border-color: rgba(33, 82, 255, 0.35);
  box-shadow: 0 18px 40px -24px rgba(5, 17, 35, 0.35);
}

.engine__card:hover::before {
  transform: scaleY(1);
}

.engine__num {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.engine__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.engine__card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Client band: white marks on the ink band */
.clients {
  background: var(--ink);
  color: #eef1f7;
  padding: clamp(2rem, 3.5vw, 2.75rem) var(--space);
  overflow: hidden;
}

.clients__stand {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 241, 247, 0.55);
}

.clients__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  max-width: var(--max);
  margin: 0 auto;
}

.clients__row img {
  height: auto;
  width: auto;
  max-height: clamp(1.8rem, 2.5vw, 2.5rem);
  max-width: clamp(5.5rem, 8.5vw, 8rem);
  opacity: 0.92;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.clients__row img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.clients__more {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.85;
  white-space: nowrap;
}

/* Proof: two chart cards and the testimonial */
.proof__head {
  max-width: 40rem;
}

.proof__head h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.proof__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.proof__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(5, 17, 35, 0.45);
}

.proof__chart {
  position: relative;
  border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 0%, #0b1f44 0%, var(--ink) 55%, var(--ink-deep) 100%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(33, 212, 253, 0.08);
}

.proof__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.25rem 0.5rem 0;
}

.proof__meta {
  margin: 0 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.proof__quote {
  margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
  max-width: 46rem;
  text-align: center;
}

.proof__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.proof__quote figcaption {
  margin-top: 0.9rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* The chart itself */
.pc {
  display: block;
  width: 100%;
  height: auto;
  font-family: "JetBrains Mono", monospace;
}

.pc__leg text,
.pc__tick {
  font-size: 12px;
  fill: rgba(238, 241, 247, 0.6);
}

.pc__tick--sub {
  font-size: 10.5px;
  fill: rgba(238, 241, 247, 0.4);
}

.pc__leg line {
  stroke-width: 2;
}

.pc__leg-spend {
  stroke: #8a94a8;
}

.pc__leg-comp {
  stroke: #a78bfa;
  stroke-dasharray: 5 4;
}

.pc__leg-sales {
  stroke: #4d7cff;
}

.pc__after {
  fill: rgba(33, 82, 255, 0.07);
}

.pc__grid {
  stroke: rgba(238, 241, 247, 0.06);
  stroke-width: 1;
}

.pc__base {
  stroke: rgba(238, 241, 247, 0.22);
  stroke-width: 1;
}

.pc__hand {
  stroke: rgba(238, 241, 247, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.pc__era {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: rgba(238, 241, 247, 0.38);
}

.pc__era--blitz {
  fill: var(--flash);
  letter-spacing: 0.34em;
}

.pc__hand-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  fill: rgba(238, 241, 247, 0.75);
}

.pc__spend {
  fill: none;
  stroke: #8a94a8;
  stroke-width: 2;
  stroke-linecap: round;
}

.pc__comp {
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 5;
}

.pc__sales {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc__sales--before {
  stroke: #5fb8ff;
  opacity: 0.85;
}

.pc__sales--after {
  filter: drop-shadow(0 0 6px rgba(77, 124, 255, 0.55));
}

.pc__pt circle {
  fill: #4d7cff;
  stroke: var(--ink);
  stroke-width: 2;
}

.pc__pt--hand circle {
  fill: #5fb8ff;
}

.pc__pt text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: #eef1f7;
}

.pc__pulse {
  fill: rgba(77, 124, 255, 0.5) !important;
  stroke: none !important;
  transform-box: fill-box;
  transform-origin: center;
}

/* Draw-in when the section reveals. Lines start hidden and draw once the
   section is in view; no-js and reduced motion render the finished chart.
   The competitor line keeps its dash pattern, so it fades in instead. */
.proof .pc__spend,
.proof .pc__sales {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.proof .pc__comp,
.proof .pc__area,
.proof .pc__pt {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.proof.is-in .pc__spend {
  animation: pc-draw 1600ms var(--ease) 200ms forwards;
}

.proof.is-in .pc__comp {
  opacity: 1;
  transition-delay: 400ms;
}

.proof.is-in .pc__sales--before {
  animation: pc-draw 700ms var(--ease) 300ms forwards;
}

.proof.is-in .pc__sales--after {
  animation: pc-draw 1300ms var(--ease) 950ms forwards;
}

.proof.is-in .pc__area {
  opacity: 1;
  transition-delay: 1500ms;
}

.proof.is-in .pc__pt--hand {
  opacity: 1;
  transition-delay: 950ms;
}

.proof.is-in .pc__pt--end {
  opacity: 1;
  transition-delay: 2200ms;
}

.proof.is-in .pc__pulse {
  animation: pc-pulse 2200ms ease-out 2400ms infinite;
}

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

@keyframes pc-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

.no-js .proof .pc__spend,
.no-js .proof .pc__sales {
  stroke-dashoffset: 0;
}

.no-js .proof .pc__comp,
.no-js .proof .pc__area,
.no-js .proof .pc__pt {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .proof .pc__spend,
  .proof .pc__sales {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .proof .pc__comp,
  .proof .pc__area,
  .proof .pc__pt {
    opacity: 1;
    transition: none;
  }
  .proof .pc__pulse {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .engine__grid,
  .proof__grid {
    grid-template-columns: 1fr;
  }
  .clients__row {
    gap: 1.25rem 1.75rem;
  }
  .clients__row img {
    max-height: 1.75rem;
    max-width: 5.5rem;
  }
  .pc__era {
    font-size: 15px;
  }
  .pc__leg text,
  .pc__tick,
  .pc__pt text {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------
   2026-09-08 report section: the dashboard and budget block are gone,
   "how a report gets made" runs left to right
   ------------------------------------------------------------------ */

.hero__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  letter-spacing: inherit;
  color: var(--flash);
}

.wm-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr) auto minmax(0, 0.9fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: stretch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: #fcfcfe;
  border: 1px solid rgba(5, 17, 35, 0.14);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.06), 0 24px 50px -24px rgba(5, 17, 35, 0.22);
  position: relative;
  overflow: hidden;
}

.wm-flow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.wm-flow__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.wm-flow__k {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.wm-flow .wm-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  flex: 1;
}

.wm-flow .wm-grp {
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px solid rgba(5, 17, 35, 0.12);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.wm-flow .wm-grplabel {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wm-flow .wm-marks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 1;
}

.wm-flow .wm-marks img {
  height: 1.05rem;
  width: auto;
  max-width: 30%;
  object-fit: contain;
}

.wm-flow .wm-rec {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(5, 17, 35, 0.14);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.wm-flow .wm-recrow {
  flex: 1;
}

.wm-flow .wm-outs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wm-flow .wm-out {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The wire between columns: a gradient line with a travelling spark */
.wm-flow__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.4rem;
}

.wm-flow__wire {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(33, 82, 255, 0.25), var(--accent));
  border-radius: 2px;
}

.wm-flow__wire::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--flash);
  box-shadow: 0 0 10px var(--flash);
  animation: wm-spark 2.4s var(--ease) infinite;
}

.wm-flow__wire::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

.wm-flow__lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

@keyframes wm-spark {
  0% {
    left: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 8px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-flow__wire::after {
    animation: none;
    left: calc(100% - 8px);
  }
}

@media (max-width: 960px) {
  .wm-flow {
    grid-template-columns: 1fr;
  }
  .wm-flow__link {
    width: 100%;
    flex-direction: row;
    padding: 0.25rem 0;
    gap: 0.75rem;
  }
  .wm-flow__wire {
    width: 2px;
    height: 2.25rem;
    background: linear-gradient(180deg, rgba(33, 82, 255, 0.25), var(--accent));
  }
  .wm-flow__wire::after {
    left: 50%;
    top: 0;
    margin: 0 0 0 -4px;
    animation-name: wm-spark-v;
  }
  .wm-flow__wire::before {
    right: auto;
    top: auto;
    bottom: -1px;
    left: 50%;
    margin: 0 0 0 -3.5px;
    transform: rotate(135deg);
  }
  @keyframes wm-spark-v {
    0% {
      top: 0;
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      top: calc(100% - 8px);
      opacity: 0;
    }
  }
  .wm-flow .wm-marks img {
    height: 1.2rem;
  }
}

@media (max-width: 520px) {
  .wm-flow .wm-cats {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   2026-09-08 round three: fill the width, the about-card hover on every
   card, the client band edge to edge, four wires into the Portal
   ------------------------------------------------------------------ */

/* The about page service card hover, shared: lift, volt border, blue
   glow, and a gradient hairline that ignites along the top edge. */
.engine__card,
.proof__card,
.wm-flow .wm-grp,
.wm-flow .wm-rec,
.wm-flow .wm-out {
  position: relative;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
    border-color 260ms var(--ease);
}

.engine__card::before,
.proof__card::before,
.wm-flow .wm-grp::before,
.wm-flow .wm-rec::before,
.wm-flow .wm-out::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  width: auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 300ms var(--ease), transform 420ms var(--ease);
  z-index: 1;
}

.engine__card:hover,
.proof__card:hover,
.wm-flow .wm-grp:hover,
.wm-flow .wm-rec:hover,
.wm-flow .wm-out:hover {
  transform: translateY(-4px);
  border-color: rgba(33, 82, 255, 0.35);
  box-shadow: 0 2px 4px rgba(5, 17, 35, 0.06), 0 28px 60px -20px rgba(33, 82, 255, 0.28);
}

.engine__card:hover::before,
.proof__card:hover::before,
.wm-flow .wm-grp:hover::before,
.wm-flow .wm-rec:hover::before,
.wm-flow .wm-out:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Bigger type, less air */
.section__head {
  max-width: 52rem;
}

.section__head h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.section__sub {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  max-width: 44rem;
  line-height: 1.5;
}

.hero__line {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  max-width: 44rem;
}

.engine__head {
  max-width: 52rem;
}

.engine__grid {
  gap: 1.25rem;
}

.engine__card {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem);
  border-radius: 14px;
}

.engine__card h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin-bottom: 0.6rem;
}

.engine__card p {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

.engine__num {
  font-size: 0.78rem;
  margin-bottom: 1.1rem;
}

.proof__head h2 {
  font-size: clamp(2.6rem, 6vw, 4.75rem);
}

.proof__card h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.proof__quote blockquote {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}

.proof__quote {
  max-width: 54rem;
}

/* Client band: edge to edge, marks spread across the full width */
.clients {
  padding-left: 0;
  padding-right: 0;
}

.clients__row {
  max-width: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.clients__row img {
  max-height: clamp(2.6rem, 4.6vw, 4.6rem);
  max-width: clamp(8rem, 14vw, 14.5rem);
  flex: 0 1 auto;
}

/* Report flow: platform groups stacked, four wires into the Portal */
.wm-flow {
  grid-template-columns: minmax(0, 1fr) clamp(5rem, 8vw, 8rem) minmax(0, 1.15fr) auto minmax(0, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.wm-flow .wm-cats {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.wm-flow .wm-grp {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
}

.wm-flow .wm-grplabel {
  flex: 0 0 9.5rem;
  font-size: 0.62rem;
}

.wm-flow .wm-marks img {
  height: 1.9rem;
  max-width: 31%;
}

.wm-flow__k {
  font-size: 0.7rem;
}

.wm-flow .wm-recrow b {
  font-size: 1.05rem;
}

.wm-flow .wm-recrow span,
.wm-flow .wm-out span {
  font-size: 0.92rem;
}

.wm-flow .wm-out b {
  font-size: 1.05rem;
}

.wm-flow .wm-out {
  padding: 1rem 1.1rem;
}

.wm-fan {
  position: relative;
  display: flex;
  align-items: stretch;
  padding-top: 1.55rem;
  min-width: 0;
}

.wm-fan__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wm-fan__wire {
  fill: none;
  stroke: rgba(33, 82, 255, 0.35);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.wm-fan__spark {
  fill: none;
  stroke: var(--flash);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.12 0.88;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px var(--flash));
  animation: wm-fan-run 2.6s linear infinite;
}

.wm-fan__spark:nth-child(6) {
  animation-delay: 0.4s;
}

.wm-fan__spark:nth-child(7) {
  animation-delay: 0.8s;
}

.wm-fan__spark:nth-child(8) {
  animation-delay: 1.2s;
}

.wm-fan__lab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

@keyframes wm-fan-run {
  to {
    stroke-dashoffset: -1;
  }
}

.wm-flow__link--m {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wm-fan__spark {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.6;
  }
}

@media (max-width: 960px) {
  .wm-fan {
    display: none;
  }
  .wm-flow__link--m {
    display: flex;
  }
  .wm-flow .wm-grp {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .wm-flow .wm-grplabel {
    flex: none;
  }
  .clients__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2rem;
    padding: 0 var(--space);
  }
  .clients__row img {
    max-height: 2.6rem;
    max-width: 8.5rem;
  }
}

/* platform groups: label above, marks big */
.wm-flow {
  grid-template-columns: minmax(0, 1.3fr) clamp(5rem, 8vw, 8rem) minmax(0, 1.1fr) auto minmax(0, 0.9fr);
}
.wm-flow .wm-grp {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.9rem 1.15rem 1rem;
}
.wm-flow .wm-grplabel {
  flex: none;
}
.wm-flow .wm-marks {
  justify-content: space-between;
  min-height: 2.4rem;
}
.wm-flow .wm-marks img {
  height: 2.3rem;
  max-width: 32%;
}
.wm-fan {
  padding-top: 0;
}

/* ------------------------------------------------------------------
   2026-09-08 round four: Stay close under the report, bigger buttons,
   about page retired
   ------------------------------------------------------------------ */

.btn {
  min-height: 3.4rem;
  padding: 0.95rem 1.9rem;
  font-size: 1.05rem;
  border-radius: 11px;
}

.site-nav .btn,
.site-nav .link-btn {
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  border-radius: 9px;
}

.stay-wrap {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.stay {
  width: 100%;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
}

.stay h2 {
  color: #eef1f7;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  margin: 0;
}

.stay > p:not(.blitz-card__label) {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  max-width: 48rem;
}

.stay .informed {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  padding-top: 1.5rem;
  border-top-color: rgba(238, 241, 247, 0.14);
}

.stay .informed__item b {
  font-size: 1.1rem;
}

.stay .informed__item p {
  font-size: 0.98rem;
}

@media (max-width: 960px) {
  .stay .informed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stay .informed {
    grid-template-columns: 1fr;
  }
}

/* Demo banner runs edge to edge */
.work__banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: calc(-1 * clamp(2.25rem, 4.5vw, 3.25rem));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.work__banner-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--space);
}

.work__banner h3 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.work__banner p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

/* ------------------------------------------------------------------
   2026-09-08 report topology: the xbuild wire language. Dark blueprint
   panel, orthogonal hairline wires drawn from the real card positions
   (main.js), dots riding the exact wire paths, cards as nodes.
   ------------------------------------------------------------------ */

.wm-flow {
  display: none;
}

.wm-map {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  border-radius: 16px;
  border: 1px solid rgba(33, 212, 253, 0.16);
  color: #eef1f7;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(33, 82, 255, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.2), 0 30px 70px -30px rgba(33, 82, 255, 0.35);
}

/* blueprint grid, faded toward the edges */
.wm-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(238, 241, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 241, 247, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 100%);
}

.wm-map__bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 241, 247, 0.55);
}

.wm-map__bar span:last-child {
  text-transform: none;
  letter-spacing: 0.04em;
  color: rgba(238, 241, 247, 0.38);
}

.wm-map__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.wm-map__wires .wire {
  fill: none;
  stroke: rgba(238, 241, 247, 0.18);
  stroke-width: 1;
}

.wm-map__wires .wire--hot {
  stroke: rgba(33, 212, 253, 0.45);
}

.wm-map__wires .dot {
  fill: var(--flash);
  filter: drop-shadow(0 0 5px rgba(33, 212, 253, 0.9));
}

.wm-map__wires .port {
  fill: var(--ink-deep);
  stroke: rgba(33, 212, 253, 0.6);
  stroke-width: 1.2;
}

.wm-map__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(4rem, 8vw, 8rem);
  align-items: stretch;
}

.wm-map__col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.wm-map__col--hub {
  justify-content: center;
}

.wm-map__k {
  margin: 0 0 0.15rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 241, 247, 0.5);
}

.wm-map__col--hub .wm-map__k {
  position: absolute;
  top: 0;
}

.wm-map__col--hub {
  position: relative;
  padding-top: 1.55rem;
}

/* Nodes */
.wm-node {
  position: relative;
  border-radius: 10px;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
    border-color 260ms var(--ease);
}

.wm-node::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 300ms var(--ease), transform 420ms var(--ease);
}

.wm-node:hover {
  transform: translateY(-3px);
}

.wm-node:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* platform cards stay white so the real marks read */
.wm-node--plat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.15rem 1rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(238, 241, 247, 0.12);
}

.wm-node--plat:hover {
  border-color: rgba(33, 212, 253, 0.55);
  box-shadow: 0 18px 40px -20px rgba(33, 212, 253, 0.45);
}

.wm-node--plat .wm-grplabel {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wm-node--plat .wm-marks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.4rem;
}

.wm-node--plat .wm-marks img {
  height: 2.3rem;
  width: auto;
  max-width: 32%;
  object-fit: contain;
}

/* the hub */
.wm-node--hub {
  padding: 1.15rem 1.15rem 1rem;
  background: linear-gradient(180deg, rgba(33, 82, 255, 0.16), rgba(33, 82, 255, 0.04));
  border: 1px solid rgba(33, 212, 253, 0.35);
  box-shadow: 0 0 0 1px rgba(33, 82, 255, 0.12), 0 24px 60px -24px rgba(33, 82, 255, 0.55);
}

.wm-node--hub:hover {
  border-color: rgba(33, 212, 253, 0.7);
}

.wm-hub__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.wm-hub__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  border: 1px solid rgba(33, 212, 253, 0.4);
  background: rgba(33, 82, 255, 0.18);
  color: var(--flash);
}

.wm-hub__mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.wm-hub__head b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wm-hub__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(33, 212, 253, 0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flash);
}

.wm-hub__pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flash);
  box-shadow: 0 0 8px var(--flash);
}

.wm-hub__rows {
  display: grid;
  border-top: 1px solid rgba(238, 241, 247, 0.12);
}

.wm-node--hub .wm-recrow {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(238, 241, 247, 0.1);
  background: none;
}

.wm-node--hub .wm-recrow b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: #eef1f7;
}

.wm-node--hub .wm-recrow span {
  font-size: 0.9rem;
  color: rgba(238, 241, 247, 0.62);
}

.wm-hub__foot {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: rgba(238, 241, 247, 0.5);
}

/* readers */
.wm-node--reader {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  background: rgba(238, 241, 247, 0.04);
  border: 1px solid rgba(238, 241, 247, 0.14);
}

.wm-node--reader:hover {
  border-color: rgba(33, 212, 253, 0.5);
  background: rgba(33, 82, 255, 0.1);
}

.wm-node--reader b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wm-node--reader span {
  font-size: 0.92rem;
  color: rgba(238, 241, 247, 0.62);
}

@media (max-width: 960px) {
  .wm-map__wires {
    display: none;
  }
  .wm-map__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .wm-map__col--hub {
    padding-top: 0;
  }
  .wm-map__col--hub .wm-map__k {
    position: static;
  }
  /* a plain vertical tick between stacked columns */
  .wm-map__col + .wm-map__col::before {
    content: "";
    display: block;
    width: 2px;
    height: 1.75rem;
    margin: -2.1rem auto 0.35rem;
    background: linear-gradient(180deg, transparent, var(--flash));
  }
  .wm-node--plat .wm-marks img {
    height: 1.9rem;
  }
}

.wm-map__wires .wire {
  stroke: rgba(238, 241, 247, 0.28);
}

.wm-map__wires .wire--hot {
  stroke: rgba(33, 212, 253, 0.6);
}

.wm-map__wires .dot {
  r: 3;
}

@media (max-width: 640px) {
  .wm-map__bar span:last-child {
    display: none;
  }
}

/* ------------------------------------------------------------------
   2026-09-08: the topology goes back to paper. Same wires, light panel,
   smaller footprint.
   ------------------------------------------------------------------ */

.wm-map {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 12px;
  border: 1px solid rgba(5, 17, 35, 0.14);
  color: var(--ink);
  background: #fcfcfe;
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.06), 0 24px 50px -24px rgba(5, 17, 35, 0.22);
}

.wm-map::before {
  background-image:
    linear-gradient(rgba(5, 17, 35, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 17, 35, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}

.wm-map::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flash), var(--accent));
}

.wm-map__bar {
  margin-bottom: 1rem;
  font-size: 0.62rem;
  color: var(--muted);
}

.wm-map__bar span:last-child {
  color: rgba(91, 100, 120, 0.7);
}

.wm-map__wires .wire {
  stroke: rgba(5, 17, 35, 0.22);
}

.wm-map__wires .wire--hot {
  stroke: rgba(33, 82, 255, 0.5);
}

.wm-map__wires .dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px rgba(33, 82, 255, 0.7));
}

.wm-map__wires .port {
  fill: #fcfcfe;
  stroke: var(--accent);
}

.wm-map__grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.85fr);
  column-gap: clamp(3rem, 6vw, 5.5rem);
}

.wm-map__col {
  gap: 0.6rem;
}

.wm-map__k {
  font-size: 0.6rem;
  color: var(--muted);
}

.wm-map__col--hub {
  padding-top: 1.3rem;
}

.wm-node--plat {
  gap: 0.45rem;
  padding: 0.7rem 0.9rem 0.75rem;
  border: 1px solid rgba(5, 17, 35, 0.14);
}

.wm-node--plat:hover {
  border-color: rgba(33, 82, 255, 0.35);
  box-shadow: 0 18px 40px -20px rgba(33, 82, 255, 0.35);
}

.wm-node--plat .wm-grplabel {
  font-size: 0.56rem;
}

.wm-node--plat .wm-marks {
  min-height: 1.9rem;
}

.wm-node--plat .wm-marks img {
  height: 1.8rem;
}

.wm-node--hub {
  padding: 0.9rem 0.95rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(33, 82, 255, 0.35);
  box-shadow: 0 1px 2px rgba(5, 17, 35, 0.05), 0 18px 40px -20px rgba(33, 82, 255, 0.3);
}

.wm-node--hub:hover {
  border-color: rgba(33, 82, 255, 0.6);
}

.wm-hub__head {
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.wm-hub__mark {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  border-color: rgba(33, 82, 255, 0.3);
  background: rgba(33, 82, 255, 0.08);
  color: var(--accent);
}

.wm-hub__mark svg {
  width: 1.1rem;
  height: 1.1rem;
}

.wm-hub__head b {
  font-size: 1.05rem;
}

.wm-hub__pill {
  border-color: rgba(33, 82, 255, 0.35);
  color: var(--accent);
  font-size: 0.54rem;
}

.wm-hub__pill i {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(33, 82, 255, 0.8);
}

.wm-hub__rows {
  border-top-color: var(--line);
}

.wm-node--hub .wm-recrow {
  padding: 0.5rem 0;
  border-bottom-color: var(--line);
}

.wm-node--hub .wm-recrow b {
  font-size: 0.95rem;
  color: var(--ink);
}

.wm-node--hub .wm-recrow span {
  font-size: 0.84rem;
  color: var(--muted);
}

.wm-hub__foot {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.wm-node--reader {
  gap: 0.15rem;
  padding: 0.8rem 0.95rem;
  background: #fff;
  border: 1px solid rgba(5, 17, 35, 0.14);
}

.wm-node--reader:hover {
  border-color: rgba(33, 82, 255, 0.35);
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(33, 82, 255, 0.35);
}

.wm-node--reader b {
  font-size: 1rem;
  color: var(--ink);
}

.wm-node--reader span {
  font-size: 0.86rem;
  color: var(--muted);
}

@media (max-width: 960px) {
  .wm-map__col + .wm-map__col::before {
    background: linear-gradient(180deg, transparent, var(--accent));
  }
}

/* Client band: product film behind the marks (Cursor treatment A, 2026-09-08) */
.clients {
  position: relative;
}

.film {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.film__track {
  display: flex;
  gap: 0;
  height: 100%;
  width: max-content;
  animation: film 42s linear infinite;
  will-change: transform;
}

.film__track img {
  height: 140%;
  width: auto;
  min-width: 22vw;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05) brightness(0.72);
}

.film__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 11, 24, 0.42), rgba(3, 11, 24, 0.62)),
    linear-gradient(90deg, rgba(3, 11, 24, 0.35), transparent 18%, transparent 82%, rgba(3, 11, 24, 0.35));
}

@keyframes film {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.clients__stand,
.clients__row {
  position: relative;
  z-index: 1;
}

.clients__stand {
  color: rgba(238, 241, 247, 0.7);
}

.clients__row img {
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45));
}

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

/* Bobby: every section title matches "Let's win together" */
.proof__head h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

/* the shopper editorial hero: subject sits center, keep it there */
.hero__img {
  object-position: 26% 50%;
}

@media (max-width: 760px) {
  .hero__img {
    object-position: 40% 50%;
  }
}

/* Phone fixes 2026-09-08: the topology must stack (a later desktop rule
   was winning over the phone rule), and the hero copy needs more scrim
   over the busy photo on small screens. */
@media (max-width: 960px) {
  .wm-map__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2rem;
  }
  .wm-map__wires {
    display: none;
  }
  .wm-map__col--hub {
    padding-top: 0;
  }
  .wm-map__col--hub .wm-map__k {
    position: static;
  }
  .wm-node--plat .wm-marks img {
    height: 1.9rem;
  }
}

@media (max-width: 760px) {
  .hero__scrim::after {
    height: 62%;
    background: linear-gradient(180deg, transparent, rgba(3, 11, 24, 0.7) 45%, rgba(3, 11, 24, 0.82));
  }
  .hero .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .hero__line {
    text-shadow: 0 1px 12px rgba(3, 11, 24, 0.7);
  }
  .wm-map {
    padding: 1rem;
  }
  .wm-map__bar {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 520px) {
  .site-nav__links .btn--ghost {
    display: none;
  }
}

/* The shopper editorial photo carries its own color. No multiply wash,
   no desaturation; only the legibility scrim stays. */
.hero__scrim::before {
  display: none;
}

.hero__img {
  filter: none;
}

/* Phone hero: headline a step smaller, paragraph cut to its first
   sentence, so the photo gets room (Harish, 2026-09-08). */
@media (max-width: 760px) {
  .hero__title {
    font-size: clamp(2.6rem, 11.5vw, 3.4rem);
  }
  .hero__line {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
  }
  .hero__line-more {
    display: none;
  }
  .hero {
    padding-bottom: 3rem;
  }
}