@import "./tokens.css";

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(244, 247, 249, 0.82), rgba(255, 255, 255, 0.96) 520px),
    var(--gr-paper);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0;
}

body > main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a:hover {
  color: var(--green-ink);
}

.brand-word span,
.hero-equation b,
.hero-equation em,
.stage-caption span,
.requirement-detail span {
  color: var(--green-ink);
  background: linear-gradient(180deg, var(--green) 0%, var(--green-ink) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

code {
  font-family: var(--mono);
  color: var(--ink);
  background: var(--gr-ice-warm);
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: 92px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 0 34px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.brand-word {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-word span {
  color: var(--green-ink);
}

.brand-sub,
.nav,
.eyebrow,
.label,
.site-footer,
.hero-meta,
.protocol-scrubber,
.console-head,
.stage-rail,
.stage-caption,
.wave-step,
.guarantee-table,
.row-number,
.requirement-grid,
.package-lane span {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
}

.brand-sub {
  color: var(--quiet);
  font-size: 11px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.nav a {
  padding: 10px 8px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav a[aria-current="page"],
.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--green);
}

.hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.84fr) minmax(620px, 1.16fr);
  gap: 26px 64px;
  align-items: start;
  max-width: 1500px;
  min-height: 720px;
  margin: 0 auto;
  padding: 42px 34px 48px;
}

.hero > * {
  min-width: 0;
}

.hero-copy {
  grid-column: 1;
  grid-row: 2;
  max-width: 630px;
  padding-top: 12px;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  font-size: 98px;
  line-height: 0.86;
}

.hero-equation {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.08em;
  width: 100%;
  max-width: none;
  padding-bottom: 0.18em;
  line-height: 1.14;
  text-align: center;
}

.hero-equation b,
.hero-equation em {
  font-style: normal;
}

.hero-equation i {
  display: inline-block;
  margin-left: 0.04em;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 0.18em;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

.hero-meta {
  margin: 0 0 18px;
  color: var(--copper);
  font-size: 13px;
}

.hero-lede,
.route-page > p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.hero-lede {
  max-width: 610px;
  margin: 0;
}

.hero-lede strong {
  color: var(--ink);
  font-weight: 700;
}

.hero-actions,
.route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.button span {
  margin-left: 8px;
}

.button.secondary {
  background: transparent;
  color: var(--ink);
}

.button:hover {
  border-color: var(--green-ink);
  background: var(--green);
  color: var(--ink);
}

.lang-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(7, 18, 30, 0.12);
  color: var(--quiet);
  font-size: 13px;
}

.lang-row span,
.lang-row a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lang-row span {
  flex: 1 0 100%;
  color: var(--quiet);
}

.lang-row a {
  color: var(--ink);
  border-bottom: 2px solid var(--strong-line);
}

.lang-row a:hover {
  border-bottom-color: var(--green-ink);
}

.protocol-console {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  border: 1px solid rgba(7, 18, 30, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 18%, rgba(200, 255, 0, 0.13), transparent 20%),
    radial-gradient(circle at 30% 80%, rgba(255, 45, 117, 0.06), transparent 24%),
    #ffffff;
  box-shadow: 0 32px 80px rgba(7, 18, 30, 0.14);
  overflow: hidden;
}

.console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.protocol-scrubber {
  display: flex;
  align-items: center;
  gap: 8px;
}

.protocol-scrubber button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(7, 18, 30, 0.18);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.protocol-scrubber button[aria-selected="true"] {
  border-color: var(--green-ink);
  background: var(--green);
}

.console-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(155px, 0.32fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-height: 420px;
  padding: 20px 18px 10px;
}

.stage-rail {
  display: grid;
  grid-template-rows: repeat(4, minmax(74px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.stage-rail li {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 12px 12px 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
}

.stage-rail li::before {
  counter-increment: stage;
  content: counter(stage);
  position: absolute;
  top: 14px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(7, 18, 30, 0.22);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
}

.stage-rail b {
  color: var(--ink);
  font-size: 12px;
}

.stage-rail span {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}

.console-body[data-stage-view="0"] [data-rail-stage="0"],
.console-body[data-stage-view="1"] [data-rail-stage="1"],
.console-body[data-stage-view="2"] [data-rail-stage="2"],
.console-body[data-stage-view="3"] [data-rail-stage="3"] {
  border-color: rgba(155, 196, 0, 0.36);
  background: rgba(200, 255, 0, 0.14);
  color: var(--ink);
}

.protocol-graph {
  width: 100%;
  min-height: 390px;
}

.message-key {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: rgba(7, 18, 30, 0.7);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
}

.message-key span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.message-key i,
.message-key svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.activation-key {
  right: 24px;
  bottom: 18px;
}

.wave-key {
  right: 24px;
  bottom: 18px;
}

.key-start {
  border: 3px solid var(--green-ink);
  border-radius: 999px;
  background: white;
}

.key-data {
  border: 2px solid var(--green-ink);
  border-radius: 999px;
  background: var(--green);
}

.key-complete {
  position: relative;
  border: 2px solid var(--green);
  border-radius: 3px;
  background: var(--ink);
}

.key-complete::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 6px;
  height: 3px;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  transform: rotate(-45deg);
}

.message-key .key-dirty {
  width: 24px;
  height: 18px;
  overflow: visible;
}

.message-key .key-dirty path {
  fill: none;
  stroke: var(--copper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}


/* Legacy seven-scene GraphReFly showcase, ported from the previous public visual reference. */
.legacy-showcase {
  --navy: var(--gr-paper);
  --paper: var(--gr-paper);
  --ice: var(--gr-ink);
  --ice-warm: var(--gr-ice-warm);
  --ink: var(--gr-ink);
  --ink-mute: var(--gr-muted);
  --ink-faint: var(--gr-quiet);
  --lime: var(--gr-green);
  --lime-deep: var(--gr-green-ink);
  --rule: var(--gr-line);
  --rule-deep: var(--gr-strong-line);
  --red: var(--gr-red);
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--paper);
  box-shadow: 0 32px 80px rgba(7, 18, 30, 0.18);
}

.legacy-showcase .gr-showcase-frame {
  width: 100%;
  height: 460px;
  border-radius: 8px 8px 0 0;
  aspect-ratio: auto;
  min-height: 0;
  box-shadow: none;
}

.legacy-showcase .gr-showcase-stage {
  min-height: 100%;
}

.legacy-showcase .gr-showcase-label {
  bottom: 24px;
  left: 24px;
}

.legacy-showcase .gr-showcase-chips {
  right: 24px;
  bottom: 24px;
  width: 150px;
  height: 32px;
}

.legacy-showcase .gr-showcase-chip {
  position: absolute;
  right: 0;
  bottom: 0;
}

.legacy-showcase .gr-showcase-tagline {
  max-width: calc(100% - 175px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-showcase .gr-showcase-caption {
  position: relative;
  min-height: 86px;
  border-top: 0;
  background: var(--paper);
}

.legacy-showcase .gr-cap {
  position: absolute;
  inset: 18px 24px 20px;
  margin: 0;
  color: rgba(7,18,30,0.68);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
}

.legacy-showcase .gr-cap strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ice);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ─── SHOWCASE ─── */
.gr-showcase {
  margin: 60px auto 0;
  max-width: 1300px; padding: 0 40px;
  position: relative;
}
.gr-showcase-frame {
  position: relative;
  background: var(--navy);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(7,18,30,0.03) inset,
    0 80px 100px -50px rgba(7,18,30,0.40),
    0 30px 50px -30px rgba(7,18,30,0.30);
  aspect-ratio: 16/8;
}
.gr-showcase-frame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 40%, rgba(200,255,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(255,45,117,0.05) 0%, transparent 60%);
}
.gr-showcase-stage { width: 100%; height: 100%; position: relative; }
.gr-stage-svg { width: 100%; height: 100%; display: block; }

/* ── shared node / edge primitives ── */
.gr-prod-shape { fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.62); stroke-width: 1.6; }
.gr-der-shape  { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); stroke-width: 1.5; }
.gr-edge       { stroke: rgba(7,18,30,0.18); stroke-width: 1.2; fill: none; }
.gr-nl {
  fill: rgba(7,18,30,0.7);
  font-family: var(--mono);
  font-size: 11px;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

/* ── stage container visibility (single 48s master) ── */
.gr-st { opacity: 0; }
.gr-st-1 { animation: gr-vis-1 48s infinite linear; }
.gr-st-2 { animation: gr-vis-2 48s infinite linear; }
.gr-st-3 { animation: gr-vis-3 48s infinite linear; }
.gr-st-4 { animation: gr-vis-4 48s infinite linear; }
.gr-st-5 { animation: gr-vis-5 48s infinite linear; }
.gr-st-6 { animation: gr-vis-6 48s infinite linear; }
.gr-st-7 { animation: gr-vis-7 48s infinite linear; }
/* stage 8 = return to stage 1 (loop seam); stage 1 fades back in at 96-100% */
@keyframes gr-vis-1 {
  0%, 24.0% { opacity: 1; }
  25.0%, 95.5% { opacity: 0; }
  96.0%, 100% { opacity: 1; }
}
@keyframes gr-vis-2 {
  0%, 24.31% { opacity: 0; }
  25.62%, 34.38% { opacity: 1; }
  35.69%, 100% { opacity: 0; }
}
@keyframes gr-vis-3 {
  0%, 34.81% { opacity: 0; }
  36.12%, 44.88% { opacity: 1; }
  46.19%, 100% { opacity: 0; }
}
@keyframes gr-vis-4 {
  0%, 45.31% { opacity: 0; }
  46.62%, 55.38% { opacity: 1; }
  56.69%, 100% { opacity: 0; }
}
@keyframes gr-vis-5 {
  0%, 55.81% { opacity: 0; }
  57.12%, 72% { opacity: 1; }
  73.31%, 100% { opacity: 0; }
}
@keyframes gr-vis-6 {
  0%, 72.44% { opacity: 0; }
  73.75%, 84.25% { opacity: 1; }
  85.56%, 100% { opacity: 0; }
}
@keyframes gr-vis-7 {
  0%, 84.69% { opacity: 0; }
  86%, 94.75% { opacity: 1; }
  96.06%, 100% { opacity: 0; }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 1 — connection lifecycle      */
/* window: 0–12s (0–25%). beats:                 */
/*   initial state        0–1.4s   (0–3%)        */
/*     upstream colored, dn+edge GRAYED          */
/*   START emit → arrive  1.4–2.9s (3–6%)        */
/*   un-gray dn + edge    2.9–3.4s (6–7%)        */
/*   DIRTY1 emit → arrive 3.8–4.6s (8–9.5%)      */
/*   DATA1  emit → arrive 4.8–5.5s (10–11.5%)    */
/*   DIRTY2 emit → arrive 6.2–6.7s (13–14%)      */
/*   DATA2  emit → arrive 7.2–7.9s (15–16.5%)    */
/*   COMPLETE emit        8.6s     (18%)         */
/*     upstream grays at this moment             */
/*   COMPLETE arrives     9.6s     (20%)         */
/*     downstream + edge gray at this moment     */
/*   stable gray          10–12s   (21–25%)      */
/* ═════════════════════════════════════════════ */

/* Upstream node — clean blue → DIRTY (yellow dotted) before each DIRTY emit, back to clean
   after emitting DATA, gray after COMPLETE; returns to clean at loop seam. */
.gr-s1-up-shape {
  fill: rgba(7,18,30,0.10);
  stroke: rgba(7,18,30,0.62);
  stroke-width: 1.5;
  animation: gr-s1-up-shape 48s infinite linear;
}
@keyframes gr-s1-up-shape {
  0%, 7.5% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }       /* clean */
  7.7%, 9.9% { fill: url(#gr-dirty); stroke: var(--copper); }              /* DIRTY (before emitting DIRTY1) */
  10.1%, 12.5% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }   /* clean after DATA1 emit */
  12.7%, 14.9% { fill: url(#gr-dirty); stroke: var(--copper); }            /* DIRTY (before emitting DIRTY2) */
  15.1%, 17.7% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }   /* clean after DATA2 emit */
  19%, 95.5% { fill: rgba(7,18,30,0.06); stroke: rgba(7,18,30,0.24); }
  96.5%, 100% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }
}
.gr-s1-up-label { animation: gr-s1-up-label 48s infinite linear; }
@keyframes gr-s1-up-label {
  0%, 17.5% { fill: rgba(7,18,30,0.7); }
  19%, 95.5% { fill: rgba(7,18,30,0.32); }
  96.5%, 100% { fill: rgba(7,18,30,0.7); }
}

/* Downstream node — gray until START arrives → clean → DIRTY when DIRTY arrives → fn-running (green)
   when DATA arrives → clean after fn → gray when COMPLETE arrives. */
.gr-s1-dn-shape {
  fill: rgba(7,18,30,0.06);
  stroke: rgba(7,18,30,0.24);
  stroke-width: 1.5;
  animation: gr-s1-dn-shape 48s infinite linear;
}
@keyframes gr-s1-dn-shape {
  0%, 6% { fill: rgba(7,18,30,0.06); stroke: rgba(7,18,30,0.24); }    /* gray (not subscribed) */
  7%, 9.3% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }                  /* clean (after START) */
  9.5%, 11.3% { fill: url(#gr-dirty); stroke: var(--copper); }                       /* DIRTY1 received */
  11.5%, 12.3% { fill: rgba(200,255,0,0.28); stroke: rgba(7,18,30,0.72); stroke-width: 2; }              /* fn1 running (DATA1 arrived) */
  12.5%, 13.8% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }              /* clean after fn1 */
  14%, 16.3% { fill: url(#gr-dirty); stroke: var(--copper); }                        /* DIRTY2 received */
  16.5%, 17.3% { fill: rgba(200,255,0,0.28); stroke: rgba(7,18,30,0.72); stroke-width: 2; }              /* fn2 running */
  17.5%, 19.8% { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); }              /* clean after fn2 */
  21%, 100% { fill: rgba(7,18,30,0.06); stroke: rgba(7,18,30,0.24); } /* gray (COMPLETE) */
}
.gr-s1-dn-label { animation: gr-s1-dn-label 48s infinite linear; }
@keyframes gr-s1-dn-label {
  0%, 6% { fill: rgba(7,18,30,0.32); }
  7%, 20% { fill: rgba(7,18,30,0.7); }
  21%, 100% { fill: rgba(7,18,30,0.32); }
}

/* Edge — opacity gated by wrapper group; dim 22% when grayed, full when alive */
.gr-s1-edge { stroke: rgba(7,18,30,0.62); stroke-width: 1.5; }
.gr-s1-edge-grp { animation: gr-s1-edge-grp 48s infinite linear; }
@keyframes gr-s1-edge-grp {
  0%, 6% { opacity: 0.22; }
  7%, 20% { opacity: 1; }
  21%, 100% { opacity: 0.22; }
}

/* fn(...) flash on each DATA arrival */
.gr-s1-fn {
  fill: var(--lime-deep);
  font-family: var(--mono); font-size: 10.5px; text-anchor: middle;
  opacity: 0;
  animation: gr-s1-fn 48s infinite linear;
}
@keyframes gr-s1-fn {
  0%, 11.2% { opacity: 0; }
  11.5%, 12.4% { opacity: 1; }
  12.7%, 16.4% { opacity: 0; }
  16.6%, 17.5% { opacity: 1; }
  17.8%, 100% { opacity: 0; }
}

/* Message labels above each travelling glyph */
.gr-s1-msg-lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  text-anchor: middle;
  letter-spacing: 0.10em;
  font-weight: 600;
}
.gr-s1-lbl-start, .gr-s1-lbl-complete { fill: rgba(7,18,30,0.68); }
.gr-s1-lbl-dirty { fill: var(--copper); }
.gr-s1-lbl-data { fill: var(--lime-deep); }
.gr-s1-dot-slate { fill: rgba(7,18,30,0.68); }
.gr-s1-dot-data { fill: var(--lime); filter: drop-shadow(0 0 8px rgba(200,255,0,0.62)); }
.gr-s1-flag-pole { stroke: var(--copper); stroke-width: 1.4; stroke-linecap: round; }
.gr-s1-flag-fabric { fill: var(--copper); }

/* Message group transforms — each travels from upstream center (-260) to downstream center (260) */
.gr-s1-msg { opacity: 0; }
.gr-s1-msg-start    { animation: gr-s1-msg-start    48s infinite linear; }
.gr-s1-msg-dirty1   { animation: gr-s1-msg-dirty1   48s infinite linear; }
.gr-s1-msg-data1    { animation: gr-s1-msg-data1    48s infinite linear; }
.gr-s1-msg-dirty2   { animation: gr-s1-msg-dirty2   48s infinite linear; }
.gr-s1-msg-data2    { animation: gr-s1-msg-data2    48s infinite linear; }
.gr-s1-msg-complete { animation: gr-s1-msg-complete 48s infinite linear; }

/* START emit 3% → arrive 6% (1.44s travel) */
@keyframes gr-s1-msg-start {
  0%, 2.7% { opacity: 0; transform: translateX(-200px); }
  3% { opacity: 1; transform: translateX(-200px); }
  6% { opacity: 1; transform: translateX(200px); }
  6.3%, 100% { opacity: 0; transform: translateX(200px); }
}
/* DIRTY1 emit 8% → arrive 9.5% (0.72s) */
@keyframes gr-s1-msg-dirty1 {
  0%, 7.7% { opacity: 0; transform: translateX(-200px); }
  8% { opacity: 1; transform: translateX(-200px); }
  9.5% { opacity: 1; transform: translateX(200px); }
  9.8%, 100% { opacity: 0; transform: translateX(200px); }
}
/* DATA1 emit 10% → arrive 11.5% */
@keyframes gr-s1-msg-data1 {
  0%, 9.7% { opacity: 0; transform: translateX(-200px); }
  10% { opacity: 1; transform: translateX(-200px); }
  11.5% { opacity: 1; transform: translateX(200px); }
  11.8%, 100% { opacity: 0; transform: translateX(200px); }
}
/* DIRTY2 emit 13% → arrive 14% */
@keyframes gr-s1-msg-dirty2 {
  0%, 12.7% { opacity: 0; transform: translateX(-200px); }
  13% { opacity: 1; transform: translateX(-200px); }
  14% { opacity: 1; transform: translateX(200px); }
  14.3%, 100% { opacity: 0; transform: translateX(200px); }
}
/* DATA2 emit 15% → arrive 16.5% */
@keyframes gr-s1-msg-data2 {
  0%, 14.7% { opacity: 0; transform: translateX(-200px); }
  15% { opacity: 1; transform: translateX(-200px); }
  16.5% { opacity: 1; transform: translateX(200px); }
  16.8%, 100% { opacity: 0; transform: translateX(200px); }
}
/* COMPLETE emit 18% → arrive 20% (slower, 0.96s travel for emphasis) */
@keyframes gr-s1-msg-complete {
  0%, 17.7% { opacity: 0; transform: translateX(-200px); }
  18% { opacity: 1; transform: translateX(-200px); }
  20% { opacity: 1; transform: translateX(200px); }
  20.3%, 100% { opacity: 0; transform: translateX(200px); }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 2 — diamond resolution        */
/* window: 12–17s (25–35.42%). beats:            */
/*   25.5%  A becomes DIRTY (before emit)        */
/*   26.0%  A emits DIRTY → B (and → C @ 26.5%)  */
/*   27.0%  B/C receive DIRTY → become DIRTY     */
/*   27.5%  B emits DIRTY → D (and C @ 27.7%)    */
/*   28.0%  D receives DIRTY → becomes DIRTY     */
/*   28.5%  A emits DATA → B and C in parallel   */
/*          A clears DIRTY after emitting        */
/*   29.0%  DATA arrives at B & C → both invoke  */
/*          C's fn is fast, B's fn is slow       */
/*   29.7%  C's fn done → C clears → DATA → D    */
/*   30.5%  C's DATA arrives at D (1/2 inputs)   */
/*   31.4%  B's fn done → B clears → DATA → D    */
/*   32.2%  B's DATA arrives at D (2/2 → fn)     */
/*   33.2%  D's fn done → D clears DIRTY         */
/* ═════════════════════════════════════════════ */

/* A — producer hexagon */
.gr-s2-A-shape {
  fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.62); stroke-width: 1.6;
  animation: gr-s2-A 48s infinite linear;
}
@keyframes gr-s2-A {
  0%, 25.3% { fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.62); }
  25.5%, 28.9% { fill: url(#gr-dirty); stroke: var(--copper); }       /* DIRTY before emit */
  29.1%, 100% { fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.62); } /* clean after DATA emit */
}

/* B — derived diamond, slow fn */
.gr-s2-B-shape {
  fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); stroke-width: 1.5;
  animation: gr-s2-B 48s infinite linear;
}
@keyframes gr-s2-B {
  0%, 26.9% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }
  27%, 29.1% { fill: url(#gr-dirty); stroke: var(--copper); }            /* DIRTY received → forwarded */
  29.2%, 31.3% { fill: rgba(200,255,0,0.28); stroke: rgba(7,18,30,0.72); stroke-width: 2; }   /* fn running (slow) */
  31.5%, 100% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }    /* clean after fn done */
}

/* C — derived diamond, fast fn */
.gr-s2-C-shape {
  fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); stroke-width: 1.5;
  animation: gr-s2-C 48s infinite linear;
}
@keyframes gr-s2-C {
  0%, 27.1% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }
  27.2%, 29.1% { fill: url(#gr-dirty); stroke: var(--copper); }
  29.2%, 29.6% { fill: rgba(200,255,0,0.28); stroke: rgba(7,18,30,0.72); stroke-width: 2; }   /* fast fn */
  29.8%, 100% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }
}

/* D — derived diamond, joins B+C */
.gr-s2-D-shape {
  fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); stroke-width: 1.5;
  animation: gr-s2-D-shape 48s infinite linear;
}
@keyframes gr-s2-D-shape {
  0%, 27.9% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }
  28%, 32.1% { fill: url(#gr-dirty); stroke: var(--copper); }            /* DIRTY (waiting for both DATAs) */
  32.3%, 33.1% { fill: rgba(200,255,0,0.28); stroke: rgba(7,18,30,0.72); stroke-width: 2; }   /* fn running */
  33.3%, 100% { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); }    /* clean after fn */
}

/* D's fn(...) text flash — only when D actually invokes fn */
.gr-s2-fn {
  fill: var(--lime-deep);
  font-family: var(--mono); font-size: 10.5px; text-anchor: middle;
  opacity: 0;
  animation: gr-s2-fn 48s infinite linear;
}
@keyframes gr-s2-fn {
  0%, 32.2% { opacity: 0; }
  32.4%, 33.1% { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}

/* Stage 2 message visuals — same conventions as Stage 1 */
.gr-s2-msg-lbl {
  font-family: var(--mono); font-size: 9.5px; text-anchor: middle;
  letter-spacing: 0.10em; font-weight: 600;
}
.gr-s2-lbl-dirty { fill: var(--copper); }
.gr-s2-lbl-data { fill: var(--lime-deep); }
.gr-s2-dot-data { fill: var(--lime); filter: drop-shadow(0 0 6px rgba(200,255,0,0.56)); }
.gr-s2-flag-pole { stroke: var(--copper); stroke-width: 1.4; stroke-linecap: round; }
.gr-s2-flag-fabric { fill: var(--copper); }

/* Message group transforms — each <g> wraps glyph + label */
.gr-s2-msg { opacity: 0; }
.gr-s2-d-AB { animation: gr-s2-d-AB 48s infinite linear; }
.gr-s2-d-AC { animation: gr-s2-d-AC 48s infinite linear; }
.gr-s2-d-BD { animation: gr-s2-d-BD 48s infinite linear; }
.gr-s2-d-CD { animation: gr-s2-d-CD 48s infinite linear; }
.gr-s2-D-AB { animation: gr-s2-D-AB 48s infinite linear; }
.gr-s2-D-AC { animation: gr-s2-D-AC 48s infinite linear; }
.gr-s2-D-BD { animation: gr-s2-D-BD 48s infinite linear; }
.gr-s2-D-CD { animation: gr-s2-D-CD 48s infinite linear; }

/* DIRTY A→B  beat 26-27% */
@keyframes gr-s2-d-AB {
  0%, 25.9% { opacity: 0; transform: translate(0px, -120px); }
  26% { opacity: 1; transform: translate(0px, -120px); }
  27% { opacity: 1; transform: translate(-180px, 0px); }
  27.1%, 100% { opacity: 0; transform: translate(-180px, 0px); }
}
/* DIRTY A→C  beat 26.5-27.2% (slight stagger after A→B) */
@keyframes gr-s2-d-AC {
  0%, 26.4% { opacity: 0; transform: translate(0px, -120px); }
  26.5% { opacity: 1; transform: translate(0px, -120px); }
  27.2% { opacity: 1; transform: translate(180px, 0px); }
  27.3%, 100% { opacity: 0; transform: translate(180px, 0px); }
}
/* DIRTY B→D  beat 27.5-28% */
@keyframes gr-s2-d-BD {
  0%, 27.4% { opacity: 0; transform: translate(-180px, 0px); }
  27.5% { opacity: 1; transform: translate(-180px, 0px); }
  28% { opacity: 1; transform: translate(0px, 120px); }
  28.1%, 100% { opacity: 0; transform: translate(0px, 120px); }
}
/* DIRTY C→D  beat 27.7-28.2% */
@keyframes gr-s2-d-CD {
  0%, 27.6% { opacity: 0; transform: translate(180px, 0px); }
  27.7% { opacity: 1; transform: translate(180px, 0px); }
  28.2% { opacity: 1; transform: translate(0px, 120px); }
  28.3%, 100% { opacity: 0; transform: translate(0px, 120px); }
}
/* DATA A→B  beat 28.5-29% (parallel with A→C) */
@keyframes gr-s2-D-AB {
  0%, 28.4% { opacity: 0; transform: translate(0px, -120px); }
  28.5% { opacity: 1; transform: translate(0px, -120px); }
  29% { opacity: 1; transform: translate(-180px, 0px); }
  29.1%, 100% { opacity: 0; transform: translate(-180px, 0px); }
}
/* DATA A→C  beat 28.5-29% (parallel with A→B) */
@keyframes gr-s2-D-AC {
  0%, 28.4% { opacity: 0; transform: translate(0px, -120px); }
  28.5% { opacity: 1; transform: translate(0px, -120px); }
  29% { opacity: 1; transform: translate(180px, 0px); }
  29.1%, 100% { opacity: 0; transform: translate(180px, 0px); }
}
/* DATA C→D  beat 29.7-30.5% (C's fast fn done first) */
@keyframes gr-s2-D-CD {
  0%, 29.6% { opacity: 0; transform: translate(180px, 0px); }
  29.7% { opacity: 1; transform: translate(180px, 0px); }
  30.5% { opacity: 1; transform: translate(0px, 120px); }
  30.6%, 100% { opacity: 0; transform: translate(0px, 120px); }
}
/* DATA B→D  beat 31.4-32.2% (B's slow fn done later) */
@keyframes gr-s2-D-BD {
  0%, 31.3% { opacity: 0; transform: translate(-180px, 0px); }
  31.4% { opacity: 1; transform: translate(-180px, 0px); }
  32.2% { opacity: 1; transform: translate(0px, 120px); }
  32.3%, 100% { opacity: 0; transform: translate(0px, 120px); }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 3 — node anatomy              */
/* window: 17–22s (35.42–45.83%). beats:         */
/*   zoom in big rect    35.42–37.88%            */
/*   up/down ports reveal 38–39%                 */
/*   cache reveals        39.5–40%               */
/*   version reveals      40.5–41%               */
/*   guard reveals        41.5–42%               */
/*   all settled          42–44.88%              */
/*   zoom out             44.88–45.83%           */
/* ═════════════════════════════════════════════ */

/* Big rounded-rect node + everything inside zooms in/out together */
.gr-s3-node-wrap {
  transform-origin: center;
  animation: gr-s3-node-zoom 48s infinite linear;
}
@keyframes gr-s3-node-zoom {
  0%, 34.81% { transform: scale(0.05); opacity: 0; }
  36.12% { transform: scale(0.6); opacity: 0.6; }
  37.88% { transform: scale(1); opacity: 1; }
  44.88% { transform: scale(1); opacity: 1; }
  45.57%, 100% { transform: scale(0.05); opacity: 0; }
}
.gr-s3-node {
  fill: rgba(7,18,30,0.08);
  stroke: rgba(7,18,30,0.62);
  stroke-width: 1.6;
}

/* fn(…) anatomy = nested rings at the heart */
.gr-s3-fn-ring { fill: none; stroke-width: 1.4; }
.gr-s3-fn-ring-3 { stroke: rgba(7,18,30,0.30); }
.gr-s3-fn-ring-2 { stroke: rgba(7,18,30,0.52); }
.gr-s3-fn-ring-1 { stroke: rgba(7,18,30,0.72); fill: rgba(7,18,30,0.12); }
.gr-s3-fn-center {
  fill: var(--ice);
  font-family: var(--display); font-weight: 700;
  font-size: 18px; text-anchor: middle;
  letter-spacing: -0.02em;
}

/* Inner badges (cache / version / guard) — icon + text, no chrome box */
.gr-s3-tag { opacity: 0; }
.gr-s3-tag-cache { animation: gr-s3-tag-cache 48s infinite linear; }
.gr-s3-tag-ver   { animation: gr-s3-tag-ver   48s infinite linear; }
.gr-s3-tag-guard { animation: gr-s3-tag-guard 48s infinite linear; }
.gr-s3-tag-text {
  fill: var(--ice);
  font-family: var(--mono); font-size: 11.5px;
  text-anchor: start; letter-spacing: 0.04em;
}
/* Line-art icons inside each badge */
.gr-s3-icon {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gr-s3-icon-dot { fill: var(--lime); stroke: none; }

/* Reveal sequence: cache @39.5%, version @40.5%, guard @41.5%; all stay until 44.88% */
@keyframes gr-s3-tag-cache {
  0%, 39.3% { opacity: 0; }
  39.8%, 44.88% { opacity: 1; }
  45.4%, 100% { opacity: 0; }
}
@keyframes gr-s3-tag-ver {
  0%, 40.3% { opacity: 0; }
  40.8%, 44.88% { opacity: 1; }
  45.4%, 100% { opacity: 0; }
}
@keyframes gr-s3-tag-guard {
  0%, 41.3% { opacity: 0; }
  41.8%, 44.88% { opacity: 1; }
  45.4%, 100% { opacity: 0; }
}
/* External "↑ UP [deps]" / "↓ DOWN [subs]" ports outside the node */
.gr-s3-port { opacity: 0; animation: gr-s3-port 48s infinite linear; }
.gr-s3-port-line { stroke: rgba(7,18,30,0.85); stroke-width: 2; stroke-linecap: round; }
.gr-s3-port-icon {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gr-s3-port-primary {
  fill: var(--ice);
  font-family: var(--display); font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-anchor: start;
}
.gr-s3-port-secondary {
  fill: rgba(7,18,30,0.55);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.02em;
  text-anchor: start;
}
@keyframes gr-s3-port {
  0%, 38% { opacity: 0; }
  38.7%, 44.88% { opacity: 1; }
  45.4%, 100% { opacity: 0; }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 4 — node roles + Y            */
/* window: 16–21s (38.10–50.00%). beats:         */
/*   center morph state→producer→derived→effect  */
/*     16–18s  (38–43%)                          */
/*   split → Y-shape draws                       */
/*     18–19.5s (43–46.5%)                       */
/*   flow through Y (DIRTY+DATA→derived→effect)  */
/*     19.5–21s (46.5–50%)                       */
/* ═════════════════════════════════════════════ */
.gr-s4-m { transform-origin: center; }
.gr-s4-m-state    { fill: rgba(200,255,0,0.16); stroke: rgba(7,18,30,0.66); stroke-width: 1.7; animation: gr-s4-m-state    48s infinite linear; }
.gr-s4-m-producer { fill: rgba(200,255,0,0.16); stroke: rgba(7,18,30,0.66); stroke-width: 1.7; animation: gr-s4-m-producer 48s infinite linear; }
.gr-s4-m-derived  { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); stroke-width: 1.5; animation: gr-s4-m-derived  48s infinite linear; }
.gr-s4-m-effect   { fill: rgba(255,45,117,0.16); stroke: var(--copper); stroke-width: 1.5; animation: gr-s4-m-effect   48s infinite linear; }
.gr-s4-mlabel { fill: var(--ice); font-family: var(--mono); font-size: 12px; text-anchor: middle; font-weight: 500; }
.gr-s4-ml-state    { animation: gr-s4-m-state    48s infinite linear; }
.gr-s4-ml-producer { animation: gr-s4-m-producer 48s infinite linear; }
.gr-s4-ml-derived  { animation: gr-s4-m-derived  48s infinite linear; }
.gr-s4-ml-effect   { animation: gr-s4-m-effect   48s infinite linear; }
@keyframes gr-s4-m-state {
  0%, 45.75% { opacity: 0; }
  46.01%, 47.06% { opacity: 1; }
  47.32%, 50.12% { opacity: 0; }
  50.56%, 100% { opacity: 0; }
}
@keyframes gr-s4-m-producer {
  0%, 47.15% { opacity: 0; }
  47.41%, 48.11% { opacity: 1; }
  48.38%, 100% { opacity: 0; }
}
@keyframes gr-s4-m-derived {
  0%, 48.2% { opacity: 0; }
  48.46%, 49.16% { opacity: 1; }
  49.43%, 100% { opacity: 0; }
}
@keyframes gr-s4-m-effect {
  0%, 49.25% { opacity: 0; }
  49.51%, 50.12% { opacity: 1; }
  50.39%, 100% { opacity: 0; }
}

.gr-s4-y { opacity: 0; animation: gr-s4-y-show 48s infinite linear; }
@keyframes gr-s4-y-show {
  0%, 50.12% { opacity: 0; }
  51%, 55.81% { opacity: 1; }
  56.25%, 100% { opacity: 0; }
}
.gr-s4-n-state    { fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.66); stroke-width: 1.7; }
.gr-s4-n-producer { fill: rgba(200,255,0,0.14); stroke: rgba(7,18,30,0.66); stroke-width: 1.7; }
.gr-s4-n-derived  { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.62); stroke-width: 1.5; animation: gr-s4-n-derived 48s infinite linear; transform-origin: center; }
.gr-s4-n-effect   { fill: rgba(255,45,117,0.14); stroke: var(--copper); stroke-width: 1.5; animation: gr-s4-n-effect 48s infinite linear; transform-origin: center; transform-box: fill-box; }
@keyframes gr-s4-n-derived {
  0%, 53.62% { fill: rgba(7,18,30,0.08); }
  54.06%, 54.76% { fill: rgba(200,255,0,0.28); }
  55.11%, 100% { fill: rgba(7,18,30,0.08); }
}
@keyframes gr-s4-n-effect {
  0%, 54.94% { fill: rgba(255,45,117,0.14); }
  55.38%, 55.99% { fill: rgba(255,45,117,0.44); }
  56.16%, 100% { fill: rgba(255,45,117,0.14); }
}
.gr-s4-y-fn {
  fill: var(--lime-deep);
  font-family: var(--mono); font-size: 10.5px; text-anchor: middle;
  opacity: 0;
  animation: gr-s4-y-fn 48s infinite linear;
}
@keyframes gr-s4-y-fn {
  0%, 54.15% { opacity: 0; }
  54.41%, 54.85% { opacity: 1; }
  55.11%, 100% { opacity: 0; }
}

.gr-s4-msg { opacity: 0; }
.gr-s4-d-SD, .gr-s4-d-PD {
  fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-dasharray: 3 2;
}
.gr-s4-D-SD, .gr-s4-D-PD, .gr-s4-D-DE {
  fill: var(--lime); filter: drop-shadow(0 0 6px rgba(200,255,0,0.56));
}
.gr-s4-d-SD { animation: gr-s4-d-SD 48s infinite linear; }
.gr-s4-d-PD { animation: gr-s4-d-PD 48s infinite linear; }
.gr-s4-D-SD { animation: gr-s4-D-SD 48s infinite linear; }
.gr-s4-D-PD { animation: gr-s4-D-PD 48s infinite linear; }
.gr-s4-D-DE { animation: gr-s4-D-DE 48s infinite linear; }
/* DIRTY state→derived 46.5–47.0%, src(-220,-80) dst(-30,0) */
@keyframes gr-s4-d-SD {
  0%, 53.1% { opacity: 0; transform: translate(-220px, -80px); }
  53.27% { opacity: 1; transform: translate(-220px, -80px); }
  53.58% { opacity: 1; transform: translate(-30px, 0px); }
  53.71%, 100% { opacity: 0; transform: translate(-30px, 0px); }
}
/* DIRTY producer→derived 46.5–47.0%, src(-220,80) dst(-30,0) */
@keyframes gr-s4-d-PD {
  0%, 53.1% { opacity: 0; transform: translate(-220px, 80px); }
  53.27% { opacity: 1; transform: translate(-220px, 80px); }
  53.58% { opacity: 1; transform: translate(-30px, 0px); }
  53.71%, 100% { opacity: 0; transform: translate(-30px, 0px); }
}
/* DATA state→derived 47.4–47.9% */
@keyframes gr-s4-D-SD {
  0%, 53.89% { opacity: 0; transform: translate(-220px, -80px); }
  54.06% { opacity: 1; transform: translate(-220px, -80px); }
  54.37% { opacity: 1; transform: translate(-30px, 0px); }
  54.5%, 100% { opacity: 0; transform: translate(-30px, 0px); }
}
/* DATA producer→derived 47.4–47.9% */
@keyframes gr-s4-D-PD {
  0%, 53.89% { opacity: 0; transform: translate(-220px, 80px); }
  54.06% { opacity: 1; transform: translate(-220px, 80px); }
  54.37% { opacity: 1; transform: translate(-30px, 0px); }
  54.5%, 100% { opacity: 0; transform: translate(-30px, 0px); }
}
/* DATA derived→effect 48.6–49.2%, src(40,0) dst(200,0) */
@keyframes gr-s4-D-DE {
  0%, 54.94% { opacity: 0; transform: translate(40px, 0px); }
  55.11% { opacity: 1; transform: translate(40px, 0px); }
  55.46% { opacity: 1; transform: translate(200px, 0px); }
  55.64%, 100% { opacity: 0; transform: translate(200px, 0px); }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 5 — graph level               */
/* window: 21–29s (50.00–69.05%). sub-beats:     */
/*   5a populate     50.0–53.6%                  */
/*   5b blueprint+lens 53.6–60.7%                */
/*   5c batch sweep  60.7–65.5%                  */
/*   5d capsules     65.5–69.0%                  */
/* ═════════════════════════════════════════════ */
.gr-s5-edge { animation: gr-s5-edge 48s infinite linear; }
@keyframes gr-s5-edge {
  0%, 56.25% { opacity: 0; }
  58.44% { opacity: 1; stroke: rgba(7,18,30,0.18); }
  59.4% { opacity: 0.5; stroke: rgba(7,18,30,0.10); }
  65.61% { opacity: 1; stroke: rgba(7,18,30,0.18); }
  66.75%, 68.94% { stroke: rgba(255,45,117,0.50); stroke-width: 1.4; }
  69.81%, 72% { stroke: rgba(7,18,30,0.18); stroke-width: 1.2; }
  73.31%, 100% { opacity: 0; }
}
/* Stage 5 mesh = general nodes in far-view → blue circles */
.gr-s5-n {
  fill: rgba(7,18,30,0.72);
  stroke: rgba(147,197,253,0.6);
  stroke-width: 1.2;
  animation: gr-s5-n 48s infinite linear;
}
@keyframes gr-s5-n {
  0%, 56.25% { opacity: 0; }
  58.44% { opacity: 1; fill: rgba(7,18,30,0.72); }
  59.4% { fill: rgba(7,18,30,0.20); }      /* blueprint drain */
  65.61% { fill: rgba(7,18,30,0.72); }
  67.19% { fill: rgba(255,45,117,0.82); }       /* DIRTY pulse during batch */
  68.06% { fill: rgba(255,45,117,0.78); }      /* RESOLVED ripple */
  69.81% { fill: rgba(7,18,30,0.72); }
  72.88% { opacity: 1; }
  73.31%, 100% { opacity: 0; }
}

.gr-s5-lens {
  opacity: 0;
  transform-origin: center;
  animation: gr-s5-lens 48s infinite linear;
}
.gr-s5-lens-ring { fill: none; stroke: rgba(200,255,0,0.85); stroke-width: 1.5; }
.gr-s5-lens-stem { stroke: rgba(200,255,0,0.85); stroke-width: 1.5; stroke-linecap: round; }
@keyframes gr-s5-lens {
  0%, 59.23% { opacity: 0; transform: translate(-220px, -60px); }
  59.75% { opacity: 1; transform: translate(-160px, -60px); }
  61.94% { opacity: 1; transform: translate(20px, 30px); }
  64.12% { opacity: 1; transform: translate(180px, 40px); }
  65% { opacity: 1; transform: translate(180px, 40px); }
  65.61%, 100% { opacity: 0; transform: translate(180px, 40px); }
}

.gr-s5-bracket {
  fill: none; stroke: rgba(255,45,117,0.88); stroke-width: 1.6; opacity: 0;
}
.gr-s5-bracket-l { animation: gr-s5-bracket-l 48s infinite linear; }
.gr-s5-bracket-r { animation: gr-s5-bracket-r 48s infinite linear; }
@keyframes gr-s5-bracket-l {
  0%, 65.61% { opacity: 0; transform: translateX(-40px); }
  66.31% { opacity: 1; transform: translateX(0px); }
  68.94% { opacity: 1; transform: translateX(0px); }
  69.81%, 100% { opacity: 0; transform: translateX(0px); }
}
@keyframes gr-s5-bracket-r {
  0%, 65.61% { opacity: 0; transform: translateX(40px); }
  66.31% { opacity: 1; transform: translateX(0px); }
  68.94% { opacity: 1; transform: translateX(0px); }
  69.81%, 100% { opacity: 0; transform: translateX(0px); }
}

.gr-s5-cap {
  fill: none; stroke-width: 1.6; opacity: 0; stroke-dasharray: 5 4;
}
.gr-s5-cap-a { stroke: rgba(7,18,30,0.72); animation: gr-s5-cap-a 48s infinite linear; }
.gr-s5-cap-b { stroke: rgba(255,45,117,0.85); animation: gr-s5-cap-b 48s infinite linear; }
@keyframes gr-s5-cap-a {
  0%, 69.81% { opacity: 0; }
  70.69% { opacity: 0.9; }
  72.44% { opacity: 0.9; }
  73.31%, 100% { opacity: 0; }
}
@keyframes gr-s5-cap-b {
  0%, 69.99% { opacity: 0; }
  70.86% { opacity: 0.9; }
  72.44% { opacity: 0.9; }
  73.31%, 100% { opacity: 0; }
}

.gr-s5-lbl {
  fill: var(--ice);
  font-family: var(--mono);
  font-size: 11.5px;
  text-anchor: middle;
  letter-spacing: 0.08em;
  opacity: 0;
}
.gr-s5-lbl-describe { animation: gr-s5-lbl-describe 48s infinite linear; }
.gr-s5-lbl-observe  { animation: gr-s5-lbl-observe  48s infinite linear; }
.gr-s5-lbl-batch    { animation: gr-s5-lbl-batch    48s infinite linear; }
.gr-s5-lbl-cap      { animation: gr-s5-lbl-cap      48s infinite linear; }
@keyframes gr-s5-lbl-describe {
  0%, 59.4% { opacity: 0; }
  60.19%, 62.38% { opacity: 0.95; }
  63.25%, 100% { opacity: 0; }
}
@keyframes gr-s5-lbl-observe {
  0%, 62.38% { opacity: 0; }
  63.07%, 65% { opacity: 0.95; }
  65.61%, 100% { opacity: 0; }
}
@keyframes gr-s5-lbl-batch {
  0%, 65.61% { opacity: 0; }
  66.31%, 68.94% { opacity: 0.95; }
  69.81%, 100% { opacity: 0; }
}
@keyframes gr-s5-lbl-cap {
  0%, 69.81% { opacity: 0; }
  70.69%, 72.44% { opacity: 0.95; }
  72.88%, 100% { opacity: 0; }
}

/* ═════════════════════════════════════════════ */
/*           STAGE 6 — orchestrate + messaging   */
/* window: 29–35s (69.05–83.33%). sub-beats:     */
/*   6a pipeline lights L→R  29–31.5s (69–75%)   */
/*   6b hub + cursors        31.5–35s (75–83%)   */
/* ═════════════════════════════════════════════ */
.gr-s6-pn rect { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); stroke-width: 1.5; }
.gr-s6-p1 rect { animation: gr-s6-p1 48s infinite linear; }
.gr-s6-p2 rect { animation: gr-s6-p2 48s infinite linear; }
.gr-s6-p3 rect { animation: gr-s6-p3 48s infinite linear; }
.gr-s6-p4 rect { animation: gr-s6-p4 48s infinite linear; }
@keyframes gr-s6-p1 {
  0%, 73.31% { fill: rgba(7,18,30,0.10); }
  73.75%, 74.45% { fill: rgba(200,255,0,0.52); }
  75.15%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s6-p2 {
  0%, 74.45% { fill: rgba(7,18,30,0.10); }
  74.8%, 75.5% { fill: rgba(200,255,0,0.52); }
  76.2%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s6-p3 {
  0%, 75.5% { fill: rgba(7,18,30,0.10); }
  75.85%, 76.55% { fill: rgba(200,255,0,0.52); }
  77.25%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s6-p4 {
  0%, 76.55% { fill: rgba(7,18,30,0.10); }
  76.9%, 77.6% { fill: rgba(200,255,0,0.52); }
  78.12%, 100% { fill: rgba(7,18,30,0.10); }
}
.gr-s6-cap { fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0; animation: gr-s6-cap 48s infinite linear; }
.gr-s6-cap-l { stroke: rgba(7,18,30,0.58); }
.gr-s6-cap-r { stroke: rgba(255,45,117,0.65); }
@keyframes gr-s6-cap {
  0%, 72.88% { opacity: 0; }
  73.75% { opacity: 0.7; }
  84.69% { opacity: 0.7; }
  85.12%, 100% { opacity: 0; }
}

.gr-s6-lbl {
  fill: rgba(7,18,30,0.78);
  font-family: var(--mono); font-size: 11px;
  text-anchor: middle; letter-spacing: 0.08em;
  opacity: 0;
}
.gr-s6-l-pipe { animation: gr-s6-l-pipe 48s infinite linear; }
.gr-s6-l-hub  { animation: gr-s6-l-hub  48s infinite linear; }
@keyframes gr-s6-l-pipe {
  0%, 73.31% { opacity: 0; }
  74.19%, 77.69% { opacity: 0.85; }
  78.56%, 100% { opacity: 0; }
}
@keyframes gr-s6-l-hub {
  0%, 78.56% { opacity: 0; }
  79.44%, 84.25% { opacity: 0.85; }
  85.12%, 100% { opacity: 0; }
}

.gr-s6-hub { opacity: 0; animation: gr-s6-hub 48s infinite linear; }
@keyframes gr-s6-hub {
  0%, 77.69% { opacity: 0; }
  78.56%, 84.69% { opacity: 1; }
  85.12%, 100% { opacity: 0; }
}
.gr-s6-hub-pill { fill: rgba(7,18,30,0.06); stroke: rgba(255,45,117,0.55); stroke-width: 1.4; }
.gr-s6-tok { fill: rgba(7,18,30,0.55); }
.gr-s6-tok-1 { animation: gr-s6-tok-1 48s infinite linear; }
.gr-s6-tok-2 { animation: gr-s6-tok-2 48s infinite linear; }
.gr-s6-tok-3 { animation: gr-s6-tok-3 48s infinite linear; }
.gr-s6-tok-4 { animation: gr-s6-tok-4 48s infinite linear; }
.gr-s6-tok-5 { animation: gr-s6-tok-5 48s infinite linear; }
.gr-s6-tok-6 { animation: gr-s6-tok-6 48s infinite linear; }
.gr-s6-tok-7 { animation: gr-s6-tok-7 48s infinite linear; }
@keyframes gr-s6-tok-1 {
  0%, 79% { fill: rgba(7,18,30,0.55); }
  79.35%, 79.61% { fill: rgba(200,255,0,0.95); }
  79.96%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-2 {
  0%, 80.05% { fill: rgba(7,18,30,0.55); }
  80.4%, 80.66% { fill: rgba(200,255,0,0.95); }
  81.01%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-3 {
  0%, 81.1% { fill: rgba(7,18,30,0.55); }
  81.45%, 81.71% { fill: rgba(200,255,0,0.95); }
  82.06%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-4 {
  0%, 82.15% { fill: rgba(7,18,30,0.55); }
  82.5%, 82.76% { fill: rgba(200,255,0,0.95); }
  83.11%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-5 {
  0%, 82.85% { fill: rgba(7,18,30,0.55); }
  83.2%, 83.46% { fill: rgba(200,255,0,0.95); }
  83.81%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-6 {
  0%, 83.55% { fill: rgba(7,18,30,0.55); }
  83.9%, 84.16% { fill: rgba(200,255,0,0.95); }
  84.42%, 100% { fill: rgba(7,18,30,0.25); }
}
@keyframes gr-s6-tok-7 {
  0%, 84.25% { fill: rgba(7,18,30,0.55); }
  84.51%, 84.77% { fill: rgba(200,255,0,0.95); }
  84.95%, 100% { fill: rgba(7,18,30,0.55); }
}

/* cursors advance vertically through the hub */
.gr-s6-cursor {
  font-family: var(--mono); font-size: 18px;
  fill: rgba(200,255,0,0.9);
  text-anchor: middle;
  animation: gr-s6-cursor 48s infinite linear;
  transform-box: fill-box; transform-origin: center;
}
.gr-s6-cursor-a { animation-name: gr-s6-cursor-a; }
.gr-s6-cursor-b { animation-name: gr-s6-cursor-b; fill: rgba(255,45,117,0.9); }
@keyframes gr-s6-cursor-a {
  0%, 78.74% { transform: translateY(-110px); }
  84.69% { transform: translateY(115px); }
  85.12%, 100% { transform: translateY(115px); }
}
@keyframes gr-s6-cursor-b {
  0%, 78.74% { transform: translateY(-110px); }
  84.69% { transform: translateY(45px); }
  85.12%, 100% { transform: translateY(45px); }
}

.gr-s6-cn { fill: rgba(255,45,117,0.14); stroke: var(--copper); stroke-width: 1.4; }

/* ═════════════════════════════════════════════ */
/*           STAGE 7 — agent loop + memory + ?   */
/* window: 35–40s (83.33–95.24%). sub-beats:     */
/*   7a agent loop  35–36.8s  (83.3–87.6%)       */
/*   7b memory     36.8–38.5s (87.6–91.7%)       */
/*   7c ? nodes    38.5–40s   (91.7–95.2%)       */
/* ═════════════════════════════════════════════ */
.gr-s7-loop-ring { fill: none; stroke: rgba(255,45,117,0.28); stroke-width: 1.2; stroke-dasharray: 4 3; }
.gr-s7-chev polygon { fill: rgba(255,45,117,0.78); }
/* Agent loop nodes = general close-up → rounded rects, blue */
.gr-s7-ln { fill: rgba(7,18,30,0.10); stroke: rgba(7,18,30,0.62); stroke-width: 1.5; }
.gr-s7-l1 { animation: gr-s7-l1 48s infinite linear; }
.gr-s7-l2 { animation: gr-s7-l2 48s infinite linear; }
.gr-s7-l3 { animation: gr-s7-l3 48s infinite linear; }
.gr-s7-l4 { animation: gr-s7-l4 48s infinite linear; }
@keyframes gr-s7-l1 {
  0%, 85.39% { fill: rgba(7,18,30,0.10); }
  85.74%, 86.17% { fill: rgba(200,255,0,0.52); }
  87.23%, 87.75% { fill: rgba(200,255,0,0.52); }
  88.62%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s7-l2 {
  0%, 86.17% { fill: rgba(7,18,30,0.10); }
  86.44%, 86.88% { fill: rgba(200,255,0,0.52); }
  87.75%, 88.19% { fill: rgba(200,255,0,0.52); }
  88.62%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s7-l3 {
  0%, 86.88% { fill: rgba(7,18,30,0.10); }
  87.14%, 87.58% { fill: rgba(200,255,0,0.52); }
  88.19%, 88.62% { fill: rgba(200,255,0,0.52); }
  88.89%, 100% { fill: rgba(7,18,30,0.10); }
}
@keyframes gr-s7-l4 {
  0%, 87.49% { fill: rgba(7,18,30,0.10); }
  87.75%, 88.19% { fill: rgba(200,255,0,0.52); }
  88.62%, 89.15% { fill: rgba(200,255,0,0.52); }
  89.41%, 100% { fill: rgba(7,18,30,0.10); }
}
/* Circulating DATA dot follows the curved ring path via offset-path; two laps clockwise */
.gr-s7-loop-dot {
  fill: var(--lime);
  filter: drop-shadow(0 0 6px rgba(200,255,0,0.62));
  opacity: 0;
  /* Clockwise circle of radius 100 starting at (0,-100) = agent's center */
  offset-path: path('M 0 -100 A 100 100 0 0 1 100 0 A 100 100 0 0 1 0 100 A 100 100 0 0 1 -100 0 A 100 100 0 0 1 0 -100');
  offset-rotate: 0deg;
  animation: gr-s7-loop-dot 48s infinite linear;
}
@keyframes gr-s7-loop-dot {
  0%, 85.3% { opacity: 0; offset-distance: 0%; }
  85.65% { opacity: 1; offset-distance: 0%; }
  /* lap 1: ~3.5s of timeline = ~4% of 48s */
  89.5% { opacity: 1; offset-distance: 100%; }
  /* snap reset for lap 2 (0.01% gap = invisible to eye) */
  89.51% { opacity: 1; offset-distance: 0%; }
  /* lap 2 */
  93.5% { opacity: 1; offset-distance: 100%; }
  93.8%, 100% { opacity: 0; offset-distance: 100%; }
}

.gr-s7-mem-frame { fill: rgba(7,18,30,0.08); stroke: rgba(7,18,30,0.48); stroke-width: 1.3; }
.gr-s7-mem-tok { fill: rgba(7,18,30,0.66); }
.gr-s7-mt-1 { animation: gr-s7-mt-1 48s infinite linear; }
.gr-s7-mt-2 { animation: gr-s7-mt-2 48s infinite linear; }
.gr-s7-mt-3 { animation: gr-s7-mt-3 48s infinite linear; }
.gr-s7-mt-4 { animation: gr-s7-mt-4 48s infinite linear; }
.gr-s7-mt-5 { animation: gr-s7-mt-5 48s infinite linear; }
.gr-s7-mt-6 { animation: gr-s7-mt-6 48s infinite linear; }
@keyframes gr-s7-mt-1 {
  0%, 89.15% { opacity: 0; transform: translateY(20px); }
  89.5% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gr-s7-mt-2 {
  0%, 89.85% { opacity: 0; transform: translateY(20px); }
  90.2% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gr-s7-mt-3 {
  0%, 90.55% { opacity: 0; transform: translateY(20px); }
  90.9% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gr-s7-mt-4 {
  0%, 91.25% { opacity: 0; transform: translateY(20px); }
  91.6% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gr-s7-mt-5 {
  0%, 91.95% { opacity: 0; transform: translateY(20px); }
  92.3% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gr-s7-mt-6 {
  0%, 92.12% { opacity: 0; transform: translateY(20px); }
  92.48% { opacity: 1; transform: translateY(0); }
  92.56%, 100% { opacity: 1; transform: translateY(0); }
}

.gr-s7-q polygon { fill: rgba(100,116,139,0.15); stroke: rgba(7,18,30,0.50); stroke-width: 1.4; }
.gr-s7-q text { fill: rgba(7,18,30,0.85); font-family: var(--display); font-size: 22px; font-weight: 700; text-anchor: middle; }
.gr-s7-q { opacity: 0; }
.gr-s7-q1 { animation: gr-s7-q1 48s infinite linear; }
.gr-s7-q2 { animation: gr-s7-q2 48s infinite linear; }
.gr-s7-q3 { animation: gr-s7-q3 48s infinite linear; }
@keyframes gr-s7-q1 {
  0%, 92.74% { opacity: 0; }
  93.17% { opacity: 0.9; }
  94.23% { opacity: 0.55; }
  95.27% { opacity: 0.9; }
  95.62%, 100% { opacity: 0; }
}
@keyframes gr-s7-q2 {
  0%, 93% { opacity: 0; }
  93.44% { opacity: 0.9; }
  94.49% { opacity: 0.55; }
  95.27% { opacity: 0.9; }
  95.62%, 100% { opacity: 0; }
}
@keyframes gr-s7-q3 {
  0%, 93.26% { opacity: 0; }
  93.7% { opacity: 0.9; }
  94.75% { opacity: 0.55; }
  95.27% { opacity: 0.9; }
  95.62%, 100% { opacity: 0; }
}
.gr-s7-q-edge {
  stroke: rgba(7,18,30,0.30); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0;
  animation: gr-s7-q-edge 48s infinite linear;
}
@keyframes gr-s7-q-edge {
  0%, 92.91% { opacity: 0; }
  93.44%, 95.27% { opacity: 0.55; }
  95.62%, 100% { opacity: 0; }
}

/* ─── TAGLINE (top-left) ─── */
.gr-showcase-tagline {
  position: absolute; top: 22px; left: 24px; z-index: 5;
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: none;
  color: rgba(7,18,30,0.72);
  pointer-events: none;
  display: inline-flex; align-items: center;
}
.gr-showcase-tagline::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); margin-right: 10px;
  box-shadow: 0 0 8px var(--lime);
  animation: gr-dotPulse 2s ease-in-out infinite;
}

/* ─── SCRUBBER (top-right) ─── */
.gr-scrubber {
  position: absolute; top: 18px; right: 20px; z-index: 6;
  display: flex; gap: 2px;
  background: rgba(7,18,30,0.03);
  border: 1px solid rgba(7,18,30,0.10);
  padding: 4px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.gr-seg {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: rgba(7,18,30,0.45);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0; line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.gr-seg:hover {
  background: rgba(7,18,30,0.10);
  color: var(--ice);
}
.gr-seg:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
/* Each segment's background animates the active highlight in lockstep with the 48s timeline. */
.gr-seg-1 { animation: gr-seg-1 48s infinite linear; }
.gr-seg-2 { animation: gr-seg-2 48s infinite linear; }
.gr-seg-3 { animation: gr-seg-3 48s infinite linear; }
.gr-seg-4 { animation: gr-seg-4 48s infinite linear; }
.gr-seg-5 { animation: gr-seg-5 48s infinite linear; }
.gr-seg-6 { animation: gr-seg-6 48s infinite linear; }
.gr-seg-7 { animation: gr-seg-7 48s infinite linear; }
@keyframes gr-seg-1 {
  0%, 24.5% { background: var(--lime); color: var(--ink); }
  25.5%, 95.5% { background: transparent; color: rgba(7,18,30,0.45); }
  96.0%, 100% { background: var(--lime); color: var(--ink); }
}
@keyframes gr-seg-2 {
  0%, 24.5% { background: transparent; color: rgba(7,18,30,0.45); }
  25.5%, 34.92% { background: var(--lime); color: var(--ink); }
  35.92%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
@keyframes gr-seg-3 {
  0%, 35% { background: transparent; color: rgba(7,18,30,0.45); }
  35.92%, 45.33% { background: var(--lime); color: var(--ink); }
  46.33%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
@keyframes gr-seg-4 {
  0%, 45.5% { background: transparent; color: rgba(7,18,30,0.45); }
  46.33%, 55.75% { background: var(--lime); color: var(--ink); }
  56.75%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
@keyframes gr-seg-5 {
  0%, 55.5% { background: transparent; color: rgba(7,18,30,0.45); }
  56.75%, 72.42% { background: var(--lime); color: var(--ink); }
  73.42%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
@keyframes gr-seg-6 {
  0%, 72.5% { background: transparent; color: rgba(7,18,30,0.45); }
  73.42%, 84.92% { background: var(--lime); color: var(--ink); }
  85.92%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
@keyframes gr-seg-7 {
  0%, 85% { background: transparent; color: rgba(7,18,30,0.45); }
  85.92%, 95.33% { background: var(--lime); color: var(--ink); }
  96.33%, 100% { background: transparent; color: rgba(7,18,30,0.45); }
}
/* Stage 1 label is visible both at the start (0-24%) AND at the loop seam (96-100%) — the seam IS the return to stage 1's initial state. */
@keyframes gr-lbl-1 {
  0%, 24.0% { opacity: 1; }
  25.0%, 95.0% { opacity: 0; }
  96.0%, 100% { opacity: 1; }
}

/* ─── LABEL ─── */
.gr-showcase-label {
  position: absolute; bottom: 32px; left: 32px; z-index: 5;
  min-width: 320px;
}
.gr-showcase-label-k {
  font-family: var(--mono); font-size: 10.5px;
  color: rgba(7,18,30,0.52); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 6px;
  position: relative; height: 14px;
}
.gr-showcase-label-v {
  font-family: var(--display); font-weight: 700;
  font-size: 30px; line-height: 1.05; color: var(--ice);
  letter-spacing: -0.025em; text-transform: uppercase;
  position: relative; min-height: 64px;
  max-width: 360px;
}
.gr-lk, .gr-lv {
  position: absolute; top: 0; left: 0; opacity: 0; white-space: nowrap;
}
.gr-lk-1, .gr-lv-1 { animation: gr-lbl-1 48s infinite linear; }
.gr-lk-2, .gr-lv-2 { animation: gr-vis-2 48s infinite linear; }
.gr-lk-3, .gr-lv-3 { animation: gr-vis-3 48s infinite linear; }
.gr-lk-4, .gr-lv-4 { animation: gr-vis-4 48s infinite linear; }
.gr-lk-5, .gr-lv-5 { animation: gr-vis-5 48s infinite linear; }
.gr-lk-6, .gr-lv-6 { animation: gr-vis-6 48s infinite linear; }
.gr-lk-7, .gr-lv-7 { animation: gr-vis-7 48s infinite linear; }
.gr-cap-1 { animation: gr-lbl-1 48s infinite linear; }
.gr-cap-2 { animation: gr-vis-2 48s infinite linear; }
.gr-cap-3 { animation: gr-vis-3 48s infinite linear; }
.gr-cap-4 { animation: gr-vis-4 48s infinite linear; }
.gr-cap-5 { animation: gr-vis-5 48s infinite linear; }
.gr-cap-6 { animation: gr-vis-6 48s infinite linear; }
.gr-cap-7 { animation: gr-vis-7 48s infinite linear; }

/* ─── CHIPS ─── */
.gr-showcase-chips {
  position: absolute; bottom: 32px; right: 32px;
  display: flex; gap: 10px; z-index: 5;
}
.gr-showcase-chip {
  font-family: var(--mono); font-size: 11px;
  background: rgba(7,18,30,0.06);
  border: 1px solid rgba(7,18,30,0.18);
  color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
}
/* Each chip is opacity-hidden by default and only fades in during its sub-beat in Stage 5. */
.gr-chip-describe { animation: gr-chip-describe 48s infinite linear; }
.gr-chip-observe  { animation: gr-chip-observe  48s infinite linear; }
.gr-chip-batch    { animation: gr-chip-batch    48s infinite linear; }
/* describe — Stage 5b blueprint moment (~59-63%) */
@keyframes gr-chip-describe {
  0%, 59% { opacity: 0; transform: translateY(6px); }
  60%, 63% { opacity: 1; transform: translateY(0); }
  64%, 100% { opacity: 0; transform: translateY(6px); }
}
/* observe — Stage 5b magnifier moment (~63-66%) */
@keyframes gr-chip-observe {
  0%, 62% { opacity: 0; transform: translateY(6px); }
  63%, 66% { opacity: 1; transform: translateY(0); }
  67%, 100% { opacity: 0; transform: translateY(6px); }
}
/* batch() — Stage 5c batch sweep (~66-70%) */
@keyframes gr-chip-batch {
  0%, 65.5% { opacity: 0; transform: translateY(6px); }
  66.5%, 70% { opacity: 1; transform: translateY(0); }
  71%, 100% { opacity: 0; transform: translateY(6px); }
}

/* Respect reduced motion: freeze the showcase on stage 1 if requested */
@media (prefers-reduced-motion: reduce) {
  .gr-st, .gr-sc, .gr-lk, .gr-lv, .gr-cap,
  .gr-s1-msg, .gr-s2-msg, .gr-s4-msg,
  .gr-s5-lens, .gr-s5-bracket, .gr-s5-cap,
  .gr-s5-lbl, .gr-s5-n, .gr-s5-edge,
  .gr-s6-pn circle, .gr-s6-cap, .gr-s6-lbl, .gr-s6-hub, .gr-s6-tok, .gr-s6-cursor,
  .gr-s7-ln, .gr-s7-loop-dot, .gr-s7-mem-tok, .gr-s7-q, .gr-s7-q-edge,
  .gr-s1-edge, .gr-s1-derived, .gr-s1-fn,
  .gr-s2-eAB, .gr-s2-eAC, .gr-s2-eBD, .gr-s2-eCD, .gr-s2-fn,
  .gr-s2-nB circle, .gr-s2-nC circle, .gr-s2-nD circle,
  .gr-s3-halo, .gr-s3-outer, .gr-s3-inner, .gr-s3-fn-text, .gr-s3-tag,
  .gr-s4-m, .gr-s4-mlabel, .gr-s4-y, .gr-s4-n-derived, .gr-s4-n-effect, .gr-s4-y-fn,
  .gr-chip-describe, .gr-chip-observe, .gr-chip-batch,
  .wave-step span {
    animation: none !important;
  }
  .gr-st-1, .gr-sc-1, .gr-lk-1, .gr-lv-1, .gr-cap-1 { opacity: 1 !important; }
}

.legacy-showcase .gr-showcase-frame {
  width: 100%;
  height: 460px;
  border-radius: 8px 8px 0 0;
  aspect-ratio: auto;
  min-height: 0;
  box-shadow: none;
}

.legacy-showcase .gr-scrubber {
  top: 16px;
  right: 16px;
}

.graph-grid path {
  fill: none;
  stroke: rgba(7, 18, 30, 0.055);
  stroke-width: 1;
}

.graph-lines path {
  fill: none;
  stroke: rgba(7, 18, 30, 0.7);
  stroke-width: 2.25;
}

#arrow-line path {
  fill: rgba(7, 18, 30, 0.72);
}

.node circle {
  fill: white;
  stroke: rgba(7, 18, 30, 0.22);
  stroke-width: 2;
  filter: url(#soft-shadow);
}

.node path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
}

.node-source circle,
.node-effect circle {
  stroke: var(--green-ink);
}

.node-join circle {
  stroke: rgba(255, 45, 117, 0.38);
}

.activation-signal {
  opacity: 0;
  transition: opacity 300ms ease;
}

.activation-signal path {
  fill: none;
  stroke: var(--green-ink);
  stroke-width: 2;
}

.activation-signal circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2;
}

.message-layer {
  pointer-events: none;
}

.edge-message {
  filter: drop-shadow(0 10px 12px rgba(7, 18, 30, 0.16));
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
}

.edge-message text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-linejoin: round;
  stroke-width: 5px;
}

.protocol-graph .edge-message text {
  display: block;
}

.edge-message circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2.5;
}

.protocol-graph .start-message circle {
  fill: #ffffff;
  stroke: var(--green-ink);
  stroke-width: 3;
}

.protocol-graph .data-message circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2.5;
}

.protocol-graph .complete-message rect {
  fill: var(--ink);
  stroke: var(--green);
  stroke-width: 2.5;
}

.protocol-graph .complete-message path {
  stroke: #ffffff;
}

.protocol-graph .dirty-message .flag-pole {
  fill: none;
  stroke: var(--copper);
  stroke-width: 3;
  stroke-linecap: round;
}

.protocol-graph .dirty-message .flag-sheet {
  fill: none;
  stroke: var(--copper);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dirty-message path,
.complete-message path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.dirty-message path {
  stroke: var(--copper);
}

.data-message circle {
  fill: #ffffff;
}

.start-message circle,
.complete-message circle {
  fill: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  .edge-message,
  .frame-message {
    opacity: 0;
  }
}

.console-body[data-stage-view="0"] .node circle,
.console-body[data-stage-view="2"] .node-source circle,
.console-body[data-stage-view="2"] .node-branch circle,
.console-body[data-stage-view="2"] .node-join circle,
.console-body[data-stage-view="2"] .node-effect circle {
  fill: rgba(200, 255, 0, 0.2);
  stroke: var(--green-ink);
}

.console-body[data-stage-view="3"] .node-source circle,
.console-body[data-stage-view="3"] .node-branch circle,
.console-body[data-stage-view="3"] .node-join circle,
.console-body[data-stage-view="3"] .node-effect circle {
  fill: rgba(7, 18, 30, 0.08);
  stroke: rgba(7, 18, 30, 0.4);
}

.console-body[data-stage-view="1"] .node-source circle,
.console-body[data-stage-view="1"] .node-branch circle,
.console-body[data-stage-view="1"] .node-join circle,
.console-body[data-stage-view="1"] .node-effect circle {
  fill: rgba(255, 45, 117, 0.1);
  stroke: var(--copper);
}

.console-body[data-stage-view="0"] .activation-start,
.console-body[data-stage-view="1"] .activation-dirty,
.console-body[data-stage-view="2"] .activation-data,
.console-body[data-stage-view="3"] .activation-complete {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.console-body[data-stage-view="2"] .node-join circle {
  animation: heroJoinPulse 6s linear infinite;
}

.console-body[data-stage-view="2"] .node-effect circle {
  animation: heroEffectPulse 6s linear infinite;
}

.console-body[data-stage-view="0"] .start-a {
  animation-name: heroStartA;
}

.console-body[data-stage-view="0"] .start-b {
  animation-name: heroStartB;
}

.console-body[data-stage-view="0"] .start-c {
  animation-name: heroStartC;
}

.console-body[data-stage-view="0"] .start-d {
  animation-name: heroStartD;
}

.console-body[data-stage-view="0"] .start-e {
  animation-name: heroStartE;
}

.console-body[data-stage-view="1"] .dirty-source-a {
  animation-name: heroDirtySourceA;
}

.console-body[data-stage-view="1"] .dirty-source-b {
  animation-name: heroDirtySourceB;
}

.console-body[data-stage-view="1"] .dirty-a-join {
  animation-name: heroDirtyAJoin;
}

.console-body[data-stage-view="1"] .dirty-b-join {
  animation-name: heroDirtyBJoin;
}

.console-body[data-stage-view="1"] .dirty-join-effect {
  animation-name: heroDirtyJoinEffect;
}

.console-body[data-stage-view="2"] .data-source-a {
  animation-name: heroDataSourceA;
}

.console-body[data-stage-view="2"] .data-source-b {
  animation-name: heroDataSourceB;
}

.console-body[data-stage-view="2"] .data-a-join {
  animation-name: heroDataAJoin;
}

.console-body[data-stage-view="2"] .data-b-join {
  animation-name: heroDataBJoin;
}

.console-body[data-stage-view="2"] .data-join-effect {
  animation-name: heroDataJoinEffect;
}

.console-body[data-stage-view="3"] .complete-source-a {
  animation-name: heroCompleteSourceA;
}

.console-body[data-stage-view="3"] .complete-source-b {
  animation-name: heroCompleteSourceB;
}

.console-body[data-stage-view="3"] .complete-a-join {
  animation-name: heroCompleteAJoin;
}

.console-body[data-stage-view="3"] .complete-b-join {
  animation-name: heroCompleteBJoin;
}

.console-body[data-stage-view="3"] .complete-join-effect {
  animation-name: heroCompleteJoinEffect;
}

@keyframes heroStartA {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 210px);
  }
  7%,
  23% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: translate(249px, 154px);
  }
}

@keyframes heroStartB {
  0%,
  8% {
    opacity: 0;
    transform: translate(136px, 218px);
  }
  11%,
  27% {
    opacity: 1;
  }
  31%,
  100% {
    opacity: 0;
    transform: translate(249px, 274px);
  }
}

@keyframes heroStartC {
  0%,
  32% {
    opacity: 0;
    transform: translate(313px, 150px);
  }
  35%,
  60% {
    opacity: 1;
  }
  64%,
  100% {
    opacity: 0;
    transform: translate(474px, 198px);
  }
}

@keyframes heroStartD {
  0%,
  36% {
    opacity: 0;
    transform: translate(313px, 278px);
  }
  39%,
  64% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
    transform: translate(474px, 222px);
  }
}

@keyframes heroStartE {
  0%,
  72% {
    opacity: 0;
    transform: translate(548px, 210px);
  }
  75%,
  84% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
    transform: translate(586px, 210px);
  }
}

@keyframes heroDirtySourceA {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 210px);
  }
  7%,
  23% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: translate(249px, 154px);
  }
}

@keyframes heroDirtySourceB {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 218px);
  }
  7%,
  23% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: translate(249px, 274px);
  }
}

@keyframes heroDirtyAJoin {
  0%,
  28% {
    opacity: 0;
    transform: translate(313px, 150px);
  }
  31%,
  57% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
    transform: translate(474px, 198px);
  }
}

@keyframes heroDirtyBJoin {
  0%,
  28% {
    opacity: 0;
    transform: translate(313px, 278px);
  }
  31%,
  57% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
    transform: translate(474px, 222px);
  }
}

@keyframes heroDirtyJoinEffect {
  0%,
  64% {
    opacity: 0;
    transform: translate(548px, 210px);
  }
  67%,
  77% {
    opacity: 1;
  }
  81%,
  100% {
    opacity: 0;
    transform: translate(586px, 210px);
  }
}

@keyframes heroDataSourceA {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 210px);
  }
  7%,
  24% {
    opacity: 1;
  }
  28%,
  100% {
    opacity: 0;
    transform: translate(249px, 154px);
  }
}

@keyframes heroDataSourceB {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 218px);
  }
  7%,
  24% {
    opacity: 1;
  }
  28%,
  100% {
    opacity: 0;
    transform: translate(249px, 274px);
  }
}

@keyframes heroDataAJoin {
  0%,
  42% {
    opacity: 0;
    transform: translate(313px, 150px);
  }
  45%,
  70% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
    transform: translate(474px, 198px);
  }
}

@keyframes heroDataBJoin {
  0%,
  58% {
    opacity: 0;
    transform: translate(313px, 278px);
  }
  61%,
  86% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(474px, 222px);
  }
}

@keyframes heroDataJoinEffect {
  0%,
  88% {
    opacity: 0;
    transform: translate(548px, 210px);
  }
  91%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(586px, 210px);
  }
}

@keyframes heroCompleteSourceA {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 210px);
  }
  7%,
  23% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: translate(249px, 154px);
  }
}

@keyframes heroCompleteSourceB {
  0%,
  4% {
    opacity: 0;
    transform: translate(136px, 218px);
  }
  7%,
  23% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
    transform: translate(249px, 274px);
  }
}

@keyframes heroCompleteAJoin {
  0%,
  28% {
    opacity: 0;
    transform: translate(313px, 150px);
  }
  31%,
  57% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
    transform: translate(474px, 198px);
  }
}

@keyframes heroCompleteBJoin {
  0%,
  28% {
    opacity: 0;
    transform: translate(313px, 278px);
  }
  31%,
  57% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
    transform: translate(474px, 222px);
  }
}

@keyframes heroCompleteJoinEffect {
  0%,
  64% {
    opacity: 0;
    transform: translate(548px, 210px);
  }
  67%,
  77% {
    opacity: 1;
  }
  81%,
  100% {
    opacity: 0;
    transform: translate(586px, 210px);
  }
}

@keyframes heroJoinPulse {
  0%,
  84%,
  100% {
    fill: rgba(200, 255, 0, 0.2);
    stroke: var(--green-ink);
    stroke-width: 2;
  }
  86%,
  91% {
    fill: rgba(200, 255, 0, 0.44);
    stroke: var(--ink);
    stroke-width: 3;
  }
}

@keyframes heroEffectPulse {
  0%,
  93%,
  100% {
    fill: rgba(200, 255, 0, 0.2);
    stroke: var(--green-ink);
    stroke-width: 2;
  }
  95%,
  99% {
    fill: rgba(200, 255, 0, 0.44);
    stroke: var(--ink);
    stroke-width: 3;
  }
}

.stage-caption {
  min-height: 72px;
  border-top: 1px solid var(--line);
  background: rgba(244, 247, 249, 0.48);
}

.stage-caption article {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.stage-caption article.is-active {
  display: grid;
}

.stage-caption span {
  color: var(--green-ink);
  font-size: 11px;
}

.stage-caption strong {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  text-transform: none;
}

.route-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
}

.route-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1432px;
  margin: 0 auto;
  padding: 0 34px;
}

.route-strip a {
  min-height: 78px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.route-strip a:first-child {
  border-left: 1px solid var(--line);
}

.route-strip span {
  display: block;
}

.route-strip small {
  display: block;
  margin-top: 7px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}

.band {
  max-width: 1180px;
  margin: 0 auto;
  padding: 104px 34px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--copper);
  font-size: 12px;
}

.band h2 {
  font-size: 60px;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.section-lede {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(320px, 0.82fr);
  gap: 34px 72px;
  align-items: start;
  margin-bottom: 38px;
}

.section-lede.wide {
  grid-template-columns: minmax(360px, 0.78fr) minmax(340px, 0.82fr);
}

.section-lede .eyebrow {
  grid-column: 1;
  margin-bottom: -18px;
}

.section-lede h2 {
  grid-column: 1;
  grid-row: 2;
}

.section-lede.center {
  display: block;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-lede.center .eyebrow {
  margin-bottom: 14px;
}

.band-intro {
  max-width: 780px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.section-lede > .band-intro {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding-top: 4px;
}

.wave-field {
  padding-top: 84px;
}

.wave-frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto minmax(320px, 1fr);
  gap: 0;
  min-height: 520px;
  border: 1px solid rgba(7, 18, 30, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7, 18, 30, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 18, 30, 0.04) 1px, transparent 1px),
    #ffffff;
  background-size: 38px 38px;
  box-shadow: 0 26px 70px rgba(7, 18, 30, 0.1);
  overflow: hidden;
}

.wave-step {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 14px;
  min-height: 154px;
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.wave-step:last-of-type {
  border-right: 0;
}

.wave-step span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(7, 18, 30, 0.2);
  border-radius: 999px;
  color: var(--ink);
}

.wave-step:nth-of-type(1) span {
  animation: waveStepOne 9s linear infinite;
}

.wave-step:nth-of-type(2) span {
  animation: waveStepTwo 9s linear infinite;
}

.wave-step:nth-of-type(3) span {
  animation: waveStepThree 9s linear infinite;
}

.wave-step:nth-of-type(4) span {
  animation: waveStepFour 9s linear infinite;
}

.wave-step b {
  color: var(--ink);
  font-size: 14px;
}

.wave-step small {
  grid-column: 2;
  max-width: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
}

.wave-step.is-hot span {
  border-color: var(--green-ink);
  background: var(--green);
}

@keyframes waveStepOne {
  0%,
  45% {
    border-color: var(--green-ink);
    background: var(--green);
  }
  50%,
  100% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
}

@keyframes waveStepTwo {
  0%,
  48% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
  52%,
  71% {
    border-color: var(--green-ink);
    background: var(--green);
  }
  76%,
  100% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
}

@keyframes waveStepThree {
  0%,
  62% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
  66%,
  90% {
    border-color: var(--green-ink);
    background: var(--green);
  }
  94%,
  100% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
}

@keyframes waveStepFour {
  0%,
  88% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
  91%,
  99% {
    border-color: var(--green-ink);
    background: var(--green);
  }
  100% {
    border-color: rgba(7, 18, 30, 0.2);
    background: transparent;
  }
}

.wave-frame-svg {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1040 / 360;
}

.frame-edges path,
.frame-wave path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.frame-edges path {
  stroke: rgba(7, 18, 30, 0.7);
  stroke-width: 2.5;
}

#frame-arrow path {
  fill: rgba(7, 18, 30, 0.72);
}

.frame-wave {
  opacity: 0;
}

.frame-wave.dirty {
  animation: dirtyPhase 9s linear infinite;
}

.frame-wave path {
  stroke-width: 5;
  stroke-dasharray: 18 18;
  animation: waveDash 3.2s linear infinite;
}

.frame-wave.dirty path {
  stroke: rgba(255, 45, 117, 0.58);
}

.frame-wave.data path {
  stroke: rgba(155, 196, 0, 0.66);
  animation-delay: 1.2s;
}

.frame-wave.data-b-wave {
  animation: dataPhaseB 9s linear infinite;
}

.frame-wave.data-a-wave {
  animation: dataPhaseA 9s linear infinite;
}

.frame-wave.data-output-wave {
  animation: dataPhaseOutput 9s linear infinite;
}

.frame-node circle {
  fill: #ffffff;
  stroke: rgba(7, 18, 30, 0.28);
  stroke-width: 2.25;
  filter: drop-shadow(0 14px 18px rgba(7, 18, 30, 0.13));
}

.frame-node.source circle,
.frame-node.effect circle {
  stroke: var(--green-ink);
}

.frame-node.join circle {
  stroke: var(--copper);
}

.frame-node text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
}

.frame-message {
  filter: drop-shadow(0 10px 12px rgba(7, 18, 30, 0.16));
  opacity: 0;
  pointer-events: none;
}

.frame-message text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-linejoin: round;
  stroke-width: 5px;
}

.frame-message text {
  display: none;
}

.frame-message circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2;
}

.frame-message.data-msg circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2.5;
}

.frame-message.join-msg circle {
  fill: #ffffff;
  stroke: var(--green-ink);
  stroke-width: 3;
}

.frame-message.complete-msg rect {
  fill: var(--ink);
  stroke: var(--green);
  stroke-width: 2.5;
}

.frame-message path {
  fill: none;
  stroke: var(--copper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.frame-message.complete-msg path {
  stroke: #ffffff;
}

@keyframes wavePulse {
  0%,
  100% {
    opacity: 0.18;
    translate: 0 0;
  }
  42%,
  62% {
    opacity: 1;
    translate: 54px 0;
  }
}

@keyframes waveDash {
  to {
    stroke-dashoffset: -72;
  }
}

@keyframes dirtyPhase {
  0%,
  45% {
    opacity: 0.72;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes dataPhaseB {
  0%,
  64% {
    opacity: 0;
  }
  66%,
  87% {
    opacity: 0.68;
  }
  91%,
  100% {
    opacity: 0;
  }
}

@keyframes dataPhaseA {
  0%,
  72% {
    opacity: 0;
  }
  74%,
  88% {
    opacity: 0.68;
  }
  92%,
  100% {
    opacity: 0;
  }
}

@keyframes dataPhaseOutput {
  0%,
  89% {
    opacity: 0;
  }
  91%,
  99% {
    opacity: 0.68;
  }
  100% {
    opacity: 0;
  }
}

.guarantee-sheet {
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 0.95fr);
  gap: 58px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.sheet-copy {
  position: sticky;
  top: 96px;
}

.guarantee-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(7, 18, 30, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(7, 18, 30, 0.06);
}

.table-head {
  display: none;
}

.table-row:last-child {
  border-bottom: 1px solid rgba(7, 18, 30, 0.16);
}

.table-row:hover {
  background: rgba(200, 255, 0, 0.08);
  color: inherit;
}

.table-row span {
  color: var(--quiet);
}

.table-row b {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  text-transform: none;
}

.table-row p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
}

.table-row small {
  grid-column: 2;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5;
}

.problem-system {
  background:
    linear-gradient(180deg, rgba(244, 247, 249, 0.7), rgba(255, 255, 255, 0.88)),
    var(--gr-paper);
  max-width: none;
  padding-right: max(34px, calc((100vw - 1432px) / 2));
  padding-left: max(34px, calc((100vw - 1432px) / 2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.diagnosis-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--strong-line);
}

.diagnosis-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(260px, 0.84fr) minmax(220px, 0.48fr) minmax(320px, 0.88fr);
  gap: 24px;
  align-items: center;
  min-height: 214px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.diagnosis-row::before {
  content: "";
  position: absolute;
  left: calc(72px + 24px);
  right: 0;
  top: 50%;
  z-index: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0, rgba(155, 196, 0, 0.86) 48%, transparent 100%);
  opacity: 0;
  transform: scaleX(0.22);
  transform-origin: left center;
  transition:
    opacity 520ms ease 120ms,
    transform 820ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms;
}

.diagnosis-row::after {
  content: "GRAPHREFLY TACKLES THIS";
  position: absolute;
  right: 24px;
  top: 18px;
  z-index: 2;
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity 360ms ease 360ms,
    transform 520ms ease 360ms;
}

.diagnosis-row.is-visible::before,
.diagnosis-row:first-child::before {
  opacity: 1;
  transform: scaleX(1);
}

.diagnosis-row.is-visible::after,
.diagnosis-row:first-child::after {
  opacity: 1;
  transform: translateX(0);
}

.row-number {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  align-self: stretch;
  align-content: center;
  color: var(--ink);
  font-size: 52px;
  line-height: 1;
}

.row-number::after {
  content: "PAIN";
  color: var(--copper);
  font-size: 10px;
}

.problem-card,
.solution-card,
.row-diagram {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.problem-card,
.solution-card {
  min-height: 152px;
  padding: 24px;
  border-radius: 8px;
}

.problem-card {
  background:
    linear-gradient(135deg, rgba(255, 45, 117, 0.16), transparent 56%),
    var(--ink);
  color: white;
  box-shadow: 0 22px 46px rgba(7, 18, 30, 0.2);
}

.solution-card {
  border: 1px solid rgba(155, 196, 0, 0.42);
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.36), rgba(255, 255, 255, 0.92) 58%),
    #ffffff;
  box-shadow: 0 18px 42px rgba(155, 196, 0, 0.12);
  opacity: 0;
  transform: translateX(96px);
  transition:
    opacity 420ms ease 260ms,
    transform 760ms cubic-bezier(0.18, 0.86, 0.28, 1) 260ms;
}

.diagnosis-row.is-visible .solution-card,
.diagnosis-row:first-child .solution-card {
  opacity: 1;
  transform: translateX(0);
}

.diagnosis-row.is-visible .problem-card,
.diagnosis-row:first-child .problem-card {
  background:
    linear-gradient(135deg, rgba(255, 45, 117, 0.2), transparent 56%),
    var(--ink);
}

.diagnosis-row.is-visible .row-diagram,
.diagnosis-row:first-child .row-diagram {
  border-color: rgba(155, 196, 0, 0.42);
  box-shadow: 0 18px 38px rgba(155, 196, 0, 0.1);
}

.diagnosis-row b {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.problem-card b {
  color: #ffffff;
}

.diagnosis-row p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.problem-card p {
  color: rgba(255, 255, 255, 0.72);
}

.row-diagram {
  position: relative;
  min-height: 128px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.row-diagram svg {
  display: block;
  width: 100%;
  height: 150px;
}

.row-diagram text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-anchor: middle;
  text-transform: uppercase;
}

.diagram-link,
.rail,
.code-spill path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagram-link.ghost {
  stroke: rgba(255, 45, 117, 0.54);
  stroke-dasharray: 4 6;
  stroke-width: 2;
}

.diagram-link.live {
  stroke: var(--green-ink);
  stroke-width: 3;
}

.diagram-source rect,
.diagram-source path,
.diagram-hub circle,
.diagram-node circle,
.trace-node circle,
.trace-node path,
.trace-result rect,
.trace-result path,
.trace-log-dim rect,
.rejected-code rect,
.rejected-code path,
.plan-card rect,
.plan-node rect,
.plan-node polygon,
.plan-node path,
.plan-check {
  vector-effect: non-scaling-stroke;
}

.diagram-source rect,
.diagram-source path {
  fill: #ffffff;
  stroke: rgba(7, 18, 30, 0.38);
  stroke-width: 1.8;
}

.diagram-hub circle {
  fill: var(--green);
  stroke: var(--green-ink);
  stroke-width: 2.4;
  filter: drop-shadow(0 10px 14px rgba(155, 196, 0, 0.22));
}

.diagram-node circle {
  fill: #ffffff;
  stroke: var(--green-ink);
  stroke-width: 2.2;
  filter: drop-shadow(0 8px 10px rgba(7, 18, 30, 0.12));
}

.diagram-link.trace {
  stroke-width: 3.2;
  filter: drop-shadow(0 8px 10px rgba(155, 196, 0, 0.18));
}

.why-back {
  fill: none;
  stroke: rgba(255, 45, 117, 0.68);
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.why-label text {
  fill: var(--copper);
}

.trace-node circle {
  fill: #ffffff;
  stroke: var(--green-ink);
  stroke-width: 2.2;
}

.trace-node.source circle {
  fill: var(--green);
}

.trace-node.join path {
  fill: none;
  stroke: var(--green-ink);
  stroke-linecap: round;
  stroke-width: 2;
}

.trace-result rect {
  fill: var(--ink);
  stroke: var(--green);
  stroke-width: 2;
}

.trace-result path {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.trace-result text {
  fill: var(--copper);
}

.trace-log-dim rect {
  fill: rgba(7, 18, 30, 0.1);
}

.trace-log-dim rect:nth-child(3) {
  fill: rgba(255, 45, 117, 0.2);
}

.rejected-code rect {
  fill: rgba(255, 255, 255, 0.72);
  stroke: rgba(7, 18, 30, 0.2);
  stroke-width: 1.6;
}

.rejected-code path {
  fill: none;
  stroke: rgba(7, 18, 30, 0.68);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.rejected-code .reject-mark {
  stroke: rgba(255, 45, 117, 0.68);
  stroke-width: 3.4;
}

.rejected-code text {
  fill: var(--quiet);
}

.plan-card rect {
  fill: #ffffff;
  stroke: rgba(7, 18, 30, 0.2);
  stroke-width: 1.6;
  filter: drop-shadow(0 10px 16px rgba(7, 18, 30, 0.1));
}

.plan-card > text {
  fill: var(--copper);
}

.plan-node rect,
.plan-node polygon,
.plan-node path {
  fill: rgba(255, 255, 255, 0.96);
  stroke: var(--green-ink);
  stroke-width: 2.2;
}

.plan-node.gate polygon {
  fill: var(--green);
}

.plan-check {
  fill: none;
  stroke: var(--green-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.split-band {
  display: grid;
  grid-template-columns: minmax(320px, 0.62fr) minmax(560px, 1fr);
  gap: 62px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.requirement-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  border: 1px solid rgba(7, 18, 30, 0.2);
  border-radius: 8px;
  background: white;
  box-shadow: 0 22px 58px rgba(7, 18, 30, 0.08);
  overflow: hidden;
}

.requirement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.requirement-block {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 118px;
  padding: 20px;
  border: 0;
  border-right: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.requirement-block:last-child {
  border-right: 0;
}

.requirement-block span {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.requirement-block.is-active {
  background: linear-gradient(180deg, rgba(200, 255, 0, 0.3), rgba(200, 255, 0, 0.06));
  box-shadow: inset 0 5px 0 var(--green-ink);
}

.requirement-detail {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 230px;
  padding: 38px 42px;
}

.requirement-detail span {
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.requirement-detail h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
}

.requirement-detail p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.package-section {
  padding-top: 90px;
  padding-bottom: 86px;
  border-top: 1px solid var(--line);
}

.package-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
  border-top: 0;
  border-bottom: 0;
}

.package-lane {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 230px;
  padding: 34px 28px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.package-lane:last-child {
  border-right: 1px solid rgba(7, 18, 30, 0.14);
}

.package-lane span {
  display: inline-flex;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 900;
  line-height: 0.96;
  text-transform: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.package-lane b {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.package-name-command {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(7, 18, 30, 0.2);
  border-radius: 6px;
  background: var(--ink);
  color: var(--green);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.package-lane small {
  color: var(--ink);
  border-bottom: 2px solid var(--green-ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.install-command {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  border-radius: 6px;
  background: rgba(7, 18, 30, 0.04);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.site-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 30px 34px;
  border-top: 1px solid var(--line);
  background: white;
  color: var(--muted);
  font-size: 12px;
}

.rich-footer {
  align-items: stretch;
  padding: 42px 34px;
  background:
    radial-gradient(circle at 18% 10%, rgba(200, 255, 0, 0.12), transparent 18%),
    var(--ink);
  color: rgba(255, 255, 255, 0.72);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: 10px;
  color: white;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 800;
  text-transform: none;
}

.footer-brand small {
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 38px;
  min-width: min(680px, 100%);
}

.footer-links div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-links b {
  color: var(--green);
}

.footer-links a,
.footer-links span {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

.footer-links a:hover {
  color: var(--green);
}

.route-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 92px 34px;
}

.route-page h1 {
  max-width: 920px;
  font-size: 82px;
  line-height: 0.9;
}

.route-page > p {
  max-width: 820px;
}

.route-panel,
.composition-list {
  margin-top: 36px;
}

.route-panel,
.composition-record,
.docs-table,
.lane {
  border-top: 4px solid var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 32px rgba(8, 17, 27, 0.06);
}

.link-row,
.composition-section,
.record-meta,
.lane li {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 0.7fr);
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.link-row:last-child,
.composition-section:last-child,
.lane li:last-child {
  border-bottom: 0;
}

.label {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.detail,
.composition-section p,
.composition-section li,
.record-meta {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.detail a,
.record-meta a {
  font-weight: 800;
}

/* Homepage design pass: clean protocol editorial layout. */
.hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 28px;
  max-width: 1180px;
  min-height: auto;
  padding-top: 54px;
  padding-bottom: 86px;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 34px 24px;
  z-index: -1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 22%, rgba(200, 255, 0, 0.16), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255, 45, 117, 0.055), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero-equation {
  justify-content: center;
  padding: 0;
  border-bottom: 0;
}

.hero-copy {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  max-width: 820px;
  padding: 18px 0 0;
}

.hero-copy::before {
  content: none;
}

.hero-meta {
  display: inline-flex;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.hero-lede {
  max-width: 780px;
  font-size: 22px;
}

.hero-actions {
  justify-content: center;
}

.legacy-showcase {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 980px;
  margin-top: 16px;
  border: 1px solid rgba(7, 18, 30, 0.22);
  border-radius: 8px;
  overflow: hidden;
}

.route-strip {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 34px;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

.route-strip-inner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
}

.route-strip a {
  margin: 0 5px;
  border: 1px solid rgba(7, 18, 30, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
}

.route-strip a:hover {
  border-color: rgba(155, 196, 0, 0.55);
  background: rgba(200, 255, 0, 0.13);
  color: var(--ink);
}

.route-strip span {
  color: var(--ink);
}

.route-strip small {
  color: var(--quiet);
}

.guarantee-sheet {
  position: relative;
  max-width: 1180px;
  padding-right: 34px;
  padding-left: 34px;
  border-top: 0;
  background: #ffffff;
}

.guarantee-table {
  gap: 12px;
}

.table-row {
  border-radius: 0;
  box-shadow: none;
}

.table-row:hover {
  transform: translateY(-2px);
}

.problem-system {
  max-width: 1180px;
  padding-right: 34px;
  padding-left: 34px;
  border-top: 0;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(244, 247, 249, 0.52), rgba(255, 255, 255, 0.94)),
    var(--gr-paper);
}

.diagnosis-rows {
  border-top: 0;
}

.diagnosis-row {
  grid-template-columns: 98px minmax(260px, 0.84fr) minmax(220px, 0.48fr) minmax(320px, 0.88fr);
  border-bottom: 0;
}

.diagnosis-row::before {
  left: calc(98px + 24px);
}

.diagnosis-row::after {
  content: "VISIBLE GRAPH RECORD";
}

.row-number {
  padding-left: 2px;
  color: var(--green-ink);
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
}

.row-number::after {
  content: "boundary";
  color: var(--quiet);
}

.problem-card,
.solution-card,
.row-diagram,
.requirement-panel,
.package-lane {
  border-radius: 6px;
}

.row-diagram {
  background: rgba(255, 255, 255, 0.84);
  background-size: auto;
}

.problem-card {
  background:
    linear-gradient(135deg, rgba(255, 45, 117, 0.18), transparent 58%),
    #0a1628;
}

.solution-card {
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.3), rgba(255, 255, 255, 0.96) 52%),
    #ffffff;
}

.split-band {
  max-width: 1180px;
  padding-right: 34px;
  padding-left: 34px;
  border-top: 0;
  background: #ffffff;
}

.wave-field {
  display: grid;
  grid-template-columns: minmax(270px, 0.42fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}

.wave-field .section-lede {
  display: block;
  margin-bottom: 0;
}

.wave-field .section-lede .eyebrow {
  margin-bottom: 14px;
}

.wave-field .section-lede > .band-intro {
  margin-top: 20px;
  padding-top: 0;
}

.requirement-panel {
  box-shadow: none;
}

.requirement-block.is-active {
  background: var(--ink);
  color: #ffffff;
  box-shadow: inset 0 5px 0 var(--green);
}

.requirement-block.is-active span {
  color: rgba(255, 255, 255, 0.62);
}

/* Why page: a causal spine for the positioning argument. */
.why-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 34px 96px;
}

.why-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(280px, 0.7fr);
  gap: 28px 76px;
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(7, 18, 30, 0.16);
}

.why-hero .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.why-hero h1 {
  max-width: 700px;
  font-size: 64px;
  line-height: 0.92;
}

.why-hero p:last-child {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.why-board {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 44px;
}

.why-index {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
  padding: 8px 0 8px 22px;
  border-left: 2px solid var(--green);
}

.why-index::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--green);
}

.why-index p {
  margin: 0;
  color: var(--copper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.why-index a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.why-index a:hover {
  background: transparent;
  color: var(--ink);
}

.why-index span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(7, 18, 30, 0.16);
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
}

.why-ledger {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: why-record;
}

.why-ledger::before {
  content: none;
}

.why-record {
  counter-increment: why-record;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 34px;
  padding: 38px 0 42px;
  border-top: 1px solid rgba(7, 18, 30, 0.14);
}

.why-mark {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  align-content: start;
  padding-top: 2px;
}

.why-mark::before {
  content: counter(why-record, decimal-leading-zero);
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.why-mark span {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.why-copy {
  max-width: 720px;
}

.why-copy h2 {
  max-width: 680px;
  font-size: 40px;
  line-height: 1;
}

.why-copy p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.why-copy p + p {
  margin-top: 12px;
}

.why-coda {
  margin-top: 64px;
  padding: 46px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.22), transparent 52%),
    var(--ink);
  color: #ffffff;
}

.why-coda .eyebrow {
  color: var(--green);
}

.why-coda h2 {
  max-width: 860px;
  color: #ffffff;
  font-size: 56px;
  line-height: 0.95;
}

.why-coda .button {
  border-color: var(--green);
  background: var(--green);
  color: var(--ink);
}

.why-coda .button.secondary {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
}

.composition-page {
  max-width: 1280px;
}

.composition-list,
.ownership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.route-packages .composition-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.route-protocol {
  max-width: 1180px;
  padding-top: 72px;
}

.route-protocol .route-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(280px, 0.7fr);
  gap: 28px 76px;
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(7, 18, 30, 0.16);
}

.route-protocol .route-hero .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.route-protocol .route-hero h1 {
  max-width: 700px;
  font-size: 64px;
  line-height: 0.92;
}

.route-protocol .route-hero p:last-child {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.route-protocol .composition-list {
  display: block;
  margin-top: 44px;
}

.protocol-board {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.protocol-map {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
  padding: 8px 0 8px 22px;
  border-left: 2px solid var(--green);
}

.protocol-map::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--green);
}

.protocol-map p {
  margin: 0;
  color: var(--copper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-map dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.protocol-map dl div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
}

.protocol-map dt,
.protocol-map dd {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-map dt {
  color: var(--quiet);
}

.protocol-map dd {
  margin: 0;
  color: var(--ink);
}

.protocol-map ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol-map a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}

.protocol-map a span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(7, 18, 30, 0.16);
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
}

.protocol-map a:hover {
  color: var(--ink);
}

.protocol-flow {
  display: grid;
  gap: 42px;
}

.protocol-area-group {
  border-top: 4px solid var(--ink);
  scroll-margin-top: 96px;
}

.protocol-area-head {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: baseline;
  padding: 20px 0 18px;
  border-bottom: 1px solid rgba(7, 18, 30, 0.16);
}

.protocol-area-head p,
.protocol-area-head span {
  margin: 0;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-area-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 44px;
  line-height: 0.9;
  text-transform: uppercase;
}

.protocol-record {
  display: grid;
  grid-template-columns: minmax(220px, 0.3fr) minmax(0, 0.7fr);
  gap: 34px;
  padding: 25px 0 28px;
  border-bottom: 1px solid rgba(7, 18, 30, 0.16);
  scroll-margin-top: 96px;
}

.protocol-record-head {
  display: grid;
  align-content: start;
  gap: 12px;
}

.protocol-record-head span,
.protocol-record-head p {
  font-family: var(--mono);
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-record-head span {
  color: var(--green-ink);
  font-size: 13px;
}

.protocol-record-head h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-transform: none;
}

.protocol-record-head > div {
  max-width: 360px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.protocol-authority-meta {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
}

.protocol-authority-meta div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.protocol-authority-meta dt,
.protocol-authority-meta dd,
.protocol-conformance h3,
.protocol-conformance li span,
.protocol-conformance li small {
  font-family: var(--mono);
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-authority-meta dt {
  color: var(--quiet);
  font-size: 10px;
}

.protocol-authority-meta dd {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.protocol-record-body {
  display: grid;
  gap: 20px;
}

.protocol-record-section {
  display: block;
}

.protocol-record-section h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.protocol-record-section p,
.protocol-record-section li {
  color: var(--muted);
  line-height: 1.5;
}

.protocol-record-section.statement p {
  color: var(--ink);
  max-width: 780px;
  font-size: 19px;
  line-height: 1.46;
}

.protocol-record-section p {
  margin: 0 0 12px;
}

.protocol-record-section ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.protocol-record-section li {
  padding: 7px 9px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.protocol-conformance {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.protocol-conformance h3 {
  margin: 0;
  color: var(--quiet);
  font-size: 10px;
}

.protocol-conformance ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol-conformance li {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(7, 18, 30, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.28;
}

.protocol-conformance li span {
  color: var(--green-ink);
  font-size: 10px;
}

.protocol-conformance li small {
  color: var(--quiet);
  font-size: 9px;
}

.runtime-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 340px;
  border: 1px solid rgba(7, 18, 30, 0.16);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(7, 18, 30, 0.08);
  overflow: hidden;
}

.runtime-card-top {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  min-height: 220px;
  padding: 30px;
  background:
    radial-gradient(circle at 84% 18%, rgba(200, 255, 0, 0.28), transparent 28%),
    linear-gradient(180deg, #ffffff, rgba(244, 247, 249, 0.86));
  border-bottom: 1px solid var(--line);
}

.runtime-card-top span,
.runtime-detail-head span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.runtime-card-top h2,
.runtime-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 42px;
  line-height: 0.96;
  white-space: nowrap;
  overflow-wrap: normal;
}

.runtime-card-top .package-name-command {
  text-align: center;
}

.runtime-card-top p,
.runtime-detail-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.runtime-card-top .install-command {
  margin-top: 2px;
  text-align: center;
}

.runtime-card-body {
  display: grid;
  align-content: end;
  gap: 24px;
  padding: 26px 30px 30px;
}

.runtime-card h3,
.runtime-detail h3 {
  margin: 0 0 12px;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.runtime-doc-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.runtime-doc-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.runtime-doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--green-ink);
  border-radius: 999px;
  background: var(--green);
}

.runtime-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.runtime-card-actions .button {
  min-height: 42px;
  padding: 0 14px;
  font-size: 11px;
}

.runtime-secondary-links,
.entry-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.runtime-secondary-links a,
.entry-link-list a {
  color: var(--ink);
  border-bottom: 2px solid var(--green-ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.runtime-detail {
  border: 1px solid rgba(7, 18, 30, 0.16);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(7, 18, 30, 0.08);
  overflow: hidden;
}

.runtime-detail-head {
  display: grid;
  gap: 16px;
  padding: 34px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 84% 18%, rgba(200, 255, 0, 0.28), transparent 28%),
    linear-gradient(180deg, #ffffff, rgba(244, 247, 249, 0.86));
}

.runtime-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 30px 34px 34px;
}

.composition-record {
  min-height: 100%;
}

.composition-record h2,
.lane h3 {
  margin: 0;
  padding: 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.composition-record ul,
.lane ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.composition-section h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.composition-section p {
  margin: 0 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-top: 48px;
  }

  .hero-copy {
    grid-column: auto;
    grid-row: auto;
    max-width: 850px;
  }

  .protocol-console {
    grid-column: auto;
    grid-row: auto;
    max-width: 980px;
  }

  .lang-row {
    width: 100%;
  }

  .guarantee-sheet,
  .split-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet-copy {
    position: static;
  }

  .diagnosis-row {
    grid-template-columns: 62px minmax(250px, 0.8fr) minmax(190px, 0.48fr) minmax(280px, 0.86fr);
    gap: 18px;
  }
}

@media (max-width: 980px) {
  .site-header {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 22px;
  }

  .nav {
    justify-content: flex-start;
  }

  h1 {
    font-size: 76px;
  }

  .hero,
  .band,
  .route-page {
    padding-right: 22px;
    padding-left: 22px;
  }

  .hero {
    gap: 32px;
  }

  .wave-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .legacy-showcase .gr-showcase-frame {
    height: 400px;
    aspect-ratio: auto;
    min-height: 0;
  }

  .legacy-showcase .gr-showcase-caption {
    min-height: 104px;
  }

  .legacy-showcase .gr-cap {
    inset: 16px 20px 18px;
    font-size: 12.5px;
  }

  .legacy-showcase .gr-showcase-label {
    bottom: 20px;
    left: 20px;
  }

  .legacy-showcase .gr-showcase-label-v {
    font-size: 24px;
    min-height: 54px;
    max-width: 300px;
  }

  .legacy-showcase .gr-showcase-chips {
    right: 20px;
    bottom: 20px;
  }

  .activation-key {
    position: static;
    order: 2;
    justify-content: center;
    margin: -6px 0 8px;
  }

  .activation-key span {
    white-space: nowrap;
  }

  .stage-rail {
    order: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .stage-rail li {
    min-height: 92px;
  }

  .route-strip-inner,
  .package-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-strip a:first-child,
  .route-strip a {
    border-left: 1px solid rgba(7, 18, 30, 0.12);
  }

  .section-lede,
  .section-lede.wide {
    display: block;
  }

  .section-lede .eyebrow {
    margin-bottom: 14px;
  }

  .section-lede > .band-intro {
    margin-top: 18px;
    padding-top: 0;
  }

  .band h2 {
    font-size: 48px;
  }

  .wave-frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto) minmax(300px, 1fr);
    min-height: 560px;
  }

  .wave-step {
    min-height: 150px;
  }

  .wave-step:nth-of-type(2n) {
    border-right: 0;
  }

  .wave-step:nth-of-type(n + 3) {
    border-top: 0;
  }

  .wave-frame-svg {
    grid-row: 3;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .table-head {
    display: none;
  }

  .table-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .guarantee-table {
    grid-template-columns: minmax(0, 1fr);
  }

  .table-row p,
  .table-row small {
    grid-column: 2;
  }

  .diagnosis-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .diagnosis-row {
    grid-template-columns: 58px minmax(0, 0.9fr) minmax(220px, 0.86fr);
    gap: 16px;
    align-items: stretch;
    padding: 22px 0;
  }

  .diagnosis-row::before {
    left: 74px;
  }

  .diagnosis-row::after {
    right: 16px;
  }

  .row-diagram {
    grid-column: 2;
    min-height: 86px;
  }

  .diagnosis-row > .solution-card {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .requirement-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .requirement-block:nth-child(2n) {
    border-right: 0;
  }

  .requirement-block:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .footer-links {
    min-width: 0;
  }

  .rich-footer,
  .site-footer {
    flex-direction: column;
  }

  .composition-list,
  .ownership-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-packages .composition-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-protocol .route-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .route-protocol .route-hero p:last-child {
    max-width: 720px;
  }

  .protocol-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .why-page {
    display: block;
    padding-right: 22px;
    padding-left: 22px;
  }

  .why-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .why-hero h1 {
    max-width: 820px;
    font-size: 64px;
  }

  .why-hero p:last-child {
    max-width: 760px;
  }

  .why-board {
    display: block;
    margin-top: 0;
  }

  .why-index {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 52px;
    padding: 0;
    border-left: 0;
  }

  .why-index::before {
    display: none;
  }

  .why-index p {
    grid-column: 1 / -1;
  }

  .why-index a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 98px;
    padding: 18px;
    border: 1px solid rgba(7, 18, 30, 0.12);
    border-radius: 8px;
    background: #ffffff;
    font-size: 15px;
    line-height: 1.28;
  }

  .why-index a:hover {
    background: rgba(200, 255, 0, 0.12);
  }

  .why-index span {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    color: var(--copper);
    place-items: initial;
  }

  .why-ledger::before {
    left: 118px;
  }

  .why-record {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 28px;
  }

  .why-mark::after {
    right: -44px;
  }

  .why-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .protocol-map {
    position: static;
    padding: 0 0 18px;
    border-left: 0;
    border-bottom: 1px solid rgba(7, 18, 30, 0.16);
  }

  .protocol-map::before {
    display: none;
  }

  .protocol-map ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .protocol-map a {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0;
  }

  .protocol-area-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
  }

  .protocol-area-head p {
    grid-column: 1 / -1;
  }

  .runtime-card {
    min-height: 0;
  }

  .runtime-card-top {
    min-height: 0;
  }

  .runtime-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .brand {
    display: grid;
    gap: 4px;
  }

  .nav {
    gap: 2px;
  }

  .nav a {
    padding: 8px 7px;
  }

  h1,
  .route-page h1 {
    font-size: 39px;
    line-height: 0.92;
  }

  .hero-equation {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.05;
  }

  .hero-lede,
  .route-page > p {
    font-size: 16px;
    line-height: 1.42;
  }

  .hero-actions,
  .route-actions {
    align-items: center;
    flex-direction: row;
  }

  .lang-row {
    gap: 8px 13px;
    margin-top: 20px;
    padding-top: 14px;
  }

  .button {
    min-height: 44px;
    padding: 0 15px;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .hero-actions .button.secondary {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 2px solid var(--green-ink);
    border-radius: 0;
    background: transparent;
  }

  .protocol-console {
    margin-top: 10px;
  }

  .legacy-showcase .gr-showcase-frame {
    height: 320px;
    aspect-ratio: auto;
    min-height: 0;
  }

  .legacy-showcase .gr-showcase-caption {
    min-height: 132px;
  }

  .legacy-showcase .gr-cap {
    inset: 14px 16px 16px;
    font-size: 12px;
    line-height: 1.42;
  }

  .legacy-showcase .gr-cap strong {
    font-size: 10px;
  }

  .legacy-showcase .gr-showcase-tagline {
    display: none;
  }

  .legacy-showcase .gr-scrubber {
    top: 12px;
    right: 12px;
    left: 12px;
    justify-content: center;
    font-size: 10px;
  }

  .legacy-showcase .gr-seg {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .legacy-showcase .gr-showcase-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
    min-width: 0;
  }

  .legacy-showcase .gr-showcase-label-v {
    font-size: 18px;
    min-height: 42px;
    max-width: 230px;
  }

  .legacy-showcase .gr-showcase-label-k {
    font-size: 9px;
    letter-spacing: 0.11em;
  }

  .legacy-showcase .gr-showcase-chips {
    display: none;
  }

  .stage-rail {
    order: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stage-rail li {
    min-height: 66px;
    padding: 38px 8px 9px;
    text-align: center;
  }

  .stage-rail li::before {
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
  }

  .stage-rail span {
    display: none;
  }

  .stage-rail b {
    font-size: 10px;
  }

  .protocol-graph {
    order: 1;
    min-height: 248px;
  }

  .stage-caption article {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .route-strip-inner,
  .package-lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-strip a,
  .package-lane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .route-strip a {
    border: 1px solid rgba(7, 18, 30, 0.12);
  }

  .protocol-record {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 28px 0 32px;
  }

  .protocol-area-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .protocol-area-head h2 {
    font-size: 36px;
  }

  .protocol-record-head h3 {
    font-size: 18px;
  }

  .protocol-record-head div {
    max-width: none;
  }

  .protocol-record-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .route-strip-inner {
    padding-right: 22px;
    padding-left: 22px;
  }

  .route-strip {
    padding-right: 22px;
    padding-left: 22px;
  }

  .route-strip-inner {
    padding-right: 0;
    padding-left: 0;
  }

  .band {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .band h2 {
    font-size: 40px;
  }

  .problem-system .section-lede h2 {
    font-size: 36px;
  }

  .wave-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) minmax(260px, 1fr);
    min-height: 0;
  }

  .wave-step {
    min-height: 118px;
    padding: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wave-frame-svg {
    grid-row: 5;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .guarantee-sheet {
    gap: 28px;
  }

  .table-row {
    gap: 12px;
    padding: 20px;
  }

  .diagnosis-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .row-number,
  .row-diagram,
  .diagnosis-row > div:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .diagnosis-row::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 18px;
    opacity: 0.35;
  }

  .diagnosis-row::after {
    content: none;
  }

  .row-number {
    font-size: 42px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .diagnosis-row b {
    font-size: 32px;
  }

  .problem-card,
  .solution-card {
    min-height: 0;
  }

  .solution-card {
    transform: translateX(42px);
  }

  .requirement-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirement-block,
  .requirement-block:nth-child(2n) {
    min-height: 82px;
    border-right: 0;
  }

  .requirement-block:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .requirement-detail {
    padding: 28px 22px;
  }

  .requirement-detail h3 {
    font-size: 28px;
  }

  .footer-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .link-row,
  .composition-section,
  .record-meta,
  .lane li {
    grid-template-columns: minmax(0, 1fr);
  }

  .runtime-card-top,
  .runtime-card-body,
  .runtime-detail-head,
  .runtime-detail-grid {
    padding: 24px 22px;
  }

  .runtime-card-top h2,
  .runtime-detail-head h2 {
    font-size: 34px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .package-lane span {
    font-size: 34px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .why-page {
    padding-top: 56px;
    padding-bottom: 70px;
  }

  .why-hero h1,
  .why-coda h2 {
    font-size: 39px;
    line-height: 0.96;
  }

  .why-index {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-index a {
    min-height: 72px;
  }

  .why-ledger::before {
    content: none;
  }

  .why-record {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-left: 0;
  }

  .why-mark {
    padding-top: 0;
  }

  .why-mark::after {
    content: none;
  }

  .why-copy h2 {
    font-size: 34px;
  }

  .why-copy p {
    font-size: 15px;
  }

  .why-coda {
    padding: 28px 22px;
  }
}