@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/outfit-500.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/outfit-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
}

:root {
  --navy: #0a1628;
  --teal: #00a88c;
  --teal-2: #00bc9d;
  --teal-text: #087969; /* text-safe teal: 5.3:1 on white, 5.0:1 on tinted (AA) */
  --white: #ffffff;
  --navy-70: #3c4655;
  --navy-15: #e7e8eb;
  --tinted: #f6f7f9;
  --container-max: 1280px;
  --pad-x: clamp(24px, 4.4vw, 64px);
  --section-y: clamp(88px, 10vw, 152px);
  --nav-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  margin: 0;
  color: var(--navy);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; }

.skip-link { position: fixed; top: 14px; left: 16px; z-index: 100; padding: 10px 14px; color: var(--navy); background: var(--white); border-radius: 8px; box-shadow: 0 8px 24px rgba(10,22,40,0.2); transform: translateY(-180%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }
a:focus-visible,
summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.section--light { background: var(--white); }
.eyebrow {
  margin: 0 0 22px;
  color: var(--navy-70);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow--light { color: rgba(255,255,255,0.58); }
.display {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.15vw, 84px);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--md {
  max-width: 15ch;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.02;
}
.headline {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.headline--wide { max-width: 22ch; }
.lede {
  max-width: 54ch;
  margin: 0;
  color: var(--navy-70);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  text-wrap: pretty;
}
.lede--light { color: rgba(255,255,255,0.72); }
.prose {
  max-width: 62ch;
  margin: 0;
  color: var(--navy-70);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}
.btn--sm { min-height: 40px; padding: 11px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 18px 30px; font-size: 16px; }
.btn--primary { color: var(--navy); background: var(--teal); }
.btn--primary:hover { transform: translateY(-2px); background: var(--teal-2); box-shadow: 0 8px 22px rgba(0,168,140,0.25); }
.btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { border-color: rgba(255,255,255,0.62); }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  color: var(--white);
  background: rgba(10,22,40,0.93);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { width: auto; height: 42px; }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); }
.nav__links a { color: rgba(255,255,255,0.76); font-size: 14px; font-weight: 500; }
.nav__links a:hover { color: var(--white); }
.nav__links .btn--primary { color: var(--navy); }

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.66fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 1440px;
  padding-block: clamp(36px, 6vh, 76px);
}
.hero__copy { position: relative; z-index: 2; }
.hero .display { max-width: 18ch; font-size: clamp(46px, 5.35vw, 76px); }
.hero .display span { white-space: nowrap; }
.hero .lede { max-width: 46ch; margin-top: 28px; }
.hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
/* Hero copy enters via CSS animation, not the JS reveal system: it is always
   in view on load, and waiting for script.js pushes LCP well past first paint.
   Opacity fades in its own short animation because Chrome stamps LCP when the
   fade completes; a long fade would push LCP well past first paint again. */
@keyframes hero-fade {
  from { opacity: 0; }
}
@keyframes hero-rise {
  from { transform: translateY(32px); }
}
.hero__copy > * {
  animation:
    hero-fade 300ms var(--ease) backwards,
    hero-rise 500ms var(--ease) backwards;
}
.hero__copy > :nth-child(2) { animation-delay: 110ms; }
.hero__copy > :nth-child(3) { animation-delay: 220ms; }
.hero__visual {
  position: relative;
  width: min(100%, 470px, 60vh);
  aspect-ratio: 1;
  justify-self: end;
  opacity: 0.95;
}
.dot-canvas { display: block; width: 100%; height: 100%; }

.scene-label {
  position: sticky;
  top: var(--nav-h);
  z-index: 8;
  margin: 0 0 -82px;
  padding: 28px 0 36px;
  color: var(--teal-text);
  background: linear-gradient(to bottom, var(--scene-bg, #fff) 0 72%, transparent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}
.mobile-scene-label { display: none; }

.problem { background: var(--white); }
.problem .scene-label { --scene-bg: #fff; }
.problem-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(420px, 0.78fr);
  gap: clamp(42px, 5vw, 70px);
}
.problem-scene__copy { position: relative; }
.problem-beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88vh;
  opacity: 1;
  transition: opacity 420ms var(--ease);
}
.js .problem-beat { opacity: 0; }
.js .problem-beat.is-active { opacity: 1; }
.problem-beat h2,
.mobile-problem-copy h2 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.problem-beat p,
.mobile-problem-copy p {
  max-width: 54ch;
  margin: 24px 0 0;
  color: var(--navy-70);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  text-wrap: pretty;
}
.problem-beat__line { display: block; white-space: nowrap; }
.problem-beat--opportunity h2 { max-width: none; font-size: clamp(38px, 3.7vw, 54px); }
.problem-beat--opportunity p { max-width: none; }
.problem-beat--manual h2 { max-width: none; font-size: clamp(37px, 3.4vw, 49px); }
.problem-beat--manual p { max-width: none; font-size: clamp(16px, 1.25vw, 18px); }
.problem-scene__visual {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  display: flex;
  align-items: center;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
}
.problem-states { position: relative; width: 100%; height: min(580px, 72vh); }
.problem-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  pointer-events: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.problem-state.is-active { opacity: 1; transform: none; pointer-events: auto; }
.mobile-problem-copy { display: none; }
.problem-graphic {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(420px, 64vh, 520px);
  min-height: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 78% 18%, rgba(0,168,140,0.18), transparent 35%),
    linear-gradient(145deg, #0e1d31, #081321);
  border: 1px solid rgba(10,22,40,0.18);
  border-radius: 22px;
  box-shadow: 0 30px 80px -48px rgba(10,22,40,0.72);
}
.problem-graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.1) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom right, rgba(0,0,0,0.68), transparent 72%);
  mask-image: linear-gradient(to bottom right, rgba(0,0,0,0.68), transparent 72%);
  pointer-events: none;
}
.problem-graphic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,0.07), transparent 30%); pointer-events: none; }

.problem-graphic--cost,
.problem-graphic--opportunities,
.problem-graphic--control,
.problem-graphic--manual {
  color: var(--navy);
  background:
    radial-gradient(circle at 86% 18%, rgba(0,168,140,0.10), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,0.97), rgba(239,245,246,0.72));
  border-color: rgba(10,22,40,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 34px 80px -58px rgba(10,22,40,0.58);
}
.problem-graphic--cost::before,
.problem-graphic--opportunities::before,
.problem-graphic--control::before,
.problem-graphic--manual::before { background: none; -webkit-mask-image: none; mask-image: none; }
.problem-graphic--cost::after,
.problem-graphic--opportunities::after,
.problem-graphic--control::after,
.problem-graphic--manual::after { z-index: 2; background: linear-gradient(115deg, rgba(255,255,255,0.50), transparent 38%); }
.problem-chart { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.problem-chart__grid path { fill: none; stroke: rgba(10,22,40,0.055); stroke-width: 1; }
.problem-chart__claims path { fill: none; stroke: rgba(10,22,40,0.16); stroke-width: 1.5; stroke-linecap: round; }
.problem-chart__signals circle { fill: rgba(10,22,40,0.24); }
.problem-chart__signals .is-teal { fill: rgba(0,168,140,0.48); }
.problem-chart__area { fill: url(#problem-cost-area); }
.problem-chart__bend-area { fill: url(#problem-bend-area); }
.problem-chart__underlay,
.problem-chart__current-underlay { fill: none; stroke: rgba(255,255,255,0.96); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.problem-chart__trend { fill: none; stroke: url(#problem-cost-line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 8px rgba(0,168,140,0.15)); }
.problem-chart__current { fill: none; stroke: rgba(10,22,40,0.28); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 8; }
.problem-chart__bend { fill: none; stroke: url(#problem-bend-line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 8px rgba(0,168,140,0.15)); }
.problem-chart__bend-marker { stroke: rgba(0,168,140,0.28); stroke-width: 1.3; stroke-dasharray: 3 6; }
.problem-chart__halo { fill: rgba(0,168,140,0.10); }
.problem-chart__ring { fill: var(--white); stroke: rgba(0,168,140,0.32); stroke-width: 7; }
.problem-chart__dot { fill: var(--teal); }
.problem-chart__label rect { fill: rgba(255,255,255,0.90); stroke: rgba(10,22,40,0.10); stroke-width: 1; }
.problem-chart__label text,
.problem-chart__axis-label,
.problem-chart__quality-text { fill: var(--navy-70); font-family: var(--font-body); font-size: 12px; }
.problem-chart__label--bend text { fill: var(--teal-text); font-weight: 500; }
.problem-chart__quality-line { stroke: rgba(10,22,40,0.15); stroke-width: 2; }
.problem-chart__quality-dot { fill: var(--white); stroke: rgba(0,168,140,0.34); stroke-width: 5; }
.problem-chart__quality-check { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.influence-surface { position: absolute; z-index: 1; inset: 0; }
.influence-surface__label { position: absolute; top: 32px; left: 34px; margin: 0; color: rgba(10,22,40,0.44); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.influence-surface__grid { position: absolute; z-index: 3; top: 86px; right: 26px; left: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.influence-lane { min-width: 0; min-height: 340px; padding: 17px 14px 16px; color: var(--navy); background: rgba(255,255,255,0.76); border: 1px solid rgba(10,22,40,0.09); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 15px 30px -24px rgba(10,22,40,0.25); }
.influence-lane--receded { opacity: 0.44; filter: blur(1.35px); }
.influence-lane--plan { background: rgba(245,255,253,0.86); border-color: rgba(0,168,140,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 18px 38px -25px rgba(0,112,94,0.30); }
.influence-lane__owner { min-height: 28px; margin: 0 0 8px; color: rgba(10,22,40,0.43); font-size: 8px; font-weight: 600; line-height: 1.18; letter-spacing: 0.08em; text-transform: uppercase; }
.influence-lane__owner span,
.influence-lane h3 span { display: block; }
.influence-lane--plan .influence-lane__owner { color: var(--teal-text); }
.influence-lane h3 { min-height: 49px; margin: 0 0 15px; color: var(--navy); font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; }
.influence-lane__items { display: grid; grid-template-rows: repeat(4, 48px); gap: 7px; }
.influence-lane__items span { display: flex; align-items: flex-start; width: 100%; height: 48px; padding: 10px 8px; color: rgba(10,22,40,0.65); background: rgba(234,241,246,0.86); border: 1px solid rgba(10,22,40,0.06); border-radius: 7px; font-size: 8.5px; line-height: 1.23; }
.influence-lane--plan .influence-lane__items span { color: rgba(10,22,40,0.73); background: rgba(0,168,140,0.065); border-color: rgba(0,168,140,0.09); }
.influence-lane__items .influence-lane__more { align-items: center; justify-content: center; color: rgba(10,22,40,0.38); font-size: 12px; letter-spacing: 0.12em; }
.influence-lane--plan .influence-lane__items .influence-lane__more { color: var(--teal-text); }
.manual-pipeline { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.manual-pipeline__eyebrow { fill: rgba(10,22,40,0.48); font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 1.4px; }
.manual-pipeline__source-label { fill: rgba(10,22,40,0.46); font-family: var(--font-body); font-size: 9px; font-weight: 500; }
.manual-pipeline__data-dot { fill: rgba(32,57,77,0.48); }
.manual-pipeline__data-dot--dark { fill: rgba(10,22,40,0.72); }
.manual-pipeline__stream { fill: none; stroke: rgba(10,22,40,0.10); stroke-width: 1.2; }
.manual-pipeline__process-circle { fill: rgba(255,255,255,0.70); stroke: rgba(10,22,40,0.11); stroke-width: 1.4; }
.manual-pipeline__process-label { fill: rgba(10,22,40,0.50); font-family: var(--font-body); font-size: 8px; font-weight: 600; letter-spacing: 1.2px; }
.manual-pipeline__team-card { fill: rgba(235,241,246,0.88); stroke: rgba(10,22,40,0.07); stroke-width: 1; }
.manual-pipeline__team-text { fill: var(--navy); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
.manual-pipeline__handoff-arrow { fill: none; stroke: rgba(10,22,40,0.36); stroke-width: 1.2; stroke-linecap: round; }
.manual-pipeline__insight-line { stroke: rgba(10,22,40,0.54); stroke-width: 1.5; }
.manual-pipeline__insight-dot { fill: var(--teal); }
.manual-pipeline__insight-label { fill: var(--teal-text); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
.manual-pipeline__timeline { stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; }
.manual-pipeline__timeline-label { fill: var(--navy); font-family: var(--font-display); font-size: 15px; font-weight: 600; }

.product-intro {
  min-height: 165vh;
  min-height: 165svh;
  background: var(--tinted);
}
.product-intro__inner {
  position: sticky;
  top: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: var(--section-y);
}
.product-intro__inner .headline { max-width: 24ch; font-size: clamp(44px, 5.2vw, 70px); }
.product-intro__inner .prose { max-width: 58ch; margin-top: 34px; }

.product-scene { background: var(--tinted); }
.product-scene .scene-label { --scene-bg: var(--tinted); }
.product-scene__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.55fr);
  gap: clamp(40px, 6vw, 88px);
}
.product-scene__copy { position: relative; }
.product-scene__visual {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  display: flex;
  align-items: center;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
}
.product-states { position: relative; width: 100%; height: min(620px, 76vh); }
.product-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  pointer-events: none;
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
}
.product-state.is-active { opacity: 1; transform: none; pointer-events: auto; }
.mobile-product-copy { display: none; }
.product-beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82vh;
  opacity: 1;
  transition: opacity 400ms var(--ease);
}
.js .product-beat { opacity: 0; }
.js .product-beat.is-active { opacity: 1; }
.product-beat__num { margin-bottom: 18px; color: var(--teal-text); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.product-beat h2 { max-width: 15ch; margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 50px); font-weight: 600; line-height: 1.06; letter-spacing: -0.026em; text-wrap: balance; }
.product-beat p { max-width: 40ch; margin: 0; color: var(--navy-70); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; text-wrap: pretty; }
.product-beat--work h2 { max-width: none; font-size: clamp(32px, 3.15vw, 44px); white-space: nowrap; }
.product-beat--work p { max-width: none; font-size: clamp(15px, 1.15vw, 16px); }
.product-beat--work p span { display: block; white-space: nowrap; }

.finding-illustration,
.action-illustration {
  position: relative;
  overflow: hidden;
  padding: 44px clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
  background: linear-gradient(145deg, rgba(255,255,255,0.64), rgba(231,232,235,0.42));
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,0.08), 0 30px 80px -58px rgba(10,22,40,0.65);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.finding-illustration::before,
.action-illustration::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 34px;
  background: rgba(255,255,255,0.42);
  border-bottom: 1px solid rgba(10,22,40,0.08);
  pointer-events: none;
}
.finding-illustration::after,
.action-illustration::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 6px;
  height: 6px;
  background: rgba(10,22,40,0.18);
  border-radius: 50%;
  box-shadow: 11px 0 rgba(10,22,40,0.12), 22px 0 rgba(0,168,140,0.34);
}
.finding-card { position: relative; z-index: 2; padding: clamp(20px, 2.6vw, 30px); background: rgba(255,255,255,0.78); border: 1px solid rgba(0,168,140,0.3); border-radius: 12px; box-shadow: 0 22px 60px -46px rgba(10,22,40,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.finding-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.finding-card__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 27px; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
.chip--teal { color: var(--navy); background: var(--teal); }
.chip--outline { color: var(--navy-70); background: var(--white); border: 1px solid var(--navy-15); }
.finding-card__layout { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; }
.finding-card h3 { margin: 0 0 11px; font-family: var(--font-display); font-size: clamp(19px, 2vw, 25px); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.finding-card p { max-width: 56ch; margin: 0 0 18px; color: var(--navy-70); font-size: 13px; line-height: 1.55; }
.finding-card__stats { display: flex; gap: 7px; flex-wrap: wrap; }
.finding-card__stats span { padding: 7px 9px; color: var(--navy-70); background: var(--tinted); border: 1px solid var(--navy-15); border-radius: 7px; font-size: 10.5px; line-height: 1.25; white-space: nowrap; }
.finding-card__stats strong { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.finding-card__preview { display: flex; flex-direction: column; min-width: 0; padding-left: 20px; border-left: 1px solid var(--navy-15); }
.finding-card__preview > span { color: var(--navy-70); font-size: 9px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; }
.finding-card__preview > strong { align-self: flex-end; color: var(--navy); font-family: var(--font-display); font-size: 25px; font-weight: 600; }
.mini-bars { display: flex; align-items: end; gap: 8px; height: 78px; margin-top: 6px; }
.mini-bars i { display: block; flex: 1; height: 42%; background: var(--navy-15); border-radius: 4px 4px 0 0; }
.mini-bars i:last-child { height: 78%; background: var(--navy); }
.finding-card__preview b { align-self: flex-end; margin-top: auto; padding: 8px 12px; color: var(--navy); background: var(--teal); border-radius: 7px; font-size: 10px; font-weight: 500; }
.deepdive-stage {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.62), rgba(231,232,235,0.38));
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,0.08), 0 30px 80px -58px rgba(10,22,40,0.65);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.deepdive-stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 34px;
  background: rgba(255,255,255,0.52);
  border-bottom: 1px solid rgba(10,22,40,0.08);
}
.deepdive-stage::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 16px;
  width: 6px;
  height: 6px;
  background: rgba(10,22,40,0.18);
  border-radius: 50%;
  box-shadow: 11px 0 rgba(10,22,40,0.12), 22px 0 rgba(0,168,140,0.34);
}
.deepdive-page {
  position: absolute;
  overflow: hidden;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(10,22,40,0.13);
  border-radius: 10px;
  box-shadow: 0 14px 34px -28px rgba(10,22,40,0.7);
}
.deepdive-page--action { z-index: 0; inset: 78px 18.5% 6px 48px; }
.deepdive-page--control { z-index: 1; inset: 70px 20% 10px 40px; }
.deepdive-page--cause { z-index: 2; inset: 62px 21.5% 14px 32px; }
.deepdive-stage__document {
  position: absolute;
  z-index: 3;
  inset: 54px 23% 18px 24px;
  overflow: hidden;
  background: rgba(246,247,249,0.84);
  border: 1px solid rgba(10,22,40,0.2);
  border-radius: 10px;
  box-shadow: 0 14px 36px -28px rgba(10,22,40,0.64);
}
.deepdive-stage__document img {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 31px;
  opacity: 0.7;
  filter: blur(1.55px) saturate(0.72);
}
.deepdive-stage__document::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246,247,249,0.025);
}
.deepdive-tabs { position: absolute; z-index: 4; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 31px; padding: 6px 8px; background: rgba(255,255,255,0.78); border-bottom: 1px solid rgba(10,22,40,0.08); }
.deepdive-tabs span { padding: 5px 7px; color: rgba(10,22,40,0.46); background: rgba(255,255,255,0.78); border: 1px solid rgba(10,22,40,0.09); border-radius: 999px; font-size: 7px; font-weight: 600; line-height: 1; white-space: nowrap; }
.deepdive-tabs .is-active { color: var(--teal-text); border-color: rgba(0,168,140,0.22); }
.deepdive-callout {
  --connector-w: clamp(120px, 12vw, 180px);
  --connector-y: 50%;
  position: absolute;
  right: 16px;
  z-index: 6;
  width: min(450px, 60%);
  padding: 20px 22px;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(255,255,255,0.94);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,0.07), 0 20px 45px -30px rgba(10,22,40,0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.deepdive-callout::before {
  content: "";
  position: absolute;
  top: var(--connector-y);
  right: 100%;
  width: var(--connector-w);
  height: 1px;
  background: var(--teal);
  opacity: 0.82;
}
.deepdive-callout::after { content: ""; position: absolute; top: calc(var(--connector-y) - 4px); right: calc(100% + var(--connector-w) - 5px); width: 8px; height: 8px; background: var(--teal); border: 3px solid rgba(255,255,255,0.94); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,168,140,0.25), 0 0 0 7px rgba(0,168,140,0.07); }
.deepdive-callout--one { --connector-y: 70%; top: 40%; }
.deepdive-callout--two { --connector-y: 34%; top: 59%; }
.deepdive-callout__label { margin: 0 0 8px !important; color: var(--teal-text) !important; font-family: var(--font-display); font-size: 12px !important; font-weight: 600; line-height: 1.2 !important; }
.deepdive-callout p { margin: 0; color: var(--navy-70); font-size: clamp(12px, 1.05vw, 14px); line-height: 1.55; }
.deepdive-callout__line { display: block; white-space: nowrap; }
.deepdive-callout__keep { white-space: nowrap; }
.deepdive-callout strong { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }

.action-panel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.78fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.96);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(0,168,140,0.2), 0 28px 64px -42px rgba(10,22,40,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}
.action-illustration { min-height: 520px; display: flex; align-items: center; padding: 62px clamp(18px, 2.4vw, 30px) 28px; }
.action-context { position: absolute; z-index: 1; inset: 48px 22px 20px; overflow: hidden; background: rgba(246,247,249,0.7); border: 1px solid rgba(10,22,40,0.16); border-radius: 11px; box-shadow: 0 18px 44px -34px rgba(10,22,40,0.62); }
.action-context::after { content: ""; position: absolute; inset: 0; background: rgba(246,247,249,0.2); }
.action-context img { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 100%; opacity: 0.42; filter: blur(2.2px) saturate(0.68); }
.action-context__tabs { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 34px; padding: 6px 8px; background: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(10,22,40,0.08); }
.action-context__tabs span { padding: 5px 7px; color: rgba(10,22,40,0.44); background: rgba(255,255,255,0.78); border: 1px solid rgba(10,22,40,0.09); border-radius: 999px; font-size: 7px; font-weight: 600; line-height: 1; white-space: nowrap; }
.action-context__tabs .is-active { color: var(--teal-text); border-color: rgba(0,168,140,0.24); }
.action-panel__eyebrow { margin: 0 0 11px; color: var(--teal-text); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.action-panel h3 { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 27px); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; }
.action-panel__flow { display: flex; flex-direction: column; align-items: center; padding: 18px; background: rgba(246,247,249,0.72); border: 1px solid rgba(10,22,40,0.08); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72); }
.action-panel__flow span { width: 100%; padding: 8px 10px; color: var(--navy); background: rgba(255,255,255,0.9); border: 1px solid var(--navy-15); border-radius: 7px; text-align: center; font-size: 10.5px; font-weight: 500; line-height: 1.35; }
.action-panel__flow i { display: block; width: 1px; height: 12px; background: var(--navy-15); }
.action-panel__flow .action-panel__result { color: var(--teal-text); border-color: rgba(0,168,140,0.4); background: rgba(255,255,255,0.72); }

.method { padding-block: var(--section-y); }
.method__header { max-width: 920px; margin-bottom: clamp(52px, 6vw, 84px); }
.method__header .eyebrow { margin-bottom: 24px; }
.method__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.method-card { display: flex; flex-direction: column; min-height: 420px; padding: clamp(28px, 2.5vw, 34px); background: var(--tinted); border: 1px solid var(--navy-15); border-radius: 14px; }
.method-card--funnel { background: var(--navy); border-color: var(--navy); }
.method-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(23px, 2vw, 26px); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; }
.method-card h3 span { display: block; white-space: nowrap; }
.method-card--funnel h3 { color: var(--white); }
.method-card__detail { margin-top: clamp(34px, 3.5vw, 46px); padding-top: 0; }
.method-card__sources { display: grid; grid-template-columns: 1fr; gap: 7px; }
.method-card__sources span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 11px; color: var(--navy-70); background: rgba(255,255,255,0.82); border: 1px solid var(--navy-15); border-radius: 7px; text-align: center; font-size: 11px; }
.method-card__sources .method-card__more { display: flex; align-items: center; justify-content: center; color: var(--teal-text); font-size: 15px; letter-spacing: 0.12em; }
.gate-stack { display: flex; flex-direction: column; align-items: center; }
.gate-stack span, .gate-stack strong { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 14px; text-align: center; font-size: 11px; font-weight: 500; line-height: 1.35; clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.gate-stack span:first-child { width: 100%; color: var(--navy); background: rgba(255,255,255,0.88); }
.gate-stack span:nth-child(2) { width: 76%; margin-top: 8px; color: var(--white); background: rgba(255,255,255,0.22); }
.gate-stack strong { width: 54%; margin-top: 8px; color: var(--navy); background: var(--teal); }
.gate-stack i { display: block; margin-top: 24px; color: rgba(255,255,255,0.72); font-size: 11px; font-style: normal; }
.gate-stack i::before { content: ""; display: block; width: 1px; height: 18px; margin: -16px auto 8px; background: rgba(255,255,255,0.25); }
.validation-list { display: flex; flex-direction: column; gap: 10px; }
.validation-list div { padding: 13px 14px; background: rgba(255,255,255,0.84); border: 1px solid var(--navy-15); border-radius: 8px; }
.validation-list strong { display: block; margin-bottom: 5px; color: var(--teal-text); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.validation-list span { display: block; color: var(--navy-70); font-size: 10.5px; line-height: 1.45; }

.faq-section { padding-block: var(--section-y); background: var(--tinted); }
.faq-section__grid { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr); gap: clamp(52px, 8vw, 128px); align-items: start; }
.faq-section__header { position: sticky; top: calc(var(--nav-h) + 56px); }
.faq-section__header .prose { max-width: 37ch; margin-top: 24px; }
.faq { border-top: 1px solid var(--navy-15); }
.faq__item { border-bottom: 1px solid var(--navy-15); }
.faq__q { position: relative; padding: 24px 52px 24px 0; color: var(--navy); font-family: var(--font-display); font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; transition: color 150ms ease; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--teal-text); }
.faq__q::after { content: "+"; position: absolute; top: 50%; right: 6px; color: var(--navy-70); font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform 260ms var(--ease), color 150ms ease; }
.faq__item[open] .faq__q::after { color: var(--teal-text); transform: translateY(-50%) rotate(45deg); }
.faq__a { max-width: 64ch; margin: 0; padding: 0 0 28px; color: var(--navy-70); font-size: 15px; line-height: 1.72; }

.cta { position: relative; overflow: hidden; padding-block: clamp(104px, 13vw, 184px); color: var(--white); background: var(--navy); }
.cta__visual { position: absolute; inset: 0; z-index: 0; opacity: 0.9; pointer-events: none; }
.cta__inner { position: relative; z-index: 2; }
.cta .lede { margin-top: 26px; }
.cta__actions { display: flex; margin-top: 34px; }
.footer { padding: 70px 0 32px; color: rgba(255,255,255,0.58); background: var(--navy); border-top: 1px solid rgba(255,255,255,0.07); }
.footer__top { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(420px, 1.15fr); gap: 72px; align-items: start; padding-bottom: 64px; }
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo img { width: auto; height: 40px; }
.footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.footer__links div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__links p { margin: 0 0 5px; color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__links a,
.footer__pending { color: rgba(255,255,255,0.72); font-size: 13px; }
.footer__links a:hover { color: var(--white); }
.footer__pending { opacity: 0.48; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

html:not(.js) .problem-scene__grid,
html:not(.js) .product-scene__grid { grid-template-columns: 1fr; }
html:not(.js) .problem-scene__beats,
html:not(.js) .product-scene__beats { display: none; }
html:not(.js) .scene-label { position: static; margin: 0; }
html:not(.js) .problem-scene__visual,
html:not(.js) .product-scene__visual { position: static; height: auto; padding-block: var(--section-y); }
html:not(.js) .problem-states,
html:not(.js) .product-states { display: flex; flex-direction: column; gap: var(--section-y); height: auto; }
html:not(.js) .problem-state,
html:not(.js) .product-state { position: static; opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .mobile-problem-copy,
html:not(.js) .mobile-product-copy { display: block; margin-bottom: 28px; }

@media (max-width: 1050px) {
  .hero__inner { grid-template-columns: minmax(0, 1.18fr) minmax(270px, 0.72fr); gap: 32px; }
  .problem-scene__grid { grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); gap: 34px; }
  .product-intro__inner .prose { margin-top: 28px; }
  .product-scene__grid { grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.35fr); gap: 36px; }
  .finding-card__layout { grid-template-columns: 1fr; }
  .finding-card__preview { display: none; }
  .deepdive-callout { width: 64%; }
  .method__grid { grid-template-columns: 1fr; }
  .method-card { min-height: 0; }
  .method-card__detail { max-width: 420px; margin-top: 36px; padding-top: 0; }
}

@media (max-width: 780px) {
  :root { --section-y: clamp(72px, 16vw, 104px); --mobile-scene-offset: 64px; }
  html { scroll-snap-type: y proximity; scroll-padding-top: calc(var(--nav-h) + var(--mobile-scene-offset)); }
  .nav__links a:not(.btn) { display: none; }
  .hero__inner { grid-template-columns: 1fr; padding-block: clamp(52px, 10vh, 84px); }
  .hero__copy { max-width: 640px; }
  .hero .display { max-width: 13ch; font-size: clamp(42px, 11vw, 62px); }
  .hero__visual { position: absolute; right: 0; bottom: -12%; width: min(68vw, 440px); opacity: 0.46; }
  .problem { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) + 80px); }
  .mobile-scene-label { position: sticky; top: var(--nav-h); z-index: 12; display: block; margin: calc(-1 * var(--section-y)) 0 28px; padding: 19px 0 24px; color: var(--teal-text); background: linear-gradient(to bottom, var(--scene-bg, #fff) 0 76%, transparent); font-family: var(--font-display); font-size: 15px; font-weight: 500; }
  .mobile-scene-label .container { display: block; }
  .product-scene .mobile-scene-label { --scene-bg: var(--tinted); margin: 0; }
  .problem-scene__grid { grid-template-columns: 1fr; gap: 0; }
  .problem-scene__copy .scene-label { display: none; }
  .problem-scene__beats { display: none; }
  .problem-scene__visual { position: static; height: auto; }
  .problem-states { display: flex; flex-direction: column; gap: 28px; height: auto; }
  .problem-state,
  .problem-state.is-active { position: static; display: flex; justify-content: center; min-height: calc(100svh - var(--nav-h) - var(--mobile-scene-offset)); padding-block: 14px; opacity: 1; transform: none; pointer-events: auto; scroll-snap-align: start; scroll-snap-stop: always; }
  .js [data-mobile-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); }
  .js [data-mobile-reveal].is-in { opacity: 1; transform: none; }
  .mobile-problem-copy { display: block; margin-bottom: 16px; }
  .mobile-problem-copy h2 { font-size: clamp(28px, 7.4vw, 36px); }
  .mobile-problem-copy p { margin-top: 13px; font-size: 14px; line-height: 1.52; }
  .problem-graphic { height: clamp(270px, 82vw, 320px); min-height: 270px; border-radius: 16px; }
  .influence-surface__label { top: 16px; left: 16px; font-size: 7.5px; }
  .influence-surface__grid { top: 44px; right: 10px; left: 10px; gap: 5px; }
  .influence-lane { min-height: 220px; padding: 10px 6px 9px; border-radius: 10px; }
  .influence-lane--receded { opacity: 0.42; filter: blur(0.9px); }
  .influence-lane__owner { min-height: 22px; margin-bottom: 5px; font-size: 6px; }
  .influence-lane h3 { min-height: 34px; margin-bottom: 8px; font-size: 13px; }
  .influence-lane__items { grid-template-rows: repeat(4, 33px); gap: 4px; }
  .influence-lane__items span { height: 33px; padding: 6px 4px; border-radius: 6px; font-size: 6.5px; }
  .influence-lane__items .influence-lane__more { font-size: 10px; }
  .product-scene__grid { grid-template-columns: 1fr; gap: 0; }
  .product-scene__copy .scene-label { display: none; }
  .product-scene__beats { display: none; }
  .product-scene__visual { position: static; height: auto; padding-block: 12px var(--section-y); }
  .product-states { display: flex; flex-direction: column; gap: 28px; height: auto; }
  .product-state,
  .product-state.is-active { position: static; display: flex; justify-content: center; min-height: calc(100svh - var(--nav-h) - var(--mobile-scene-offset)); padding-block: 14px; opacity: 1; transform: none; pointer-events: auto; scroll-snap-align: start; scroll-snap-stop: always; }
  .mobile-product-copy { display: block; margin-bottom: 16px; }
  .mobile-product-copy h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(28px, 7.4vw, 36px); font-weight: 600; line-height: 1.06; letter-spacing: -0.024em; }
  .mobile-product-copy p { max-width: 42ch; margin: 0; color: var(--navy-70); font-size: 14px; line-height: 1.52; }
  .finding-illustration { padding: 44px 11px 11px; }
  .action-illustration { min-height: 340px; padding: 44px 10px 10px; }
  .finding-card { padding: 17px; }
  .finding-card__topline { align-items: flex-start; margin-bottom: 16px; }
  .finding-card h3 { font-size: 18px; }
  .finding-card p { display: none; }
  .finding-card__stats { flex-direction: column; }
  .finding-card__stats span { white-space: normal; }
  .deepdive-stage { min-height: 330px; }
  .deepdive-page--action { inset: 68px 8% 4px 25px; }
  .deepdive-page--control { inset: 62px 10% 7px 20px; }
  .deepdive-page--cause { inset: 56px 12% 10px 15px; }
  .deepdive-stage__document { inset: 50px 14% 13px 10px; }
  .deepdive-callout { --connector-w: 20px; right: 10px; width: 84%; padding: 12px 13px; }
  .deepdive-callout--one { --connector-y: 62%; top: 10%; }
  .deepdive-callout--two { --connector-y: 38%; top: 53%; }
  .deepdive-callout__label { margin-bottom: 5px !important; font-size: 10.5px !important; }
  .deepdive-callout p { font-size: 10.5px; line-height: 1.4; }
  .deepdive-callout__line { display: inline; white-space: normal; }
  .deepdive-callout__line + .deepdive-callout__line::before { content: " "; }
  .action-context { inset: 46px 8px 8px; }
  .action-panel { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .action-panel__eyebrow { margin-bottom: 7px; font-size: 8px; }
  .action-panel h3 { font-size: 19px; line-height: 1.12; }
  .action-panel__flow { padding: 10px; }
  .action-panel__flow span { padding: 6px 8px; font-size: 9px; }
  .action-panel__flow i { height: 7px; }
  .faq-section__grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-section__header { position: static; }
  .footer__top { grid-template-columns: 1fr; gap: 44px; }
  .product-intro { min-height: 145vh; min-height: 145svh; }
}

@media (max-width: 560px) {
  :root { --nav-h: 72px; --pad-x: 22px; }
  body { font-size: 16px; }
  .nav__logo img { height: 36px; }
  .nav__links .btn { min-height: 38px; padding: 10px 15px; font-size: 13px; }
  .hero .display { font-size: clamp(38px, 11.5vw, 52px); line-height: 1.01; }
  .hero .display span { white-space: normal; }
  .hero .lede { margin-top: 22px; font-size: 17px; }
  .hero__actions { margin-top: 28px; }
  .hero__actions .btn { min-height: 48px; padding: 15px 18px; font-size: 14px; }
  .headline { font-size: 38px; }
  .chip { font-size: 9.5px; }
  .deepdive-stage { min-height: 320px; }
  .deepdive-page--action { inset: 73px 6% 5px 26px; }
  .deepdive-page--control { inset: 66px 8% 8px 21px; }
  .deepdive-page--cause { inset: 59px 10% 11px 16px; }
  .deepdive-stage__document { inset: 52px 12% 14px 11px; }
  .deepdive-callout { --connector-w: 16px; width: 78%; }
  .method-card { padding: 32px 24px; }
  .faq__q { padding-block: 21px; font-size: 17px; }
  .footer__links { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .footer__bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 780px) and (max-height: 620px) {
  .problem-state,
  .problem-state.is-active,
  .product-state,
  .product-state.is-active { padding-block: 0; }
  .problem-graphic { height: min(76vw, 39svh); min-height: 220px; }
  .influence-surface__grid { top: 36px; }
  .influence-lane { min-height: 182px; padding: 7px 5px; }
  .influence-lane__owner { min-height: 18px; margin-bottom: 3px; }
  .influence-lane h3 { min-height: 28px; margin-bottom: 4px; font-size: 12px; }
  .influence-lane__items { grid-template-rows: repeat(4, 25px); gap: 3px; }
  .influence-lane__items span { height: 25px; padding: 4px 3px; }
  .finding-illustration { padding-top: 38px; }
  .finding-card { padding: 14px; }
  .finding-card__topline { margin-bottom: 12px; }
  .finding-card__chips .chip--outline { display: none; }
  .finding-card h3 { font-size: 15px; line-height: 1.15; }
  .finding-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .finding-card__stats span { padding: 5px 3px; font-size: 7.5px; text-align: center; }
  .finding-card__stats strong { display: block; margin-bottom: 2px; }
  .deepdive-stage { min-height: 284px; }
  .action-illustration { min-height: 252px; }
  .action-panel { gap: 7px; padding: 10px; }
  .action-panel__eyebrow { margin-bottom: 5px; font-size: 7px; }
  .action-panel h3 { font-size: 16px; line-height: 1.08; }
  .action-panel__flow { padding: 6px; }
  .action-panel__flow span { padding: 4px 5px; font-size: 7px; line-height: 1.15; }
  .action-panel__flow i { height: 4px; }
}

@media (max-width: 360px) and (max-height: 620px) {
  .mobile-product-copy { margin-bottom: 10px; }
  .action-panel h3 { font-size: 14px; }
  .action-illustration { min-height: 234px; }
}

@media (max-height: 680px) and (min-width: 781px) {
  .hero__inner { padding-block: 20px; }
  .hero .display { font-size: clamp(44px, 5.2vw, 68px); }
  .hero .lede { margin-top: 18px; }
  .hero__actions { margin-top: 24px; }
  .hero__visual { width: min(100%, 500px, 57vh); }
  .product-states { height: min(500px, 74vh); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 780px) {
  .js [data-mobile-reveal] { opacity: 1; transform: none; }
}