/* =====================================================================
   Profound — built on the Auros style reference
   Abyssal terminal with bioluminescent data orbs
   ===================================================================== */

:root {
  /* --- Colors ------------------------------------------------------ */
  --color-liquid-abyss: #012624;
  --color-liquid-deep: #011d1c;
  --color-liquid-kelp: #003734;
  --color-liquid-mist: #edfffe;
  --color-platinum: #ffffff;
  --color-silver-mist: #bbc7c6;
  --color-ash: #f2f2f2;
  --color-slate-deep: #707777;
  --color-lavender-phosphor: #fde9ff;

  /* Answer scoreboard. Ordinal cell scale, validated against the
     #012624 surface: one hue, monotone lightness, light end clears 2:1. */
  --viz-cited: #26a894;
  --viz-mentioned: #1b6459;
  /* the only ink that clears 4.5:1 on the mentioned fill */
  --viz-mentioned-ink: #7fd8c8;
  --viz-muted: #8b9e9c;
  --viz-good: #0ca30c;
  /* the one amber, reserved for work in flight */
  --viz-running: #c98500;

  /* Trend ramp. Both trend panels rank their series — highest score, most
     visits — so the scale is ordered rather than categorical: one hue, lit
     from brightest (top of the ranking) to deepest, which also keeps the
     charts inside the page's own palette instead of importing five foreign
     hues. Identity never rests on the ramp: the key prints every series by
     name and value. Validated against the #011d1c panel surface — every
     step clears 3:1 (16.4, 10.8, 7.1, 4.7, 3.1) and neighbours sit a even
     1.5:1 apart in luminance, which is what keeps adjacent lines apart
     under any colour vision. */
  --viz-rank-1: #d6fffa;
  --viz-rank-2: #7fdbd0;
  --viz-rank-3: #3eb6aa;
  --viz-rank-4: #1d9389;
  --viz-rank-5: #10736c;
  /* sixth rank, for the one chart with six series (bot visits by engine) */
  --viz-rank-6: #0b5450;
  /* The agent surface's one live signal — the working node, the wire light,
     and the output that node is producing. Sits at the mint end of the ramp
     so the flow reads as part of the same family as the charts. */
  --flow-live: #7fe3c6;
  --flow-live-rgb: 127, 227, 198;
  /* the highlighter — the only saturated accent, reserved for a citation mark */
  --color-citrine: #f2e85c;
  /* the one alarm colour, reserved for "not named" */
  --color-coral: #ff7a5a;
  /* liquid-mist as channels, so the demand wash can be mixed at any alpha */
  --mist-rgb: 237, 255, 254;

  --gradient-bioluminescent: linear-gradient(90deg, rgb(0, 130, 124) 0%, rgb(203, 255, 252) 100%);
  --gradient-aurora: linear-gradient(90deg,
      rgb(203, 255, 252) 0%,
      rgb(237, 255, 254) 26.25%,
      rgb(255, 253, 250) 47.57%,
      rgb(250, 209, 255) 88.96%);

  --hairline: rgba(255, 255, 255, .10);
  --hairline-soft: rgba(255, 255, 255, .06);
  --hairline-strong: rgba(255, 255, 255, .28);
  /* the only fill a ruled surface gets: a breath of light under the cursor */
  --wash: rgba(237, 255, 254, .03);
  --kelp-half: rgba(3, 81, 75, .5);

  /* --- Type -------------------------------------------------------- */
  --font-matter: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  /* a prompt is typed text, so prompts and the figures beside them are set as
     typed text; utility face only — never for headings or body copy */
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;

  --text-caption: 10px;
  --text-body: 16px;
  --text-subheading: 24px;
  --text-heading: 36px;
  --text-heading-lg: 61px;
  --text-display: 96px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* --- Spacing ----------------------------------------------------- */
  --spacing-12: 12px;  --spacing-16: 16px;  --spacing-20: 20px;
  --spacing-24: 24px;  --spacing-28: 28px;  --spacing-32: 32px;
  --spacing-36: 36px;  --spacing-40: 40px;  --spacing-48: 48px;
  --spacing-64: 64px;  --spacing-80: 80px;  --spacing-120: 120px;
  --spacing-140: 140px; --spacing-160: 160px;

  /* --- Layout ------------------------------------------------------ */
  --page-max-width: 1440px;
  --nav-h: 60px;
  --shell-pad: var(--spacing-40);
  --section-gap: 68px;
  --band: clamp(80px, 9vw, 140px);

  /* --- Radii ------------------------------------------------------- */
  --radius-cards: 16px;
  --radius-small: 6px;

  /* --- Easing ------------------------------------------------------ */
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
}

/* =====================================================================
   Reset
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-liquid-abyss);
  color: var(--color-silver-mist);
  font-family: var(--font-matter);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-platinum);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--color-lavender-phosphor);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--spacing-16); top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-small);
  background: var(--color-liquid-kelp); color: var(--color-platinum);
  font-family: var(--font-arial); font-size: 14px;
  transition: top .18s ease;
}
.skip:focus { top: var(--spacing-16); }

/* =====================================================================
   Layout primitives
   ===================================================================== */

.shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* Every band gets its vertical rhythm from one rule. */
.statement, .demand, .explore, .botvisits, .quote, .report, .channels, .events, .closer {
  padding-block: var(--band);
}
/* Demand opens straight off the stats, which already close the statement
   band — it only needs its own tail */
.demand { padding-top: var(--spacing-40); }
/* the solutions band ends on a short two-column row, so it sheds half its
   tail rather than opening a void above Events */
.channels { padding-bottom: var(--spacing-64); }
.events { padding-top: var(--spacing-80); }

/* =====================================================================
   Type roles
   ===================================================================== */

.kicker {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}
/* named --center historically; it now tracks the shell's left edge like
   every other kicker on the page */
.kicker--center {
  color: var(--color-liquid-mist);
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.h-xl {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  letter-spacing: -.04em;
}
.h-lg {
  font-size: clamp(2.1rem, 4.6vw, 3.55rem);
  letter-spacing: -.038em;
}
.h-md {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em;
}
.h-sm {
  font-size: var(--text-subheading);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.body-lg {
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-silver-mist);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-arial);
  font-size: 14px;
  color: var(--color-silver-mist);
  transition: color .2s ease;
}
.textlink span { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.textlink:hover { color: var(--color-liquid-mist); }
.textlink:hover span { transform: translate(2px, -2px); }

/* =====================================================================
   Buttons
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-small);
  padding: 15px 22px;
  font-family: var(--font-arial);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), filter .2s ease, background-color .2s ease;
}
.btn--sm { padding: 11px 16px; }

.btn--aurora {
  background-image: var(--gradient-aurora);
  color: #012624;
}
.btn--aurora:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn--kelp {
  background-color: var(--color-liquid-kelp);
  color: var(--color-platinum);
}
.btn--kelp:hover { background-color: #00463f; transform: translateY(-1px); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-liquid-mist);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.btn--ghost:hover { background-color: rgba(255,255,255,.05); }

.link-quiet {
  font-family: var(--font-arial);
  font-size: 14px;
  color: var(--color-silver-mist);
  transition: color .2s ease;
}
.link-quiet:hover { color: var(--color-platinum); }

/* =====================================================================
   Header
   ===================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(1, 29, 28, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}

.nav__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 0 var(--shell-pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}

.mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-platinum);
}
.mark__word {
  /* fluid with the viewport, like every other type role on the page,
     rather than pinned to one pixel size regardless of how much room
     the page actually has */
  font-size: clamp(1.35rem, 1.6vw + .9rem, 1.75rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: -.02em;
}
/* "find" and the trailing mark carry the one accent in the wordmark —
   the site's own aurora sweep, already the CTA's signature gradient,
   rather than a colour invented just for the logo. */
.mark__accent,
.mark__plus {
  background-image: var(--gradient-aurora);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.mark__plus {
  font-size: .55em;
  font-weight: var(--font-weight-medium);
  margin-left: 1px;
}

/* the header runs slimmer than the footer: the wordmark steps down a size
   so the bar reads as a rule with a logo on it, not a band — still fluid,
   just a smaller band of the same clamp */
.nav .mark__word { font-size: clamp(1.1rem, 1vw + .8rem, 1.35rem); }
.nav .btn { padding: 9px 16px; font-size: 13px; }
.nav .link-quiet { font-size: 13px; }

.nav__links {
  display: flex;
  gap: var(--spacing-24);
  margin-inline: auto;
}
.nav__links a {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--color-platinum); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.nav__toggle {
  display: none;
  width: 36px; height: 36px;
  background: none; border: 0; cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.nav__toggle span {
  display: block; height: 1px; width: 22px;
  background: var(--color-platinum);
  transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav__drawer {
  display: none;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-24) var(--shell-pad) var(--spacing-40);
  background: var(--color-liquid-deep);
  border-top: 1px solid var(--hairline-soft);
}
.nav__drawer a:not(.btn) {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}
.nav__drawer .btn { align-self: flex-start; }

/* =====================================================================
   Hero
   ===================================================================== */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: var(--spacing-80) var(--spacing-120);
  overflow: hidden;
}

/* Quiet light behind the centred column — the hero carries no artwork,
   so the depth has to come from the ground itself. */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 42%, rgba(0, 130, 124, .34) 0%, rgba(0, 130, 124, .11) 46%, rgba(1, 38, 36, 0) 72%),
    radial-gradient(80% 52% at 50% 104%, rgba(250, 209, 255, .07) 0%, rgba(1, 38, 36, 0) 62%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-24);
}

.hero__title {
  font-size: clamp(2.35rem, 5vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -.046em;
  max-width: 20ch;
  margin-inline: auto;
}

/* Each headline line is its own animated block (the split the motion.dev
   editorial hero performs at runtime, authored here instead). */
.hero__line { display: block; }

/* Line two is "to win in <rotator>". The rotator is the word that finishes
   the sentence, so the line must never break in front of it — and since the
   headline is sized in vw, holding it on one line stays safe until the clamp
   floors out, where the mobile rule below lets it wrap again. */
.hero__line--rotor { white-space: nowrap; }

/* Held until the stagger is armed — see the guard script in the document head.
   main.js clears this with an inline style the moment it starts the sequence. */
.js-stagger #hero-stage { visibility: hidden; }

/* Split primitives — the runtime split writes these classes. Lines are
   blocks so each can be animated on its own; words are inline-blocks so their
   offsetTop reports which line the browser put them on, and so the scrubbed
   reveal can blur one word without blurring its neighbours. */
.split-line { display: block; }
.split-word { display: inline-block; vertical-align: top; }

/* The scrubbed reveal writes filter and opacity inline on every frame it
   changes, so the words must not carry a transition of their own — the scroll
   position is the timeline, and any easing on top would lag behind the thumb.
   Words are left in normal flow: nothing here moves, only focus changes. */
[data-blur-reveal] .split-word { transition: none; }

/* Word rotator — the headline finishes itself */
.rotator {
  display: inline-flex;
  justify-content: center;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.04em;
  width: var(--rw, auto);
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
/* The slot holds its widest-word width and is centred inside the box, so a
   word stays on the headline's axis for every frame of the width transition
   instead of drifting toward the target width. */
.rotator__slot {
  flex: 0 0 auto;
  display: grid;
  grid-template-areas: "w";
  justify-items: center;
}
/* The word is now a row: engine mark, then the word itself. The gradient
   moved down to the label so the text still clips its own fill, while the
   mark takes the same gradient through an SVG paint server (#brand-grad,
   defined once in the hero) — both halves read as one lit-up term. */
.rotator__word {
  grid-area: w;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .26em;
  opacity: 0;
  transform: translateY(1.1em);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  white-space: nowrap;
}
.rotator__label {
  background-image: var(--gradient-bioluminescent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Sized off the headline, so the mark tracks the clamp instead of sitting
   at a fixed px next to a fluid word. Optical nudge: these glyphs read a
   touch high against a cap-height word. */
.rotator__mark {
  flex: 0 0 auto;
  width: .74em;
  height: .74em;
  translate: 0 .03em;
}
.rotator__mark--line { stroke-linejoin: round; }

/* The gradient lives in an off-canvas defs sheet — never painted itself. */
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rotator__word.is-on { opacity: 1; transform: none; }
.rotator__word.is-out { opacity: 0; transform: translateY(-1.1em); }

.hero__sub {
  max-width: 48ch;
  margin-inline: auto;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-silver-mist);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-16);
  margin-top: var(--spacing-12);
}
/* the closer reuses .hero__cta and stays left-aligned */
.hero__inner .hero__cta { justify-content: center; }

/* =====================================================================
   Statement
   ===================================================================== */

/* The statement is the page's one full-screen beat: the copy sits dead centre
   in a screen of its own, vertically and optically.

   Unarmed — no JS, reduced motion — that is all it is: one full-height block.
   Armed, the track grows past the screen and the block sticks inside it, so the
   scroll that would have carried the copy up in one screen is stretched over
   three and spent resolving it word by word. main.js still drifts the copy
   upward across that stretch, at roughly a third of scroll speed, so the page
   keeps moving; the section releases as the last word lands. */
.statement__pin {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.statement__track.is-scrubbed {
  height: var(--scrub-track, 250svh);
}
.statement__track.is-scrubbed .statement__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.statement__say { width: 100%; }
/* main.js writes a transform here on every scrub frame */
.statement__track.is-scrubbed .statement__say { will-change: transform; }

.statement__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  text-align: center;
}
.statement__say {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  text-align: center;
}
.statement__lead {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--color-platinum);
}
.statement__lead em {
  font-style: normal;
  color: var(--color-lavender-phosphor);
}
.statement__tail {
  max-width: 34ch;
  margin-inline: auto;
  font-size: var(--text-subheading);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--color-liquid-mist);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-40);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-48);
  border-top: 1px solid var(--hairline);
}
.stat {
  display: grid;
  align-content: start;
  gap: var(--spacing-20);
}
.stat__num {
  /* the figure changes every frame while counting — fixed-width digits
     keep the label below it from twitching */
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -.046em;
  color: var(--color-lavender-phosphor);
}
/* held at the from-state until the block scrolls into view */
[data-counters] .stat { opacity: 0; }
[data-counters].is-in .stat { opacity: 1; }

.stat__label {
  font-size: 13px;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--color-liquid-mist);
}

/* =====================================================================
   Bot visits — headline KPI strip above the engine chart

   Same shape as .stats (number, label, opt. delta) at a smaller scale,
   since four of these sit above a chart rather than owning the fold.
   Reuses the .stat entrance/counter machinery (main.js only looks for
   the .stat class and a [data-count] attribute, not their size).
   ===================================================================== */
.bvstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-32);
}
.bvstat { gap: var(--spacing-8); }
.bvstat__num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-lavender-phosphor);
}
.bvstat__label {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}
.bvstat__delta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--viz-good);
}
.bvstat__delta--down { color: var(--color-coral); }
@media (max-width: 640px) {
  .bvstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.botvisits__head {
  display: grid;
  gap: var(--spacing-20);
  max-width: 60ch;
  margin-bottom: var(--spacing-48);
}

/* =====================================================================
   Demand — the questions your buyers ask AI

   The capture is the atom, so this panel never shows a number without the
   answer behind it: the lead row is opened, and the citations that beat you
   are marked. The wash behind each row is the volume drawn a second time —
   the row fills to the width of its own demand.
   ===================================================================== */

/* copy left, the artifact right — the same band shape as the platform
   section, but the split is reversed: here the panel carries the payload
   and the copy only has to introduce it */
.demand__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "head art";
  column-gap: var(--spacing-80);
  align-items: start;
}

.demand__head { grid-area: head; display: grid; gap: var(--spacing-16); }
.demand__head .h-lg { max-width: 15ch; }

.demand__figure { grid-area: art; margin: 0; }

/* what the "You" column is saying, in words */
.demand__legend {
  display: grid;
  gap: var(--spacing-16);
  max-width: 44ch;
  margin-top: var(--spacing-24);
}
.demand__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-12);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-silver-mist);
}
.demand__legend b { font-weight: var(--font-weight-medium); color: var(--color-platinum); }
.demand__key {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
}
.demand__key--cited { background: var(--color-citrine); }
.demand__key--named { background: rgba(var(--mist-rgb), .34); }
.demand__key--absent { background: var(--color-coral); }

.demand__panel {
  background: var(--color-liquid-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  overflow: hidden;
}

/* --- the seed line ------------------------------------------------- */

.demand__seed {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--spacing-24);
}
.demand__caret {
  flex: none;
  width: 2px;
  height: 19px;
  border-radius: 1px;
  background: var(--color-liquid-mist);
  animation: demand-blink 1.15s steps(1, end) infinite;
}
@keyframes demand-blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .18 } }

.demand__typed {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: -.012em;
  color: var(--color-platinum);
}
/* a picture of a control, not a control — the panel is a figure */
.demand__cta {
  flex: none;
  border-radius: var(--radius-small);
  padding: 11px 16px;
  background-image: var(--gradient-aurora);
  color: var(--color-liquid-abyss);
  font-family: var(--font-arial);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
}

/* --- the sample readout -------------------------------------------- */

.demand__meter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12) var(--spacing-24);
  padding: 12px var(--spacing-24);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-silver-mist);
}
.demand__meter b { font-weight: var(--font-weight-medium); color: var(--color-platinum); }
/* the provenance sits on the same line as the count, at the far end: it is
   the footnote to the number, not a second statement. It only drops to its
   own line when the panel is too narrow to hold both. */
.demand__sample {
  margin-left: auto;
  font-size: 11px;
  color: var(--viz-muted);
  white-space: nowrap;
}

/* --- the ladder ----------------------------------------------------- */

.demand__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.demand__col-vol { width: 116px; }
.demand__col-you { width: 124px; }
.demand__table th,
.demand__table td { text-align: left; }
.demand__table th:first-child,
.demand__table td:first-child { padding-left: var(--spacing-24); }
.demand__table th:last-child,
.demand__table td:last-child { padding-right: var(--spacing-24); }

.demand__table thead th {
  padding: 10px 9px;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.demand__table thead th:first-child { text-align: right; white-space: nowrap; }

/* the volume, drawn a second time: each row is washed to the width of its
   own demand, with a soft tail so the fill never cuts a word in half */
.demand__row {
  background: linear-gradient(90deg,
      rgba(var(--mist-rgb), .055) 0,
      rgba(var(--mist-rgb), .055) max(0px, calc(var(--w) - 72px)),
      rgba(var(--mist-rgb), 0) var(--w));
}
.demand__row--lead {
  background: linear-gradient(90deg,
      rgba(var(--mist-rgb), .09) 0,
      rgba(var(--mist-rgb), .09) max(0px, calc(var(--w) - 72px)),
      rgba(var(--mist-rgb), 0) var(--w));
}
.demand__row td {
  padding: 15px 9px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.demand__row:last-child td { border-bottom: 0; }

.demand__vol {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: right;
  color: var(--color-platinum);
}
.demand__q {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -.014em;
  color: var(--color-silver-mist);
}
.demand__row--lead .demand__q {
  font-weight: var(--font-weight-medium);
  color: var(--color-platinum);
}

.demand__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-silver-mist);
}
.demand__state::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--mist-rgb), .34);
}
.demand__state--absent { font-weight: var(--font-weight-medium); color: var(--color-coral); }
.demand__state--absent::before { background: var(--color-coral); }
.demand__state--cited { color: var(--color-platinum); }
.demand__state--cited::before { background: var(--color-citrine); }

/* --- the capture: the receipt behind the number --------------------- */

.demand__table .demand__capture-row td {
  padding: 0 var(--spacing-24) var(--spacing-20) 116px;
}
.demand__capture {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--color-liquid-abyss);
}
/* the elbow back up to the row this answer belongs to */
.demand__capture::before {
  content: "";
  position: absolute;
  left: -22px;
  top: -15px;
  width: 14px;
  height: 34px;
  border-left: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  border-bottom-left-radius: 8px;
}
.demand__capture-meta {
  padding: 12px var(--spacing-20);
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.demand__answer {
  max-width: 78ch;
  padding: var(--spacing-16) var(--spacing-20);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-liquid-mist);
}
/* the highlighter — the whole product in one gesture */
.demand__answer mark {
  border-radius: 2px;
  padding: .06em .24em;
  background: var(--color-citrine);
  color: var(--color-liquid-abyss);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.demand__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 0 var(--spacing-20) var(--spacing-20);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-slate-deep);
}
.demand__src {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-small);
  padding: 4px 9px;
  background: var(--wash);
  color: var(--color-silver-mist);
}
.demand__verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  margin-top: 2px;
  font-weight: var(--font-weight-medium);
  color: var(--color-coral);
}
.demand__verdict::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-coral);
}

.demand__note {
  margin-top: var(--spacing-16);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-slate-deep);
}

/* =====================================================================
   Explore / platform
   ===================================================================== */

/* The copy column is the narrower of the two: the picture is the argument,
   the row of text beside it is the caption. */
.explore__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "head  art"
    "feat  art";
  column-gap: var(--spacing-64);
  row-gap: var(--spacing-64);
  align-items: start;
}
.explore__head { grid-area: head; display: grid; gap: var(--spacing-20); }
.molecule {
  grid-area: art;
  position: sticky;
  top: 140px;
  justify-self: center;
  width: 100%;
  max-width: 340px;
  display: grid;
  gap: var(--spacing-24);
}
.molecule svg { width: 100%; height: auto; }
.molecule__cap { color: var(--color-slate-deep); }
.molecule__label {
  font-family: var(--font-matter);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* --- the art stack ---------------------------------------------------

   One visual per feature, all of them in the same sticky slot. main.js adds
   .is-armed and shows only the visual belonging to the feature being read,
   so the right-hand column always illustrates the row on the left. Without
   JS the class is never added and every visual stays in the flow, stacked. */
/* The panel rides the middle of the screen, level with the row being read,
   instead of sitting pinned near the header above it. main.js measures the
   live panel and writes --art-half (half its height), so a short board and a
   tall agent flow both land on the same centre line — the same middle band
   the observer uses to decide which row owns the slot. The fallback keeps a
   sane offset if that never runs. */
.explore__art {
  grid-area: art;
  position: sticky;
  top: max(var(--nav-h), calc(50svh - var(--art-half, 220px)));
  display: grid;
  gap: var(--spacing-24);
  /* the panels inside size themselves against this column, not the viewport */
  container-type: inline-size;
}
/* With no JS the slot holds every panel at once and can outgrow the screen,
   so it stops being sticky and simply flows. */
.explore__art[data-art-stack]:not(.is-armed) {
  position: static;
}
/* A short screen gets a shorter picture rather than one that runs off both
   ends of the slot: the flow tightens and the answer shows one question. */
@media (min-width: 1081px) and (max-height: 640px) {
  .explore__art .aflow__canvas,
  .explore__art .aflow__log { padding: var(--spacing-20); }
  .explore__art .aflow__h { margin-bottom: var(--spacing-16); }
  .explore__art .awire { height: 24px; }
  /* a node keeps its shape here but not its second deck — three output rows
     is the 120px that decides whether the flow fits one short screen */
  .explore__art .anode__io { display: none; }
  .explore__art .aqa { padding-bottom: var(--spacing-16); }
  .explore__art .aqa li:nth-child(n+2) { display: none; }
  .explore__art .board__scroll { padding-top: var(--spacing-12); }
  .explore__art .demand__row:nth-child(n+4) { display: none; }
  /* the reason the card exists stays; it just gets one line instead of two */
  .explore__art .pcard__why { -webkit-line-clamp: 1; }
  .explore__art .psub:nth-last-child(-n+1) { display: none; }
}

/* Armed, the panels share one cell and are hidden rather than dropped, so
   the slot keeps a single height whichever one is showing — that is what
   lets its centre line be measured once instead of on every swap, and it
   leaves each panel's own layout (the agent flow is a grid) intact. */
.explore__art[data-art-stack].is-armed { align-items: center; }
.explore__art[data-art-stack].is-armed > [data-art] {
  grid-area: 1 / 1;
  visibility: hidden;
}
.explore__art[data-art-stack].is-armed > [data-art].is-on {
  visibility: visible;
  animation: art-in .5s var(--ease-snap) both;
}
@keyframes art-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.features {
  grid-area: feat;
  display: grid;
  perspective: 800px;
  /* room for the sticky panel to stay centred on the last row instead of
     drifting up behind the header — main.js sizes it from the live panel */
  padding-bottom: var(--art-tail, 0px);
}

.feature {
  position: relative;
  padding: var(--spacing-48) 0;
  border-top: 1px solid var(--hairline);
  perspective: 800px;
  transition: background-color .4s var(--ease-snap);
}
.feature:last-child { border-bottom: 1px solid var(--hairline); }
.feature:hover { background-color: var(--wash); }

/* the hairline wipes in from the left as the row settles */
.feature::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-liquid-mist), transparent 70%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.feature[data-rise].is-in::after {
  animation: edge-wipe 1.1s var(--ease-snap) calc(var(--d, 0s) + .1s) forwards;
}
@keyframes edge-wipe {
  0%   { opacity: 0;   transform: scaleX(0); }
  35%  { opacity: .55; }
  100% { opacity: 0;   transform: scaleX(1); }
}

.feature__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-20);
}
.feature__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -.03em;
}
.feature__body {
  margin-top: var(--spacing-16);
  max-width: 44ch;
  color: var(--color-silver-mist);
  line-height: 1.5;
}
.feature__note {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}

.arrow {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--color-platinum);
  transition: box-shadow .2s ease;
}
.arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease-snap); }
.arrow:hover { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.feature:hover .arrow svg { transform: translate(2px, -2px); }
.arrow:active { transform: scale(.97); }

/* =====================================================================
   Quote
   ===================================================================== */

.quote__inner {
  display: grid;
  gap: var(--spacing-32);
  max-width: 900px;
}
.quote__text {
  margin: 0;
  font-size: clamp(1.65rem, 3.6vw, 2.75rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  letter-spacing: -.032em;
  color: var(--color-ash);
}
.quote__by { display: grid; gap: 4px; }
.quote__name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-platinum);
}
.quote__role {
  font-size: 13px;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.quote .textlink { justify-self: start; }

/* =====================================================================
   AEO report well
   ===================================================================== */

/* A flat band split down the middle — copy on the left, a clipped report
   preview bleeding off the right. Deliberately not a card: hairline edge,
   square corners, the page's own background. */
.well {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.well__copy {
  display: grid;
  align-content: start;
  gap: var(--spacing-20);
  padding: var(--spacing-48) var(--spacing-40);
}
.well__copy .body-lg { max-width: 42ch; }

.scan {
  display: grid;
  gap: var(--spacing-16);
  max-width: 26rem;
  margin-top: var(--spacing-12);
}
.scan__go { width: 100%; }

.field {
  min-width: 0;
  height: 48px;
  padding: 0 var(--spacing-16);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  background: var(--color-liquid-deep);
  color: var(--color-platinum);
  font-family: var(--font-arial);
  font-size: 14px;
  transition: border-color .2s ease;
}
.field::placeholder { color: var(--color-slate-deep); }
.field:focus { border-color: var(--color-silver-mist); outline: none; }
.field:focus-visible { outline: 1px solid var(--color-lavender-phosphor); outline-offset: 2px; }

.insights { display: grid; gap: var(--spacing-12); margin-top: var(--spacing-12); }
.insights__lead {
  font-size: 14px;
  color: var(--color-silver-mist);
}
.checklist {
  display: grid;
  gap: 12px;
  padding-left: var(--spacing-16);
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-liquid-mist);
}
/* GEO / AEO tags in front of a line, so the checklist itself shows the
   two halves of AGO instead of listing four flat features. */
.checklist b {
  flex: 0 0 auto;
  color: var(--color-platinum);
  font-weight: var(--font-weight-medium);
  font-size: 10px;
  letter-spacing: .09em;
}
.checklist li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-liquid-mist);
  color: var(--color-liquid-abyss);
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

/* --- report preview -------------------------------------------------- */

/* Not a dashboard screenshot — a receipt. The capture is given the top of
   the panel at full width because the stored answer is the evidence; the
   two halves of AGO sit under it, split by a hairline, so a visitor reads
   "chosen" and "extractable" as two jobs of one instrument. Both halves
   share one bar language, so the eye compares them without being told to. */
.preview {
  margin: 0;
  /* one-cell grid so the frame stretches to the well and its background
     runs off the bottom edge, the way a window cropped by the page would */
  display: grid;
  padding: var(--spacing-40) 0 0 var(--spacing-40);
  border-left: 1px solid var(--hairline);
  overflow: hidden;
}
.preview__frame {
  min-width: 520px;   /* the panel bleeds off the right, but nothing load-bearing sits in the trim */
  display: grid;
  align-content: start;
  background: var(--color-liquid-deep);
  border: 1px solid var(--hairline);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--radius-small);
}
.preview__chrome {
  display: flex;
  gap: 6px;
  padding: 14px var(--spacing-16);
  border-bottom: 1px solid var(--hairline-soft);
}
.preview__chrome span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.preview__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--spacing-16);
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 12px;
  color: var(--color-platinum);
}
.preview__mark {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--color-lavender-phosphor);
  color: var(--color-liquid-abyss);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
}
.preview__doc { color: var(--color-slate-deep); }

/* The engines the report covers, stated in the chrome rather than claimed
   in copy — the same marks the headline rotates through. */
.preview__engines {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  color: var(--color-slate-deep);
}
.preview__engines svg { width: 13px; height: 13px; }

.preview__pane {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
}

/* --- the capture: one answer, annotated ------------------------------ */

.capture {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  background: var(--wash);
}
.capture__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-slate-deep);
}
.capture__engine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--color-silver-mist);
}
.capture__engine svg { width: 12px; height: 12px; }
.capture__prompt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capture__answer {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-liquid-mist);
}

/* Only two things are worth marking in an answer: a rival that got chosen,
   and the source the engine leaned on. Nothing else is highlighted, so the
   annotation reads as analysis rather than decoration. */
.mk {
  padding: 1px 3px;
  border-radius: 3px;
  background: none;
  color: inherit;
}
.mk--rival {
  background: rgba(253, 233, 255, .14);
  color: var(--color-lavender-phosphor);
}
.mk--cite {
  color: var(--color-silver-mist);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .32);
}
.capture__verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-silver-mist);
}
.capture__verdict i {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-lavender-phosphor);
}
.capture__n { margin-left: auto; color: var(--color-slate-deep); }

/* --- the two halves of AGO ------------------------------------------- */

.halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--hairline-soft);
}
.half { padding-top: var(--spacing-16); }
.half + .half {
  padding-left: var(--spacing-16);
  margin-left: var(--spacing-16);
  border-left: 1px solid var(--hairline-soft);
}
.half__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.half__h b {
  color: var(--color-platinum);
  font-weight: var(--font-weight-medium);
}

/* One bar language for both halves: the fill sits behind the row and grows
   from the left as the panel lands. */
.rank li, .score__list li {
  position: relative;
  isolation: isolate;
}
.rank li::before, .score__list li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: calc(var(--v, 0) * 1%);
  background: linear-gradient(90deg, rgba(0, 130, 124, .55), rgba(0, 130, 124, .05));
  transform: scaleX(0);
  transform-origin: left center;
}
.preview.is-in .rank li::before,
.preview.is-in .score__list li::before {
  animation: bar-grow 1s var(--ease-snap) calc(var(--i) * .09s) forwards;
}
.preview.is-in .rank__score {
  animation: score-in .5s var(--ease-out-quad) calc(var(--i) * .09s + .12s) both;
}
@keyframes bar-grow { to { transform: scaleX(1); } }
@keyframes score-in {
  from { opacity: .35; transform: translateX(10px); }
  to   { opacity: 1;   transform: translateX(0); }
}

.rank { display: grid; }
.rank li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 11.5px;
  color: var(--color-silver-mist);
}
.rank li:last-child { border-bottom: 0; }
.rank__n { color: var(--color-slate-deep); font-variant-numeric: tabular-nums; }
.rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__score { font-variant-numeric: tabular-nums; }

/* The brand the report belongs to sits fourth, tagged as itself — the
   argument of the panel is the gap, not a vanity first place. */
.rank__you { color: var(--color-platinum); }
.rank__you .rank__name em {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(253, 233, 255, .16);
  color: var(--color-lavender-phosphor);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.score { display: grid; gap: 12px; }
.score__num {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-platinum);
  font-variant-numeric: tabular-nums;
}
.score__num span { font-size: 16px; color: var(--color-slate-deep); }
.score__list { display: grid; gap: 6px; font-size: 11px; }
.score__list li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--radius-small);
  color: var(--color-silver-mist);
}
.score__list b {
  color: var(--flow-live);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Provenance, stated on the artifact itself: one sample proves nothing, so
   the panel says how many it is standing on. */
.preview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 11px;
  color: var(--color-slate-deep);
}
.preview__link { color: var(--color-silver-mist); }
.preview__link i { font-style: normal; }

/* =====================================================================
   Channels / solutions
   ===================================================================== */

.channels__title { margin-top: var(--spacing-20); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* the 1px gap IS the rule: the container paints through it, so the grid
     stays evenly divided however the columns wrap */
  gap: 1px;
  margin-top: var(--spacing-64);
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-40) var(--spacing-36);
  min-height: 320px;
  background-color: var(--color-liquid-abyss);
  transition: background-image .3s ease;
}
.card:hover { background-image: linear-gradient(var(--wash), var(--wash)); }
.card__eyebrow {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}
.card__title {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.card__body { color: var(--color-silver-mist); line-height: 1.5; }
.card .textlink { margin-top: auto; }

.trial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--spacing-32) var(--spacing-64);
  align-items: start;
  margin-top: var(--spacing-64);
  padding-top: var(--spacing-48);
  border-top: 1px solid var(--hairline);
}
.trial__copy { display: grid; gap: var(--spacing-16); align-content: start; }
.trial__copy .h-sm { max-width: 22ch; }
.trial__act { display: grid; gap: var(--spacing-20); align-content: start; }
.trial__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 30rem; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chips li {
  padding: 9px 14px;
  border-radius: var(--radius-small);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-liquid-mist);
}

/* ---------------------------------------------------------------------
   Agent flow

   The closer's artwork: the product's own canvas, running. Kept deliberately
   bare — three agents, no output chips, no status pills — so the only lit
   things are the wire between the agents and the answer they produced. The
   wire carries a travelling light on a stagger, which is the whole claim of
   the picture: work is moving down this chain right now.
   --------------------------------------------------------------------- */

.aflow {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--color-liquid-deep);
  overflow: hidden;
}

.aflow__h {
  margin-bottom: var(--spacing-24);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.aflow__h b {
  color: var(--color-platinum);
  font-weight: var(--font-weight-medium);
}

/* --- canvas ---------------------------------------------------------- */

.aflow__canvas {
  display: grid;
  align-content: start;
  justify-items: start;
  padding: var(--spacing-24);
  /* faint graph paper: this is a surface you build a flow on */
  background-image:
    linear-gradient(var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
  background-size: 26px 26px;
}
.aflow__end {
  padding-left: 2px;
  font-size: 11px;
  color: var(--color-slate-deep);
}

/* A step is a card, not a row. Two decks: what the agent is on top, and
   underneath it the named thing it hands to the step below — which is what
   makes the column read as a flow rather than a checklist. The last node's
   output is the artifact printed in the run panel beside it. */
.anode {
  position: relative;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  /* lifts off the canvas by surface, not by shadow */
  background: var(--color-liquid-abyss);
  font-size: 13px;
  color: var(--color-platinum);
}
.anode__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.anode__ico {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--color-silver-mist);
}
.anode__ico svg { width: 14px; height: 14px; }
.anode__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.anode__io {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--hairline-soft);
}
.anode__io-k {
  font-size: 11px;
  color: var(--color-slate-deep);
}
/* the output name, chipped so it reads as a thing being passed on */
.anode__tok {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  background: var(--wash);
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-silver-mist);
  white-space: nowrap;
}

/* state sits above the card it belongs to, in the gap the wire runs through */
.anode__state {
  position: absolute;
  right: 12px;
  bottom: 100%;
  margin-bottom: 5px;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  /* opaque, because it overlaps the ruled canvas behind it */
  background: var(--color-liquid-deep);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
/* the working agent is still the only node that carries colour */
.anode--live { border-color: rgba(var(--flow-live-rgb), .5); }
.anode--live .anode__tok {
  border-color: rgba(var(--flow-live-rgb), .34);
  background: rgba(var(--flow-live-rgb), .1);
  color: var(--flow-live);
}
.anode__state--live {
  border-color: rgba(var(--flow-live-rgb), .45);
  color: var(--flow-live);
}

/* --- the wire, and the light on it ----------------------------------- */

.awire {
  position: relative;
  width: 1px;
  height: 32px;
  /* sits under the centre of the node icons above and below it */
  margin-left: 23px;
  background: linear-gradient(180deg, rgba(var(--flow-live-rgb), .38), rgba(var(--flow-live-rgb), .16));
}
/* the light itself: one short segment falling the length of the wire,
   each one a beat behind the wire above it */
.awire::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 7px;
  height: 22px;
  border-radius: 4px;
  background:
    radial-gradient(closest-side, rgba(203, 255, 252, .55), rgba(var(--flow-live-rgb), 0)),
    linear-gradient(180deg, rgba(203, 255, 252, 0) 8%, #cbfffc 50%, rgba(203, 255, 252, 0) 92%);
  animation: wire-light 3.2s linear infinite;
  animation-delay: calc(var(--i, 0) * .34s);
}
@keyframes wire-light {
  0%   { top: -22px; opacity: 0; }
  30%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* narrow column: the canvas sits above what it produced */
@container (max-width: 620px) {
  .aflow { grid-template-columns: minmax(0, 1fr); }
  .aflow__log { border-left: 0; border-top: 1px solid var(--hairline-soft); }
  /* it has to sit inside one sticky screen here, so the flow tightens and
     the answer shows the top of itself and fades, as a long one would */
  .aflow__canvas, .aflow__log { padding: var(--spacing-20); }
  .awire { height: 26px; }
  .aflow__h { margin-bottom: var(--spacing-16); }
  .aqa { padding-bottom: var(--spacing-20); }
  .aqa li:nth-child(n+3) { display: none; }
}

/* --- run log --------------------------------------------------------- */

.aflow__log {
  padding: var(--spacing-24);
  border-left: 1px solid var(--hairline-soft);
}
.alog {
  display: grid;
  gap: 14px;
  margin-bottom: var(--spacing-24);
  padding-left: 20px;
  border-left: 1px solid var(--hairline-soft);
}
.alog li { position: relative; }
.alog li::before {
  content: "";
  position: absolute;
  left: -24px; top: 4px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--color-slate-deep);
}
.alog li.alog--live::before { background: var(--flow-live); }
.alog b {
  display: block;
  font-size: 12.5px;
  font-weight: var(--font-weight-regular);
  color: var(--color-platinum);
}
.alog span {
  font-size: 11.5px;
  color: var(--color-slate-deep);
  font-variant-numeric: tabular-nums;
}

/* the one card in the picture, because the answer is the point of the run */
.aout {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--wash);
  overflow: hidden;
}
.aout__h {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.aout__h span { color: var(--flow-live); }
.aqa {
  display: grid;
  gap: 12px;
  padding: 12px 12px 26px;
  counter-reset: aqa;
  /* a long answer keeps going past the frame */
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
  mask-image: linear-gradient(#000 58%, transparent 100%);
}
.aqa li {
  counter-increment: aqa;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 8px;
}
.aqa li::before {
  content: counter(aqa) ".";
  font-size: 12px;
  color: var(--color-slate-deep);
  font-variant-numeric: tabular-nums;
}
.aqa h3, .aqa p { grid-column: 2; }
.aqa h3 {
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  color: var(--color-platinum);
}
.aqa p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-slate-deep);
}

/* =====================================================================
   Events
   ===================================================================== */

.events__list {
  margin-top: var(--spacing-40);
  border-top: 1px solid var(--hairline);
}

.event {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--spacing-48);
  row-gap: var(--spacing-16);
  padding-block: var(--spacing-40);
  border-bottom: 1px solid var(--hairline);
  transition: opacity .3s ease;
}
.events__list:hover .event { opacity: .5; }
.events__list:hover .event:hover { opacity: 1; }

.event__meta {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-deep);
}
.event__title {
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.032em;
}
.event__body {
  margin-top: var(--spacing-12);
  max-width: 52ch;
  color: var(--color-silver-mist);
  line-height: 1.5;
}
.event__cta { white-space: nowrap; }

/* =====================================================================
   Closer
   ===================================================================== */

.closer {
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-120);
}
.closer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-24);
}
.closer .body-lg { max-width: 52ch; }
.closer .hero__cta { justify-content: center; }

/* ---------------------------------------------------------------------
   Answer scoreboard

   The platform section's art, sitting in the grid's right-hand column
   beside the copy and the feature list. It shows the product's own
   output: which answer engines name the brand, question by question.
   Static markup — no canvas, no script, readable with JS off.

   The cell fills are an ORDINAL scale (one hue, monotone lightness,
   light end clearing 2:1 on this surface), validated against #012624:
     --viz-mentioned #1b6459  ->  --viz-cited #26a894
   Rank numerals sit in liquid-abyss on the accent chip; white on that
   fill measures 2.95:1 and fails, dark ink passes. Every state also
   carries its own glyph (numeral / dot / empty) so the grid never
   leans on colour alone.
   --------------------------------------------------------------------- */

.board {
  grid-area: art;
  width: 100%;
  text-align: left;
  background: var(--color-liquid-abyss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  overflow: hidden;
}

.board__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px var(--spacing-16);
  border-bottom: 1px solid var(--hairline);
}
.board__site {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-platinum);
}
.board__when { margin-left: auto; font-size: 11px; color: var(--viz-muted); }

/* wide content scrolls inside its own box; the page never scrolls sideways */
.board__scroll { overflow-x: auto; padding: var(--spacing-16) var(--spacing-16) 0; }

.board__t { width: 100%; min-width: 360px; border-collapse: collapse; }
.board__t th, .board__t td { font-weight: var(--font-weight-regular); }

.board__t thead th {
  padding: 0 6px 10px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
  text-align: center;
  white-space: nowrap;
}
.board__t thead th:first-child { text-align: left; }

.board__t tbody tr { border-top: 1px solid var(--hairline-soft); }

.board__q {
  width: 36%;
  padding: 9px 10px 9px 0;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-silver-mist);
}
.board__q--none { color: var(--viz-muted); }

.board__c { padding: 6px; text-align: center; }

.cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: var(--radius-small);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
.cell--cited { background: var(--viz-cited); color: var(--color-liquid-abyss); }
.cell--said { background: var(--viz-mentioned); color: var(--viz-mentioned-ink); }
.cell--none { border: 1px solid var(--hairline-soft); }

.board__key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--spacing-16);
  padding: 13px var(--spacing-16) var(--spacing-16);
  font-size: 11px;
  color: var(--viz-muted);
}
.board__key li { display: flex; align-items: center; gap: 7px; }
.board__key .cell { width: 19px; height: 14px; font-size: 9px; }

/* =====================================================================
   Trend panel

   A named multi-line series over time — used by Agent Analytics for
   crawler visits per day. Change over time, five entities, so: multi-line,
   one hue per entity held for the life of the series, colour never carrying
   identity alone (every line is also named and valued in the key above it).

   Static SVG — no canvas, no script, readable with JS off.
   ===================================================================== */

.trend {
  width: 100%;
  padding: var(--spacing-24);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--color-liquid-deep);
  text-align: left;
  display: grid;
  gap: var(--spacing-20);
}

.trend__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-12); }
.trend__h {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-liquid-mist);
}
.trend__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--viz-muted);
}

/* The key is the legend and the headline numbers at once, so identity never
   rests on the line colour by itself. */
.trend__key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--spacing-16) 8px;
}
.trend__k {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 3px;
  align-items: center;
}
/* A long series name (Google-Extended) wraps to two lines and would drop its
   figure below everyone else's. Sharing the key's rows keeps every figure on
   one baseline however the names break; without subgrid it simply reverts to
   each entry sizing itself, which is what it did before. */
@supports (grid-template-rows: subgrid) {
  .trend__key { grid-template-rows: auto auto; }
  .trend__k { grid-row: span 2; grid-template-rows: subgrid; align-items: start; }
  .trend__dot { margin-top: 3px; }
  .trend__val { align-self: end; }
}
.trend__dot {
  grid-area: 1 / 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.trend__name {
  grid-area: 1 / 2 / auto / span 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-silver-mist);
}
.trend__val {
  grid-area: 2 / 1 / auto / span 2;
  font-size: 18px;
  line-height: 1;
  color: var(--color-platinum);
  font-variant-numeric: tabular-nums;
}
.trend__delta {
  grid-area: 2 / 3;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--viz-good);
}
.trend__delta--down { color: var(--color-coral); }

.trend__plot svg { display: block; width: 100%; height: auto; }
.trend__grid line { stroke: var(--hairline-soft); }
/* the baseline reads as the floor, not as one more gridline */
.trend__grid line:first-child { stroke: var(--hairline); }
.trend__ylab text,
.trend__xlab text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  fill: var(--viz-muted);
}
.trend__ylab text { text-anchor: end; }
.trend__line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the surface ring keeps two end dots legible where series land together */
.trend__end {
  fill: var(--c);
  stroke: var(--color-liquid-deep);
  stroke-width: 2;
}

/* The live head of the line.

   While a series is drawing, its end dot rides the leading edge and this
   halo rides under it, which is what makes the plot read as arriving rather
   than as appearing. It is drawn as a soft ring in the series' own colour —
   an SVG mark, not a box-shadow, so it scales with the chart and obeys the
   no-elevation-shadows rule. Both settle to their resting state once the
   series is complete: the halo goes to nothing and the dot stays.

   Everything here is inert until main.js arms it, so with no JS the chart is
   simply the finished plot with five end dots, which is the correct picture. */
.trend__halo {
  fill: var(--c);
  opacity: 0;
  transition: opacity .45s var(--ease-out-quad);
}
[data-trend-plot].is-drawing .trend__halo { opacity: .16; }

/* The line is handed to the animation only once its length is measured, so
   a slow frame can never leave a half-drawn chart on screen. */
[data-trend-plot].is-armed .trend__line { stroke-dasharray: var(--len); }


/* =====================================================================
   Prompt demand, in the platform slot

   The panel itself is the demand figure defined above; in the slot it is
   narrower than it was as a full-width section, so the ladder gets its own
   scroll box rather than squeezing three columns into a phone.
   ===================================================================== */

.demand__scroll { overflow-x: auto; }
/* only while the ladder is still a table: below 680px it restacks into blocks
   (see the narrow-screen rules), and a floor there would clip the questions */
@media (min-width: 681px) {
  .demand__scroll .demand__table { min-width: 440px; }
}

/* =====================================================================
   Projects

   The platform slot's panel for Aim. Two halves in the order the work
   happens: what the platform suggests, each card carrying the finding that
   earned it a place, then what is already tracked with its tasks beneath.
   Priority is a word before it is three bars, and state is an icon plus
   text, so neither rests on colour alone. Everything that looks like a
   control is a picture of one — the panel is a figure.
   ===================================================================== */

.proj {
  width: 100%;
  text-align: left;
  background: var(--color-liquid-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  overflow: hidden;
}

.proj__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px var(--spacing-16);
  border-bottom: 1px solid var(--hairline);
}
.proj__h {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-platinum);
}
.proj__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--viz-muted);
}

.proj__body { display: grid; gap: 10px; padding: var(--spacing-16); }
.proj__label { font-size: 12px; color: var(--color-silver-mist); }
.proj__label + * { margin-bottom: 6px; }

/* both suggestions sit whole, side by side. A card sliced off at the panel
   edge reads as a rendering fault rather than as "there are more", and the
   scroll box it needed put a chrome scrollbar through the middle of the
   picture — the panel is a figure, so nothing in it should look draggable. */
.proj__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12);
}
/* one column once two of them stop being readable side by side */
@container (max-width: 560px) {
  .proj__cards { grid-template-columns: minmax(0, 1fr); }
}

/* flex rather than grid so the action row can be pushed to the floor of the
   card: side by side, two cards with different-length titles otherwise sit
   their buttons at two different heights. */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--color-liquid-abyss);
}
.pcard__top { display: flex; align-items: center; gap: var(--spacing-12); }
.pcard__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-silver-mist);
}
.pcard__tag::before { content: "#"; margin-right: 5px; color: var(--viz-muted); }

.pcard__name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  color: var(--color-liquid-mist);
}
/* the description is cut mid-thought in the product too — the card is a
   handle on the project, not the project */
.pcard__why {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--viz-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__acts { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 2px; }
.pbtn {
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  background: var(--color-liquid-kelp);
  font-size: 11px;
  line-height: 1.2;
  color: var(--color-liquid-mist);
}
.pbtn--ghost {
  margin-left: auto;
  border-color: transparent;
  background: none;
  color: var(--viz-muted);
}

/* priority: the word carries it, the bars just make it scannable */
.pri {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-silver-mist);
  white-space: nowrap;
}
.pri__bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.pri__bars i { width: 2px; border-radius: 1px; background: var(--viz-cited); }
.pri__bars i:nth-child(1) { height: 6px; }
.pri__bars i:nth-child(2) { height: 9px; }
.pri__bars i:nth-child(3) { height: 12px; }
.pri__bars--mid i:nth-child(3) { background: var(--hairline-strong); }

/* --- tracked projects ------------------------------------------------ */

.proj__scroll { overflow-x: auto; }

/* Any scroll box left inside a panel gets a hairline, not the platform's
   chrome: these are pictures of the product, and a system scrollbar drawn
   across one is the loudest non-product thing on the page. */
.demand__scroll, .proj__scroll { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.demand__scroll::-webkit-scrollbar, .proj__scroll::-webkit-scrollbar { height: 6px; }
.demand__scroll::-webkit-scrollbar-track, .proj__scroll::-webkit-scrollbar-track { background: transparent; }
.demand__scroll::-webkit-scrollbar-thumb, .proj__scroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--hairline-strong);
}
.ptable {
  width: 100%;
  min-width: 420px;
  table-layout: fixed;
  border-collapse: collapse;
}
.ptable th, .ptable td { font-weight: var(--font-weight-regular); text-align: left; }
.ptable thead th {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
}

.prow > th, .prow > td { padding: 11px 0; vertical-align: middle; }
.prow > th { font-size: 12.5px; line-height: 1.4; color: var(--color-liquid-mist); }
.prow:not(.prow--open) > th, .prow:not(.prow--open) > td {
  border-bottom: 1px solid var(--hairline-soft);
}
.prow__name { color: var(--color-liquid-mist); }
.prow__n { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--viz-muted); }

.prow__chev, .pico {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  line-height: 0;
}
.prow__chev svg { width: 14px; height: 14px; color: var(--viz-muted); }
.prow__chev--down svg { transform: rotate(90deg); }
.pico svg { width: 15px; height: 15px; }
.pico--run svg { color: var(--viz-running); }
.pico--done svg { fill: var(--viz-good); }
.pico--todo svg { color: var(--viz-muted); }

.psub > td {
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 12px;
  line-height: 1.4;
  color: var(--viz-muted);
}
.psub + .psub > td { border-bottom: 1px solid var(--hairline-soft); }
.psub:last-child > td { border-bottom: 0; }

/* On a phone the two columns stop being a comparison: each project takes the
   full row and its priority drops beneath the name, which is the same move the
   demand ladder makes at this width. */
@media (max-width: 680px) {
  .ptable { min-width: 0; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .prow, .prow > th, .prow > td,
  .psub, .psub > td { display: block; }
  /* hang the wrapped name off its two icons rather than under them */
  .prow > th {
    padding: 11px 0 5px 45px;
    text-indent: -45px;
    border-bottom: 0;
  }
  .prow > td { padding: 0 0 11px 45px; }
  .prow:not(.prow--open) > td { border-bottom: 1px solid var(--hairline-soft); }
}

/* =====================================================================
   Footer
   ===================================================================== */

.foot {
  background: var(--color-liquid-deep);
  padding-block: var(--spacing-120) var(--spacing-48);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
  gap: var(--spacing-48) var(--spacing-32);
}
.foot__brand { display: grid; align-content: start; gap: var(--spacing-24); }
.foot__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-arial);
  font-size: 14px;
  color: var(--color-silver-mist);
}
.foot__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-lavender-phosphor);
}

.foot__col { display: grid; align-content: start; gap: 12px; }
.foot__col a {
  font-family: var(--font-arial);
  font-size: 14px;
  color: var(--color-silver-mist);
  transition: color .2s ease;
}
.foot__col a:hover { color: var(--color-platinum); }
.foot__col .kicker { margin-bottom: 4px; }
.foot__kicker2 { margin-top: var(--spacing-20); }

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-small);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--color-liquid-mist);
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  justify-content: space-between;
  margin-top: var(--spacing-80);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-arial);
  font-size: 14px;
  color: var(--color-slate-deep);
}

/* =====================================================================
   Reveal
   ===================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2,.7,.3,1) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Rise — the blur + lift + tilt entrance, staggered through a block.
   The block itself takes the soft variant; its lines take the crisp one,
   cascading a beat behind their container.
   --------------------------------------------------------------------- */

[data-rise],
[data-rise] > * {
  opacity: 0;
  transform-origin: 50% 0;
  will-change: opacity, filter, transform;
}
[data-rise].is-in {
  animation: rise-soft .9s var(--ease-out-quad) var(--d, 0s) both;
}
[data-rise].is-in > * {
  animation: rise .6s var(--ease-out-quad) both;
}
[data-rise].is-in > *:nth-child(1) { animation-delay: calc(var(--d, 0s) + .06s); }
[data-rise].is-in > *:nth-child(2) { animation-delay: calc(var(--d, 0s) + .14s); }
[data-rise].is-in > *:nth-child(3) { animation-delay: calc(var(--d, 0s) + .22s); }
[data-rise].is-in > *:nth-child(4) { animation-delay: calc(var(--d, 0s) + .30s); }
[data-rise].is-in > *:nth-child(5) { animation-delay: calc(var(--d, 0s) + .38s); }
[data-rise].is-in > *:nth-child(6) { animation-delay: calc(var(--d, 0s) + .46s); }

/* once played, drop the compositing hints so hover stays cheap */
[data-rise].is-done,
[data-rise].is-done > * { will-change: auto; }

@keyframes rise {
  from { opacity: 0; filter: blur(8px); transform: translateY(24px) rotateX(26deg); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0)    rotateX(0deg); }
}
@keyframes rise-soft {
  from { opacity: 0; filter: blur(3px); transform: translateY(12px) rotateX(8deg); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0)    rotateX(0deg); }
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1240px) {
  /* the questions start wrapping two-to-a-row before this — the panel stops
     sharing the band and takes the full measure back, at the type size it
     was drawn at */
  .demand__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "art";
    row-gap: var(--spacing-40);
  }
  .demand__legend { max-width: none; }
  .demand__col-vol { width: 128px; }
  .demand__col-you { width: 172px; }
  .demand__typed { font-size: var(--text-body); }
  .demand__vol { font-size: 14px; }
  .demand__q { font-size: 14.5px; }
  .demand__state { font-size: 12px; }
  .demand__table .demand__capture-row td { padding-left: 128px; }
  .demand__answer { font-size: var(--text-body); }
}

@media (max-width: 1080px) {
  :root { --shell-pad: var(--spacing-32); }

  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__drawer[data-open="true"] { display: flex; }

  .explore__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "art" "feat";
    row-gap: var(--spacing-48);
  }
  /* One column: there is no "beside" to sit in, so the slot stops riding the
     screen and simply shows every panel in the flow, as it does with no JS. */
  .explore__art { position: static; }
  .explore__art[data-art-stack].is-armed { align-items: stretch; }
  .explore__art[data-art-stack].is-armed > [data-art] {
    grid-area: auto;
    visibility: visible;
    animation: none;
  }
  .features { padding-bottom: 0; }
  .molecule { position: static; max-width: 260px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: var(--spacing-32); }
  .event__cta { grid-column: 2; }

  .well { grid-template-columns: minmax(0, 1fr); }
  .well__copy { padding: var(--spacing-40) var(--spacing-32); }
  .preview {
    padding: 0 0 0 var(--spacing-32);
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .preview__frame { min-width: 520px; margin-top: var(--spacing-32); }
  .trial { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  /* the canvas and its log stop being a pair — stack them */
  .aflow { grid-template-columns: minmax(0, 1fr); }
  .aflow__log { border-left: 0; border-top: 1px solid var(--hairline-soft); }

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

@media (max-width: 680px) {
  /* at this width the three columns stop being a comparison — the question
     takes the full row and its two figures drop beneath it */
  /* keep the caret with the line it is typing; the control drops beneath */
  .demand__seed {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-16) var(--spacing-12);
    padding-inline: var(--spacing-20);
  }
  .demand__caret { align-self: start; margin-top: 3px; }
  .demand__cta { grid-column: 1 / -1; justify-self: start; }
  .demand__meter { padding-inline: var(--spacing-20); }
  .demand__sample { margin-left: 0; }
  .demand__table thead { display: none; }
  .demand__table, .demand__table tbody,
  .demand__capture-row, .demand__capture-row td { display: block; }
  .demand__row {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-16);
    padding-block: var(--spacing-16);
    border-bottom: 1px solid var(--hairline-soft);
  }
  .demand__row:last-child { border-bottom: 0; }
  .demand__row td { border-bottom: 0; padding: 0 var(--spacing-20); }
  .demand__row .demand__q { grid-column: 1 / -1; order: -1; padding-bottom: 10px; }
  .demand__vol { text-align: left; }
  .demand__state { padding-left: 0; }
  .demand__table .demand__capture-row td { padding: 0 var(--spacing-20) var(--spacing-20); }
  .demand__capture::before { display: none; }
  :root { --shell-pad: var(--spacing-20); --band: 72px; --nav-h: 54px; }

  .hero { min-height: 0; padding-block: var(--spacing-64) var(--spacing-80); }
  .statement__pin { min-height: 0; padding-block: var(--spacing-48); }
  .statement__track.is-scrubbed { --scrub-track: 220svh; }
  .hero__title { max-width: none; }
  .hero__line--rotor { white-space: normal; }
  .hero__cta .btn { flex: 1 1 auto; }

  .stats { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .feature { padding: var(--spacing-32) 0; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; padding: var(--spacing-32) var(--spacing-24); }
  .event {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-12);
    padding-block: var(--spacing-32);
  }
  .event__cta { grid-column: 1; margin-top: 4px; }
  .well__copy { padding: var(--spacing-32) var(--spacing-20); }
  .preview { padding-left: var(--spacing-20); }
  .preview__frame { min-width: 440px; }
  /* the halves stop being a comparison at this width — stack them */
  .halves { grid-template-columns: minmax(0, 1fr); }
  .half + .half {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }
  .foot { padding-block: var(--spacing-64) var(--spacing-40); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .demand__caret { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-counters] .stat { opacity: 1; }
  /* the scrubbed reveal never arms under reduce, so its copy is simply the
     sharp text as authored; this is the belt to that braces, in case the
     setting is flipped after the words have been split */
  [data-blur-reveal] .split-word { filter: none !important; opacity: 1 !important; }
  [data-rise], [data-rise] > * {
    opacity: 1; filter: none; transform: none; animation: none !important;
  }
  .feature::after { animation: none !important; }
  .awire::after { animation: none !important; opacity: .55; top: 9px; }
  .explore__art [data-art].is-on { animation: none !important; }
  .rank li::before, .score__list li::before { transform: scaleX(1); animation: none !important; }
  .rank__score { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}