/* ==========================================================================
   data source — full homepage in white liquid glass.
   Standalone: imports nothing, loaded on its own by liquid.html. Palette and
   type tokens are copied (not imported) from assets/css/site.css.

   ── THE TWO THINGS THAT MAKE THIS WORK AT FULL-PAGE SCALE ──────────────────

   1. The material is split in two, because only half of it is expensive.
      What makes a surface read as glass is the EDGE: a masked gradient ring
      that runs dark at the top-left and specular-bright at the bottom-right.
      That costs nothing — it is one pseudo-element with a background.
      `backdrop-filter` is the expensive half and contributes far less.
      So:
        .pane       flat translucent fill + the edge ring.  NO backdrop-filter.
                    Used for every repeated element: api rows, faq rows, notes,
                    chips, mock panels, steps, tables. Unlimited quantity.
        .glass      .pane + one backdrop-filter.  Budgeted: at most one per
                    section, so a viewport never carries more than two
                    (the nav pill is the permanent one).
        .glass-deep .glass + the second, heavier backdrop-filter ring at the
                    edge. Two elements on the whole page: the nav and the hero
                    card, i.e. the approved reference composition.

   2. Colour is a token flip, not a second stylesheet. `.on-dark` re-declares
      the ink and material custom properties, so every component below inherits
      the dark temperature without a single duplicated rule. That is what makes
      the engine band, the closing band and the footer the SAME material rather
      than a black box cut into a white page.
   ========================================================================== */

:root {
  /* ink */
  --ink: #0B1220;
  --ink-2: #33415C;
  --ink-3: #6B7A96;
  --ink-4: #93A1BB;
  --hair: rgba(11, 18, 32, .09);
  --hair-soft: rgba(11, 18, 32, .055);

  /* accent — used sparingly: the headline token, the submit control, data bars */
  --accent: #2563EB;
  --accent-2: #4F8DFF;
  --accent-ink: #1D4ED8;
  --accent-wash: rgba(37, 99, 235, .08);

  /* status */
  --ok-fill: rgba(16, 185, 129, .12);
  --ok-ink: #047857;
  --warn-fill: rgba(245, 158, 11, .14);
  --warn-ink: #B45309;

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* layout */
  --page-w: 1180px;
  --page-narrow: 1000px;
  --gutter: 28px;

  /* the wordmark is sized from here and nowhere else — see the SWAP POINT
     comments in liquid.html */
  --wordmark-h: 13px;

  /* ── material tokens (flipped wholesale by .on-dark) ─────────────────── */

  /* Transparent enough to count the dots through. The white fill and
     `brightness` do the lightening; blur stays tiny — past ~2px a 1.2px dot on
     a 26px pitch is erased and the pane is a white card again. */
  --glass-fill: linear-gradient(157deg,
                  rgba(255, 255, 255, .40) 0%,
                  rgba(255, 255, 255, .16) 38%,
                  rgba(255, 255, 255, .13) 62%,
                  rgba(255, 255, 255, .32) 100%);
  --glass-blur: blur(1.6px) saturate(122%) brightness(1.03);

  /* flat surfaces: slightly denser, since they have no filter to lift them */
  --pane-fill: linear-gradient(157deg,
                  rgba(255, 255, 255, .58) 0%,
                  rgba(255, 255, 255, .34) 46%,
                  rgba(255, 255, 255, .46) 100%);

  /* THE EDGE. Dark contact hairline top-left, chromatic split through the
     middle, blown-out specular at the bottom-right. */
  --rim: linear-gradient(147deg,
    rgba(11, 18, 32, .30) 0%,
    rgba(11, 18, 32, .19) 11%,
    rgba(11, 18, 32, .09) 20%,
    rgba(205, 220, 255, .40) 33%,
    rgba(255, 255, 255, .72) 52%,
    rgba(255, 255, 255, .98) 74%,
    rgba(255, 250, 245, 1) 88%,
    rgba(255, 255, 255, .92) 100%);

  --inner:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 1px 0 0 rgba(255, 255, 255, .35),
    inset 0 26px 40px -30px rgba(255, 255, 255, 1),
    inset 0 -34px 52px -38px rgba(20, 40, 90, .18),
    inset 0 -1.5px 0 rgba(255, 255, 255, .9);

  --lift:
    0 1px 2px rgba(20, 40, 90, .04),
    0 10px 24px -12px rgba(20, 40, 90, .14),
    0 44px 80px -36px rgba(20, 40, 90, .26);
  --lift-sm:
    0 1px 2px rgba(20, 40, 90, .05),
    0 6px 16px -10px rgba(20, 40, 90, .16);

  --r-slab: 52px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-pill: 999px;
}

/* ── the dark temperature ─────────────────────────────────────────────────
   Same construction, inverted polarity: the unlit edge goes black instead of
   grey, the lit edge stays white but at lower alpha, and the fill is a white
   veil at ~5-10% rather than ~40%. */
.on-dark {
  --ink: rgba(255, 255, 255, .96);
  --ink-2: rgba(255, 255, 255, .74);
  --ink-3: rgba(255, 255, 255, .56);
  --ink-4: rgba(255, 255, 255, .40);
  --hair: rgba(255, 255, 255, .12);
  --hair-soft: rgba(255, 255, 255, .07);

  --accent: #6FA6FF;
  --accent-2: #9CC4FF;
  --accent-ink: #A8C8FF;
  --accent-wash: rgba(111, 166, 255, .12);

  --ok-fill: rgba(45, 212, 160, .14);
  --ok-ink: #6EE7C0;
  --warn-fill: rgba(251, 191, 36, .15);
  --warn-ink: #FCD34D;

  --glass-fill: linear-gradient(157deg,
                  rgba(255, 255, 255, .11) 0%,
                  rgba(255, 255, 255, .045) 38%,
                  rgba(255, 255, 255, .035) 62%,
                  rgba(255, 255, 255, .085) 100%);
  --glass-blur: blur(2px) saturate(118%) brightness(1.04);

  --pane-fill: linear-gradient(157deg,
                  rgba(255, 255, 255, .085) 0%,
                  rgba(255, 255, 255, .035) 46%,
                  rgba(255, 255, 255, .06) 100%);

  --rim: linear-gradient(147deg,
    rgba(0, 0, 0, .62) 0%,
    rgba(0, 0, 0, .40) 12%,
    rgba(255, 255, 255, .07) 30%,
    rgba(255, 255, 255, .20) 50%,
    rgba(255, 255, 255, .44) 72%,
    rgba(196, 220, 255, .62) 88%,
    rgba(255, 255, 255, .40) 100%);

  --inner:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 1px 0 0 rgba(255, 255, 255, .06),
    inset 0 26px 44px -32px rgba(255, 255, 255, .22),
    inset 0 -34px 52px -38px rgba(0, 0, 0, .5),
    inset 0 -1.5px 0 rgba(255, 255, 255, .18);

  --lift:
    0 1px 2px rgba(0, 0, 0, .30),
    0 12px 28px -14px rgba(0, 0, 0, .55),
    0 48px 90px -40px rgba(0, 0, 0, .70);
  --lift-sm:
    0 1px 2px rgba(0, 0, 0, .28),
    0 8px 20px -12px rgba(0, 0, 0, .48);

  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #F7F8FB;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Standing instruction on this project: every heading is medium. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
h1 { font-size: clamp(34px, 5vw, 62px); letter-spacing: -0.036em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-size: 18px; letter-spacing: -0.02em; }
h4 { font-size: 16px; letter-spacing: -0.02em; }

p { margin: 0; }

.lede {
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-2);
  font-weight: 450;
  margin-top: 18px;
  max-width: 58ch;
}

.micro {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.micro-accent { color: var(--accent-ink); }

/* the accented token — the one place colour carries meaning */
.tok, .grad {
  background: linear-gradient(118deg, var(--accent-ink) 0%, var(--accent) 42%, var(--accent-2) 78%, #7FB0FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* never nest a span inside these: the child inherits the transparent fill
     with nothing of its own to clip against and renders invisible */
}
.on-dark .grad {
  background: linear-gradient(118deg, #9CC4FF 0%, #C7DCFF 55%, #EAF2FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   1. Ground planes
   -------------------------------------------------------------------------- */
.lq-ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lq-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 700px at 18% -6%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 620px at 86% 6%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 48%, #F8F9FC 100%);
}
.lq-dots {
  position: absolute; inset: -2px;
  background-image: radial-gradient(rgba(11, 18, 32, .16) 1.2px, rgba(0, 0, 0, 0) 1.25px);
  background-size: 26px 26px;
}

/* the same construction, lit from the other side */
.night-ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* THE CLIP BOX DOES NOT MOVE — only the textures inside it do.
   liquid-motion.js used to translate .night-ground itself. That element is
   `inset: 0` on the dark band and fully opaque, and the offset it was given came
   from ABSOLUTE document scroll (-scrollY * 0.11), so ~3,500px down the page the
   whole dark ground had been dragged ~380px UPWARD — straight over the bottom of
   #why. `.why-panel > *` sits at z-index 2 and painted back on top of it, so the
   symptom was a panel whose glass slab was cut off at #engine while its text and
   mock still floated over the darkness: the reported "the panel is clipped where
   #engine begins". The identical 380px at the BOTTOM of the band had no ground
   under it at all and showed the #F7F8FB page background behind the table.
   It hid from a static audit because --par is 0 on a fresh load, .night-ground is
   pointer-events:none (so elementFromPoint clears it), and the whole block is
   skipped under prefers-reduced-motion.

   So: the ground box stays welded to the section, `translate` moves its contents
   (it composes with `transform`, which the orbs already animate), and the layers
   carry 72px of overscan to cover the bounded ±PAR_MAX drift that
   liquid-motion.js now emits. Do not put the transform back on the parent. */
.night-ground.lq-parallax { transform: none; }
.night-ground > * { translate: 0 var(--par, 0px); }

.night-base {
  position: absolute; inset: -72px 0;
  background:
    radial-gradient(900px 620px at 12% -10%, #16203A 0%, rgba(22,32,58,0) 60%),
    radial-gradient(1000px 700px at 88% 8%, #131C31 0%, rgba(19,28,49,0) 62%),
    linear-gradient(180deg, #080C15 0%, #0B1120 42%, #070A12 100%);
}
/* Real photographic depth under the dark glass — the panes need something with
   structure behind them, not a flat gradient, or the refraction has nothing to
   act on. Held well back so the measured contrast headroom stays intact. */
.night-art {
  position: absolute;
  /* 72px of overscan top and bottom — see the note above .night-base. `bottom`
     is deliberately auto: with top, bottom AND height all set the box would be
     over-constrained and the height silently discarded. */
  inset: -72px 0 auto;
  width: 100%; height: calc(100% + 144px);
  max-width: none;
  object-fit: cover;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.25) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.25) 100%);
}
.night-dots {
  position: absolute; inset: -72px -2px;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1.2px, rgba(0, 0, 0, 0) 1.25px);
  background-size: 26px 26px;
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.page { position: relative; z-index: 1; }
.wrap-wide { width: min(var(--page-w), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap { width: min(var(--page-narrow), 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding: 120px 0; }
.section-tight { padding: 88px 0; }
.section-head { max-width: 760px; margin-bottom: 52px; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. THE MATERIAL
   -------------------------------------------------------------------------- */
.glass, .pane {
  position: relative;
  border: 0;                   /* a uniform border cannot be asymmetric */
  box-shadow: var(--lift), var(--inner);
  background: var(--pane-fill);
}
.pane { box-shadow: var(--lift-sm), var(--inner); }

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* content above the pseudo-elements */
.glass > *, .pane > * { position: relative; z-index: 2; }

/* Grid items default to `min-width: auto`, i.e. they refuse to shrink below
   their min-content — which on a phone let the API column push the document
   43px wider than the viewport. Every grid child in this stylesheet is allowed
   to shrink; nothing here depends on min-content sizing. */
.api-grid > *, .api-list > *, .motion-grid > *, .split > *,
.why-panel > *, .db-panel > *, .db-steps-grid > *, .footer-grid > *,
.why-tabs > *, .db-tabs > *, .cov-row > *, .mock-row > * { min-width: 0; }

/* THE EDGE — one masked gradient ring. This is the whole illusion, and it is
   free: no filter, no compositing layer. */
.glass::after, .pane::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.pane::after { padding: 1px; }

/* REFRACTION BAND — the second, heavier backdrop-filter, masked to a ring just
   inside the edge. Two elements on the page carry this. */
.glass-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 15px;
  -webkit-backdrop-filter: blur(7px) brightness(1.04) saturate(112%);
          backdrop-filter: blur(7px) brightness(1.04) saturate(112%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.on-dark .glass-deep::before,
.glass-deep.on-dark::before {
  -webkit-backdrop-filter: blur(7px) brightness(1.15) saturate(115%);
          backdrop-filter: blur(7px) brightness(1.15) saturate(115%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .86); }
  .on-dark .glass, .glass.on-dark { background: rgba(12, 18, 30, .88); }
}

/* --------------------------------------------------------------------------
   4. Nav
   -------------------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 18px 0 0; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 9px 10px 9px 16px;
  border-radius: var(--r-pill);
  transition: box-shadow .3s ease, background .3s ease;
}
.nav-inner::before { padding: 9px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* `max-width: none` matters: the global `img { max-width: 100% }` can otherwise
   clamp the coin against a shrink-to-fit parent and squash it to an oval. */
.brand-badge {
  flex: none;
  width: 38px; height: 38px;
  max-width: none;
  filter: drop-shadow(0 4px 10px rgba(20, 40, 90, .18));
}
/* Single sizing contract for the wordmark — img today, live text tomorrow. */
.brand-word {
  flex: none;
  height: var(--wordmark-h);
  width: auto;
  max-width: none;
  /* now a <span>: these take over. The face matches the rest of the site —
     swap candidates side by side in wordmark-fonts.html */
  font-family: var(--brand-face, "Orbitron", "Michroma", sans-serif);
  font-size: calc(var(--wordmark-h) * 1.5);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  white-space: nowrap;
  color: var(--ink);
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.nav-links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 40, 90, .06);
}
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* the pill flips temperature over a dark band, or the ink text vanishes */
.nav.nav-on-dark .nav-inner {
  --pane-fill: linear-gradient(157deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 46%, rgba(255,255,255,.08));
  --glass-fill: linear-gradient(157deg, rgba(255,255,255,.11), rgba(255,255,255,.045) 46%, rgba(255,255,255,.085));
  --rim: linear-gradient(147deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 14%, rgba(255,255,255,.10) 34%, rgba(255,255,255,.34) 62%, rgba(255,255,255,.62) 88%, rgba(255,255,255,.40) 100%);
  --inner: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1.5px 0 rgba(255,255,255,.20), inset 0 -30px 50px -38px rgba(0,0,0,.6);
  --ink: rgba(255,255,255,.96);
  --ink-2: rgba(255,255,255,.74);
}
.nav.nav-on-dark .nav-links a { color: rgba(255, 255, 255, .74); }
.nav.nav-on-dark .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: none; }
/* live text recolours directly — no filter needed now that it isn't a bitmap */
.nav.nav-on-dark .brand-word { color: #fff; }
.nav.nav-on-dark .btn-subtle { color: rgba(255, 255, 255, .74); }
.nav.nav-on-dark .btn-subtle:hover { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: none; }
.nav.nav-on-dark .btn-primary {
  color: #0B1220;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -0.008em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn-sm { height: 38px; padding: 0 17px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; }

/* The primary CTA stays monochrome: a raised, near-solid glass key, so the only
   colour in the composition is the accented phrase and the submit control. */
.btn-primary {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .74) 100%);
  /* no backdrop-filter here on purpose: at 95% fill it would be invisible, and
     this button is on screen at every scroll position — it is pure blur budget */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .95),
    inset 0 -9px 14px -10px rgba(20, 40, 90, .22),
    0 6px 14px -6px rgba(20, 40, 90, .24),
    0 1px 2px rgba(20, 40, 90, .10);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 1),
    inset 0 -9px 14px -10px rgba(20, 40, 90, .18),
    0 12px 22px -8px rgba(20, 40, 90, .28),
    0 1px 2px rgba(20, 40, 90, .10);
}
.on-dark .btn-primary { color: #0B1220; }

.btn-subtle { color: var(--ink-2); background: transparent; box-shadow: none; }
.btn-subtle:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px -4px rgba(20, 40, 90, .18);
}

.btn-ghost {
  color: var(--ink);
  background: var(--pane-fill);
  box-shadow: var(--lift-sm), var(--inner);
}
.btn-ghost:hover { transform: translateY(-1px); }
.on-dark .btn-ghost { color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Hero — the approved composition
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: 104px 0 120px; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; }
.hero-centered { text-align: center; }
.hero-copy { max-width: 900px; margin-inline: auto; }

.hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 22%,
      #FFFFFF 0%, #FDFEFF 24%, #F4F7FB 48%, #E7ECF4 72%, #DDE4EE 90%, #E6EBF3 100%);
  box-shadow:
    inset 0 -30px 46px -32px rgba(20, 40, 90, .28),
    inset 0 18px 30px -22px rgba(255, 255, 255, 1),
    0 48px 70px -38px rgba(20, 40, 90, .30);
}
.orb::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -6%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 40, 90, .20), rgba(20, 40, 90, 0) 100%);
  filter: blur(10px);
}
.orb-1 { width: clamp(190px, 30vw, 430px); aspect-ratio: 1; right: -4%;  top: 24%; }
.orb-2 { width: clamp(140px, 21vw, 300px); aspect-ratio: 1; right: 9%;   bottom: 2%; }
.orb-3 { width: clamp(170px, 27vw, 380px); aspect-ratio: 1; left: -6%;   top: 46%;
         border-radius: 48% 52% 55% 45% / 52% 47% 53% 48%; }
.orb-4 { width: clamp(90px, 12vw, 170px);  aspect-ratio: 1; left: 15%;   bottom: 6%; opacity: .92; }
.orb-5 { width: clamp(64px, 9vw, 124px);   aspect-ratio: 1; right: 20%;  top: 3%;   opacity: .85; }

/* dark spheres for the night band — same light direction, opposite value */
.orb-night {
  background:
    radial-gradient(circle at 34% 22%,
      #2E3A52 0%, #232D42 26%, #18202F 54%, #101724 78%, #0B111C 100%);
  box-shadow:
    inset 0 -30px 46px -32px rgba(0, 0, 0, .7),
    inset 0 18px 34px -24px rgba(160, 190, 255, .40),
    0 48px 80px -40px rgba(0, 0, 0, .6);
}
.orb-night::after { background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0) 100%); }
.orb-n1 { width: clamp(180px, 28vw, 400px); aspect-ratio: 1; right: -5%; top: 8%; opacity: .9; }
.orb-n2 { width: clamp(130px, 20vw, 290px); aspect-ratio: 1; left: -6%;  top: 52%; opacity: .8;
          border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%; }
.orb-n3 { width: clamp(90px, 13vw, 190px);  aspect-ratio: 1; right: 16%; bottom: 6%; opacity: .7; }

/* --------------------------------------------------------------------------
   7. The query card
   -------------------------------------------------------------------------- */
.hero-card { margin-top: 60px; }
.searchbox { border-radius: var(--r-slab); text-align: left; }
.searchbox::before { padding: 22px; }

.sb-gloss {
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(128% 116% at 50% -36%,
      rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .26) 42%,
      rgba(255, 255, 255, .04) 66%, rgba(255, 255, 255, 0) 78%);
}
/* internal sheen just UNDER the top edge, so the dark contact hairline stays
   the thing you read first */
.sb-gloss::after {
  content: "";
  position: absolute;
  left: 11%; right: 11%; top: 4px;
  height: 1.5px;
  border-radius: 999px;
  filter: blur(.6px);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 26%, rgba(255,255,255,.85) 74%, rgba(255,255,255,0) 100%);
}

.sb-top { padding: 22px 22px 6px; }
.sb-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 8px 8px 8px 20px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .40));
  -webkit-backdrop-filter: blur(1.4px) saturate(118%) brightness(1.03);
          backdrop-filter: blur(1.4px) saturate(118%) brightness(1.03);
  box-shadow:
    inset 0 2px 5px rgba(20, 40, 90, .10),
    inset 0 1px 0 rgba(11, 18, 32, .07),
    inset 0 -1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -10px 18px -14px rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, .7);
}
.sb-field-icon { width: 18px; height: 18px; color: var(--ink-4); }
.sb-query { font-size: 15px; font-weight: 450; line-height: 1.35; color: var(--ink-3); }
.sb-go {
  flex: none;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #4F8DFF 0%, #2563EB 60%, #1E56D6 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 14px -9px rgba(0, 0, 0, .40),
    0 8px 18px -8px rgba(29, 78, 216, .75);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sb-go svg { width: 17px; height: 17px; }
.sb-go:hover { transform: translateY(-1px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 14px 24px -9px rgba(29,78,216,.85); }

.sb-body { padding: 0 10px; }
.sb-results { padding: 18px 12px 6px; }
.sb-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px 10px;
}
.sb-status-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 3px rgba(20,40,90,.14);
}
.sb-status-tick svg { width: 10px; height: 10px; }

.sb-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.sb-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.sb-table th, .sb-table td { text-align: left; padding: 11px 16px; font-size: 13px; white-space: nowrap; }
.sb-table thead th {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hair);
}
.sb-table tbody tr + tr td { border-top: 1px solid var(--hair-soft); }
.sb-table td { color: var(--ink-2); font-weight: 450; }
.sb-table td:first-child { font-weight: 550; color: var(--ink); }
.sb-table .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sb-table tbody tr:hover td { background: rgba(255, 255, 255, .38); }

.sb-foot {
  margin: 6px 22px 0;
  padding: 18px 0 24px;
  border-top: 1px solid var(--hair);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9);
  text-align: center;
  font-size: 13.5px; font-weight: 450;
  color: var(--ink-3);
}
.sb-foot b { color: var(--ink); font-weight: 550; }

/* --------------------------------------------------------------------------
   8. Motion — copy left, app cropped off the right edge
   -------------------------------------------------------------------------- */
.motion { padding: 40px 0 120px; }
.motion-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.motion-copy h2 { font-size: clamp(28px, 3.2vw, 40px); }
.motion-copy .lede { max-width: 46ch; }

.motion-notes { display: grid; gap: 14px; margin-top: 40px; }
.motion-note { padding: 18px 22px; border-radius: var(--r-md); }
.motion-note h3 { font-size: 14.5px; margin-bottom: 6px; }
.motion-note p { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.motion-note b { font-weight: 600; color: var(--ink-2); }

/* The app is deliberately cropped: the frame is wider than its column and the
   column clips it, so the product runs off the right edge instead of being
   shrunk to a postage stamp. The scaler reads clientWidth, so it fills the
   wider box on its own. */
.motion-shot { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.motion-shot .shot { width: 158%; max-width: none; }

.shot { border-radius: var(--r-lg); overflow: hidden; }
.shot-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: rgba(255, 255, 255, .5);
}
.shot-chrome i { width: 9px; height: 9px; border-radius: 999px; background: rgba(11, 18, 32, .12); }
.shot-chrome .url {
  margin-left: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-4);
}
.appframe {
  position: relative;
  width: 100%;
  padding-top: 58.9%;          /* 1120 / 1900 — matches the iframe box below */
  overflow: hidden;
  background: #F7FAFF;
}
.appframe iframe {
  position: absolute; top: 0; left: 0;
  width: 1900px; height: 1120px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--app-scale, .63));
  pointer-events: none;        /* decorative — never steals a scroll or a click */
}

/* --------------------------------------------------------------------------
   9. API endpoints
   -------------------------------------------------------------------------- */
.api-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 26px; align-items: start; }
.api-list { display: grid; gap: 10px; min-width: 0; }

.api-row { border-radius: var(--r-md); }
.api-row[open] { --pane-fill: linear-gradient(157deg, rgba(255,255,255,.72), rgba(255,255,255,.48) 46%, rgba(255,255,255,.60)); }
.api-row summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.api-row summary::-webkit-details-marker { display: none; }
.api-row summary::after {
  content: "";
  margin-left: auto; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.api-row[open] summary::after { transform: rotate(45deg); }
.api-badge {
  flex: none;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18), inset 0 1px 0 rgba(255,255,255,.8);
  padding: 4px 8px; border-radius: 999px;
}
.api-body { padding: 0 18px 16px; }
.api-body .micro { display: block; margin-bottom: 6px; }
.api-body p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* the dark pane inside a light section — same material, other temperature */
.code-panel { border-radius: var(--r-lg); overflow: hidden; }
.code-panel.glass {
  /* denser than the light glass: code has to stay legible over a dot grid */
  --glass-fill: linear-gradient(157deg, rgba(10,14,24,.90) 0%, rgba(8,12,20,.86) 46%, rgba(10,14,24,.90) 100%);
}
.code-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.code-bar i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.code-docs {
  margin-left: auto;
  font-size: 12px; font-weight: 550; color: #fff;
  background: rgba(255, 255, 255, .12);
  padding: 6px 12px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.code-docs:hover { background: rgba(255, 255, 255, .2); }
.code-block {
  margin: 0;
  padding: 20px 22px 24px;
  font-family: var(--mono);
  font-size: 11.5px; line-height: 1.75;
  color: rgba(255, 255, 255, .74);
  max-height: 560px; overflow: auto; white-space: pre;
}
.c-key { color: #7FB0FF; font-weight: 600; letter-spacing: .1em; }
.c-str { color: #9BE7B4; }
.c-prop { color: #C7D3FF; }
.c-num { color: #FFC98A; }

h2 u { text-decoration: none; position: relative; white-space: nowrap; }
h2 u::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .06em;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  opacity: .55;
}

/* --------------------------------------------------------------------------
   10. Why teams — tabs
   -------------------------------------------------------------------------- */
.why-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  margin-bottom: 30px;
}
.why-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 13px 10px;
  border-radius: var(--r-pill);
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.why-tab:hover { color: var(--ink-2); }
.why-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 550;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.9), 0 4px 12px -6px rgba(20,40,90,.25);
}

/* ── THE TAB STACK — why the panels are stacked, not toggled ───────────────
   Every panel of a group is a grid item in the SAME cell (1 / 1). All of them
   are laid out, all of them contribute to the row's intrinsic height, so the
   stack is permanently as tall as the TALLEST panel at whatever the current
   viewport width happens to be — no JS measurement, no hard-coded px, and no
   height change when a tab is clicked. The construction this replaced hid the
   inactive panels with `display: none`, which took them out of flow: #why
   measured 740px on "Always-fresh data" and 898px on "AI research agents", so
   every click shoved the whole rest of the page up or down by up to 158px.

   Hiding is therefore `visibility` + `opacity`, never `display` and never the
   `hidden` attribute — either of those puts the jump straight back.

   FORBIDDEN here and on every ancestor up to the section, because each one
   re-creates by hand the clipping this rebuild exists to make impossible:
     height / max-height          a panel taller than the reservation gets cut
     overflow: hidden | clip      the same, and silently
     contain | content-visibility both let the box be sized from less than all
                                  of its content
     position: absolute on a panel it stops contributing its height at all      */
.tab-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.tab-stack > * { grid-area: 1 / 1; min-width: 0; }

/* Belt and braces. Nothing sets `hidden` on a panel any more — the tab handler
   in liquid.html deliberately does not — but if anything ever does, the UA
   sheet's `[hidden] { display: none }` would silently restore the height jump.
   Neutralise it at the source rather than rely on nobody re-adding it. */
.tab-stack > [hidden] { display: grid; }

/* Visible focus, stated rather than inherited: liquid.css sets no global
   outline, and the UA default ring is easy to lose against a glass pill.
   `--accent` is already redefined under .on-dark, so the dark tablist gets the
   pale blue without a second rule. The panels are keyboard-reachable too —
   #why's carry tabindex="0" because they hold no focusable of their own, which
   is what APG asks for — so they need a ring as well. */
.why-tab:focus-visible, .db-tab:focus-visible,
.why-panel:focus-visible, .db-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.why-stack { padding: 48px; border-radius: var(--r-slab); }

.why-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}
.why-panel.is-active {
  visibility: visible;
  opacity: 1;
  /* Fade IN only, and opacity only. The outgoing panel has no transition, so it
     is gone on the same frame and the two never overlap as ghosts.
     No `transform` in here on purpose: the old `whyFade` keyframe started the
     panel 8px down its own Y axis, and a translated panel paints outside its
     layout box — which is the one mechanism that can make a correctly sized
     panel look clipped for the duration of a tab change. */
  transition: opacity .26s ease;
}
/* grid children still need to clear the pseudo-elements of the card */
.why-panel > * { position: relative; z-index: 2; }

.why-copy h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.why-copy p { margin-top: 20px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 44ch; }
.why-chips { display: grid; gap: 9px; margin-top: 26px; }
.why-chips span {
  padding: 11px 15px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 13px; color: var(--accent-ink);
}
.why-art-inner { padding: 22px; border-radius: var(--r-lg); }

/* mock panels — flat, because there can be a dozen rows on screen */
.mock { border-radius: var(--r-lg); }
.mock.glass { padding: 22px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.mock-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 13px;
}
.mock-row:last-child { border-bottom: 0; }
.mock-ent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mock-av {
  width: 30px; height: 30px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  font-family: var(--mono);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px -3px rgba(20, 40, 90, .4);
}
.mock-name { font-weight: 550; font-size: 13px; line-height: 1.25; color: var(--ink); }
.mock-sub { font-size: 11.5px; color: var(--ink-4); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pill-ok { background: var(--ok-fill); color: var(--ok-ink); }
.pill-warn { background: var(--warn-fill); color: var(--warn-ink); }
.pill-neutral { background: rgba(11, 18, 32, .05); color: var(--ink-4); }
.on-dark .pill-neutral { background: rgba(255, 255, 255, .07); }

/* --------------------------------------------------------------------------
   11. The engine — the same material at the dark temperature
   -------------------------------------------------------------------------- */
.dark-band {
  position: relative;
  padding: 128px 0 136px;
  isolation: isolate;
  /* specular lips top and bottom: the page reads as looking at the top face of
     a thick dark slab, not as a black rectangle pasted over the design */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    0 40px 80px -50px rgba(0, 0, 0, .5);
}
.dark-band > .wrap-wide { position: relative; z-index: 1; }

.db-head { text-align: center; margin-bottom: 46px; }
.db-head h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; }

.db-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  margin-bottom: 44px;
  max-width: 620px;
  margin-inline: auto;
}
.db-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 13px 10px;
  border-radius: var(--r-pill);
  font: inherit; font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.db-tab:hover { color: var(--ink-2); }
.db-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 6px 16px -8px rgba(0, 0, 0, .6);
}

/* Same stack contract as .why-panel above — see the comment on .tab-stack for
   why these are laid out permanently instead of toggled with `display`.
   `position: relative` is load-bearing separately: .db-art is `inset: 0` inside
   the panel and needs this as its containing block. */
.db-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 60px;
  align-items: start;
  visibility: hidden;
  opacity: 0;
}
.db-panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity .26s ease;
}
.db-copy h3 { font-size: clamp(26px, 2.7vw, 36px); letter-spacing: -0.03em; color: var(--ink); }
.db-copy p { margin-top: 20px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.db-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.db-chips span {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.db-art { position: absolute; inset: 0 0 0 auto; width: 46%; border-radius: var(--r-lg); overflow: hidden; z-index: 0; opacity: .5; }
.db-art img { width: 100%; height: 100%; object-fit: cover; }
.db-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,12,20,1) 0%, rgba(8,12,20,.72) 40%, rgba(8,12,20,.45) 100%);
}
.db-panel > .db-copy, .db-panel > .db-demo { position: relative; z-index: 1; }

.db-demo { padding: 30px; border-radius: var(--r-lg); }
.db-demo-label {
  display: block;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 16px;
}
.db-prompt {
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .12);
}
.db-prompt p { margin-bottom: 18px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.db-run {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550;
  color: #0B1220;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 14px -6px rgba(0,0,0,.5);
  transition: transform .16s ease;
}
.db-run:hover { transform: translateY(-1px); }

.db-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.db-steps li {
  display: flex; align-items: center; gap: 13px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.db-steps i {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.db-divide {
  height: 1px;
  margin: 96px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, rgba(255,255,255,0));
}

.db-flow-head { max-width: 720px; margin-bottom: 42px; }
.db-flow-head h3 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
.db-flow-head p { margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }

.db-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.db-step { padding: 28px 26px; border-radius: var(--r-lg); }
.db-step-n {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.db-step h4 { margin-bottom: 9px; font-size: 17px; color: var(--ink); }
.db-step p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

.db-table-wrap { border-radius: var(--r-lg); overflow: hidden; }
.db-table { width: 100%; border-collapse: collapse; }
.db-table th, .db-table td {
  padding: 16px 22px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--hair-soft);
}
.db-table thead th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, .04);
}
.db-table tbody th { font-weight: 550; color: var(--ink); width: 32%; }
.db-table td { color: var(--ink-3); }
.db-table .us { color: var(--ink); font-weight: 550; background: rgba(255, 255, 255, .05); }
.db-table thead .us { color: var(--accent-ink); background: rgba(111, 166, 255, .10); }
.db-table tbody tr:last-child th, .db-table tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Data honesty
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.split h2 { font-size: clamp(26px, 2.8vw, 36px); }
.split .lede { font-size: 16px; }

.coverage { display: grid; gap: 14px; }
.cov-row { display: grid; grid-template-columns: 150px 1fr 46px; gap: 16px; align-items: center; }
.cov-row .label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cov-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 18, 32, .07);
  box-shadow: inset 0 1px 2px rgba(20, 40, 90, .14), inset 0 -1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
}
.cov-bar i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cov-row .val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: right; }

.cov-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--warn-fill);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--warn-ink);
  font-size: 13px; line-height: 1.6;
}
.cov-note b { display: block; margin-bottom: 4px; font-weight: 600; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details { border-radius: var(--r-md); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 15px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 24px 22px; font-size: 14px; line-height: 1.68; color: var(--ink-3); max-width: 72ch; }

/* --------------------------------------------------------------------------
   14. Closing band — full-bleed, locked, flush against the footer
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  padding: 128px 0 140px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.closing-media { position: absolute; inset: 0; z-index: 0; }
.closing-media img { width: 100%; height: 100%; object-fit: cover; }
/* The image is pushed into night so the band hands off to the footer with no
   seam — the page ends on one continuous dark mass rather than fading out. */
.closing-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 9, 16, .82) 0%, rgba(6, 9, 16, .62) 34%, rgba(6, 9, 16, .86) 78%, #06090F 100%),
    radial-gradient(80% 60% at 50% 40%, rgba(20, 40, 90, .30), rgba(6, 9, 16, .1) 70%);
}
.closing-inner { position: relative; z-index: 1; }
.closing h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; }
.closing .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   15. Night footer
   -------------------------------------------------------------------------- */
.footer-night {
  position: relative;
  overflow: hidden;
  padding: 84px 0 44px;
  background: linear-gradient(180deg, #06090F 0%, #080C15 40%, #05080D 100%);
  isolation: isolate;
}
/* gradient hairline — the deliberate join between the closing band and the footer */
.footer-night::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 30%, rgba(160,200,255,.45) 50%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0));
  z-index: 3;
}
/* blueprint grid */
.footer-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, transparent 76%);
}
/* corner glow */
.footer-glow {
  position: absolute; z-index: 0;
  right: -12%; top: -40%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(79, 141, 255, .18), rgba(79, 141, 255, 0) 62%);
  filter: blur(30px);
}
.footer-inner { position: relative; z-index: 1; }

.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hair-soft);
}
.footer-top .brand-badge { width: 44px; height: 44px; }
.footer-top .brand { --wordmark-h: 17px; }
.footer-claim { font-size: 15px; font-weight: 450; color: var(--ink-2); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  padding: 48px 0 0;
}
.footer-brand p { font-size: 13.5px; line-height: 1.65; color: var(--ink-3); max-width: 34ch; }
/* mono micro-label, but still a heading — weight stays at 500 per the standing
   instruction; the letterspacing and case carry the label treatment instead */
.footer h4 {
  margin-bottom: 16px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.footer li a { font-size: 13.5px; color: var(--ink-2); transition: color .15s ease; }
.footer li a:hover { color: #fff; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--hair-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   16. Reveal on scroll — opt-in, so no-JS shows everything
   -------------------------------------------------------------------------- */
.has-reveal .rise { opacity: 0; transform: translateY(18px); }
.has-reveal .rise.in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .orb-1, .orb-n1 { animation: orbFloat 26s ease-in-out infinite alternate; }
  .orb-2, .orb-n2 { animation: orbFloat 34s ease-in-out infinite alternate-reverse; }
  .orb-3, .orb-n3 { animation: orbFloat 30s ease-in-out infinite alternate; }
  .orb-5 { animation: orbFloat 22s ease-in-out infinite alternate-reverse; }
}
@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -22px, 0); }
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --r-slab: 44px; }
  .hero { padding: 88px 0 100px; }
  .section { padding: 96px 0; }
  .motion { padding: 24px 0 96px; }
  .motion-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .motion-shot .shot { width: 100%; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .db-panel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .db-art { display: none; }
  .db-steps-grid { grid-template-columns: minmax(0, 1fr); }
  .api-grid { grid-template-columns: minmax(0, 1fr); }
  .why-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .why-stack { padding: 32px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { gap: 12px; }
  .why-tabs, .db-tabs { grid-auto-flow: row; grid-auto-columns: auto; border-radius: var(--r-lg); }
  .why-tab, .db-tab { border-radius: var(--r-md); }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; --r-slab: 34px; --r-lg: 22px; }
  .hero { padding: 64px 0 84px; }
  .section { padding: 76px 0; }
  .section-tight { padding: 64px 0; }
  .hero-card { margin-top: 40px; }
  .searchbox::before { padding: 14px; }
  .sb-top { padding: 14px 14px 4px; }
  .sb-field { padding: 8px 8px 8px 16px; gap: 10px; }
  .sb-query { font-size: 14px; }
  .sb-body { padding: 0 4px; }
  .sb-results { padding: 14px 8px 4px; }
  .sb-status { margin-left: 6px; }
  .sb-foot { margin: 4px 16px 0; padding: 15px 0 20px; font-size: 12.5px; }
  .orb-4, .orb-5 { display: none; }
  .dark-band { padding: 88px 0 96px; }
  .db-divide { margin: 64px 0; }
  .db-demo { padding: 22px; }
  .closing { padding: 88px 0 96px; }
  .cov-row { grid-template-columns: 118px 1fr 42px; gap: 12px; }
  .mock-row { grid-template-columns: minmax(0, 1.4fr) auto; row-gap: 6px; }
  .mock-row > .mock-sub { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-table-wrap { overflow-x: auto; }
  .db-table { min-width: 620px; }
}

@media (max-width: 460px) {
  :root { --gutter: 14px; --r-slab: 28px; }
  .nav { padding-top: 12px; }
  .nav-inner { padding: 8px 8px 8px 12px; }
  .brand-badge { width: 32px; height: 32px; }
  .btn-sm { height: 36px; padding: 0 13px; font-size: 12.5px; }
  .sb-table th, .sb-table td { padding: 10px 13px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .why-stack { padding: 24px; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion — required, not optional
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .orb-night { animation: none !important; }
  .rise, .has-reveal .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* The panel cross-fade is the whole animation budget of the tab widget now
     (the old translate-based keyframe is gone); switching is instant here. */
  .why-panel, .db-panel,
  .why-panel.is-active, .db-panel.is-active { transition: none !important; }
  .btn:hover, .db-run:hover, .sb-go:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Footer emblem — the white coin cut out of logo-white.png.
   `max-width: none` is load-bearing: the global `img { max-width: 100% }` will
   otherwise clamp it against a shrink-to-fit flex parent and squash the circle
   into an oval. That exact bug cost three attempts on the nav badge.
   The emblem is a line drawing, not a filled disc, so it reads lighter than the
   glass coin at the same box size — hence slightly larger here.
   -------------------------------------------------------------------------- */
.brand-badge-white {
  flex: none;
  width: 46px;
  height: 46px;
  max-width: none;
  display: block;
  box-shadow: none;
  filter: none;
}
.footer-top .brand-badge-white { width: 46px; height: 46px; }

/* ==========================================================================
   BENCHMARKS — the dark band's content.
   Replaces Source / Enrich / Act (archived at archive/engine-source-enrich-act.html).

   Full-bleed split: a dark rail carrying the copy and the tab list, and a LIGHT
   chart half that runs to the viewport edge. The chart surface is light on
   purpose — the categorical palette (one accent against one recessive neutral)
   was validated against a light surface, and a dark surface needs its own
   re-validated steps rather than an automatic flip.

   The tabs carry NO legacy classes. They were briefly `.db-tab`, which brought
   the pill/glass treatment with it and rendered them as horizontal ovals; the
   inline script now wires `.bmk-tab` instead.
   ========================================================================== */

#engine { padding: 0; }
.bmk-grid {
  width: 100%; max-width: none; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 0; align-items: stretch;
}
@media (max-width: 1020px) { .bmk-grid { grid-template-columns: minmax(0, 1fr); } }

.bmk-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(64px, 7vw, 118px) clamp(28px, 4.5vw, 80px);
}
.bmk-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48); margin-bottom: 20px;
}
.bmk-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.bmk-copy .lede { margin-top: 20px; max-width: 40ch; }

/* the tab rail — a plain list, active item marked by a 2px accent rule */
.bmk-tabs { display: grid; gap: 2px; margin-top: 46px; }
.bmk-tab {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 2px solid rgba(255,255,255,.14);
  border-radius: 0; box-shadow: none;
  font: inherit; letter-spacing: normal; text-transform: none;
  padding: 13px 0 13px 20px;
  transition: border-color .25s ease, opacity .25s ease;
  opacity: .5;
}
.bmk-tab::before, .bmk-tab::after { display: none; }
.bmk-tab:hover { opacity: .78; }
.bmk-tab[aria-selected="true"] { opacity: 1; border-left-color: #6AA0FF; }
.bmk-tab-name { display: block; font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -.01em; }
.bmk-tab-desc {
  display: block; max-width: 44ch;
  font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.6);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.bmk-tab[aria-selected="true"] .bmk-tab-desc { max-height: 9em; opacity: 1; margin-top: 9px; }

/* ---------------------------------------------------- the light chart half */
.bmk-stack { background: #FAFAF9; }
.bmk-panel { display: block; }
.bmk-figure {
  margin: 0; padding: clamp(32px, 3.4vw, 56px) clamp(24px, 3.4vw, 60px);
  background: none; color: #0B1220; box-shadow: none; border-radius: 0;
}
.bmk-cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #43506B; margin-bottom: 10px;
}
.bmk-cap span { letter-spacing: .05em; text-transform: none; font-weight: 500; color: #8A93A6; }
.bmk-legend { display: flex; gap: 20px; justify-content: flex-end; margin-bottom: 22px; }
.bmk-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #43506B; }
.bmk-swatch { width: 11px; height: 11px; border-radius: 3px; background: #DCDCD8; }
.bmk-swatch.is-us { background: #3A34D2; }

/* --------------------------------------------------- grouped vertical bars */
.bmk-plot {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0 10px; align-items: stretch;
}
.bmk-ytitle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: center; margin: 0 4px 46px 0;
  font-size: 11.5px; color: #5A6478;
}
.bmk-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--plot-h, 330px); margin-bottom: 46px; text-align: right;
  font-family: var(--mono); font-size: 10px; color: #98A2B3;
}
.bmk-groups { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 34px; }
.bmk-group { display: grid; grid-template-rows: var(--plot-h, 330px) auto auto; }

/* gridlines at every 25% — recessive, drawn behind the marks */
.bmk-bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 12px; align-items: end;
  border-bottom: 1px solid #D7DBE3;
  background-image: repeating-linear-gradient(to top, #ECEEF2 0 1px, rgba(0,0,0,0) 1px 25%);
}
/* The bar is a flex column anchored to the baseline, so the value label rides
   directly on top of the fill instead of floating at the top of the plot. The
   fill's percentage resolves against the bar's own definite height, and the
   label's 24px is subtracted identically for every bar — so one scale, always.
   (An earlier version let each bar's labels size themselves, which gave our
   bolder series a shorter track and drew 36.0% below 34.5%.) */
.bmk-bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.bmk-val {
  flex: none; height: 24px; line-height: 18px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: #0B1220; text-align: center; white-space: nowrap;
}
.bmk-bar-fill {
  flex: none; display: block;
  height: calc((100% - 24px) * var(--v) / var(--max));
  background: #DCDCD8; border-radius: 4px 4px 0 0;
}
.bmk-bar.is-us .bmk-bar-fill { background: #3A34D2; }

/* names in their own row below the axis, so they cannot steal bar height */
.bmk-names {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 12px; padding-top: 9px;
}
.bmk-who { font-size: 11px; color: #5A6478; text-align: center; line-height: 1.3; }
.bmk-who.is-us { color: #3A34D2; font-weight: 600; }
.bmk-group-label {
  margin-top: 16px; text-align: center;
  font-size: 13.5px; font-weight: 500; color: #0B1220;
}

/* ------------------------------------------------------- horizontal bars */
.bmk-hplot { display: grid; gap: 20px; padding: 14px 0 6px; }
.bmk-hrow { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.bmk-hname { font-size: 12.5px; color: #43506B; text-align: right; }
.bmk-hrow.is-us .bmk-hname { color: #3A34D2; font-weight: 600; }
.bmk-htrack { display: block; height: 34px; }
.bmk-hfill {
  display: block; height: 100%;
  width: calc(var(--v) / var(--max) * 100%);
  background: #DCDCD8; border-radius: 0 4px 4px 0;
}
.bmk-hrow.is-us .bmk-hfill { background: #3A34D2; }
.bmk-hval { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #0B1220; }

@media (prefers-reduced-motion: reduce) {
  .bmk-tab, .bmk-tab-desc { transition: none !important; }
}

/* Field-coverage tab: ONE series, so no legend — the caption names what is
   plotted, and a legend box for a single colour is noise. Same accent as our
   series elsewhere, because it is the same subject: our own corpus. */
.bmk-cov .bmk-hrow { grid-template-columns: 132px minmax(0, 1fr) auto; }
.bmk-cov .bmk-hname { color: #0B1220; font-weight: 500; }
.bmk-cov .bmk-htrack { background: #ECEEF2; border-radius: 4px; }
.bmk-cov .bmk-hfill { border-radius: 4px; }

/* CTA band left-aligned — copy and buttons both. `.cta-band` centred the text
   and `.btn-row` centred the buttons, so both have to move or the buttons stay
   stranded under left-aligned copy. */
.closing .cta-band, .closing .section-head.center { text-align: left; }
.closing .cta-band .btn-row, .closing .btn-row { justify-content: flex-start; }
.closing .lede, .closing .section-head { margin-inline: 0; }
.closing-inner { text-align: left; }

/* --- Benchmarks: 50/50 split, deeper left inset, site-matched chart surface ---
   The chart half was #FAFAF9 (a warm off-white lifted from the reference), which
   read as a different paper from the rest of the page. The site's ground is the
   cool near-white .lq-base resolves to, so the panel now uses that instead and
   the two halves belong to the same document. */
.bmk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bmk-copy { padding-left: clamp(44px, 8.5vw, 150px); padding-right: clamp(28px, 3.4vw, 64px); }
.bmk-stack { background: #F7F9FC; }
.bmk-figure { background: none; }
.bmk-bars { background-image: repeating-linear-gradient(to top, #E7EBF2 0 1px, rgba(0,0,0,0) 1px 25%); }
.bmk-cov .bmk-htrack { background: #E6EBF3; }

/* The dark band cast `0 40px 80px -50px` below itself — a hard shadow onto the
   near-white section following it, which is the highest-contrast edge on the
   page and reads as a seam. The two inset specular lips stay: those are what
   make the band read as the top face of a slab rather than a black rectangle. */
#engine {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .10);
}

/* --- Closing band aligned to the footer's column ---------------------------
   The closing band used `.wrap` (the narrow column the API/FAQ sections use)
   while the footer below it uses `.wrap-wide`, so once the CTA went
   left-aligned its text started ~30px inside the footer's left edge — two
   different columns stacked directly on top of each other.
   The band now shares the footer's width, and the inner blocks stop centring
   themselves: `.section-head` carries `max-width: 760px; margin-inline: auto`,
   which left-aligns the TEXT inside a block that is still centred — the text
   lines up with nothing. */
.closing-inner {
  width: min(var(--page-w), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.closing .band-inner,
.closing .section-head,
.closing .cta-band { max-width: none; margin-inline: 0; width: 100%; }
.closing .lede { max-width: 54ch; margin-inline: 0; }

/* ==========================================================================
   Benchmarks charts — the liquid-glass treatment.

   Rule that governs all of it: NOTHING here may touch the box that carries the
   value. Bar height is `calc((100% - 24px) * var(--v) / var(--max))` and stays
   exactly that; every effect below is fill, edge, shadow or a pseudo-element.
   A chart is allowed to be beautiful only after it is true.

   The gradient's lightest stop was checked against the frosted neutral rather
   than assumed: #6C63FF vs #E2E7F1 measures ΔE 39.1 for normal vision, so the
   two series stay separable at the point where they come closest.
   ========================================================================== */

/* the plate the chart sits on — one soft pane, not a hard card */
.bmk-figure {
  border-radius: 26px;
  background:
    linear-gradient(168deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.52) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 40px 70px -52px rgba(20,40,90,.5);
}

/* gridlines pulled further back — glass reads better over a quieter ground */
.bmk-bars { background-image: repeating-linear-gradient(to top, rgba(11,18,32,.055) 0 1px, rgba(0,0,0,0) 1px 25%); }

/* -------------------------------------------------------------- the marks */
.bmk-bar-fill, .bmk-hfill {
  position: relative;
  border-radius: 11px 11px 5px 5px;
  overflow: hidden;
  /* a bright contact line along the top edge is what makes a solid read as a
     lit surface rather than a painted rectangle */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -14px 22px -18px rgba(20,40,90,.35),
    0 14px 24px -16px rgba(20,40,90,.40);
}
.bmk-hfill { border-radius: 5px 11px 11px 5px; }

/* comparator: frosted glass, not flat grey */
.bmk-bar-fill, .bmk-cov .bmk-hrow:not(.is-us) .bmk-hfill, .bmk-hrow:not(.is-us) .bmk-hfill {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(233,237,244,.78) 40%, rgba(216,222,233,.86) 100%);
  border: 1px solid rgba(255,255,255,.85);
}

/* our series: the same material at the accent temperature, lit from above */
.bmk-bar.is-us .bmk-bar-fill, .bmk-hrow.is-us .bmk-hfill {
  background:
    linear-gradient(180deg, #6C63FF 0%, #4C42E4 42%, #3A34D2 100%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -16px 26px -18px rgba(10,14,60,.55),
    0 16px 30px -16px rgba(58,52,210,.48);
}

/* specular sweep — a narrow highlight down the left of every mark, the thing
   that sells a column as a rounded body of glass rather than a flat swatch */
.bmk-bar-fill::after, .bmk-hfill::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 26%,
    rgba(255,255,255,0) 52%, rgba(255,255,255,.10) 100%);
}

/* coverage track: a frosted channel the fill sits inside */
.bmk-cov .bmk-htrack {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(226,231,241,.55));
  border-radius: 11px;
  box-shadow: inset 0 1px 2px rgba(20,40,90,.10), inset 0 0 0 1px rgba(255,255,255,.7);
}

/* the legend swatches wear the same material as the marks they stand for */
.bmk-swatch {
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(216,222,233,.9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 5px -3px rgba(20,40,90,.5);
}
.bmk-swatch.is-us {
  background: linear-gradient(180deg, #6C63FF, #3A34D2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 7px -3px rgba(58,52,210,.6);
}

@media (prefers-reduced-motion: reduce) {
  .bmk-bar-fill::after, .bmk-hfill::after { display: none; }
}

/* Section headings break evenly instead of leaving a short orphan line.
   "Why teams are integrating our API & MCP" was wrapping 25 characters over 13;
   `text-wrap: balance` lets the browser pick the break that minimises raggedness,
   and the max-width keeps it to two lines rather than one very long one on a
   wide viewport. Balance is capped at ~6 lines by the spec, so it costs nothing
   on the longer headings. */
.section-head h2, .why-head h2, #why h2 {
  /* `text-wrap: balance` only. An earlier version also clamped these to 22ch,
     which squeezed the API heading so hard the words stretched apart — the
     constraint fought the centring instead of helping the break. */
  text-wrap: balance;
}

/* --- Charts: blue, not indigo -------------------------------------------
   The reference deck was indigo; this site's accent is #2563EB and the charts
   were the only surface disagreeing with it. Same material, same three-stop
   "lit from above" construction, moved onto the brand hue.
   Re-validated at the point the series come closest — the gradient's LIGHTEST
   stop against the frosted neutral: #5B95FF vs #E2E7F1 measures ΔE 29.0 normal
   and 26.4 protan, so the two remain separable for colourblind readers too. */
.bmk-bar.is-us .bmk-bar-fill, .bmk-hrow.is-us .bmk-hfill {
  background: linear-gradient(180deg, #5B95FF 0%, #3B7AF0 42%, #2563EB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -16px 26px -18px rgba(8, 30, 80, .55),
    0 16px 30px -16px rgba(37, 99, 235, .46);
}
.bmk-swatch.is-us {
  background: linear-gradient(180deg, #5B95FF, #2563EB);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 7px -3px rgba(37,99,235,.6);
}
.bmk-who.is-us, .bmk-hname.is-us { color: #1D4ED8; }
.bmk-tab[aria-selected="true"] { border-left-color: #4F8DFF; }

/* #why sits between the hero-side sections and the dark band. Its symmetric
   120px padding left the heading crowding the section above and the panel
   sitting tight against the band below, so the weight is shifted downward:
   less air above the heading, more between the panel and the dark edge. */
#why { padding-top: 84px; padding-bottom: 168px; }