.adoption {
  --accent: #ffc17e;
  --page: #1c201d;
  --ink-light: #f4f3eb;
  --muted: #c4c7bb;
  --cursor-x: 100%;
  --cursor-y: 16.6667%;
  position: relative;
  background: var(--page);
  color: var(--ink-light);
}
#video-growth { position: absolute; top: 0; }
.adoption-inner {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(48px, 9vw, 160px);
  align-items: center;
  width: 100%;
  max-width: 1540px;
  margin: auto;
  padding: clamp(72px, 12svh, 140px) var(--pad);
}
.adoption-copy h2 {
  max-width: 13ch;
  font-size: clamp(42px, 4.45vw, 75px);
  font-weight: 450;
  line-height: 1.01;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.adoption-copy p { max-width: 36ch; margin: 24px 0 18px; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.48; color: var(--muted); }
.adoption-copy strong { font-weight: 600; color: var(--ink-light); }
.adoption-source { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.adoption-graph { min-width: 0; margin: 0; padding: 66px 9px 0; }
.adoption-plot { position: relative; height: clamp(170px, 18vw, 275px); }
.adoption-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.adoption-track, .adoption-trace, .adoption-guide { fill: none; vector-effect: non-scaling-stroke; }
.adoption-guide { stroke: #ffffff24; stroke-dasharray: 2 7; }
.adoption-track { stroke: #818377; stroke-width: 1.5; }
.adoption-trace { stroke: var(--accent); stroke-width: 3; }
.adoption-node, .adoption-head {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--page);
  border: 1.5px solid var(--accent);
  pointer-events: none;
}
.adoption-node-start { left: 0; top: 83.3333%; }
.adoption-node-end { left: 100%; top: 16.6667%; }
.adoption-head { left: var(--cursor-x); top: var(--cursor-y); background: var(--accent); width: 11px; height: 11px; box-shadow: 0 0 0 5px #ffc17e20; }
.adoption-point {
  position: absolute;
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: 0 0 16px;
  transform: translateY(-100%);
  border: none;
  background: none;
  text-align: left;
  color: var(--ink-light);
  font-variant-numeric: tabular-nums;
}
.adoption-point span { color: var(--muted); font-size: 15px; line-height: 1.2; }
.adoption-point b { font-size: clamp(40px, 4.4vw, 72px); font-weight: 450; letter-spacing: -.065em; line-height: .95; }
.adoption-point[aria-pressed="true"] b { color: var(--accent); }
.adoption-start { left: 0; top: 83.3333%; padding-bottom: clamp(28px, 2.7vw, 42px); }
.adoption-end { right: 0; top: 16.6667%; text-align: right; }
.adoption-scrubber { display: none; }
.adoption.is-interactive .adoption-scrubber {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.adoption-scrubber::-webkit-slider-runnable-track { background: transparent; }
.adoption-scrubber::-webkit-slider-thumb { appearance: none; width: 1px; height: 44px; background: transparent; }
.adoption-scrubber::-moz-range-track, .adoption-scrubber::-moz-range-progress { background: transparent; }
.adoption-scrubber::-moz-range-thumb { width: 1px; height: 44px; border: 0; background: transparent; }
.adoption-scrubber:focus-visible { outline: 1px solid var(--accent); outline-offset: 12px; }
@media (max-width: 760px) {
  .adoption-inner { grid-template-columns: 1fr; gap: 26px; padding-block: 55px; }
  .adoption-copy h2 { max-width: 18ch; font-size: clamp(34px, 8.6vw, 54px); }
  .adoption-copy p { margin: 14px 0 4px; font-size: 16px; max-width: 42ch; }
  .adoption-graph { padding-top: 50px; }
  .adoption-plot { height: clamp(128px, 19svh, 190px); }
  .adoption-point span { font-size: 13px; }
}
@media (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .adoption.is-interactive { min-height: 173svh; }
  .adoption.is-interactive .adoption-stage { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
}