@font-face {
  font-family: "Inter";
  src: url("/assets/06473fbb65cde2781f98750853c29f64883b327b89eb4771fe2c0efaa97aabc6/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/06473fbb65cde2781f98750853c29f64883b327b89eb4771fe2c0efaa97aabc6/fonts/inter-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/06473fbb65cde2781f98750853c29f64883b327b89eb4771fe2c0efaa97aabc6/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --bg: #0a0d12;
  --bg-raised: #0d1118;
  --panel: #10151d;
  --panel-2: #151b25;
  --line: #252d39;
  --line-strong: #35404f;
  --text: #f0f3f7;
  --text-2: #c5ccd6;
  --muted: #a4adbc;
  --accent: #8ff3d7;
  --violet: #bcadff;
  --loss: #f6b94d;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 8px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 var(--sans);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}
button {
  font: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
main:focus {
  outline: none;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}
h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 24px;
}
h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
p {
  color: var(--muted);
  margin-bottom: 20px;
}
svg {
  display: block;
  max-width: 100%;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}
.eyebrow {
  font: 500 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.text-accent {
  color: var(--accent);
}
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 500;
}
.text-link span {
  color: var(--accent);
  transition: transform 0.15s ease;
}
.text-link:hover span {
  transform: translateX(2px);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.button:hover {
  background: var(--panel-2);
  color: var(--text);
}
.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1714;
}
.button-primary:hover {
  background: #b2ffe7;
  border-color: #b2ffe7;
  color: #0b1714;
}
.button .arrow {
  font-weight: 400;
}
.button-pending,
.button-pending:hover {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--text-2);
  cursor: default;
}
.soon {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 6px;
  border: 1px solid #8ff3d740;
  border-radius: 4px;
}
.tag {
  font: 500 0.6875rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  vertical-align: middle;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  transform: translateY(-200%);
  z-index: 100;
  background: var(--accent);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 6px;
}
.skip-link:focus {
  transform: none;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.brand svg {
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.3;
}
.brand svg circle {
  fill: var(--accent);
}
.brand-period {
  color: var(--accent);
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.nav-links {
  display: flex;
  gap: 28px;
}
.main-nav a[aria-current] {
  color: var(--accent);
}
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-actions .button {
  font-size: 0.875rem;
  min-height: 40px;
  padding: 8px 14px;
}
.nav-actions .button:not(.button-primary, .button-pending) {
  border-color: transparent;
}
.menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  background: none;
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.menu-icon {
  position: relative;
}
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-icon::before {
  top: -5px;
}
.menu-icon::after {
  top: 5px;
}
.menu-toggle[aria-expanded="true"] .menu-icon {
  background: transparent;
}
.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: translateY(5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 64px;
  padding-block: 88px 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(3rem, 6.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.hero-description {
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: 16px 28px;
  align-items: center;
  flex-wrap: wrap;
  margin: 32px 0 28px;
}
.hero-footnote {
  font: 0.75rem/1.5 var(--mono);
  color: var(--muted);
  margin: 0;
}

/* Hero MTR readout (the cube's front face): rows resolve one hop at a time, like the real thing. */
.mtr {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  font: 0.8125rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px #000;
}
.mtr-head,
.mtr-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: var(--muted);
}
.mtr-head {
  border-bottom: 1px solid var(--line);
}
.mtr-head strong {
  color: var(--text);
  font-weight: 500;
}
.mtr-row {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) 7ch 5ch 6ch 72px;
  gap: 16px;
  align-items: center;
  padding: 6px 20px;
}
.mtr-cols {
  padding-block: 12px 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.mtr-row .num {
  text-align: right;
}
.hop-n,
.mtr-asn {
  color: var(--muted);
}
.hop-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.hop-loss {
  color: var(--muted);
}
.has-loss .hop-loss {
  color: var(--loss);
}
.mtr-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.mtr-cols .mtr-bar {
  background: none;
}
.mtr-bar i {
  display: block;
  height: 100%;
  width: calc(var(--ms) / 240 * 100%);
  background: var(--accent);
  border-radius: inherit;
  transform-origin: left;
}
.has-loss .mtr-bar i {
  background: var(--loss);
}
.loss-start {
  background: #f6b94d14;
  box-shadow: inset 2px 0 var(--loss);
}
.mtr-foot {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}
.loss-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--loss);
}
@keyframes hop-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@keyframes bar-in {
  from {
    transform: scaleX(0);
  }
}
@keyframes flag-in {
  from {
    background-color: transparent;
    box-shadow: inset 0 0 transparent;
  }
}
.hop {
  animation: hop-in 0.3s ease-out both;
  animation-delay: calc(var(--i) * 120ms + 200ms);
}
.hop .mtr-bar i {
  animation: bar-in 0.5s ease-out both;
  animation-delay: calc(var(--i) * 120ms + 300ms);
}
.hop.loss-start {
  animation:
    hop-in 0.3s ease-out calc(var(--i) * 120ms + 200ms) both,
    flag-in 0.6s ease-out 1.5s both;
}
.mtr-foot {
  animation: hop-in 0.4s ease-out 1.5s both;
}

/* Hero cube: four illustrative views of one incident on the faces of a box that
   turns every few seconds. Without JavaScript, or with reduced motion, only the MTR
   face is shown. Every looping animation shares one cycle of four 6.8s quarters
   (5s facing the viewer, then a 1.8s turn), so the faces stay in step:
   face-local keyframes run 0–18.4% at the front, 18.4–25% turning away, 25–93.4%
   behind and 93.4–100% turning back in. --face-delay shifts each face onto that
   timeline. Keyframe percentages assume this cycle; change them together. */
.hero-visual {
  --cycle: 27.2s;
  container-type: inline-size;
  min-width: 0;
}
.cube {
  margin: 0;
}
.cube-stage,
.cube-body {
  position: relative;
}
.cube-face:not(.face-mtr) {
  display: none;
}
.face-mtr {
  --face: 0;
  --face-delay: 0s;
}
.face-latency {
  --face: 1;
  --face-delay: calc(var(--cycle) * -0.75);
}
.face-correlation {
  --face: 2;
  --face-delay: calc(var(--cycle) * -0.5);
}
.face-path {
  --face: 3;
  --face-delay: calc(var(--cycle) * -0.25);
}
.cube-face {
  flex-direction: column;
}

.latency-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 12px 20px 0;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.latency-legend i {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
.key-line {
  width: 14px;
  height: 2px;
  background: var(--accent);
}
.key-loss {
  width: 4px;
  height: 10px;
  background: var(--loss);
}
.key-change {
  height: 10px;
  border-left: 1px dashed var(--violet);
}
.latency-chart {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 24px 20px 0 76px;
}
.latency-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.latency-y {
  position: absolute;
  top: var(--y);
  right: calc(100% + 12px);
  translate: 0 -50%;
  font-size: 0.6875rem;
  white-space: nowrap;
  color: var(--muted);
}
.latency-grid,
.latency-line,
.latency-change {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.latency-grid {
  stroke: var(--line);
}
.latency-line {
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linejoin: round;
}
.latency-loss {
  fill: var(--loss);
  opacity: 0.5;
}
.latency-change {
  stroke: var(--violet);
  stroke-dasharray: 4 4;
}
.latency-change-label {
  position: absolute;
  bottom: calc(100% + 2px);
  right: calc(9.6% + 6px);
  font-size: 0.6875rem;
  white-space: nowrap;
  color: var(--violet);
}
.latency-x {
  display: flex;
  justify-content: space-between;
  margin: 8px 20px 0 76px;
  font-size: 0.6875rem;
  color: var(--muted);
}

.corr-graph {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 24px 20px 12px;
}
.corr-graph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.corr-link {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.corr-link.is-lossy {
  stroke: #f6b94d73;
}
.corr-agent,
.corr-hop,
.corr-dest,
.corr-packet {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
}
.corr-agent {
  --x: 0;
  translate: 0 -50%;
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.75rem;
  white-space: nowrap;
}
.corr-hop i,
.corr-dest i {
  position: absolute;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
}
.corr-dest i {
  border-color: var(--text-2);
}
.corr-hop b,
.corr-dest b {
  position: absolute;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--muted);
}
.corr-hop.is-shared i {
  width: 14px;
  height: 14px;
  border-color: var(--loss);
  background: var(--loss);
}
.corr-hop.is-shared b {
  top: 12px;
  translate: -50% 0;
  padding: 2px 4px;
  background: var(--panel);
  text-align: center;
  color: var(--text);
}
.corr-dest b {
  left: 12px;
  translate: 0 -50%;
  color: var(--text);
}
.corr-graph em {
  display: block;
  font-style: normal;
  color: var(--muted);
}
.corr-hop.is-shared em {
  color: var(--loss);
}
.corr-packet {
  --x: 6;
  --y: var(--y0);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
@container (max-width: 339px) {
  .head-detail {
    display: none;
  }
}
@container (max-width: 459px) {
  .corr-agent {
    padding-inline: 7px;
    font-size: 0.6875rem;
  }
  .corr-dest em,
  .path-domain,
  .path-target {
    display: none;
  }
}

.path-row {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 20px;
}
.path-row.mtr-cols span:not(:first-child) {
  padding-inline: 6px;
}
.path-before,
.path-after {
  margin-block: -2px;
  padding: 2px 6px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.path-row b {
  margin-right: 1ch;
  font-weight: 400;
  color: var(--muted);
}
.is-changed .path-before {
  background: #f6b94d1f;
  color: var(--text-2);
}
.is-changed .path-before b {
  color: var(--loss);
}
.is-changed .path-after {
  background: #8ff3d71a;
}
.is-changed .path-after b {
  color: var(--accent);
}
.loss-key.is-cleared {
  background: var(--accent);
}

.cube-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  font: 0.6875rem/1.4 var(--mono);
  color: var(--muted);
}
.cube-controls[hidden] {
  display: none;
}
.cube-steps {
  display: flex;
  flex: 1;
  gap: 8px;
}
.cube-steps button {
  --face-delay: calc(var(--cycle) * (var(--n) / 4 - 1));
  position: relative;
  flex: 1;
  min-height: 24px;
  padding: 8px 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.cube-steps button:hover {
  color: var(--text);
}
.cube-steps button:nth-child(1) {
  --face-delay: 0s;
}
.cube-steps button:nth-child(2) {
  --n: 1;
}
.cube-steps button:nth-child(3) {
  --n: 2;
}
.cube-steps button:nth-child(4) {
  --n: 3;
}
.cube-steps button::before,
.cube-steps button::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.cube-steps button:hover::before {
  background: var(--line-strong);
}
.cube-steps button::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.cube-steps [aria-current="true"] {
  color: var(--text);
}
.cube-steps [aria-current="true"]::after {
  transform: none;
}
@container (max-width: 459px) {
  .cube-steps span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-animated .cube-stage {
    perspective: 300cqi;
  }
  /* A soft floor shadow that tightens while the cube pulls back to turn. */
  .is-animated .cube-stage::before {
    content: "";
    position: absolute;
    inset: auto 8% -34px;
    height: 40px;
    background: radial-gradient(closest-side, #8ff3d714, transparent);
    animation: cube-floor calc(var(--cycle) / 4) ease-in-out infinite;
  }
  .is-animated .cube-body {
    transform-style: preserve-3d;
    translate: 0 0 -50cqi;
    animation:
      cube-turn var(--cycle) infinite,
      cube-depth calc(var(--cycle) / 4) ease-in-out infinite;
  }
  .is-animated .cube-face {
    display: flex;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(calc(var(--face) * 90deg)) translateZ(50cqi);
  }
  .is-animated .face-mtr {
    display: block;
    position: relative;
  }
  .is-animated .cube-face:not(.face-mtr) {
    position: absolute;
    inset: 0;
  }
  /* Faces darken as they turn away from the viewer. */
  .is-animated .cube-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    animation: face-shade var(--cycle) var(--face-delay) linear infinite;
  }
  .is-animated .hop .mtr-bar i {
    animation: bar-cycle var(--cycle)
      calc(var(--face-delay) + 300ms + var(--i) * 120ms) ease-out infinite both;
  }
  .is-animated .latency-chart svg {
    animation: chart-cycle var(--cycle) calc(var(--face-delay) + 200ms)
      ease-out infinite both;
  }
  .is-animated .latency-change-label {
    animation: fade-cycle var(--cycle) calc(var(--face-delay) + 2s) infinite
      both;
  }
  .is-animated .corr-packet {
    animation: packet 3s var(--d) linear infinite;
  }
  .is-animated .corr-packet.is-dropped {
    animation-name: packet-drop;
  }
  .is-animated .corr-hop.is-shared i::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid var(--loss);
    border-radius: 50%;
    animation: hop-ping 2s ease-out infinite;
  }
  .is-animated .is-changed .path-after {
    animation: fade-cycle var(--cycle)
      calc(var(--face-delay) + 600ms + (var(--i) - 6) * 300ms) infinite both;
  }
  .is-animated .cube-steps button {
    animation: step-label var(--cycle) var(--face-delay) infinite;
  }
  .is-animated .cube-steps button::after {
    animation: step-fill var(--cycle) var(--face-delay) linear infinite;
  }
  /* Choosing a view stops the loop: the cube turns to that face (the script sets
     --angle and dips the depth), every face shows its finished state, and only
     the correlation packets keep moving. */
  .is-manual .cube-body {
    rotate: y var(--angle, 0deg);
    transition: rotate 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .is-manual .cube-body,
  .is-manual .cube-stage::before,
  .is-manual .hop .mtr-bar i,
  .is-manual .latency-chart svg,
  .is-manual .latency-change-label,
  .is-manual .is-changed .path-after,
  .is-manual .cube-steps button,
  .is-manual .cube-steps button::after {
    animation: none;
  }
  .is-manual .cube-face::after {
    opacity: 0.6;
    animation: none;
    transition: opacity 1.2s;
  }
  .is-manual[data-face="0"] .face-mtr::after,
  .is-manual[data-face="1"] .face-latency::after,
  .is-manual[data-face="2"] .face-correlation::after,
  .is-manual[data-face="3"] .face-path::after {
    opacity: 0;
  }
}
@keyframes cube-turn {
  0%,
  18.4% {
    rotate: y 0deg;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  25%,
  43.4% {
    rotate: y -90deg;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  50%,
  68.4% {
    rotate: y -180deg;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  75%,
  93.4% {
    rotate: y -270deg;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  100% {
    rotate: y -360deg;
  }
}
/* Pulled back far enough that the turning corners stay within the face width. */
@keyframes cube-depth {
  0%,
  73.5%,
  100% {
    translate: 0 0 -50cqi;
  }
  86.8% {
    translate: 0 0 -128cqi;
  }
}
@keyframes cube-floor {
  0%,
  73.5%,
  100% {
    transform: none;
  }
  86.8% {
    transform: scaleX(0.7);
    opacity: 0.5;
  }
}
@keyframes face-shade {
  0%,
  18.4%,
  100% {
    opacity: 0;
  }
  25%,
  93.4% {
    opacity: 0.6;
  }
}
@keyframes bar-cycle {
  0% {
    transform: scaleX(0);
  }
  3%,
  50% {
    transform: none;
  }
  50.1%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes chart-cycle {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  10%,
  50% {
    clip-path: inset(0);
  }
  50.1%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes fade-cycle {
  0%,
  50.1%,
  100% {
    opacity: 0;
  }
  2%,
  50% {
    opacity: 1;
  }
}
@keyframes packet {
  0% {
    left: 6%;
    opacity: 0;
  }
  6%,
  94% {
    opacity: 1;
  }
  50% {
    left: 56%;
    top: 50%;
  }
  100% {
    left: 80%;
    top: calc(var(--y3) * 1%);
    opacity: 0;
  }
}
@keyframes packet-drop {
  0% {
    left: 6%;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  40% {
    background: var(--accent);
  }
  50% {
    left: 56%;
    top: 50%;
    opacity: 1;
    transform: none;
    background: var(--loss);
  }
  64%,
  100% {
    left: 56%;
    top: 50%;
    opacity: 0;
    transform: scale(3);
    background: var(--loss);
  }
}
@keyframes hop-ping {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes step-label {
  0%,
  24.9% {
    color: var(--text);
  }
  25%,
  100% {
    color: var(--muted);
  }
}
@keyframes step-fill {
  0% {
    transform: scaleX(0);
  }
  24.9% {
    transform: none;
  }
  25%,
  100% {
    transform: scaleX(0);
  }
}

/* Sections */
.section {
  padding-block: 112px;
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: end;
  margin-bottom: 48px;
}
.section-heading h2 {
  margin-bottom: 0;
  max-width: 14em;
}
.section-heading p:last-child {
  margin-bottom: 0;
}
.section-heading > p {
  max-width: 440px;
  justify-self: end;
}

/* Screenshots */
.product-shot {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 30px 80px -50px #000;
  transition: border-color 0.2s ease;
}
.product-shot:hover {
  border-color: #4a5869;
}
.screenshot-frame {
  overflow: hidden;
  background: #0b0f12;
}
.screenshot-frame img {
  width: 100%;
}
.screenshot-placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 32px;
  color: var(--muted);
  font: 0.8125rem var(--mono);
}
.product-shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  color: var(--muted);
  font-size: 0.875rem;
}
.product-shot figcaption > span {
  flex: 1 1 240px;
}
.screenshot-expand {
  color: var(--accent);
  font: 500 0.75rem var(--mono);
  white-space: nowrap;
}
/* The whole figure opens the full-size image through its one link. */
.screenshot-expand::after {
  content: "";
  position: absolute;
  inset: 0;
}
.screenshot-expand:focus-visible {
  outline: none;
}
.screenshot-expand:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: var(--radius);
}
.route-shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  margin-top: 24px;
  align-items: start;
  gap: 24px;
}
/* End below the ping results, before the partially captured MTR table. */
.shot-on-demand .screenshot-frame {
  aspect-ratio: 5 / 4;
}
.shot-on-demand img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 56px;
}
.feature-grid article {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.feature-grid p {
  font-size: 0.9375rem;
  margin-bottom: 0;
}
.evidence-section {
  border-block: 1px solid var(--line);
  background: var(--bg-raised);
}
.evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
}
.evidence-grid p:not(.eyebrow) {
  max-width: 430px;
}

/* Agents */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.agent-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 36px;
  background: var(--panel);
}
.agent-card.user-agent {
  border-top-color: var(--violet);
}
.agent-card .eyebrow {
  margin-bottom: 12px;
}
.user-agent .eyebrow {
  color: var(--violet);
}
.agent-card h3 {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}
.agent-card p {
  max-width: 440px;
}
.agent-card .text-link {
  margin-top: auto;
}
.agent-note {
  font-size: 0.875rem;
}
.closing-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 48px;
  flex-wrap: wrap;
  padding-block: 80px 96px;
  border-top: 1px solid var(--line);
}
.closing-section h2 {
  margin: 0;
}
.closing-actions {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: 56px;
}
.footer-grid h2 {
  font: 500 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 16px;
}
.footer-grid a:not(.brand) {
  display: block;
  width: fit-content;
  color: var(--muted);
  font-size: 0.9375rem;
  padding-block: 4px;
  overflow-wrap: anywhere;
}
.footer-grid a:not(.brand):hover {
  color: var(--accent);
}
.footer-grid p {
  font-size: 0.9375rem;
  margin-bottom: 6px;
}
.footer-intro > .brand {
  margin-bottom: 14px;
}
.footer-intro p {
  max-width: 240px;
}
.footer-subheading {
  margin-top: 28px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-block: 20px;
  color: var(--muted);
  font: 0.75rem/1.5 var(--mono);
}

/* Inner pages */
.page-intro {
  padding-block: 88px 48px;
}
.page-intro > p:last-child {
  max-width: 600px;
  font-size: 1.125rem;
  margin-bottom: 0;
}
.notice {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  margin-bottom: 32px;
}
.notice strong {
  color: var(--text);
  font-weight: 500;
}
.notice-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 600 0.6875rem/1 var(--mono);
  transform: translateY(-1px);
}
.pricing-section {
  padding-bottom: 112px;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.plan-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.plan-price {
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
  margin-bottom: 20px;
}
.plan-price span {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.plan-description {
  flex: 1;
  margin-bottom: 28px;
}
.plan-card .button {
  width: 100%;
}
.comparison-heading {
  margin-top: 88px;
  margin-bottom: 24px;
}
.comparison-heading h2,
.custom-plan h2,
.location-byoy h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  margin-bottom: 12px;
}
.custom-plan {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.custom-plan a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Tables */
.table-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
caption {
  padding: 14px 20px;
  text-align: left;
  color: var(--muted);
  font: 0.75rem/1.5 var(--mono);
  border-bottom: 1px solid var(--line);
}
th,
td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
thead {
  background: var(--panel-2);
}
thead th {
  font-weight: 600;
}
tbody th {
  font-weight: 400;
  color: var(--text-2);
}
td {
  color: var(--text);
}
tbody tr:last-child > * {
  border-bottom: 0;
}
.plan-table tbody th {
  width: 34%;
}
.plan-table td {
  font-family: var(--mono);
  font-size: 0.875rem;
}
.plan-table td.included {
  color: var(--accent);
}

/* Locations */
.locations-section {
  padding-bottom: 96px;
}
.map-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0e151f;
  overflow: hidden;
}
.map-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.map-heading .eyebrow {
  margin: 0;
}
.map-heading > span:last-child {
  font: 0.75rem var(--mono);
  color: var(--muted);
}
.world-map {
  width: 100%;
  height: auto;
}
.land {
  fill: #1c2938;
  stroke: #36475a;
  stroke-width: 0.65;
  stroke-linejoin: round;
}
.map-dot {
  fill: var(--accent);
  pointer-events: none;
}
.map-ring {
  fill: #8ff3d71f;
  stroke: var(--accent);
  stroke-opacity: 0;
  stroke-width: 1.5;
  pointer-events: none;
  transition: fill 0.15s ease, stroke-opacity 0.15s ease;
}
.map-hit {
  fill: transparent;
}
.world-map a:focus {
  outline: none;
}
.world-map a:hover .map-ring,
.world-map a:focus-visible .map-ring,
.world-map a.is-selected .map-ring {
  fill: #8ff3d74d;
  stroke-opacity: 1;
}
.world-map a:focus-visible .map-ring {
  stroke: #fff;
  stroke-width: 2;
}
.world-map a.is-selected .map-dot {
  fill: #fff;
}
.map-caption {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  margin: 0;
}
.location-directory {
  margin-top: 32px;
}
.location-search {
  margin-bottom: 16px;
}
.location-search label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.location-search input {
  width: min(100%, 460px);
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.location-search input::placeholder {
  color: var(--muted);
}
.location-search input:focus-visible {
  outline-offset: 2px;
}
.location-search p {
  margin: 10px 0 0;
  font: 0.75rem var(--mono);
}
.location-table-scroll {
  max-height: 36rem;
  scroll-padding-top: 4rem;
}
.location-table {
  min-width: 640px;
}
.location-table th,
.location-table td {
  padding: 10px 20px;
}
.location-table td {
  color: var(--muted);
}
.location-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  z-index: 1;
}
.location-table tbody th {
  font-weight: 500;
  color: var(--text);
}
.location-table a {
  display: flex;
  align-items: center;
  min-height: 36px;
}
.location-table tr {
  scroll-margin-top: 4rem;
}
.location-table tr.is-selected,
.location-table tr:target {
  background: #8ff3d714;
  box-shadow: inset 2px 0 var(--accent);
}
.location-table tr:focus-visible {
  outline-offset: -2px;
}
.location-byoy {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* Documents */
.document {
  padding-block: 88px 120px;
  min-height: 55vh;
}
.document h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.prose {
  max-width: 720px;
  overflow-wrap: break-word;
}
.prose p,
.prose li {
  color: var(--text-2);
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin: 48px 0 16px;
}
.prose h3 {
  margin-top: 32px;
}
.prose li + li {
  margin-top: 6px;
}

@media (max-width: 1100px) {
  .container {
    width: calc(100% - 64px);
  }
  .header-inner {
    gap: 32px;
  }
  .nav-links {
    gap: 20px;
  }
  .hero {
    gap: 40px;
  }
  .mtr-row {
    grid-template-columns: 2ch minmax(0, 1fr) 5ch 6ch 56px;
  }
  .mtr-asn {
    display: none;
  }
  .feature-grid {
    gap: 28px;
  }
  .evidence-grid {
    gap: 40px;
  }
  .plan-card {
    padding: 24px;
  }
}
@media (max-width: 900px) {
  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
    min-height: 72px;
  }
  .main-nav {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .has-js .menu-toggle {
    display: inline-flex;
  }
  .has-js .main-nav {
    display: none;
  }
  .has-js .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 8px;
  }
  .has-js .nav-links {
    flex-direction: column;
    gap: 0;
  }
  .has-js .nav-links a {
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    color: var(--text);
  }
  .nav-actions {
    margin-left: 0;
  }
  .has-js .nav-actions .button {
    flex: 1;
    min-height: 44px;
  }
  .has-js .nav-actions .button:not(.button-primary, .button-pending) {
    border-color: var(--line-strong);
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 64px 16px;
    gap: 56px;
  }
  .hero h1 {
    font-size: clamp(3rem, 10vw, 5rem);
  }
  .hero-description {
    max-width: 560px;
  }
  .mtr-row {
    grid-template-columns: 2ch minmax(0, 1fr) 7ch 5ch 6ch 72px;
  }
  .mtr-asn {
    display: block;
  }
  .section {
    padding-block: 80px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .section-heading > p {
    justify-self: start;
    max-width: 600px;
  }
  .evidence-grid {
    grid-template-columns: 1fr;
  }
  .evidence-grid p:not(.eyebrow) {
    max-width: 600px;
  }
  .agent-card {
    padding: 28px;
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-intro {
    grid-column: 1 / -1;
  }
  .plan-grid {
    gap: 12px;
  }
  .plan-card {
    padding: 20px;
  }
  .plan-price {
    font-size: 2.25rem;
  }
}
@media (max-width: 680px) {
  .container {
    width: calc(100% - 40px);
  }
  .brand {
    font-size: 1.375rem;
  }
  .hero {
    padding-block: 48px 8px;
    gap: 44px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.5rem);
    margin-bottom: 24px;
  }
  .hero-description {
    font-size: 1.0625rem;
  }
  .hero-actions {
    margin-block: 28px 24px;
  }
  .mtr {
    font-size: 0.75rem;
  }
  .mtr-head,
  .mtr-foot {
    padding-inline: 14px;
  }
  .mtr-foot {
    flex-direction: column;
    gap: 4px;
  }
  .mtr-row {
    grid-template-columns: 2ch minmax(0, 1fr) 4ch 5ch;
    gap: 10px;
    padding-inline: 14px;
  }
  .mtr-asn,
  .mtr-row .mtr-bar {
    display: none;
  }
  .path-row {
    gap: 8px;
    padding-inline: 14px;
  }
  .latency-legend,
  .corr-graph {
    margin-inline: 14px;
    padding-inline: 0;
  }
  .latency-chart,
  .latency-x {
    margin-inline: 14px;
    margin-left: 60px;
  }
  .section {
    padding-block: 64px;
  }
  .section-heading {
    margin-bottom: 32px;
  }
  h2 {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }
  .route-shots {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  /* Keep the incident visible on narrow screens without flattening the chart. */
  .shot-overview .screenshot-frame {
    aspect-ratio: 4 / 3;
  }
  .shot-overview img {
    height: 100%;
    object-fit: cover;
    object-position: right top;
  }
  .product-shot figcaption {
    padding: 14px 16px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
  }
  .agent-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .agent-card {
    padding: 24px;
  }
  .agent-card h3 {
    font-size: 1.5rem;
  }
  .closing-section {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 56px 72px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 44px;
    gap: 32px 20px;
  }
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }
  .page-intro {
    padding-block: 56px 32px;
  }
  .page-intro h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }
  .page-intro > p:last-child {
    font-size: 1.0625rem;
  }
  .notice {
    font-size: 0.875rem;
    padding: 14px 16px;
  }
  .plan-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .plan-card {
    padding: 24px;
  }
  .plan-description {
    margin-bottom: 20px;
  }
  .comparison-heading {
    margin-top: 56px;
  }
  .pricing-section {
    padding-bottom: 72px;
  }

  /* Plan comparison: feature label on its own line, one value per plan below. */
  .plan-table,
  .plan-table caption,
  .plan-table thead,
  .plan-table tbody {
    display: block;
  }
  .plan-table tr {
    display: grid;
    grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .plan-table tbody tr:last-child {
    border-bottom: 0;
  }
  .plan-table th,
  .plan-table td {
    padding: 12px 16px;
    border: 0;
  }
  .plan-table thead th {
    font-size: 0.875rem;
  }
  .plan-table thead th:first-child {
    display: none;
  }
  .plan-table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding-bottom: 2px;
    font-size: 0.875rem;
    color: var(--muted);
  }
  .plan-table td {
    padding-top: 2px;
  }

  /* Location directory: one stacked entry per location, scrolling with the page. */
  .location-table-scroll {
    max-height: none;
  }
  caption {
    padding-inline: 16px;
  }
  .location-table,
  .location-table caption,
  .location-table tbody {
    display: block;
    min-width: 0;
  }
  .location-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .location-table tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .location-table tbody tr:last-child {
    border-bottom: 0;
  }
  .location-table th,
  .location-table td {
    padding: 0;
    border: 0;
  }
  .location-table tbody th {
    flex-basis: 100%;
  }
  .location-table a {
    min-height: 32px;
  }
  .location-table td {
    font-size: 0.875rem;
  }
  .location-table td + td::before {
    content: "·";
    margin-right: 8px;
    color: var(--line-strong);
  }
  .location-table td[colspan]::before {
    content: none;
  }
  .map-heading {
    padding: 14px 16px;
  }
  .map-caption {
    padding: 12px 16px;
  }
  .document {
    padding-block: 56px 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}