/* Fexr protocol-owned liquidity story */
.market-making-page {
  --pol-ink: #163b44;
  --pol-muted: #506970;
  --pol-teal: #167a76;
  --pol-teal-strong: #116b68;
  --pol-lime: #b8e852;
  --pol-red: #d64f61;
  --pol-panel: rgba(255, 255, 255, 0.82);
  --pol-line: rgba(22, 59, 68, 0.17);
  --pol-progress: 0;
  color-scheme: light;
  background: #f2f7f6;
  color: var(--pol-ink);
}

.pol-story {
  position: relative;
  height: 700vh;
  min-height: 4200px;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 18%, rgba(67, 169, 158, 0.17), transparent 31%),
    radial-gradient(circle at 20% 80%, rgba(184, 232, 82, 0.13), transparent 27%),
    linear-gradient(145deg, #f8fbfa 0%, #eef6f4 54%, #e8f2f1 100%);
}

.pol-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(22, 92, 91, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 92, 91, 0.075) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 84%, transparent 100%);
}

.pol-story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.pol-story__ambient {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0.82;
  transform: translate3d(0, var(--pol-drift, 0), 0);
  background:
    radial-gradient(circle at 70% 42%, rgba(52, 157, 149, 0.12), transparent 25%),
    radial-gradient(circle at 32% 58%, rgba(184, 232, 82, 0.1), transparent 21%);
}

.pol-story__shell {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: clamp(34px, 7vh, 78px) clamp(28px, 6vw, 92px) clamp(30px, 6vh, 68px);
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}

.pol-copy-stack {
  position: relative;
  min-height: 500px;
  align-self: center;
}

.pol-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.42s ease, transform 0.55s cubic-bezier(.2, .75, .25, 1), visibility 0.42s;
  pointer-events: none;
}

.pol-copy.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.pol-copy__index,
.pol-console__eyebrow,
.pol-node__eyebrow,
.pol-readout__label,
.pol-chip,
.pol-progress__label,
.pol-kicker {
  font-family: "CP-Nums", "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.pol-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-bottom: 22px;
  color: var(--pol-teal);
  font-size: 0.72rem;
  font-weight: 700;
}

.pol-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pol-lime);
  box-shadow: 0 0 0 5px rgba(135, 181, 38, 0.14);
}

.pol-copy__index {
  margin-bottom: 18px;
  color: var(--pol-teal);
  font-size: 0.68rem;
  font-weight: 700;
}

.pol-copy h1,
.pol-copy h2 {
  max-width: 650px;
  margin: 0 0 20px;
  color: var(--pol-ink);
  font-family: "Cal Sans", "DM Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.pol-copy h1 { font-size: clamp(3rem, 5.8vw, 6rem); }
.pol-copy h2 { font-size: clamp(2.45rem, 4.5vw, 4.9rem); }

.pol-copy h1 em,
.pol-copy h2 em {
  color: var(--pol-teal);
  font-style: normal;
}

.pol-copy > p {
  max-width: 590px;
  margin: 0;
  color: var(--pol-muted);
  font-size: clamp(1rem, 1.25vw, 1.17rem);
  line-height: 1.72;
}

.pol-copy > p strong {
  color: var(--pol-ink);
  font-weight: 600;
}

.pol-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 27px;
}

.pol-proof span {
  padding: 8px 12px;
  border: 1px solid var(--pol-line);
  border-radius: 999px;
  color: #294e56;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  white-space: nowrap;
}

.pol-copy__note {
  display: block;
  max-width: 560px;
  margin-top: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--pol-teal-strong);
  color: #425f67;
  font-size: 0.78rem;
  line-height: 1.65;
}

.pol-scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  color: #536d73;
  font-size: 0.75rem;
}

.pol-scroll-cue i {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(22, 92, 91, 0.32);
  border-radius: 14px;
}

.pol-scroll-cue i::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--pol-teal);
  transform: translateX(-50%);
  animation: polScrollCue 1.8s ease-in-out infinite;
}

@keyframes polScrollCue {
  0%, 100% { opacity: 0.35; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 9px); }
}

.pol-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin-top: 30px;
  padding: 15px 23px;
  border: 1px solid var(--pol-lime);
  border-radius: 999px;
  color: #17383e;
  background: var(--pol-lime);
  box-shadow: 0 12px 34px rgba(80, 112, 18, 0.16);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pol-demo:hover,
.pol-demo:focus-visible {
  color: #102d33;
  background: #c8f06f;
  box-shadow: 0 16px 40px rgba(80, 112, 18, 0.2);
  transform: translateY(-2px);
  text-decoration: none;
}

.pol-progress {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(14px, 2vw, 34px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.pol-progress::before,
.pol-progress::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 4px;
  width: 1px;
  height: calc(100% - 18px);
  background: rgba(22, 59, 68, 0.17);
}

.pol-progress::after {
  transform-origin: top;
  transform: scaleY(var(--pol-progress));
  background: var(--pol-teal);
}

.pol-progress button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 110px;
  padding: 0;
  border: 0;
  color: #536c72;
  background: transparent;
  cursor: pointer;
  font-size: 0.67rem;
  transition: color 0.25s ease;
}

.pol-progress button::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid #7f989b;
  border-radius: 50%;
  background: #f4f9f8;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.pol-progress button[aria-current="step"] {
  color: #163b44;
  font-weight: 700;
}

.pol-progress button[aria-current="step"]::after {
  border-color: var(--pol-teal);
  background: var(--pol-teal);
  box-shadow: 0 0 0 5px rgba(22, 122, 118, 0.12);
}

.pol-visual {
  --pol-cycle: 3000ms;
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1.15;
  justify-self: end;
  border: 1px solid rgba(22, 92, 91, 0.22);
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(234, 245, 243, 0.92)),
    var(--pol-panel);
  box-shadow: 0 34px 90px rgba(31, 79, 79, 0.16);
}

.pol-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.pol-console__bar {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--pol-line);
  background: rgba(255, 255, 255, 0.68);
}

.pol-console__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(22, 59, 68, 0.24);
}

.pol-console__dot:first-child { background: var(--pol-red); }
.pol-console__dot:nth-child(2) { background: #e9c46a; }
.pol-console__dot:nth-child(3) { background: var(--pol-teal); }

.pol-console__eyebrow {
  margin-left: 8px;
  color: #557078;
  font-size: 0.61rem;
}

.pol-console__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: #4f6b72;
  font-size: 0.68rem;
}

.pol-console__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pol-lime);
  box-shadow: 0 0 0 4px rgba(112, 151, 28, 0.12);
}

.pol-stage {
  position: absolute;
  inset: 54px 0 42px;
  overflow: hidden;
  background:
    linear-gradient(rgba(22, 92, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 92, 91, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

.pol-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 252, 251, 0.34), transparent 18%, transparent 82%, rgba(241, 248, 246, 0.42));
}

.pol-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.3s ease, visibility 0.22s;
  pointer-events: none;
}

.pol-scene.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pol-scene:not(.is-active) * {
  animation-play-state: paused !important;
}

.pol-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pol-chart path,
.pol-chart line {
  vector-effect: non-scaling-stroke;
}

.pol-scene__label {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 24px;
  padding: 6px 9px;
  border: 1px solid rgba(22, 122, 118, 0.17);
  border-radius: 7px;
  color: #49666c;
  background: rgba(255, 255, 255, 0.8);
  font: 600 0.57rem "CP-Nums", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pol-result {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 22px;
  max-width: calc(100% - 48px);
  padding: 8px 12px 8px 27px;
  border: 1px solid rgba(22, 122, 118, 0.2);
  border-radius: 999px;
  color: #214f55;
  background: rgba(239, 249, 246, 0.94);
  box-shadow: 0 8px 24px rgba(31, 79, 79, 0.09);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.pol-result::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pol-teal);
  transform: translateY(-50%);
}

.pol-svg-label {
  fill: #61777b;
  font: 600 12px "CP-Nums", monospace;
  letter-spacing: 0.09em;
}

.pol-svg-label--bid { fill: #167a76; }
.pol-svg-label--ask { fill: #b95362; }

.pol-axis {
  fill: none;
  stroke: rgba(35, 76, 83, 0.17);
  stroke-width: 1;
}

.pol-axis--mid {
  stroke: rgba(35, 76, 83, 0.3);
  stroke-dasharray: 4 6;
}

.pol-visual__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--pol-line);
  color: #597076;
  background: rgba(255, 255, 255, 0.72);
  font: 0.52rem "CP-Nums", monospace;
  letter-spacing: 0.07em;
}

.pol-visual__footer b { color: var(--pol-teal); font-weight: 700; }

/* Slide 0 — visible liquidity builds around the mid-price. */
.pol-depth rect {
  opacity: 0.78;
  transform: scaleX(1);
  transform-box: fill-box;
}

.pol-depth--bid rect { fill: rgba(22, 122, 118, 0.48); transform-origin: right center; }
.pol-depth--ask rect { fill: rgba(214, 79, 97, 0.42); transform-origin: left center; }
.pol-depth rect:nth-child(2n) { opacity: 0.62; }
.pol-depth rect:nth-child(3n) { opacity: 0.9; }

.pol-orders circle { opacity: 0; }
.pol-orders--bid circle { fill: var(--pol-teal); }
.pol-orders--ask circle { fill: var(--pol-red); }

.pol-scene.is-active .pol-depth rect {
  animation: polBuildDepth var(--pol-cycle) cubic-bezier(.2, .75, .25, 1) both;
}

.pol-scene.is-active .pol-orders--bid circle { animation: polBidOrders var(--pol-cycle) ease-out both; }
.pol-scene.is-active .pol-orders--ask circle { animation: polAskOrders var(--pol-cycle) ease-out both; }
.pol-scene.is-active .pol-result { animation: polRevealResult var(--pol-cycle) ease both; }

@keyframes polBuildDepth {
  0%, 20% { opacity: 0.2; transform: scaleX(0.12); }
  42% { opacity: 0.46; transform: scaleX(0.46); }
  70%, 100% { opacity: 0.82; transform: scaleX(1); }
}

@keyframes polBidOrders {
  0%, 20% { opacity: 0; transform: translateX(0); }
  30% { opacity: 0.9; }
  66% { opacity: 0.9; transform: translateX(210px); }
  70%, 100% { opacity: 0; transform: translateX(230px); }
}

@keyframes polAskOrders {
  0%, 20% { opacity: 0; transform: translateX(0); }
  30% { opacity: 0.9; }
  66% { opacity: 0.9; transform: translateX(-210px); }
  70%, 100% { opacity: 0; transform: translateX(-230px); }
}

@keyframes polRevealResult {
  0%, 69% { opacity: 0; transform: translateY(8px); }
  76%, 100% { opacity: 1; transform: none; }
}

/* Slide 1 — execution leaves the control boundary; ownership does not. */
.pol-owner-boundary {
  fill: rgba(236, 247, 244, 0.68);
  stroke: rgba(22, 122, 118, 0.3);
  stroke-width: 2;
}

.pol-owner-core { fill: rgba(255, 255, 255, 0.96); stroke: rgba(22, 122, 118, 0.24); stroke-width: 2; }
.pol-owner-asset { fill: rgba(22, 122, 118, 0.82); }
.pol-owner-quote { fill: rgba(184, 232, 82, 0.9); }
.pol-lock { fill: none; stroke: #28565c; stroke-width: 3; stroke-linejoin: round; }
.pol-venue-stack rect { fill: rgba(255, 255, 255, 0.94); stroke: rgba(35, 76, 83, 0.2); stroke-width: 1.5; }
.pol-route { fill: none; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pol-route--out { stroke: var(--pol-teal); }
.pol-route--back { stroke: #70971c; stroke-dasharray: 6 7; }
.pol-route-packet { opacity: 0; }
.pol-route-packet--out { fill: var(--pol-teal); }
.pol-route-packet--back { fill: #7da428; }

.pol-scene.is-active .pol-owner-boundary { animation: polSecureBoundary var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-owner-core { animation: polOwnerCore var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-route { animation: polDrawRoute var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-route-packet--out { animation: polPacketOut var(--pol-cycle) ease-in-out both; }
.pol-scene.is-active .pol-route-packet--back { animation: polPacketBack var(--pol-cycle) ease-in-out both; }

@keyframes polSecureBoundary {
  0%, 20% { fill: rgba(236, 247, 244, 0.18); stroke-dasharray: 5 9; }
  70%, 100% { fill: rgba(236, 247, 244, 0.68); stroke-dasharray: 1 0; }
}

@keyframes polOwnerCore {
  0%, 20% { opacity: 0.52; transform: scale(0.88); transform-origin: 176px 206px; }
  70%, 100% { opacity: 1; transform: scale(1); transform-origin: 176px 206px; }
}

@keyframes polDrawRoute {
  0%, 20% { stroke-dashoffset: 1; opacity: 0.25; }
  62%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes polPacketOut {
  0%, 24% { opacity: 0; transform: translate(0, 0); }
  32% { opacity: 1; }
  62% { opacity: 1; transform: translate(202px, 0); }
  70%, 100% { opacity: 0; transform: translate(220px, 0); }
}

@keyframes polPacketBack {
  0%, 36% { opacity: 0; transform: translate(0, 0); }
  44% { opacity: 1; }
  66% { opacity: 1; transform: translate(-190px, 0); }
  70%, 100% { opacity: 0; transform: translate(-206px, 0); }
}

/* Slide 2 — quotes move toward mid and depth follows. */
.pol-quote line { stroke-width: 3; }
.pol-quote rect { stroke-width: 1.5; }
.pol-quote text { font: 700 13px "CP-Nums", monospace; }
.pol-quote--bid { transform: translateX(0); }
.pol-quote--ask { transform: translateX(0); }
.pol-quote--bid line { stroke: var(--pol-teal); }
.pol-quote--bid rect { fill: #e7f5f1; stroke: rgba(22, 122, 118, 0.4); }
.pol-quote--bid text { fill: #166d69; }
.pol-quote--ask line { stroke: var(--pol-red); }
.pol-quote--ask rect { fill: #fcebed; stroke: rgba(214, 79, 97, 0.4); }
.pol-quote--ask text { fill: #ad4352; }
.pol-spread-band { transform: scaleX(1); transform-origin: 320px center; }
.pol-spread-band rect { fill: rgba(184, 232, 82, 0.16); stroke: rgba(112, 151, 28, 0.36); }
.pol-spread-band line { stroke: #789c2a; stroke-width: 2; }
.pol-quote-depth { opacity: 0.62; transform: scaleX(1); transform-box: fill-box; }
.pol-quote-depth line { stroke-width: 4; stroke-linecap: round; }
.pol-quote-depth--bid { transform-origin: right center; }
.pol-quote-depth--ask { transform-origin: left center; }
.pol-quote-depth--bid line { stroke: rgba(22, 122, 118, 0.55); }
.pol-quote-depth--ask line { stroke: rgba(214, 79, 97, 0.5); }

.pol-scene.is-active .pol-quote--bid { animation: polBidCompress var(--pol-cycle) cubic-bezier(.2, .8, .2, 1) both; }
.pol-scene.is-active .pol-quote--ask { animation: polAskCompress var(--pol-cycle) cubic-bezier(.2, .8, .2, 1) both; }
.pol-scene.is-active .pol-spread-band { animation: polSpreadCompress var(--pol-cycle) cubic-bezier(.2, .8, .2, 1) both; }
.pol-scene.is-active .pol-quote-depth { animation: polQuoteDepth var(--pol-cycle) ease both; }

@keyframes polBidCompress {
  0%, 20% { transform: translateX(-92px); }
  70%, 100% { transform: translateX(0); }
}

@keyframes polAskCompress {
  0%, 20% { transform: translateX(92px); }
  70%, 100% { transform: translateX(0); }
}

@keyframes polSpreadCompress {
  0%, 20% { opacity: 0.38; transform: scaleX(4.45); }
  70%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes polQuoteDepth {
  0%, 38% { opacity: 0; transform: scaleX(0.15); }
  70%, 100% { opacity: 0.62; transform: scaleX(1); }
}

/* Slide 3 — signals update the quote envelope and observed mid. */
.pol-signal-row {
  position: absolute;
  z-index: 3;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  width: max-content;
}

.pol-signal-row span {
  padding: 5px 8px;
  border: 1px solid rgba(22, 122, 118, 0.24);
  border-radius: 999px;
  color: #315b62;
  background: rgba(255, 255, 255, 0.92);
  font: 600 0.48rem "CP-Nums", monospace;
  letter-spacing: 0.05em;
}

.pol-discovery-line,
.pol-discovery-band {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pol-discovery-line {
  stroke: #285d64;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pol-discovery-band { stroke-width: 1.5; stroke-dasharray: 5 7; opacity: 0.58; }
.pol-discovery-band--ask { stroke: var(--pol-red); }
.pol-discovery-band--bid { stroke: var(--pol-teal); }
.pol-discovery-quotes line { stroke: rgba(22, 122, 118, 0.48); stroke-width: 4; stroke-linecap: round; }
.pol-price-dot { fill: #ffffff; stroke: #285d64; stroke-width: 4; }

.pol-scene.is-active .pol-signal-row span { animation: polSignalsArrive var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-discovery-line { animation: polDiscoverPrice var(--pol-cycle) ease-in-out both; }
.pol-scene.is-active .pol-discovery-band--ask { animation: polAskEnvelope var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-discovery-band--bid { animation: polBidEnvelope var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-discovery-quotes { animation: polQuoteUpdates var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-price-dot { animation: polPriceDot var(--pol-cycle) ease-in-out both; }

@keyframes polSignalsArrive {
  0%, 20% { opacity: 0; transform: translateY(-10px); }
  42%, 100% { opacity: 1; transform: none; }
}

@keyframes polDiscoverPrice {
  0%, 20% { stroke-dashoffset: 1; opacity: 0.28; }
  70%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes polAskEnvelope {
  0%, 20% { opacity: 0.25; transform: translateY(-30px); }
  70%, 100% { opacity: 0.58; transform: none; }
}

@keyframes polBidEnvelope {
  0%, 20% { opacity: 0.25; transform: translateY(30px); }
  70%, 100% { opacity: 0.58; transform: none; }
}

@keyframes polQuoteUpdates {
  0%, 34% { opacity: 0; transform: scaleX(0.2); transform-origin: center; }
  70%, 100% { opacity: 1; transform: scaleX(1); transform-origin: center; }
}

@keyframes polPriceDot {
  0%, 20% { opacity: 0; transform: translate(-474px, 46px); }
  28% { opacity: 1; }
  70%, 100% { opacity: 1; transform: none; }
}

/* Slide 4 — activity routes eligible fees back to the protocol position. */
.pol-token-ring { fill: rgba(22, 122, 118, 0.07); stroke: rgba(22, 122, 118, 0.25); stroke-width: 2; }
.pol-token { fill: var(--pol-teal); }
.pol-token-letter { fill: #ffffff; font: 600 28px "Cal Sans", sans-serif; }
.pol-econ-route { fill: none; stroke: rgba(22, 122, 118, 0.54); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pol-econ-book rect { fill: rgba(255, 255, 255, 0.95); stroke: rgba(35, 76, 83, 0.2); stroke-width: 1.5; }
.pol-econ-book line { stroke-width: 5; stroke-linecap: round; transform-box: fill-box; }
.pol-econ-book line:nth-of-type(-n+2) { stroke: rgba(214, 79, 97, 0.58); }
.pol-econ-book line:nth-of-type(n+3) { stroke: rgba(22, 122, 118, 0.58); }
.pol-fee-vault rect:first-child { fill: rgba(246, 251, 235, 0.96); stroke: rgba(112, 151, 28, 0.3); stroke-width: 1.5; }
.pol-fee-vault path { fill: none; stroke: rgba(79, 118, 16, 0.42); stroke-width: 3; stroke-linecap: round; }
.pol-fee-vault .pol-fee-fill { fill: rgba(139, 184, 46, 0.72); transform: scaleX(1); transform-box: fill-box; transform-origin: left center; }
.pol-trade-pulse { opacity: 0; fill: var(--pol-teal); }

.pol-scene.is-active .pol-token-ring { animation: polTokenOwns var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-econ-route { animation: polEconRoute var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-econ-book line { animation: polBookActivity var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-trade-pulse--one { animation: polTradeOne var(--pol-cycle) ease-in-out both; }
.pol-scene.is-active .pol-trade-pulse--two { animation: polTradeTwo var(--pol-cycle) ease-in-out both; }
.pol-scene.is-active .pol-fee-fill { animation: polFeeAccrual var(--pol-cycle) ease both; }

@keyframes polTokenOwns {
  0%, 20% { opacity: 0.35; transform: scale(0.86); transform-origin: 112px 210px; }
  70%, 100% { opacity: 1; transform: scale(1); transform-origin: 112px 210px; }
}

@keyframes polEconRoute {
  0%, 20% { stroke-dashoffset: 1; }
  58%, 100% { stroke-dashoffset: 0; }
}

@keyframes polBookActivity {
  0%, 28% { opacity: 0.24; transform: scaleX(0.35); transform-origin: right center; }
  52% { opacity: 0.8; transform: scaleX(1); transform-origin: right center; }
  70%, 100% { opacity: 0.58; transform: scaleX(0.82); transform-origin: right center; }
}

@keyframes polTradeOne {
  0%, 24% { opacity: 0; transform: translateX(0); }
  34% { opacity: 1; }
  58% { opacity: 1; transform: translateX(220px); }
  64%, 100% { opacity: 0; transform: translateX(236px); }
}

@keyframes polTradeTwo {
  0%, 40% { opacity: 0; transform: translateX(0); }
  48% { opacity: 1; }
  66% { opacity: 1; transform: translateX(134px); }
  70%, 100% { opacity: 0; transform: translateX(148px); }
}

@keyframes polFeeAccrual {
  0%, 42% { opacity: 0.24; transform: scaleX(0.08); }
  70%, 100% { opacity: 1; transform: scaleX(1); }
}

/* Slide 5 — compare execution impact, then expose the operating metrics. */
.pol-impact-grid {
  position: absolute;
  inset: 78px 34px 94px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pol-impact-panel {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(35, 76, 83, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.pol-impact-panel > span,
.pol-impact-panel > b {
  position: relative;
  z-index: 2;
  display: block;
  color: #5b7277;
  font: 600 0.55rem "CP-Nums", monospace;
  letter-spacing: 0.08em;
}

.pol-impact-panel > b {
  position: absolute;
  right: 15px;
  bottom: 13px;
  color: #294f55;
}

.pol-impact-panel > i {
  position: absolute;
  right: 18px;
  width: 42%;
  height: 7px;
  border-radius: 6px;
  background: rgba(214, 79, 97, 0.43);
  transform-origin: right center;
}

.pol-impact-panel > i:nth-of-type(1) { top: 56px; width: 28%; }
.pol-impact-panel > i:nth-of-type(2) { top: 82px; width: 42%; }
.pol-impact-panel > i:nth-of-type(3) { top: 108px; width: 58%; background: rgba(22, 122, 118, 0.44); }
.pol-impact-panel > i:nth-of-type(4) { top: 134px; width: 72%; background: rgba(22, 122, 118, 0.44); }
.pol-impact-panel svg { position: absolute; inset: 45px 10px 34px; width: calc(100% - 20px); height: calc(100% - 79px); }
.pol-impact-panel path { fill: none; stroke: #345f66; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pol-impact-panel--deep > i { transform: scaleX(1); }
.pol-impact-panel--deep > b { color: #166d69; }

.pol-metrics {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pol-metrics span {
  padding: 10px;
  border: 1px solid rgba(22, 122, 118, 0.16);
  border-radius: 10px;
  background: rgba(242, 249, 247, 0.92);
}

.pol-metrics small,
.pol-metrics b { display: block; font: 600 0.46rem "CP-Nums", monospace; letter-spacing: 0.06em; }
.pol-metrics small { color: #677d81; }
.pol-metrics b { margin-top: 3px; color: #24545a; }

.pol-scene.is-active .pol-impact-panel--thin path { animation: polThinExecution var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-impact-panel--deep path { animation: polDeepExecution var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-impact-panel--deep > i { animation: polTargetDepth var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-impact-panel--deep > b { animation: polImpactResult var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-metrics { animation: polMetricsReveal var(--pol-cycle) ease both; }

@keyframes polThinExecution {
  0%, 6% { stroke-dashoffset: 1; opacity: 0.2; }
  20%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes polDeepExecution {
  0%, 36% { stroke-dashoffset: 1; opacity: 0; }
  70%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes polTargetDepth {
  0%, 24% { opacity: 0.2; transform: scaleX(0.16); }
  64%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes polImpactResult {
  0%, 68% { opacity: 0; transform: translateY(5px); }
  76%, 100% { opacity: 1; transform: none; }
}

@keyframes polMetricsReveal {
  0%, 68% { opacity: 0; transform: translateY(8px); }
  78%, 100% { opacity: 1; transform: none; }
}

/* Slide 6 — configure the engagement around the asset. */
.pol-scope-route { fill: none; stroke: rgba(22, 122, 118, 0.42); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pol-scope-core { fill: rgba(225, 243, 239, 0.92); stroke: rgba(22, 122, 118, 0.28); stroke-width: 2; }
.pol-scope-core-inner { fill: #ffffff; stroke: rgba(22, 122, 118, 0.18); stroke-width: 1.5; }
.pol-scope-token { fill: #24545a; font: 700 13px "CP-Nums", monospace; letter-spacing: 0.06em; }
.pol-scope-node rect { fill: rgba(255, 255, 255, 0.94); stroke: rgba(35, 76, 83, 0.2); stroke-width: 1.5; }
.pol-scope-node text { fill: #49656b; font: 700 12px "CP-Nums", monospace; letter-spacing: 0.07em; }
.pol-scope-check { fill: var(--pol-teal); stroke: #ffffff; stroke-width: 3; transform: scale(1); transform-box: fill-box; transform-origin: center; }

.pol-scene.is-active .pol-scope-route { animation: polScopeRoute var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-scope-core { animation: polScopeCore var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-scope-node { animation: polScopeNodes var(--pol-cycle) ease both; }
.pol-scene.is-active .pol-scope-check { animation: polScopeChecks var(--pol-cycle) cubic-bezier(.2, .8, .2, 1) both; }

@keyframes polScopeRoute {
  0%, 20% { opacity: 0.2; stroke-dashoffset: 1; }
  64%, 100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes polScopeCore {
  0%, 20% { opacity: 0.34; transform: scale(0.78); transform-origin: 320px 210px; }
  70%, 100% { opacity: 1; transform: scale(1); transform-origin: 320px 210px; }
}

@keyframes polScopeNodes {
  0%, 28% { opacity: 0.22; transform: translateY(10px); }
  66%, 100% { opacity: 1; transform: none; }
}

@keyframes polScopeChecks {
  0%, 54% { opacity: 0; transform: scale(0); transform-origin: center; }
  70%, 100% { opacity: 1; transform: scale(1); transform-origin: center; }
}

@media (max-width: 1100px) {
  .pol-story__shell {
    grid-template-columns: minmax(310px, 0.8fr) minmax(460px, 1.2fr);
    gap: 34px;
    padding-inline: 34px 64px;
  }
  .pol-progress__label { display: none; }
  .pol-progress button { min-width: 10px; }
}

@media (max-width: 820px) {
  .pol-story { height: 760vh; }
  .pol-story__shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 0.78fr) minmax(320px, 1.22fr);
    gap: 18px;
    padding: 24px 48px 22px 22px;
  }
  .pol-copy-stack { min-height: 0; }
  .pol-copy { justify-content: flex-start; padding-top: 8px; }
  .pol-kicker { margin-bottom: 12px; }
  .pol-copy__index { margin-bottom: 10px; }
  .pol-copy h1 { font-size: clamp(2.45rem, 10vw, 4rem); margin-bottom: 13px; }
  .pol-copy h2 { font-size: clamp(2rem, 8.5vw, 3.4rem); margin-bottom: 13px; }
  .pol-copy > p { font-size: 0.92rem; line-height: 1.55; }
  .pol-proof { margin-top: 16px; gap: 6px; }
  .pol-proof span { padding: 6px 9px; font-size: 0.65rem; }
  .pol-copy__note { margin-top: 14px; font-size: 0.69rem; }
  .pol-scroll-cue { display: none; }
  .pol-demo { margin-top: 18px; padding: 12px 18px; }
  .pol-visual { align-self: stretch; justify-self: stretch; max-width: none; aspect-ratio: auto; height: 100%; border-radius: 20px; }
  .pol-console__bar { height: 42px; padding-inline: 13px; }
  .pol-stage { inset: 42px 0 34px; background-size: 22px 22px; }
  .pol-visual__footer { height: 34px; padding-inline: 12px; }
  .pol-scene__label { top: 12px; left: 13px; }
  .pol-result { right: 13px; bottom: 12px; }
  .pol-signal-row { top: 44px; }
  .pol-impact-grid { inset: 58px 18px 76px; gap: 10px; }
  .pol-metrics { left: 18px; right: 18px; bottom: 13px; }
  .pol-progress { right: 14px; }
}

@media (max-width: 520px) {
  .pol-story__shell { grid-template-rows: minmax(300px, 0.9fr) minmax(280px, 1.1fr); }
  .pol-kicker { font-size: 0.6rem; }
  .pol-copy__index { display: none; }
  .pol-copy h1 { font-size: clamp(2.3rem, 12vw, 3.25rem); }
  .pol-copy h2 { font-size: clamp(1.95rem, 10vw, 2.8rem); }
  .pol-proof span:nth-child(n+3) { display: none; }
  .pol-console__eyebrow { font-size: 0.52rem; }
  .pol-console__live { font-size: 0.56rem; }
  .pol-scene__label { font-size: 0.48rem; }
  .pol-result { max-width: calc(100% - 26px); padding: 7px 10px 7px 24px; font-size: 0.57rem; }
  .pol-result::before { left: 10px; width: 6px; height: 6px; }
  .pol-signal-row { gap: 3px; }
  .pol-signal-row span { padding: 4px 5px; font-size: 0.39rem; }
  .pol-impact-panel { padding: 10px; border-radius: 12px; }
  .pol-impact-panel > span, .pol-impact-panel > b { font-size: 0.44rem; }
  .pol-impact-panel > i { right: 10px; }
  .pol-metrics span { padding: 7px 5px; }
  .pol-metrics small, .pol-metrics b { font-size: 0.38rem; }
  .pol-visual__footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pol-story {
    height: auto;
    min-height: 0;
  }
  .pol-story__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .pol-story__shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-block: 64px;
  }
  .pol-copy-stack {
    display: grid;
    gap: 0;
    min-height: 0;
  }
  .pol-copy {
    position: relative;
    min-height: 65vh;
    padding: 50px 0;
    border-bottom: 1px solid var(--pol-line);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .pol-visual {
    order: -1;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
  }
  .pol-progress { display: none; }
  .pol-scroll-cue i::after { animation: none !important; }
  .pol-stage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    overflow: visible;
    background: #f0f7f5;
  }
  .pol-stage::after { display: none; }
  .pol-scene,
  .pol-scene.is-active {
    position: relative;
    min-height: 330px;
    border: 1px solid rgba(22, 92, 91, 0.14);
    border-radius: 16px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .pol-scene *,
  .pol-scene.is-active * {
    animation: none !important;
    transition: none !important;
  }
  .pol-visual__footer { position: relative; }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .pol-stage { grid-template-columns: 1fr; }
}