/* ==========================================================================
   NODAL — home page sections.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(90vh, 800px);
  display: flex; align-items: center;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* The plate is the page's one piece of physics. It sits square on the right
   — square because the Chladni domain is square, and a stretched domain
   shears the nodal lines until they stop looking like physics.

   The width MUST be explicit. With `width: auto` between left and right
   offsets, the canvas falls back to its intrinsic width — which resize()
   then sets from clientWidth, so layout and buffer chase each other and the
   figure ends up spanning the whole hero. */
#plate {
  position: absolute;
  top: 50%;
  right: max(-6vw, -90px);
  transform: translateY(-50%);
  width: min(52vw, 660px);
  height: min(52vw, 660px);
  z-index: 0;
}
.hero-mask {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* The wash must stay opaque past the longest line of the lede, or body copy
     runs across the dark nodal bands. The lede is capped at 52ch below; these
     stops are matched to that and the two must move together. */
  background:
    linear-gradient(90deg, var(--paper) 42%, color-mix(in srgb, var(--paper) 72%, transparent) 62%, transparent 80%),
    radial-gradient(ellipse 62% 62% at 80% 50%, transparent 44%, var(--paper) 90%);
}

.hero-inner { position: relative; z-index: 2; max-width: 760px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 7px 14px 7px 12px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
  margin-bottom: clamp(22px, 3vw, 30px);
}
.hero-badge b { font-weight: 560; color: var(--ink); }
.hero-badge .sep { width: 1px; height: 13px; background: var(--line-2); }

/* The floor has to sit BELOW where the vw term lands on a phone, or the clamp
   is pinned to its floor across the whole mobile range and the fluid middle
   term never does anything. 11vw reaches 52px at ~473px and steps down from
   there. */
.hero h1 {
  font-size: clamp(38px, 11vw, 118px);
  line-height: .93;
  letter-spacing: -.028em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.hero h1 .hl {
  font-style: italic;
  color: var(--vermilion);
}
/* The nodal line: a hairline through the wordmark at the height where the
   figure's own nodes sit. Decorative, but it is the logo idea repeated. */
.hero h1 .hl::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: -.08em;
  background: color-mix(in srgb, var(--vermilion) 45%, transparent);
}

.hero .lede {
  font-size: clamp(17px, 1.55vw, 20px);
  color: var(--ink-2);
  max-width: 52ch;   /* keeps every line inside the mask's opaque region */
  margin-bottom: clamp(26px, 3.2vw, 36px);
}
.hero .lede b { color: var(--ink); font-weight: 560; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(26px, 3.2vw, 36px); }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--faint);
}
.scroll-cue i {
  display: block; width: 1px; height: 26px;
  background: linear-gradient(var(--line-3), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 50% { transform: scaleY(.5); transform-origin: top; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }

@media (max-width: 900px) {
  #plate {
    top: 0; right: 50%;
    transform: translateX(50%);
    width: min(118vw, 660px);
    height: min(118vw, 660px);
  }
  /* On a phone the copy sits ON the plate rather than beside it, so the wash
     has to be much heavier where the headline lands — the vermilion italic at
     ~38% down was reading at roughly 2:1 against the grains. */
  .hero-mask {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--paper) 42%, transparent) 12%,
        color-mix(in srgb, var(--paper) 82%, transparent) 32%,
        color-mix(in srgb, var(--paper) 94%, transparent) 58%,
        var(--paper) 78%);
  }
  .hero { padding-top: clamp(150px, 46vw, 300px); }
  .scroll-cue { display: none; }
}

/* ── Before / after ──────────────────────────────────────────────────── */
.compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
.compare-col {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 30px);
}
.compare-col.before { background: var(--paper-2); }
.compare-col.after { border-color: color-mix(in srgb, var(--viridian) 24%, var(--line)); }

.compare-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.compare-head h3 { font-size: 19px; }

.compare-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0;
  font-size: 15px; color: var(--ink-2);
}
.compare-list .ic {
  flex: none;
  display: grid; place-items: center;
  width: 19px; height: 19px; margin-top: 2px;
  border-radius: 50%;
}
.compare-list svg { width: 10px; height: 10px; }
.before .compare-list .ic { color: var(--clay); background: color-mix(in srgb, var(--clay) 12%, transparent); }
.after .compare-list .ic { color: var(--viridian); background: color-mix(in srgb, var(--viridian) 13%, transparent); }

.pos-card {
  margin-top: 20px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.before .pos-card { background: color-mix(in srgb, var(--paper-3) 60%, var(--paper)); }
.pos-card .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pos-card .label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pos-card .val { font-size: 15.4px; font-weight: 520; }
.pos-bar {
  height: 5px; margin: 14px 0 11px;
  background: var(--paper-3);
  border-radius: 999px; overflow: hidden;
}
.pos-bar i { display: block; height: 100%; border-radius: 999px; }
/* Empty, because the figure beside it is 0% — the bar used to fill 12% while
   the same card said "0 composable" two lines up. The track is tinted so an
   empty bar reads as a measured zero rather than a rendering failure. */
.before .pos-bar { background: color-mix(in srgb, var(--clay) 14%, var(--paper-3)); }
.before .pos-bar i { width: 0; background: var(--clay); }
.after .pos-bar i { width: 100%; background: var(--viridian); }
.pos-note { font-size: 13.2px; color: var(--ink-3); }

@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

/* ── Rails ───────────────────────────────────────────────────────────── */
.rails {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.rail { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rail-visual {
  height: 186px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.rail-body { padding: clamp(20px, 2.1vw, 26px); flex: 1; display: flex; flex-direction: column; }
.rail-body h3 { font-size: 20px; margin-bottom: 9px; }
.rail-body p { color: var(--ink-2); font-size: 14.8px; flex: 1; }
.rail-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: 13.6px; font-weight: 520; color: var(--vermilion);
}
.rail-more svg { width: 12px; height: 12px; transition: transform .22s; }
.rail:hover .rail-more svg { transform: translateX(3px); }

/* Rail 1 — a stack of overtone plates */
.v-note { position: absolute; inset: 0; display: grid; place-items: center; }
.v-note .stack { position: relative; width: 200px; height: 108px; }
.v-note .plate {
  position: absolute; inset: 0;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.v-note .plate:nth-child(1) { transform: translate(-14px, -13px) rotate(-4.5deg); opacity: .55; }
.v-note .plate:nth-child(2) { transform: translate(-7px, -6px) rotate(-2deg); opacity: .78; }
.v-note .plate:nth-child(3) {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 16px;
  border-color: color-mix(in srgb, var(--vermilion) 30%, var(--line-2));
}
.v-note .tick { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--faint); }
.v-note .amt { font-family: var(--display); font-size: 28px; line-height: 1; }
.v-note .sub { font-size: 11.6px; color: var(--viridian); }

/* Rail 2 — three lanes cancelling into one */
.v-flow { position: absolute; inset: 0; }
.v-flow svg { width: 100%; height: 100%; }
.v-flow .lane { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.v-flow .beam {
  fill: none; stroke: var(--vermilion); stroke-width: 1.6;
  stroke-dasharray: 26 300; stroke-linecap: round;
  animation: beam 3.4s linear infinite;
}
.v-flow .beam:nth-of-type(5) { animation-delay: -1.1s; stroke: var(--ultramarine); }
.v-flow .beam:nth-of-type(6) { animation-delay: -2.2s; stroke: var(--viridian); }
@keyframes beam { from { stroke-dashoffset: 326; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .v-flow .beam { animation: none; stroke-dasharray: none; opacity: .45; } }

/* Rail 3 — a depth ladder.
   Symmetric and monotonic around an explicit mid, because the first version
   had three bids against two asks with the longest bar next to the mid, and
   the five bars read as an arbitrary arrow rather than a book. */
.v-depth { position: absolute; inset: 0; display: grid; place-items: center; }
.v-depth .ladder { width: 78%; display: flex; flex-direction: column; gap: 6px; }
.v-depth .lv { display: flex; align-items: center; gap: 10px; }
.v-depth .bar { height: 9px; border-radius: 3px; }
.v-depth .ask .bar { background: color-mix(in srgb, var(--clay) 42%, transparent); }
.v-depth .bid .bar { background: color-mix(in srgb, var(--viridian) 44%, transparent); }
.v-depth .ask:nth-of-type(1) .bar { width: 78%; }
.v-depth .ask:nth-of-type(2) .bar { width: 58%; }
.v-depth .ask:nth-of-type(3) .bar { width: 38%; }
.v-depth .bid:nth-of-type(1) .bar { width: 38%; }
.v-depth .bid:nth-of-type(2) .bar { width: 58%; }
.v-depth .bid:nth-of-type(3) .bar { width: 78%; }
.v-depth .px { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.v-depth .mid {
  display: flex; align-items: center; gap: 8px;
  margin: 3px 0;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.v-depth .mid::before, .v-depth .mid::after {
  content: ''; flex: 1; height: 1px; background: var(--line-2);
}

@media (max-width: 940px) {
  .rails { grid-template-columns: 1fr; }
  /* The art inside these bands is fixed-size, so a full-width band leaves it
     marooned. Shrink the band and let the art take more of it. */
  .rail-visual { height: 152px; }
  .v-note .stack { width: min(260px, 62%); height: 100px; }
  .v-depth .ladder { width: min(360px, 74%); }
}

/* ── Flow diagram ────────────────────────────────────────────────────── */
.flow-wrap { overflow-x: auto; padding-bottom: 6px; }
.flow-svg { width: 100%; min-width: 720px; height: auto; }

/* The legend names three routes by colour. Only the travelling pulse was ever
   coloured, and it covers 18 of 158 path units — so at any instant the
   diagram was three grey lines and the legend described something the reader
   could not see. The TRACK carries the colour now; the pulse rides on top. */
.flow-svg .track { fill: none; stroke: var(--line-2); stroke-width: 1.3; }
.flow-svg .track.principal { stroke: color-mix(in srgb, var(--vermilion) 42%, transparent); }
.flow-svg .track.yield { stroke: color-mix(in srgb, var(--viridian) 45%, transparent); stroke-dasharray: 5 5; }

.flow-svg .pulse {
  fill: none; stroke-width: 2.4;
  stroke-dasharray: 18 140; stroke-linecap: round;
  animation: flowpulse 2.8s linear infinite;
}
/* The yield pulse is dashed as well as green, so the two routes stay
   distinguishable without relying on hue. */
.flow-svg .pulse.yield { stroke-dasharray: 5 8 18 129; }
@keyframes flowpulse { from { stroke-dashoffset: 158; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .flow-svg .pulse { animation: none; opacity: .35; stroke-dasharray: none; } }
.flow-svg .node-box { fill: var(--paper-card); stroke: var(--line-2); stroke-width: 1.2; }
.flow-svg .node-box.hot { stroke: color-mix(in srgb, var(--vermilion) 42%, transparent); }
.flow-svg .t-title { font-family: var(--sans); font-size: 15.5px; font-weight: 560; fill: var(--ink); }
.flow-svg .t-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; fill: var(--faint);
}
.flow-legend {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: center;
  margin-top: 26px;
  font-size: 13.2px; color: var(--ink-3);
}
.flow-legend li { display: flex; align-items: center; gap: 8px; }

/* The swatches must be painted at the SAME strength as the strokes they key.
   Drawn at full accent while the tracks are color-mix(...42%, transparent),
   the key reads darker and more saturated than the diagram, so the reader
   matches a bold green chip against a line that looks grey. These use the
   identical color-mix values as .track.principal / .track.yield above. */
.flow-legend i {
  width: 18px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--vermilion) 42%, transparent);
}
.flow-legend i.dashed {
  background: none;
  border-top: 2px dashed color-mix(in srgb, var(--viridian) 45%, transparent);
  height: 0;
}

/* ── Steps & stats ───────────────────────────────────────────────────── */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.step { display: flex; flex-direction: column; }
.step-n {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: 16px;
}
.step h3 { font-size: 19px; margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 14.8px; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.stat .n {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.stat .k { display: block; font-size: 14.4px; font-weight: 540; margin-bottom: 5px; }
.stat p { font-size: 13.4px; color: var(--ink-3); }

@media (max-width: 940px) { .steps { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* ── Split (security teaser) ─────────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.split-copy h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
.split-copy > p { color: var(--ink-2); font-size: 16px; margin-bottom: 22px; max-width: 52ch; }
.ticks li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 0;
  font-size: 15px; color: var(--ink-2);
}
.ticks b { color: var(--ink); font-weight: 560; }
.ticks .ic {
  flex: none; display: grid; place-items: center;
  width: 19px; height: 19px; margin-top: 2px;
  border-radius: 50%;
  color: var(--viridian);
  background: color-mix(in srgb, var(--viridian) 13%, transparent);
}
.ticks svg { width: 10px; height: 10px; }

.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 18px); }
/* Every other grid on the site collapses; this one did not, and four cards
   two-abreast at 375px gives about fifteen characters a line. */
@media (max-width: 620px) { .sec-grid { grid-template-columns: 1fr; } }
.sec { padding: clamp(18px, 2vw, 24px); }
.sec-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--vermilion);
}
.sec-ic svg { width: 17px; height: 17px; }
.sec h3 { font-size: 15.6px; margin-bottom: 6px; }
.sec p { font-size: 13.6px; color: var(--ink-3); }

@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ── Integration standing wave ───────────────────────────────────────── */
/* Composability shown as a standing wave: the chips sit at the nodes. */
.wave-wrap {
  position: relative;
  height: 360px;
  padding-bottom: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  overflow: hidden;
}
/* The SVG box and the chip container MUST coincide, or `top: 50%` on a chip
   resolves to half of a shorter box and every chip floats above the axis it
   is supposed to sit on — which quietly falsifies the caption underneath. */
.wave-svg { position: absolute; top: 0; left: 0; width: 100%; height: 360px; }
.wave-svg .axis { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 6; }
.wave-svg .curve { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.wave-svg .curve.a { stroke: color-mix(in srgb, var(--vermilion) 70%, transparent); }
.wave-svg .curve.b {
  stroke: color-mix(in srgb, var(--ultramarine) 45%, transparent);
  stroke-dasharray: 5 6;
}
.wave-svg .node-mark { fill: var(--vermilion); opacity: .8; }

/* A standing wave, animated as one: amplitude scales through zero and
   inverts, which is precisely what leaves the nodes fixed. transform-origin
   sits on the axis — anywhere else and the "nodes never move" claim the
   caption makes would be visibly false. */
.wave-svg .standing {
  transform-origin: center 180px;
  animation: standing 5.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes standing {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(-1); }
}
@media (prefers-reduced-motion: reduce) { .wave-svg .standing { animation: none; } }

#wave-nodes { position: absolute; top: 0; left: 0; right: 0; height: 360px; }

.wave-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 13px; color: var(--ink-3);
  text-align: center;
}
.node-chip {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  animation: chipIn .5s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes chipIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .node-chip { animation: none; } }
.node-chip.up { margin-top: -104px; }
.node-chip.down { margin-top: 104px; }
.node-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--vermilion);
}
/* The stem connecting each chip back to its node on the axis. */
/* Stem from each chip down to its node dot on the axis. 104px offset less
   ~16px of chip half-height leaves 88px to cover. */
.node-chip::after {
  content: '';
  position: absolute; left: 50%;
  width: 1px; height: 88px;
}
.node-chip.up::after { top: 100%; background: linear-gradient(var(--line-2), color-mix(in srgb, var(--vermilion) 45%, transparent)); }
.node-chip.down::after { bottom: 100%; background: linear-gradient(color-mix(in srgb, var(--vermilion) 45%, transparent), var(--line-2)); }

/* Below this width no sine curve holds eight labels apart legibly, so the
   wave becomes a plain chip cloud. */
/* Below this width no sine curve holds eight labels apart legibly, so the
   wave is dropped and the chips become a plain cloud. `height: auto` is
   load-bearing: the desktop rule pins #wave-nodes to 360px, and a static
   flex container that keeps that height splits it between its flex lines,
   stretching every chip into a 114px oval. */
@media (max-width: 900px) {
  /* The caption is absolutely pinned to the bottom on desktop, where the box
     has a fixed 360px height to pin it against. Once the wrap is auto-height
     it has to flow instead, or the last chip row sits underneath it. */
  .wave-wrap { height: auto; padding: 26px 20px 0; }
  .wave-caption {
    position: static;
    margin: 22px -20px 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .wave-svg { display: none; }
  #wave-nodes {
    position: static;
    height: auto;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 9px; justify-content: center;
  }
  .node-chip {
    position: static; transform: none; margin: 0 !important;
    animation: none;
  }
  .node-chip::after { display: none; }
}

/* ── Bento ───────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.bento-card { display: flex; flex-direction: column; min-height: 234px; }
.bento-card.wide { grid-column: span 2; }
.bento-card .kicker {
  font-family: var(--mono);
  font-size: 10.8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: 13px;
}
.bento-card h3 { font-size: 19px; margin-bottom: 8px; }
.bento-card p { font-size: 14.4px; color: var(--ink-2); }
.bento-card .spacer { flex: 1; min-height: 18px; }

.spark { width: 100%; height: 76px; }
.spark path { fill: none; stroke-width: 1.8; stroke-linecap: round; }

.rail-meta {
  display: flex; gap: 7px;
}
.rail-meta span {
  font-family: var(--mono);
  font-size: 10.6px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px;
}

.approve {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.approve .line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  font-size: 13.4px;
  border-bottom: 1px solid var(--line);
}
.approve .line span:first-child { color: var(--faint); }
.approve .go {
  padding: 11px 14px;
  text-align: center;
  font-size: 13.4px; font-weight: 540;
  background: var(--ink); color: var(--paper);
}

.split-bars { display: flex; flex-direction: column; gap: 10px; }
.sb {
  display: grid;
  grid-template-columns: 122px 1fr 62px;
  align-items: center; gap: 12px;
}
.sb-k { font-size: 13px; color: var(--ink-2); }
.sb i {
  display: block; height: 7px; border-radius: 999px;
  background: var(--paper-3);
  position: relative;
}
.sb i::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 999px;
  background: var(--c);
}
.sb-v { font-size: 12.4px; text-align: right; color: var(--ink-3); }
@media (max-width: 480px) { .sb { grid-template-columns: 100px 1fr 54px; gap: 8px; } }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
  /* The 234px floor exists to match neighbour heights in the desktop grid.
     Single-column, it is just dead space under the short cards. */
  .bento-card { min-height: 0; }
}

/* ── Closing CTA ─────────────────────────────────────────────────────── */
.cta-band {
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--paper-2), var(--paper));
  padding: clamp(64px, 8vw, 108px) 0;
  text-align: center;
  position: relative; z-index: 1;
}
.cta-band h2 { font-size: clamp(34px, 5.4vw, 62px); margin-bottom: 16px; }
.cta-band p { color: var(--ink-2); font-size: 17px; max-width: 54ch; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* A legend entry that explains rather than keys a colour — there is no third
   line style on the diagram, and a swatch for one is a key to nothing. */
.flow-legend .legend-note { color: var(--ink-3); font-style: italic; }

/* The wave caption talks about nodes and inversion; below 900px there is no
   wave on the page for it to describe, so the cloud gets its own line. */
.wave-caption.cloud-only { display: none; }
@media (max-width: 900px) {
  .wave-caption.wave-only { display: none; }
  .wave-caption.cloud-only { display: block; }
}