/* Envision C: hero + force–time chart (the one orchestrated motion moment) */
.hero { padding-top: clamp(48px, 8vw, 112px); }
.hh { display: grid; gap: 22px 48px; align-items: end; }
.hero h1 { font-size: clamp(40px, 6.6vw, 92px); line-height: 0.98; letter-spacing: -0.03em; max-width: 15ch; }
.lede { max-width: 40ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); padding-left: 18px; border-left: 1px solid var(--rule); }
@media (min-width: 1000px) { .hh { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .lede { margin-bottom: 0.6em; } }
.sc i { font: italic 400 17px/1 var(--serif); color: var(--cu); margin-right: 12px; }
/* instrument panel */
.scope {
  --d0: 0.5s; --du: 2.4s;
  margin-top: clamp(40px, 6vw, 80px);
  background: var(--raised);
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: clamp(16px, 2.4vw, 30px);
}
.sc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; font-size: 14px; color: var(--ink-2); }
.sc span:first-child { color: var(--ink); font-weight: 600; }
.tag { border: 1px solid var(--rule); border-radius: 999px; padding: 3px 11px; font-size: 13px; line-height: 1.3; white-space: nowrap; }

.plot { position: relative; height: clamp(210px, 29vw, 370px); overflow: hidden; border-bottom: 1px solid var(--rule); }
.plot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; }
.ax span {
  position: absolute; left: 0; right: 0; height: 18px; margin-top: -18px;
  display: flex; align-items: flex-end; padding-bottom: 3px;
  border-bottom: 1px solid var(--grid);
  font-size: 12px; line-height: 1; color: var(--ink-2);
}
.ax span:nth-child(1) { top: 17.33%; }
.ax span:nth-child(2) { top: 44.56%; }
.ax span:nth-child(3) { top: 71.78%; }
.ax span:nth-child(4) {
  top: 77.22%; border: 0; opacity: 0.75;
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 0 9px) 0 100% / 100% 1px no-repeat;
}
.plot::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-right: 1px solid var(--ink);
  background: linear-gradient(90deg, transparent 72%, rgba(92, 155, 255, 0.1));
  transform: translateX(-101%);
}

/* time axis */
.tx { position: relative; height: 26px; font-size: 12px; color: var(--ink-2); }
.tx span { position: absolute; top: 7px; transform: translateX(-50%); white-space: nowrap; }
.tx span:nth-child(1) { left: 0; transform: none; }
.tx span:nth-child(2) { left: 25%; }
.tx span:nth-child(3) { left: 50%; }
.tx span:nth-child(4) { left: 75%; }
.tx span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* phases: on wide screens each item sits under its own time span */
.ph { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 14px; counter-reset: ph; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ph li { position: relative; counter-increment: ph; padding-top: 14px; border-top: 2px solid var(--rule); }
.ph li::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform-origin: 0 0; }
.ph b { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--ink); font-size: 15px; font-weight: 700; }
.ph b::before {
  content: counter(ph); flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 800;
}
.ph li:nth-child(1) { --s: 0.15; --w: 0.18; }
.ph li:nth-child(2) { --s: 0.33; --w: 0.22; }
.ph li:nth-child(3) { --s: 0.55; --w: 0.2665; }
.ph li:nth-child(4) { --s: 0.8165; --w: 0.1835; }
@media (min-width: 760px) {
  .ph { grid-template-columns: 15fr 18fr 22fr 26.65fr 18.35fr; gap: 0; margin-top: 4px; background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 2px no-repeat; }
  .ph li { padding: 14px 16px 0 0; }
  .ph li:first-child { grid-column: 2; }
  .ph li::before { content: ""; position: absolute; left: 0; top: -9px; height: 9px; border-left: 1px solid var(--rule); }
}

/* readout */
.ro { display: grid; gap: 18px 40px; align-items: end; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--grid); }
.key { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-2); }
.key li { display: flex; align-items: center; gap: 9px; }
.key li::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--blue); }
.key .kr::before { background: var(--cu); }
.key .kb::before { height: 1px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 0 8px); }
.val { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.val div { display: flex; flex-direction: column-reverse; }
.val dt { font-size: 13px; color: var(--ink-2); }
.val dd { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
@media (min-width: 760px) { .ro { grid-template-columns: minmax(0, 1fr) auto; } .note { text-align: right; } }

/* scrub cursor (added by js/chart.js) */
.hit { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: pan-y; }
.hit:focus-visible { outline-offset: -2px; border-radius: 0; }
.cur { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
.cur i { position: absolute; left: -4.5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--blue); background: var(--bg); }
.cur i + i { border-color: var(--cu); }
.tip {
  position: absolute; top: 10px; left: 0; z-index: 4; opacity: 0; pointer-events: none;
  padding: 7px 11px; border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(11, 17, 24, 0.94); font-size: 12px; line-height: 1.55; white-space: nowrap;
}
.tip b { display: block; color: var(--ink-2); font-weight: 500; }
.tip span { display: flex; align-items: center; gap: 7px; }
.tip span::before { content: ""; width: 10px; height: 2px; background: var(--blue); }
.tip span + span::before { background: var(--cu); }
.plot.on .cur, .plot.on .tip { opacity: 1; }

/* the draw: a recorder sweep reveals both feet, phases light up as it passes */
@media (prefers-reduced-motion: no-preference) {
  .plot img { animation: rec var(--du) linear var(--d0) both; }
  .plot::after { animation: scan var(--du) linear var(--d0) both; }
  .ph li::after { animation: fill calc(var(--w) * var(--du)) linear calc(var(--d0) + var(--s) * var(--du)) both; }
  .ph b::before { animation: lit 0.35s ease-out calc(var(--d0) + var(--s) * var(--du)) both; }
  .val dd { animation: up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d0) + var(--du)) both; }
  .val div + div dd { animation-delay: calc(var(--d0) + var(--du) + 0.1s); }
  .cur, .tip { transition: opacity 0.15s; }
  .scope.wait *, .scope.wait *::before, .scope.wait *::after { animation-play-state: paused; }
}
@keyframes rec { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scan { 0% { transform: translateX(-100%); opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes lit { from { background: var(--rule); color: var(--ink-2); } }
@keyframes up { from { opacity: 0; transform: translateY(8px); } }