/* =============================================================================
   ReactLive — website design system
   Hand-written CSS, no build step, no framework. Sister to reactlive-surface
   (the product UI kit) — the accent pair below is deliberately identical to
   surface's --rlx-accent light/dark values so marketing and product agree.

   Structure
     1  Tokens
     2  Reset + base
     3  Typography
     4  Layout / sections
     5  Buttons + links
     6  Header / navigation
     7  Footer
     8  Cards + generic content blocks
     9  Product UI mockups (Console / Phone / Wall / surface map)
    10  Narrative blocks (triad, timeline, flow chain, modes, compare)
    11  Page furniture (page hero, anchor nav, plans, prose, forms)
    12  Motion + responsive
   ========================================================================== */

/* --- 0  Brand face ------------------------------------------------------- */
/* ReactLive Bold, the wordmark face (Urbanist-derived, OFL — see fonts/OFL.txt).
   Bold only: it is used for the agent names and nothing else, so the other
   weights in fonts/ stay unloaded rather than costing every visitor a download.
   Bold ships as .ttf only — there is no ReactLive-Bold.woff2 in fonts/ — so
   this face is ~108KB against ~44KB for the woff2 weights. Add the woff2 and
   list it first here if the agent names ever become body-weight furniture.
   font-display: swap, so Geist renders the names until this arrives. */
@font-face {
  font-family: 'ReactLive';
  src: url('../fonts/ReactLive-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 1  Tokens ----------------------------------------------------------- */

:root {
  /* ── 8B GRAPHITE ──────────────────────────────────────────────────────
     No brand hue. The primary is graphite and inverts per theme; the only
     colour in the interface belongs to the three agents and the status set.
     If an element is not an agent and not a status, it is graphite.

     Ramp: 50 #F4F5F7 · 100 #E3E5EA · 200 #C6CAD3 · 300 #A0A6B5 · 400 #656D7E
           500 #1E2229 (ink) · 600 #171A20 · 700 #14171C · 800 #101318 · 900 #0B0D11
     ------------------------------------------------------------------- */

  /* Surfaces */
  --ink:            #0b0d11;   /* canvas (dark): nav, footer, bands          */
  --ink-2:          #101318;   /* panel bg (dark): cards                     */
  --ink-3:          #171a20;   /* panel raised (dark)                        */
  --paper:          #ffffff;   /* canvas (light)                             */
  --paper-2:        #f7f8fa;   /* panel bg (light)                           */
  --paper-3:        #eef0f5;   /* divider / recessed (light)                 */

  /* Text. The ramp jumps hard from 400 to 500, so the light-theme muted step
     is 4A505C — the doc's own disabled-dark value — rather than a tint that
     would land under 4.5:1. On dark, the third step is 8A94A6 (series 6);
     the ramp's 400 reads 3.74:1 on the canvas and cannot carry small type. */
  --fg:             #1e2229;   /* graphite-500 · 15.96 on white              */
  --fg-muted:       #4a505c;   /* 8.10 on white                              */
  --fg-faint:       #656d7e;   /* graphite-400 · 5.20 on white               */
  --fg-on-dark:     #eef0f5;   /* graphite-50  · 17.06 on canvas             */
  --fg-on-dark-mut: #a0a6b5;   /* graphite-300 · 7.98 on canvas              */
  --fg-on-dark-fnt: #8a94a6;   /* 6.36 on canvas                             */

  /* Lines */
  --line:           #e3e5ea;   /* panel border (light)                       */
  --line-strong:    #c6cad3;   /* graphite-200                               */
  --line-dark:      #1a1e25;   /* divider (dark)                             */
  --line-dark-str:  #232830;   /* panel border (dark)                        */

  /* ── Primary · graphite, inverts per theme ───────────────────────────
     There is no brand colour to fill a button with, so the primary IS the
     ink: near-black on light with white type, near-white on dark with ink
     type. Both clear 14:1, which is the point — a colourless primary cannot
     compete with the three agent colours for attention.

     The --accent-* names are kept from the previous palette so the ~40 call
     sites did not all have to move; the values are graphite now. Hover steps
     follow the spec: light 600 then 700, dark 200 then 300. */
  --accent:         #1e2229;   /* light: fill + text · 15.96 both ways       */
  --accent-deep:    #171a20;   /* light hover (600)                          */
  --accent-lift:    #eef0f5;   /* dark: fill + text                          */
  --accent-bright:  #c6cad3;   /* dark hover (200)                           */
  --accent-lift-fg: #1e2229;   /* ink on the near-white fill · 14.00         */
  --accent-on-dark: #eef0f5;   /* accent text on dark                        */
  --accent-soft:    #eef0f5;   /* pale graphite wash on light                */
  --accent-ink:     #1e2229;   /* on the wash · 14.50                        */
  --accent-dark-sf: rgba(238, 240, 245, .10);
  /* Channel triples for the low-alpha washes and hairlines. Anything
     translucent goes through these — raw rgba() literals are how the last two
     re-hues each left a dead colour behind, invisible to a token search. */
  --accent-rgb:      30, 34, 41;
  --accent-lift-rgb: 238, 240, 245;

  /* ── Agents · the only colour in the interface ───────────────────────
     Seven steps each. The bright value is the dark-theme one; neon runs hot
     on light, so light surfaces take the deep step for type and the stepped
     mid for fills, dots and rules. Never use a status colour for an agent,
     or an agent colour for a status. One agent per panel — never two tints
     in one container. */
  --ag-engage:         #a84600;  /* orange · light type · 5.93 on white      */
  --ag-engage-lift:    #f98c3f;  /* dark type/fill · 8.20 on canvas          */
  --ag-engage-mid:     #f98c3f;  /* stepped fill on light                    */
  --ag-engage-soft:    #fef3eb;
  --ag-engage-line:    #fcd0b0;
  --ag-engage-soft-dk: #2b1c12;
  --ag-engage-rgb:     249, 140, 63;
  --ag-engage-line-dk: #5a3218;

  --ag-answer:         #0d60c1;  /* blue · light type · 6.07 on white        */
  --ag-answer-lift:    #4293f2;  /* dark type/fill · 6.19 on canvas          */
  --ag-answer-mid:     #4293f2;
  --ag-answer-soft:    #ecf4fe;
  --ag-answer-line:    #b3d4fa;
  --ag-answer-soft-dk: #132030;
  --ag-answer-rgb:     66, 147, 242;
  --ag-answer-line-dk: #1d3859;

  --ag-protect:         #6b3ad0; /* violet · light type · 6.69 on white      */
  --ag-protect-lift:    #a47cf6; /* dark type/fill · 6.29 on canvas          */
  --ag-protect-mid:     #a47cf6;
  --ag-protect-soft:    #f3effd;
  --ag-protect-line:    #d6c8fb;
  --ag-protect-soft-dk: #1f1830;
  --ag-protect-rgb:     164, 124, 246;
  --ag-protect-line-dk: #3d2d63;

  /* Stagent. A feature, not an agent — so it is kept out of the --ag-*
     family and never appears in the tri-colour bundle or the navbar rule.
     Crimson, from its own artwork. Sits near --live in hue, so it is only
     ever used on Stagent's own page and mark, never next to a LIVE badge. */
  --ft-stagent:         #b81e3f; /* crimson · light type · 6.37 on white     */
  --ft-stagent-lift:    #ff5f75; /* dark type/fill · 6.62 on canvas          */
  --ft-stagent-mid:     #ff5f75;
  --ft-stagent-soft:    #fdecef;
  --ft-stagent-line:    #f8c2cb;
  --ft-stagent-soft-dk: #2c1419;
  --ft-stagent-line-dk: #5c2030;

  /* Racing lines. The three agent colours, cycling. Light surfaces take the
     stepped mid values, dark surfaces the bright ones (.on-dark re-points
     these three, so the gradient geometry is written exactly once). */
  --racing-a:       var(--ag-engage-mid);
  --racing-b:       var(--ag-answer-mid);
  --racing-c:       var(--ag-protect-mid);

  /* ── Status · reserved, never decorative ─────────────────────────────
     Nothing decorative may use these and no agent colour may stand in for
     one. LIVE and notification counts are danger. Every state also carries
     an icon or a label, so it survives greyscale. */
  /* The doc's own light success and warning land at 4.40 and 4.48 against
     their washes — a hair under AA for normal text, which is what a badge
     label is. Both are darkened one step, same hue, to clear it. */
  --safe:           #127645;   /* success (light) · 4.96 on wash, 5.67 white */
  --safe-lift:      #3fcf7f;   /* success (dark)                             */
  --safe-soft:      #e8f2ed;
  --safe-dark-sf:   rgba(63, 207, 127, .13);
  --hold:           #8f5b05;   /* warning (light) · 5.04 on wash, 5.73 white */
  --hold-lift:      #f5b33c;   /* warning (dark)                             */
  --hold-soft:      #f5f0e6;
  --hold-dark-sf:   rgba(245, 179, 60, .13);
  --live:           #c0181d;   /* danger (light)                             */
  --live-lift:      #f5555a;   /* danger (dark)                              */
  --live-soft:      #f9e8e8;
  --live-dark-sf:   rgba(245, 85, 90, .13);
  --hold-rgb:        245, 179, 60;
  --live-rgb:        245, 85, 90;

  /* Type */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The brand face. Only the agent names take it; everything else is --font. */
  --font-brand: 'ReactLive', var(--font);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  16px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(10, 10, 10, .04), 0 4px 12px rgba(10, 10, 10, .04);
  --sh-2: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .06),
          0 32px 64px -24px rgba(10, 10, 10, .12);
  --sh-dark: 0 1px 0 rgba(255, 255, 255, .04) inset,
             0 24px 60px -20px rgba(0, 0, 0, .8);

  /* Rhythm */
  --gap:      clamp(1.25rem, 2.4vw, 2rem);
  --pad-sec:  clamp(4.5rem, 9vw, 8.5rem);
  --pad-x:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:     1240px;
  --maxw-text: 68ch;

  --header-h: 74px;
  --ease:     cubic-bezier(.2, .8, .2, 1);
}

/* --- 2  Reset + base ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  /* Dark-only site: no light ground shows between bands or behind the nav. */
  color: var(--fg-on-dark);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* The ring has to clear 3:1 against whatever it lands on, and no single step
   of the azure ramp does that on both grounds: the 400 is 7.87 on --ink but
   only 2.54 on white, the 600 is 5.17 on white but flatter on near-black. So
   the ring follows the surface. The header and footer are named explicitly
   because they are always --ink but are not .on-dark scoped. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent-lift); }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--fg-on-dark);
  padding: .75rem 1rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- 3  Typography ----------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1.25rem;
  display: block;
}
.on-dark .eyebrow, .eyebrow--dark { color: var(--fg-on-dark-fnt); }
.eyebrow--accent { color: var(--accent); }
.on-dark .eyebrow--accent { color: var(--accent-on-dark); }

.h-hero, .h1, .h2, .h3 {
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.h-hero { font-size: clamp(2.7rem, 6.2vw, 4.9rem); }
.h1     { font-size: clamp(2.3rem, 5vw, 3.9rem); }
.h2     { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; }
.h3     { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; }
.h4 {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em;
}

.h-hero em, .h1 em, .h2 em { font-style: normal; color: var(--fg-faint); }
.on-dark .h-hero em, .on-dark .h1 em, .on-dark .h2 em { color: var(--fg-on-dark-fnt); }

/* Sits on the text baseline as if it were a full stop, so it scales with the
   heading and never needs its own breakpoint. */
/* The tri-line mark. The other place the spec allows all three colours side
   by side, so it replaces the single square that closed the h1 before. Three
   stacked bars, sized in em so they scale with the heading. */
.h-hero .mark {
  display: inline-block; vertical-align: baseline;
  width: .30em; height: .26em; margin-left: .14em;
  background:
    linear-gradient(var(--ag-engage-mid) 0 0)  0 0    / 100% 26% no-repeat,
    linear-gradient(var(--ag-answer-mid) 0 0)  0 50%  / 100% 26% no-repeat,
    linear-gradient(var(--ag-protect-mid) 0 0) 0 100% / 100% 26% no-repeat;
}
.on-dark .h-hero .mark {
  background-image:
    linear-gradient(var(--ag-engage-lift) 0 0),
    linear-gradient(var(--ag-answer-lift) 0 0),
    linear-gradient(var(--ag-protect-lift) 0 0);
}

/* The homepage hero sets its qualifier on its own line, so the two colours read
   as two statements rather than one sentence that changes colour mid-line.
   Each half balances its own lines; --split is opt-in so other .h-hero em
   usages keep flowing inline. */
.h-hero--split em { display: block; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 62ch;
  letter-spacing: -.011em;
}
.on-dark .lede { color: var(--fg-on-dark-mut); }

.body   { color: var(--fg-muted); max-width: var(--maxw-text); }
.on-dark .body { color: var(--fg-on-dark-mut); }
.body + .body { margin-top: 1em; }
.body strong, .lede strong { color: var(--fg); font-weight: 550; }
.on-dark .body strong, .on-dark .lede strong { color: var(--fg-on-dark); }

.mono { font-family: var(--mono); font-feature-settings: 'zero' 1, 'tnum' 1; }
.small { font-size: .875rem; }
.tiny  { font-size: .8125rem; }
.measure { max-width: var(--maxw-text); }
.center { text-align: center; margin-inline: auto; }

.stmt {
  font-size: clamp(1.25rem, 2.3vw, 1.9rem);
  font-weight: 550;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: balance;
}

/* Inline link inside copy */
.link {
  color: var(--accent);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), .3);
  transition: box-shadow .2s var(--ease);
}
.link:hover { box-shadow: inset 0 -1px 0 var(--accent); }
.on-dark .link { color: var(--accent-on-dark); box-shadow: inset 0 -1px 0 rgba(var(--accent-lift-rgb), .45); }
.on-dark .link:hover { box-shadow: inset 0 -1px 0 var(--accent-on-dark); }

/* Unverified-claim marker — Claims Policy §45. Deliberately visible so it
   cannot ship unnoticed. Remove once the number/logo/name is signed off. */
.verify {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hold);
  background: var(--hold-soft);
  border: 1px solid rgba(180, 83, 9, .25);
  border-radius: 3px;
  padding: .1em .4em;
  vertical-align: .25em;
  margin-left: .4em;
  /* Must wrap: some markers carry a whole instruction, and nowrap here pushed
     narrow viewports into horizontal scroll. */
  overflow-wrap: break-word;
}
.on-dark .verify {
  color: var(--hold-lift);
  background: rgba(var(--hold-rgb), .12);
  border-color: rgba(var(--hold-rgb), .3);
}

/* --- 4  Layout / sections ---------------------------------------------- */

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.container--narrow { max-width: 900px; }

.section { padding-block: var(--pad-sec); position: relative; }
.section--tint { background: var(--paper-2); }
/* One dark-scope class. Every dark-surface override below is written as
   `.on-dark X`, so a section must carry .on-dark to get them — there is no
   second spelling that silently misses those 70-odd rules. */
.on-dark {
  background: var(--ink); color: var(--fg-on-dark);
  --racing-a: var(--ag-engage-lift);
  --racing-b: var(--ag-answer-lift);
  --racing-c: var(--ag-protect-lift);

  /* Dark token scope. The site is dark-only: every section carries .on-dark,
     and inside it the light-theme tokens are re-pointed at their dark
     equivalents. Components written with light defaults (and the inline
     var(--fg-faint) styles) therefore render dark without a dark twin each.
     The explicit .on-dark overrides elsewhere still apply and agree. */
  --paper:          #10131a;
  --paper-2:        #151922;
  --paper-3:        #1c212b;
  --fg:             var(--fg-on-dark);
  --fg-muted:       var(--fg-on-dark-mut);
  --fg-faint:       var(--fg-on-dark-fnt);
  --line:           var(--line-dark-str);
  --line-strong:    #343a46;
  --accent:         var(--accent-lift);
  --accent-deep:    var(--accent-bright);
  --accent-soft:    rgba(238, 240, 245, .08);
  --accent-ink:     var(--fg-on-dark);
  --accent-rgb:     var(--accent-lift-rgb);
  --safe:           var(--safe-lift);
  --safe-soft:      var(--safe-dark-sf);
  --hold:           var(--hold-lift);
  --hold-soft:      var(--hold-dark-sf);
  --live:           var(--live-lift);
  --live-soft:      var(--live-dark-sf);
  --ag-engage:       var(--ag-engage-lift);
  --ag-engage-soft:  var(--ag-engage-soft-dk);
  --ag-engage-line:  var(--ag-engage-line-dk);
  --ag-answer:       var(--ag-answer-lift);
  --ag-answer-soft:  var(--ag-answer-soft-dk);
  --ag-answer-line:  var(--ag-answer-line-dk);
  --ag-protect:      var(--ag-protect-lift);
  --ag-protect-soft: var(--ag-protect-soft-dk);
  --ag-protect-line: var(--ag-protect-line-dk);
  --ft-stagent:      var(--ft-stagent-lift);
  --ft-stagent-soft: var(--ft-stagent-soft-dk);
  --ft-stagent-line: var(--ft-stagent-line-dk);
  --sh-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -12px rgba(0, 0, 0, .7);
  --sh-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.on-dark .h-hero, .on-dark .h1, .on-dark .h2, .on-dark .h3,
.on-dark .h4, .on-dark .stmt { color: var(--fg-on-dark); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--seam { border-top: 1px solid var(--line); }
.on-dark.section--seam { border-top-color: var(--line-dark); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .lede { margin-top: 1.25rem; }
.sec-head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.g-split--text { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.stack-sm > * + * { margin-top: .5rem; }
.stack > * + *    { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-dark .divider { background: var(--line-dark); }

/* Ambient glow behind dark hero content — subtle, no AI orbs. */
.glow::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(70rem 34rem at 50% -8%, rgba(var(--accent-lift-rgb), .07), transparent 62%);
  pointer-events: none;
}
.glow > * { position: relative; }

.rule-grid {
  display: none;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 72%);
  position: absolute; inset: 0; pointer-events: none;
}

/* --- Racing lines -------------------------------------------------------
   A racing stripe, not a texture: three THICK bands stuck together in one
   bundle, sweeping across a hero. Deliberately placed — every page hero gets
   one, plus the homepage's closing CTA. Nothing else.

   The geometry is written once. --racing-a/b/c are re-pointed twice: by
   .on-dark (light mids -> bright neons) and by the agent page scopes below,
   where all three bands become one agent's hue. */
.page-hero::after,
.section--racing::after {
  display: none;
  content: '';
  /* Anchored to the right edge with a bounded width rather than positioned by
     percentage across the whole band. A percentage along the gradient axis
     moves with the section's height, so the same stops that cleared the copy
     on a short page hero pushed the bundle off-canvas on the taller homepage
     hero. Bounding the layer keeps it in the right margin at any height. */
  position: absolute; top: 0; bottom: 0; right: 0; left: auto;
  width: min(30%, 470px);
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background-image: linear-gradient(
    108deg,
    transparent 0 4%,
    var(--racing-a) 4% 26%,
    var(--racing-b) 26% 48%,
    var(--racing-c) 48% 70%,
    transparent 70% 100%
  );
  /* Fades the bundle out at both ends so it reads as travelling through the
     band rather than stopping dead at the edges. */
  -webkit-mask-image: linear-gradient(160deg, transparent 4%, #000 34%, #000 62%, transparent 94%);
  mask-image: linear-gradient(160deg, transparent 4%, #000 34%, #000 62%, transparent 94%);
}
.on-dark.page-hero::after,
.on-dark.section--racing::after { opacity: .85; }
/* Narrow viewports have no right margin to spare, so the bundle retreats to a
   corner accent rather than sitting under the copy. */
@media (max-width: 940px) {
  .page-hero::after, .section--racing::after { width: 28%; }
}
@media (max-width: 560px) {
  .page-hero::after, .section--racing::after { width: 26%; opacity: .55; }
}
/* Content sits above the stripe. .section > * covers .container and the
   hero's absolutely-positioned .rule-grid along with it. */
.section > * { position: relative; z-index: 1; }

/* Agent page scopes. Each colour belongs to one agent, so an agent's page
   wears that agent's colour and no other — the bundle becomes bright / mid /
   bright of a single hue. The descendant form is what beats .on-dark, which
   re-points the same three variables at equal-or-lower specificity. */
.scope-protect, .scope-protect .on-dark {
  --racing-a: var(--ag-protect-lift);
  --racing-b: var(--ag-protect-mid);
  --racing-c: var(--ag-protect-lift);
  --agent-on-dark: var(--ag-protect-lift);
}
.scope-engage, .scope-engage .on-dark {
  --racing-a: var(--ag-engage-lift);
  --racing-b: var(--ag-engage-mid);
  --racing-c: var(--ag-engage-lift);
  --agent-on-dark: var(--ag-engage-lift);
}
.scope-answer, .scope-answer .on-dark {
  --racing-a: var(--ag-answer-lift);
  --racing-b: var(--ag-answer-mid);
  --racing-c: var(--ag-answer-lift);
  --agent-on-dark: var(--ag-answer-lift);
}
.scope-stagent, .scope-stagent .on-dark {
  --racing-a: var(--ft-stagent-lift);
  --racing-b: var(--ft-stagent-mid);
  --racing-c: var(--ft-stagent-lift);
  --agent-on-dark: var(--ft-stagent-lift);
}
/* The one piece of page furniture that takes the agent's colour directly. */
[class*='scope-'] .page-hero .eyebrow { color: var(--agent-on-dark); }

/* Hero artwork. Engage, Answer, Protect and Stagent each have a banner
   (resources/website-bg-*.webp, 2103×748; the PNG masters sit beside them).
   The banner is its own layer (the ::after the racing stripe would use —
   two light sources fight, so the stripe is off here), sized by viewport
   width rather than the hero's height: the mark sits 58–78% across each
   image, and `cover` on a tall hero scaled it straight under the headline.
   The layer is masked on all four edges so the banner's own vignette melts
   into --ink instead of reading as a rectangle. URLs live here, not inline,
   so they resolve against this stylesheet at every page depth. */
.scope-engage  { --hero-art: url('../resources/website-bg-engage.webp'); }
.scope-answer  { --hero-art: url('../resources/website-bg-answer.webp'); }
.scope-protect { --hero-art: url('../resources/website-bg-protect.webp'); }
.scope-stagent { --hero-art: url('../resources/website-bg-stagent.webp'); }
[class*='scope-'] .page-hero, .section--art { overflow: clip; }
[class*='scope-'] .page-hero::after,
.section--art::after {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  --art-w: min(80vw, 1500px);
  display: block;
  top: 50%; bottom: auto; right: 0; left: auto;
  width: var(--art-w);
  height: calc(var(--art-w) * 748 / 2103);
  transform: translateY(-50%);
  opacity: 1;
  background: var(--hero-art) center / cover no-repeat;
  /* The banner ground is darker than --ink; lighten lets --ink show through
     it, so no dark halo is left around the mask. */
  mix-blend-mode: lighten;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 38%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 38%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
/* Beats the inline max-width on the hero copy wrapper, so the copy clears the mark. */
[class*='scope-'] .page-hero:not(.page-hero--demo) .container > div:first-child,
.section--art .container > div:first-child { max-width: min(46rem, 58%) !important; }
/* Narrow: no right third to spare, so the banner drops below the buttons. */
@media (max-width: 1000px) {
  [class*='scope-'] .page-hero, .section--art { padding-bottom: clamp(13rem, 50vw, 22rem); }
  [class*='scope-'] .page-hero::after, .section--art::after {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: clamp(16rem, 62vw, 26rem);
    transform: none;
    background-position: 72% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  }
  [class*='scope-'] .page-hero:not(.page-hero--demo) .container > div:first-child,
  .section--art .container > div:first-child { max-width: 46rem !important; }
}

/* Homepage hero. Copy on the left, the main banner on the right behind it.
   The banner is a real element rather than ::after so it can be positioned
   against the copy block (the hero also holds the agent cards and a
   screenshot, so the section's own height is no reference) and so it can
   drop into the flow below the buttons on narrow screens. It bleeds to the
   viewport's right edge: right is offset by half the gap between the
   container and the viewport. The mark sits 58–84% across the image, which
   keeps it clear of the copy column capped at 58%. */
.hero-home { overflow: clip; }
.hero-home__lead { position: relative; z-index: 1; max-width: min(48rem, 58%); }
.hero-home__art {
  --art-w: min(68vw, 1400px);
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(0rem, 3vw, 3rem);
  right: calc((100% - 100vw) / 2);
  width: var(--art-w);
  height: calc(var(--art-w) * 748 / 2103);
  background: url('../resources/website-bg-main.webp') center / cover no-repeat;
  mix-blend-mode: lighten;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 40%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 40%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 1000px) {
  .hero-home__lead { max-width: 48rem; }
  .hero-home__art {
    position: relative; top: auto; right: auto;
    width: auto; height: clamp(13rem, 56vw, 24rem);
    margin-inline: calc(50% - 50vw);
    margin-top: -1rem; margin-bottom: -2rem;
    background-position: 72% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  }
}

/* Product lockup (mark + wordmark) above a page-hero headline — Stagent.
   The wordmark is white, so it only ever sits on a dark hero. */
.lockup {
  display: block; width: auto; max-width: 100%;
  height: clamp(40px, 4.6vw, 60px);
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

/* Homepage StagentAI section: how it feeds each agent, one row per agent. */
.stagent-feeds { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: .75rem; max-width: 36rem; }
.stagent-feeds li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center;
  font-size: .9375rem; line-height: 1.45; color: var(--fg-on-dark-mut);
}
.stagent-feeds img { width: 30px; height: 30px; display: block; }
.stagent-feeds b { color: var(--fg-on-dark); font-weight: 700; }

/* "Coming soon" pill — for a product shown before it ships (StagentAI).
   Takes the local --agent-on-dark colour where a scope sets one. */
.soon {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: .375rem .75rem; border-radius: 999px;
  color: var(--agent-on-dark, var(--fg-on-dark));
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .03);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.soon::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* The navbar rule — one of the two places the spec puts all three colours
   side by side, so it is tri-colour on every page including agent pages.
   Pinned to the bottom of the bar rather than of the header, so an open mobile
   menu sits below it instead of pushing it down; z-index 1 keeps it under the
   dropdown panels (z-index 2), which overlap the bar's bottom edge. */
.site-header::after {
  content: '';
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) - 1px); height: 2px; z-index: 1;
  background: linear-gradient(
    90deg,
    var(--ag-engage-lift) 0 33.33%,
    var(--ag-answer-lift) 33.33% 66.66%,
    var(--ag-protect-lift) 66.66% 100%
  );
}

/* --- 5  Buttons + links ------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .9375rem; font-weight: 500; letter-spacing: -.005em;
  padding: .6875rem 1.125rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { flex: none; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
/* The header and footer are always --ink but carry no .on-dark class, so they
   are named alongside it — otherwise the nav CTA renders with the light-surface
   treatment and the same button looks like two different buttons on one screen. */
.on-dark .btn--primary,
.site-header .btn--primary,
.site-footer .btn--primary { background: var(--accent-lift); color: var(--accent-lift-fg); }
.on-dark .btn--primary:hover,
.site-header .btn--primary:hover,
.site-footer .btn--primary:hover { background: var(--accent-bright); }

.btn--ink { background: var(--ink); color: var(--fg-on-dark); }
.btn--ink:hover { background: var(--ink-3); }

.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: var(--paper); }
.btn--ghost:hover { border-color: var(--fg); background: var(--paper); }
.on-dark .btn--ghost {
  border-color: var(--line-dark-str); color: var(--fg-on-dark); background: transparent;
}
.on-dark .btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }

.btn--lg { padding: .875rem 1.5rem; font-size: 1rem; }
.btn--sm { padding: .4375rem .875rem; font-size: .8125rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }
.btn-row--center { justify-content: center; }

/* Quiet text CTA with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 500; font-size: .9375rem; color: var(--accent);
}
.tlink svg { transition: transform .25s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }
.on-dark .tlink { color: var(--accent-on-dark); }

/* --- 6  Header / navigation -------------------------------------------- */
/* The chrome is always the app's darkest surface — the nav is structure, not
   content, and it should read as the same product as the Console behind it. */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  color: var(--fg-on-dark);
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
/* The ReactLive logo (orb + wordmark), cropped tight to the artwork with a
   transparent ground. Sized by height so the lock-up never distorts; the
   header and footer are always near-black, which is what it is drawn for. */
.brand__logo { height: 34px; width: auto; display: block; flex: none; }
.footer-brand .brand__logo { height: 40px; }
@media (max-width: 940px) { .brand__logo { height: 30px; } }
@media (max-width: 420px) { .brand__logo { height: 26px; } }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .875rem; color: var(--fg-on-dark-mut);
  padding: .5rem .6875rem; border-radius: var(--r-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover, .nav__item[data-open='true'] .nav__link { color: var(--fg-on-dark); background: rgba(255, 255, 255, .07); }
.nav__link[aria-current='page'] { color: var(--fg-on-dark); }
.nav__chev { transition: transform .25s var(--ease); opacity: .65; }
.nav__item[data-open='true'] .nav__chev { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: .625rem; margin-left: .75rem; flex: none; }
.nav-actions .signin {
  font-size: .875rem; color: var(--fg-on-dark-mut); padding: .5rem .25rem;
}
.nav-actions .signin:hover { color: var(--fg-on-dark); }

/* Dropdown panel */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: min(680px, calc(100vw - 2rem));
  background: var(--ink-2);
  border: 1px solid var(--line-dark-str);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 70px -24px rgba(0, 0, 0, .85);
  padding: .75rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mega { z-index: 2; }
.nav__item[data-open='true'] .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem; }
.mega__item {
  display: block; padding: .8125rem .875rem; border-radius: var(--r);
  transition: background .16s var(--ease);
}
.mega__item:hover { background: rgba(255, 255, 255, .06); }
.mega__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 550; color: var(--fg-on-dark);
}
.mega__desc { font-size: .8125rem; color: var(--fg-on-dark-fnt); margin-top: .1875rem; line-height: 1.45; }
.mega__sep {
  grid-column: 1 / -1; height: 1px; background: var(--line-dark); margin: .5rem .875rem;
}
.mega__label {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt); padding: .5rem .875rem .25rem;
}
.mega__dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }

/* Split panel (Agents): a featured overview on the left, set apart from
   the members on the right so the overview never reads as one of them. */
.mega__split {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: .75rem;
}
.mega__feature {
  display: flex; flex-direction: column; gap: .375rem;
  padding: 1.125rem; border-radius: var(--r);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-dark);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.mega__feature:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-dark-str); }
.mega__feature-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.mega__feature-title {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  color: var(--fg-on-dark);
}
/* Three agent colours side by side — the overview is the one place in the
   menu that covers all three. */
.mega__feature-bar { display: flex; gap: 3px; margin-top: auto; padding-top: .875rem; }
.mega__feature-bar i { height: 3px; flex: 1; border-radius: 2px; }
.mega__feature-bar i:nth-child(1) { background: var(--ag-engage-lift); }
.mega__feature-bar i:nth-child(2) { background: var(--ag-answer-lift); }
.mega__feature-bar i:nth-child(3) { background: var(--ag-protect-lift); }
.mega__list { display: grid; gap: .125rem; align-content: start; }
.mega__item--icon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.mega__icon { width: 32px; height: 32px; display: block; margin-top: .0625rem; }
.mega__item--icon .mega__desc { display: block; }
/* Bottom row of a split panel (Product → Stagent AI). */
.mega__foot {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--line-dark);
}
.mega__tag {
  display: inline-flex; align-items: center; gap: .375rem;
  margin-left: .25rem; padding: .125rem .5rem; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ft-stagent-lift); border: 1px solid currentColor;
}
.mega__tag::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }

/* Agent lockup — the agent's mark with its name in the brand face, above an
   agent page's headline. Same slot as the Stagent product lockup. */
.agent-lockup {
  display: flex; align-items: center; gap: clamp(.625rem, 1.2vw, .875rem);
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.agent-lockup img { width: clamp(40px, 4.6vw, 56px); height: auto; display: block; flex: none; }
.agent-lockup span {
  font-family: var(--font-brand); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -.01em;
  color: var(--fg-on-dark);
}

/* Mobile */
.nav-toggle {
  display: none; margin-left: auto; padding: .5rem;
  color: var(--fg-on-dark); border-radius: var(--r-sm);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .07); }
.mobile-nav {
  display: none;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 1rem var(--pad-x) 2rem;
}
.mobile-nav[data-open='true'] { display: block; }
.mobile-nav details { border-bottom: 1px solid var(--line-dark); }
.mobile-nav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9375rem .25rem; font-size: 1rem; font-weight: 500;
  color: var(--fg-on-dark); cursor: pointer; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] summary .nav__chev { transform: rotate(180deg); }
.mobile-nav__sub { padding: 0 .25rem 1rem; }
.mobile-nav__sub a {
  display: block; padding: .5rem 0; font-size: .9375rem; color: var(--fg-on-dark-mut);
}
.mobile-nav__sub a:hover { color: var(--fg-on-dark); }
.mobile-nav > a.mobile-nav__top {
  display: block; padding: .9375rem .25rem; font-size: 1rem; font-weight: 500;
  color: var(--fg-on-dark); border-bottom: 1px solid var(--line-dark);
}
.mobile-nav__actions { display: grid; gap: .625rem; margin-top: 1.5rem; }

/* No-JS fallback nav. The real header is rendered by js/site.js into
   #site-header; this is the <noscript> content of that same element, so it is
   never in the page at the same time as the rendered header. Deliberately
   plain — it exists so the site stays navigable, not so it looks identical. */
.nav-fallback {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: var(--ink); border-bottom: 1px solid var(--line-dark);
}
.nav-fallback a {
  color: var(--fg-on-dark-mut); font-size: .9375rem; padding: .25rem 0;
}
.nav-fallback a:hover { color: var(--fg-on-dark); }
.nav-fallback__brand {
  font-weight: 600; letter-spacing: -.02em;
  color: var(--fg-on-dark) !important; margin-right: .5rem;
}

/* --- 7  Footer --------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--fg-on-dark); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr));
}
.footer-brand p { color: var(--fg-on-dark-fnt); font-size: .875rem; margin-top: .75rem; max-width: 24ch; }
.footer-col h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt); font-weight: 400; margin-bottom: 1rem;
}
.footer-col a {
  display: block; font-size: .875rem; color: var(--fg-on-dark-mut); padding: .3125rem 0;
  transition: color .18s var(--ease);
}
.footer-col a:hover { color: var(--fg-on-dark); }
.footer-bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
}
.footer-bottom__line { font-size: .875rem; color: var(--fg-on-dark-mut); margin-right: auto; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { font-size: .8125rem; color: var(--fg-on-dark-fnt); }
.footer-legal a:hover { color: var(--fg-on-dark-mut); }
.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  color: var(--fg-on-dark-mut);
}
.footer-social a:hover { color: var(--fg-on-dark); border-color: var(--line-dark-str); }

/* --- 8  Cards + generic content blocks --------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.375rem, 2.2vw, 1.875rem);
}
.card--tint { background: var(--paper-2); }
.card--raise { box-shadow: var(--sh-1); }
.on-dark .card, .card--dark {
  background: var(--ink-2); border-color: var(--line-dark); color: var(--fg-on-dark);
}
.card__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.card__body { color: var(--fg-muted); font-size: .9375rem; margin-top: .625rem; line-height: 1.55; }
.on-dark .card__body { color: var(--fg-on-dark-mut); }

/* Icon tile */
.tile {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--accent-soft); color: var(--accent);
}
.on-dark .tile { background: var(--accent-dark-sf); color: var(--accent-on-dark); }
/* One agent per panel. Each takes its tinted bg AND border from a single
   agent — never two tints in one container. */
.tile--protect { background: var(--ag-protect-soft); color: var(--ag-protect); box-shadow: inset 0 0 0 1px var(--ag-protect-line); }
.on-dark .tile--protect { background: var(--ag-protect-soft-dk); color: var(--ag-protect-lift); box-shadow: inset 0 0 0 1px var(--ag-protect-line-dk); }
.tile--engage { background: var(--ag-engage-soft); color: var(--ag-engage); box-shadow: inset 0 0 0 1px var(--ag-engage-line); }
.on-dark .tile--engage { background: var(--ag-engage-soft-dk); color: var(--ag-engage-lift); box-shadow: inset 0 0 0 1px var(--ag-engage-line-dk); }
.tile--hold { background: var(--hold-soft); color: var(--hold); }
.on-dark .tile--hold { background: var(--hold-dark-sf); color: var(--hold-lift); }
.tile--neutral { background: var(--paper-3); color: var(--fg); }
.tile--answer { background: var(--ag-answer-soft); color: var(--ag-answer); box-shadow: inset 0 0 0 1px var(--ag-answer-line); }
.on-dark .tile--answer { background: var(--ag-answer-soft-dk); color: var(--ag-answer-lift); box-shadow: inset 0 0 0 1px var(--ag-answer-line-dk); }
.on-dark .tile--neutral { background: var(--ink-3); color: var(--fg-on-dark); }

/* Ticked / crossed list */
.list { display: grid; gap: .6875rem; }
.list li {
  display: grid; grid-template-columns: 18px 1fr; gap: .625rem;
  font-size: .9375rem; color: var(--fg-muted); line-height: 1.5;
}
.on-dark .list li { color: var(--fg-on-dark-mut); }
/* The item is a two-column grid, so a trailing badge lands in a new row's
   18px marker column and is squeezed to a vertical sliver. Put it back under
   the text instead. */
.list li > .verify { grid-column: 2; justify-self: start; margin-top: .3rem; }
.list li::before {
  content: ''; width: 16px; height: 16px; margin-top: .28em; border-radius: 999px;
  background: var(--safe-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.5 2.5 5-5.4' fill='none' stroke='%23147F4B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.on-dark .list li::before { background-color: var(--safe-dark-sf); }
.list--plain li::before {
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.list--no li::before {
  background: var(--paper-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%238a8a8a' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.on-dark .list--no li::before { background-color: rgba(255, 255, 255, .07); }

/* Definition rows (used for feature lists, security, integrations) */
.rows { border-top: 1px solid var(--line); }
.on-dark .rows { border-top-color: var(--line-dark); }
.rows > div {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
  gap: 1rem clamp(1rem, 4vw, 3rem);
  padding: clamp(1.125rem, 2vw, 1.625rem) 0;
  border-bottom: 1px solid var(--line);
}
.on-dark .rows > div { border-bottom-color: var(--line-dark); }
.rows dt { font-weight: 550; letter-spacing: -.01em; font-size: 1rem; }
.rows dd { margin: 0; color: var(--fg-muted); font-size: .9375rem; line-height: 1.55; }
.on-dark .rows dd { color: var(--fg-on-dark-mut); }

/* Metric strip */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.on-dark .kpis { background: var(--line-dark); border-color: var(--line-dark); }
.kpi { background: var(--paper); padding: clamp(1.25rem, 2.5vw, 2rem); }
.on-dark .kpi { background: var(--ink-2); }
.kpi__value { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.03em; }
.kpi__label { font-size: .875rem; color: var(--fg-muted); margin-top: .375rem; }
.on-dark .kpi__label { color: var(--fg-on-dark-mut); }

/* Pull quote / statement band */
.band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.on-dark .band { border-color: var(--line-dark); }

/* Logo row */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.logos span {
  font-size: 1.125rem; font-weight: 550; letter-spacing: -.02em;
  color: var(--fg-on-dark-fnt);
}
/* Customer logos (resources/logos/, light-on-dark versions of each official
   mark). Sized by visual weight rather than one fixed height: wordmarks are
   wide, the Wolves crest is square and sits with the club's name beside it. */
.logo-mark { display: block; width: auto; opacity: .85; }
.logo-mark--microsoft { height: 26px; }
.logo-mark--wapo { height: 24px; }
.logo-mark--crest { height: 40px; opacity: 1; }
.logos .logo-lockup { display: inline-flex; align-items: center; gap: .625rem; }
.logos .logo-lockup span { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--fg-on-dark); opacity: .85; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: var(--r-xs);
  background: var(--paper-3); color: var(--fg-muted);
}
.badge--safe { background: var(--safe-soft); color: var(--safe); }
.badge--hold { background: var(--hold-soft); color: var(--hold); }
.badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge--live { background: var(--live-soft); color: var(--live); }
.on-dark .badge { background: var(--ink-3); color: var(--fg-on-dark-mut); }
.on-dark .badge--safe { background: var(--safe-dark-sf); color: var(--safe-lift); }
.on-dark .badge--hold { background: var(--hold-dark-sf); color: var(--hold-lift); }
.on-dark .badge--accent { background: var(--accent-dark-sf); color: var(--accent-on-dark); }
.on-dark .badge--live { background: var(--live-dark-sf); color: var(--live-lift); }
/* LIVE is danger, per spec. On the dark canvas the deep step is unreadable,
   so the dot takes the dark value there. */
.on-dark .dot-live { background: var(--live-lift); }

.dot-live {
  width: 7px; height: 7px; border-radius: 999px; background: var(--live);
  box-shadow: 0 0 0 0 rgba(var(--live-rgb), .5);
  animation: pulse 2s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--live-rgb), .5); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--live-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), 0); }
}

/* =============================================================================
   9  Product UI mockups
   ---------------------------------------------------------------------------
   NOTE — Visual Policy §46: these are faithful HTML/CSS recreations of the
   ReactLive Console / Audience / Wall built on the reactlive-surface token
   values. They stand in for real captures. Replace with real screenshots
   before publishing; keep the frame classes and swap the inner markup for
   <img>.
   ========================================================================== */

.console {
  --c-surface: #0e121c;
  --c-surface-2: #141926;
  --c-line: #1c2130;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-dark);
  overflow: hidden;
  color: var(--fg-on-dark);
  font-size: 13px;
  line-height: 1.45;
}
.console--light {
  --c-surface: #ffffff;
  --c-surface-2: #fafafa;
  --c-line: #e5e5e5;
  color: var(--fg);
  box-shadow: var(--sh-2);
}

.console__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.console__title { font-weight: 550; font-size: 13px; letter-spacing: -.01em; }
.console__meta { display: flex; gap: 1rem; margin-left: auto; }
.console__meta div { display: flex; align-items: baseline; gap: .3125rem; }
.console__meta b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.console__meta span { font-size: 11px; color: var(--fg-on-dark-fnt); }
.console--light .console__meta span { color: var(--fg-faint); }

.console__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.console__body > * + * { border-left: 1px solid var(--c-line); }
.console__col { padding: .875rem; display: grid; gap: .75rem; align-content: start; }

.panel { border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6875rem;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.console--light .panel__head { color: var(--fg-faint); }
.panel__head .badge { margin-left: auto; }
.panel__body { padding: .6875rem; display: grid; gap: .5rem; }

/* In Focus card */
.infocus {
  border: 1px solid rgba(var(--accent-lift-rgb), .4);
  background: rgba(var(--accent-lift-rgb), .1);
  border-radius: var(--r);
  padding: .8125rem;
}
.console--light .infocus { border-color: rgba(var(--accent-rgb), .28); background: var(--paper-2); }
.infocus__q { font-size: 14px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; }
.infocus__foot {
  display: flex; align-items: center; gap: .5rem; margin-top: .625rem;
  font-size: 11px; color: var(--fg-on-dark-fnt);
}
.console--light .infocus__foot { color: var(--fg-faint); }

/* Question queue */
.q {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .625rem; align-items: start;
  padding: .625rem; border-radius: var(--r-sm);
  background: var(--c-surface-2);
}
.q__votes {
  font-family: var(--mono); font-size: 11px; text-align: center; min-width: 26px;
  padding: .1875rem .25rem; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .05); color: var(--fg-on-dark-mut);
}
.console--light .q__votes { background: #f0f0f0; color: var(--fg-muted); }
.q__text { font-size: 12.5px; line-height: 1.45; }
.q__meta { font-size: 10.5px; color: var(--fg-on-dark-fnt); margin-top: .3125rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.console--light .q__meta { color: var(--fg-faint); }

/* Agent status rows */
.agent-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .625rem; align-items: center;
  padding: .5625rem .625rem; border-radius: var(--r-sm);
  background: var(--c-surface-2);
}
.agent-row__name {
  display: flex; align-items: center; gap: .4375rem;
  font-size: 12px; font-weight: 550;
}
.agent-row__note { font-size: 11px; color: var(--fg-on-dark-fnt); margin-top: .1875rem; }
.console--light .agent-row__note { color: var(--fg-faint); }
.agent-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.agent-dot--protect { background: var(--ag-protect-lift); }
.agent-dot--engage  { background: var(--ag-engage-lift); }
.agent-dot--answer  { background: var(--ag-answer-lift); }
/* Report is not an agent, but the event timelines mix its output in with agent
   activity, so it borrows the same dot primitive. */
.agent-dot--report  { background: var(--fg-on-dark-mut); }

/* Agent cards — the three specialist agents, presented at full size in the
   hero so an AI-first product leads with them instead of revealing them four
   sections down. Icons are the product's own agent marks (see .agent-mark),
   so marketing and product agree.
   Light defaults, .on-dark overrides, per the one-dark-scope rule. */
.agent-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.875rem, 1.4vw, 1.125rem);
}
.agent-card {
  display: flex; flex-direction: column; text-align: left; text-decoration: none;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); color: var(--fg);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.agent-card:hover { border-color: var(--line-strong); background: var(--paper-2); transform: translateY(-2px); }
.agent-card__name {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.02em;
  line-height: 1.15;
}

/* The agent's own name, set in the brand face. Applied to the name alone —
   on cards whose title is a sentence ("Engage — know when…") only the name is
   wrapped, so the face reads as the agent's mark rather than a heading style.
   700 is the only weight loaded; asking for anything else would let the
   browser synthesise a fake bold. */
.agent-name,
.agent-card__name {
  font-family: var(--font-brand);
  font-weight: 700;
}
.agent-card__body {
  margin-top: .75rem; font-size: 1rem; line-height: 1.55; color: var(--fg-muted);
}
.agent-card .tlink { margin-top: auto; padding-top: 1.25rem; }
.on-dark .agent-card {
  background: var(--ink-2); border-color: var(--line-dark); color: var(--fg-on-dark);
}
.on-dark .agent-card:hover { border-color: var(--line-dark-str); background: var(--ink-3); }
.on-dark .agent-card__body { color: var(--fg-on-dark-mut); }

/* Large tile for the hero cards. Colour comes from the .tile modifiers, so the
   light/dark pairs are defined in exactly one place. */
.tile--lg {
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  border-radius: var(--r); margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

/* Agent marks. The product's own agent icons, shipped as artwork rather than
   drawn from the icon set: each one carries its agent's gradient and its own
   rounded-square ground, so it replaces the tinted .tile wrapper entirely
   instead of sitting inside one. Sized to match the tiles it replaces —
   .tile (34px) and .tile--lg — so no surrounding layout moves. */
.agent-mark {
  display: block; flex: none;
  width: 34px; height: 34px; margin-bottom: 1rem;
}
.agent-mark--lg {
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

@media (max-width: 940px) {
  .agent-cards { grid-template-columns: minmax(0, 1fr); }
  .agent-card .tlink { padding-top: 1rem; }
}
}

/* Suggestion needing approval */
.suggest {
  border: 1px dashed rgba(var(--accent-lift-rgb), .45);
  border-radius: var(--r-sm);
  padding: .625rem;
  background: rgba(var(--accent-lift-rgb), .08);
}
.console--light .suggest { border-color: rgba(var(--accent-rgb), .35); background: var(--paper-2); }
.suggest__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-on-dark);
}
.console--light .suggest__label { color: var(--accent); }
.suggest__text { font-size: 12.5px; margin-top: .375rem; line-height: 1.45; }
.suggest__actions { display: flex; gap: .375rem; margin-top: .625rem; }
.mini {
  font-size: 11px; font-weight: 500; padding: .3125rem .625rem; border-radius: var(--r-xs);
  border: 1px solid var(--c-line); color: inherit;
}
.mini--go { background: var(--accent-lift); border-color: transparent; color: var(--accent-lift-fg); }
.console--light .mini--go { background: var(--accent); }

/* Engagement sparkline */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark i {
  flex: 1; border-radius: 1px; background: rgba(var(--accent-lift-rgb), .4); min-height: 3px;
}
.console--light .spark i { background: var(--line-strong); }
.spark i.hi { background: var(--accent-lift); }
.console--light .spark i.hi { background: var(--accent); }
.spark i.lo { background: rgba(var(--accent-lift-rgb), .30); }

/* Theme bars in Report panel */
.theme-bar { display: grid; gap: .3125rem; }
.theme-bar > div { display: flex; align-items: center; gap: .5rem; font-size: 11.5px; }
/* Fixed-width label so the bars line up. It has to be a class, not an inline
   min-width, so it can collapse on a phone instead of forcing the row wider
   than the viewport. */
.theme-bar__label { min-width: 9.5rem; }
@media (max-width: 560px) {
  .theme-bar > div { flex-wrap: wrap; }
  .theme-bar__label { min-width: 0; width: 100%; }
}
.theme-bar__track { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.on-dark .theme-bar__track { background: rgba(255, 255, 255, .07); }
.console--light .theme-bar__track { background: #f0f0f0; }
/* The fill is a <span>: without display:block neither its width nor its height
   applies and the bar renders as empty track. */
.theme-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.on-dark .theme-bar__fill { background: var(--accent-lift); }
.theme-bar__pct { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); min-width: 28px; text-align: right; }
.on-dark .theme-bar__pct { color: var(--fg-on-dark-fnt); }

/* Phone (Audience) */
.phone {
  width: 100%; max-width: 300px; margin-inline: auto;
  background: var(--ink); border-radius: 34px; padding: 7px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 28px 60px -22px rgba(11, 13, 17, .5);
}
.phone__screen {
  background: var(--paper); border-radius: 28px; overflow: hidden;
  aspect-ratio: 9 / 18.5; display: flex; flex-direction: column;
  font-size: 13px; color: var(--fg);
}
.phone__bar {
  padding: .75rem .875rem .625rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .5rem;
}
.phone__body { padding: .875rem; display: grid; gap: .625rem; align-content: start; flex: 1; overflow: hidden; }
.phone__foot {
  border-top: 1px solid var(--line); padding: .625rem .875rem;
  display: flex; align-items: center; gap: .5rem;
}
.phone__input {
  flex: 1; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .4375rem .75rem; font-size: 12px; color: var(--fg-faint);
}
.poll-opt {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .625rem;
  font-size: 12.5px; position: relative; overflow: hidden;
}
.poll-opt__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); }
.poll-opt > span { position: relative; display: flex; justify-content: space-between; gap: .5rem; }
.poll-opt--sel { border-color: var(--accent); }
.reactions { display: flex; gap: .375rem; }
.reactions i {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line);
  display: grid; place-items: center; font-style: normal; font-size: 15px;
}

/* Wall */
.wall {
  background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
  box-shadow: var(--sh-dark);
  aspect-ratio: 16 / 9; padding: clamp(1rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: .875rem;
  color: var(--fg-on-dark); overflow: hidden;
}
.wall__head { display: flex; align-items: center; gap: .625rem; font-size: 12px; color: var(--fg-on-dark-fnt); }

/* Real product captures (§46). Each frame keeps its chrome and border radius;
   the illustrative inner markup is replaced by the screenshot itself. */
.shot { display: block; width: 100%; height: auto; }
.console--shot { font-size: inherit; line-height: 0; }
.phone__screen--shot { aspect-ratio: auto; display: block; background: var(--ink); }
.on-dark .phone { box-shadow: 0 0 0 1px var(--line-dark-str), 0 28px 60px -22px rgba(0, 0, 0, .8); }
.wall--shot { aspect-ratio: auto; padding: 0; display: block; }
.wall__q {
  font-size: clamp(1.0625rem, 2.4vw, 1.875rem); font-weight: 550;
  letter-spacing: -.025em; line-height: 1.2; text-wrap: balance;
}
.wall__foot { margin-top: auto; display: flex; align-items: center; gap: 1rem; font-size: 12px; color: var(--fg-on-dark-fnt); }
.wall__qr { width: 46px; height: 46px; border-radius: var(--r-xs); background: repeating-conic-gradient(#fafafa 0 25%, #06080f 0 50%) 0 0 / 8px 8px; flex: none; }

/* Surface map (one event, four surfaces) */
.surface-map {
  position: relative;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'a b' 'hub hub' 'c d';
}
.surface-map__hub {
  grid-area: hub;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 1rem; text-align: center;
}
.on-dark .surface-map__hub { border-color: var(--accent-lift); background: var(--accent-dark-sf); }
.surface-map__hub b { display: block; font-size: 1rem; letter-spacing: -.02em; }
.surface-map__hub span { font-size: .8125rem; color: var(--fg-muted); }
.on-dark .surface-map__hub span { color: var(--fg-on-dark-mut); }
.surface-node {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .875rem 1rem; background: var(--paper);
}
.section--tint .surface-node { background: var(--paper-2); }
.on-dark .surface-node { border-color: var(--line-dark); background: var(--ink-2); }
.surface-node:nth-of-type(1) { grid-area: a; }
.surface-node:nth-of-type(2) { grid-area: b; }
.surface-node:nth-of-type(3) { grid-area: c; }
.surface-node:nth-of-type(4) { grid-area: d; }
.surface-node b { display: block; font-size: .9375rem; }
.surface-node span { font-size: .8125rem; color: var(--fg-faint); }
.on-dark .surface-node span { color: var(--fg-on-dark-fnt); }

/* --- 10  Narrative blocks --------------------------------------------- */

/* Engage → Understand → Act */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.on-dark .triad { background: var(--line-dark); }
.triad > div { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.section--tint .triad > div { background: var(--paper-2); }
.on-dark .triad > div { background: var(--ink); }
.triad__step {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .875rem; display: block;
}
.on-dark .triad__step { color: var(--accent-on-dark); }
.triad__lead { font-size: 1.0625rem; font-weight: 550; letter-spacing: -.015em; line-height: 1.35; }
.triad__items { margin-top: 1.25rem; display: grid; gap: .5rem; }
.triad__items li { font-size: .9375rem; color: var(--fg-muted); }
.on-dark .triad__items li { color: var(--fg-on-dark-mut); }

/* Chain: Engage → Understand → Act, or Question → Protect → Answer → … */
.chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
}
.chain span {
  padding: .4375rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
}
.on-dark .chain span { border-color: var(--line-dark-str); background: transparent; }
.chain span.is-key { border-color: var(--accent); color: var(--accent); }
.on-dark .chain span.is-key { border-color: var(--accent-lift); color: var(--accent-on-dark); }
.chain i { font-style: normal; color: var(--fg-faint); }

/* Timeline (real event flow) */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.on-dark .tl { border-top-color: var(--line-dark); }
.tl:last-child { border-bottom: 1px solid var(--line); }
.on-dark .tl:last-child { border-bottom-color: var(--line-dark); }
.tl__time { font-family: var(--mono); font-size: .875rem; color: var(--fg-faint); padding-top: .15rem; }
.on-dark .tl__time { color: var(--fg-on-dark-fnt); }
.tl__body { display: grid; gap: .875rem; }
.tl__said {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.35;
}
.tl__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem;
  padding: .875rem 1rem; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--paper);
}
.on-dark .tl__step { border-color: var(--line-dark); background: var(--ink-2); }
.tl__who { display: flex; align-items: center; gap: .4375rem; font-size: .8125rem; font-weight: 600; }
.tl__what { font-size: .9375rem; color: var(--fg-muted); line-height: 1.5; }
.on-dark .tl__what { color: var(--fg-on-dark-mut); }
.tl__quote {
  margin-top: .625rem; padding-left: .875rem; border-left: 2px solid var(--line-strong);
  font-size: .9375rem; color: var(--fg);
}
.on-dark .tl__quote { border-left-color: var(--line-dark-str); color: var(--fg-on-dark); }
.tl__src {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: .625rem;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint);
}
.on-dark .tl__src { color: var(--fg-on-dark-fnt); }
.tl__human {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 550; color: var(--safe);
}
.on-dark .tl__human { color: var(--safe-lift); }

/* Deep sections. Dark bands tinted with near-black versions of the agent
   colours instead of flat --ink, so a run of dark sections still reads as
   separate bands. Always paired with .on-dark, which supplies the type. */
:root {
  --deep-engage:  #170d07;
  --deep-answer:  #07111f;
  --deep-protect: #100a1d;
  --deep-stagent: #18080d;
}
.section--deep-agents {
  background:
    radial-gradient(60rem 36rem at 88% 8%, rgba(var(--ag-protect-rgb), .10), transparent 60%),
    radial-gradient(50rem 32rem at 8% 100%, rgba(var(--ag-engage-rgb), .07), transparent 60%),
    linear-gradient(135deg, var(--deep-protect) 0%, var(--deep-answer) 55%, var(--deep-engage) 100%);
}
.section--deep-stagent {
  background:
    radial-gradient(56rem 30rem at 90% 0%, rgba(255, 95, 117, .08), transparent 62%),
    linear-gradient(160deg, var(--deep-stagent) 0%, #0d0a0e 70%);
}
.section--deep-stagent-flat { background: #120709; }

/* Section backgrounds. Two tones with a clear step between them — raised
   slate and near-black — assigned alternately down every page, so adjacent
   bands never share a ground. Near-black bands rotate a faint agent tint.
   Every non-hero band also takes .section--seam. Heroes, the deep sections
   and the homepage agent bands keep their own grounds. */
.bg-raised {
  background:
    radial-gradient(70rem 22rem at 50% 0%, rgba(238, 240, 245, .035), transparent 70%),
    linear-gradient(180deg, #191d27 0%, #13161e 100%);
}
.bg-deep { background: #060709; }
.bg-deep--protect {
  background: radial-gradient(56rem 28rem at 88% 0%, rgba(var(--ag-protect-rgb), .09), transparent 62%), #060709;
}
.bg-deep--answer {
  background: radial-gradient(56rem 28rem at 12% 0%, rgba(var(--ag-answer-rgb), .08), transparent 62%), #060709;
}
.bg-deep--engage {
  background: radial-gradient(56rem 28rem at 88% 100%, rgba(var(--ag-engage-rgb), .07), transparent 62%), #060709;
}
.on-dark.section--seam { border-top-color: #262b35; }
/* Homepage agent bands: each on a near-black version of its own colour. */
.agent-feature--engage  { background: radial-gradient(60rem 34rem at 25% 50%, rgba(var(--ag-engage-rgb), .10), transparent 65%), var(--deep-engage); }
.agent-feature--answer  { background: radial-gradient(60rem 34rem at 75% 50%, rgba(var(--ag-answer-rgb), .10), transparent 65%), var(--deep-answer); }
.agent-feature--protect { background: radial-gradient(60rem 34rem at 25% 50%, rgba(var(--ag-protect-rgb), .11), transparent 65%), var(--deep-protect); }

/* Mode strip — Off / Assist / Auto as three joined cells (homepage). */
.mode-strip__head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: .625rem;
}
.on-dark .mode-strip__head { color: var(--fg-on-dark-fnt); }
.mode-strip__row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.on-dark .mode-strip__row { border-color: var(--line-dark-str); }
.mode-strip__mode { padding: .75rem .875rem; display: grid; gap: .25rem; }
.mode-strip__mode + .mode-strip__mode { border-left: 1px solid var(--line); }
.on-dark .mode-strip__mode + .mode-strip__mode { border-left-color: var(--line-dark-str); }
.mode-strip__mode.is-key { background: var(--accent-soft); }
.on-dark .mode-strip__mode.is-key { background: rgba(255, 255, 255, .06); }
.mode-strip__name { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.mode-strip__desc { font-size: .8125rem; line-height: 1.35; color: var(--fg-muted); }
.on-dark .mode-strip__desc { color: var(--fg-on-dark-mut); }

/* Homepage "Meet the agents": one contribution in the middle, analysed by
   all three agents at once — not a sequence. Spokes carry a steady outward
   flow to every agent simultaneously. Three example items rotate (--hub-t,
   a third each); the centre caption and every agent's finding swap together
   via .hub__step-1/2/3. Nodes are placed by inline percentages (r = 38 of a
   100 viewBox) with the icon's centre on the ring. Dark-only (lives in a
   deep section). */
.hub {
  --icon: clamp(48px, 6vw, 64px);
  --hub-t: 15s;
  position: relative; width: 100%; max-width: 500px; margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__halo { fill: rgba(255, 255, 255, .015); stroke: var(--line-dark); stroke-width: .3; }
.hub__spoke {
  stroke-width: .6; stroke-linecap: round;
  stroke-dasharray: 1.4 2.2;
  animation: hub-flow 1.4s linear infinite;
}
.hub__spoke--protect { stroke: var(--ag-protect-lift); }
.hub__spoke--answer  { stroke: var(--ag-answer-lift); }
.hub__spoke--engage  { stroke: var(--ag-engage-lift); }
/* Dashes travel from the centre outwards, to all three at once. */
@keyframes hub-flow { from { stroke-dashoffset: 3.6; } to { stroke-dashoffset: 0; } }

.hub__centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; display: grid; width: 48%;
  padding: 1rem 1.125rem; border-radius: var(--r-lg);
  background: #0c0d15; border: 1px solid var(--line-dark-str);
  box-shadow: 0 0 0 6px rgba(12, 13, 21, .6), 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.hub__cap {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: .375rem;
}
.hub__kind {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.hub__item { font-size: clamp(.875rem, 1.4vw, 1rem); font-weight: 500; line-height: 1.35; color: var(--fg-on-dark); }

.hub__node {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 9rem;
  transform: translate(-50%, calc(var(--icon) / -2));
  text-decoration: none; color: var(--fg-on-dark);
}
.hub__node--protect { --ag-rgb: var(--ag-protect-rgb); }
.hub__node--answer  { --ag-rgb: var(--ag-answer-rgb); }
.hub__node--engage  { --ag-rgb: var(--ag-engage-rgb); }
.hub__node img {
  width: var(--icon); height: var(--icon); display: block;
  border-radius: calc(var(--icon) * .26);
  box-shadow: 0 0 0 6px #0b0c14, 0 0 0 7.5px rgba(var(--ag-rgb), .55), 0 0 30px 2px rgba(var(--ag-rgb), .3);
  transition: transform .2s var(--ease);
}
.hub__node:hover img { transform: translateY(-2px); }
.hub__name {
  margin-top: .625rem;
  font-family: var(--font-brand); font-weight: 700; font-size: 1.125rem; line-height: 1.1;
}
.hub__results { display: grid; margin-top: .3125rem; }
.hub__res {
  grid-area: 1 / 1;
  font-size: .75rem; line-height: 1.3; color: var(--fg-on-dark-mut);
}
.hub__res.is-safe { color: var(--safe-lift); }
.hub__res.is-hold { color: var(--hold-lift); }

/* The rotation. Everything tagged with the same step fades in and out
   together. */
.hub__cap, .hub__res { opacity: 0; animation: hub-step var(--hub-t) linear infinite; }
.hub__step-2 { animation-delay: calc(var(--hub-t) / 3); }
.hub__step-3 { animation-delay: calc(var(--hub-t) * 2 / 3); }
@keyframes hub-step {
  0%   { opacity: 0; transform: translateY(4px); }
  3%   { opacity: 1; transform: none; }
  29%  { opacity: 1; transform: none; }
  32%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; }
}
@media (max-width: 480px) {
  .hub__node { width: 7rem; }
  .hub__name { font-size: 1rem; }
  .hub__centre { width: 54%; padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hub__cap, .hub__res, .hub__spoke { animation: none !important; }
  .hub__step-1 { opacity: 1; }
}

/* Parallel relay: arrives → all three agents side by side → your team. */
/* Doubled class: .relay is declared later in the file and would win. */
.relay.relay--parallel { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr); }
.relay__agents {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: .25rem;
}
.relay__agents > div { display: grid; gap: .5rem; align-content: start; }
@media (max-width: 940px) {
  .relay.relay--parallel, .relay__agents { grid-template-columns: minmax(0, 1fr); }
}

/* Relay on dark (agents.html#together). */
.on-dark .relay { background: var(--line-dark); border-color: var(--line-dark); }
.on-dark .relay__step { background: #0d0f17; }
.on-dark .relay__step--human { background: #12141d; }
.on-dark .relay__n { color: var(--fg-on-dark-fnt); }
.on-dark .relay__what { color: var(--fg-on-dark-mut); }

/* Agent feature bands (homepage). One agent per band: --ag / --ag-rgb are
   re-pointed by the modifier and everything else is written once. */
.agent-feature--engage  { --ag: var(--ag-engage-lift);  --ag-rgb: var(--ag-engage-rgb); }
.agent-feature--answer  { --ag: var(--ag-answer-lift);  --ag-rgb: var(--ag-answer-rgb); }
.agent-feature--protect { --ag: var(--ag-protect-lift); --ag-rgb: var(--ag-protect-rgb); }
.agent-feature .eyebrow { color: var(--ag); }
.agent-feature .tlink { color: var(--ag); }

/* The mark on its stage: an outline in the agent's colour, a soft halo, and
   a pool of light underneath. */
.agent-stage {
  display: flex; flex-direction: column; align-items: center;
  padding-block: clamp(1rem, 3vw, 2.5rem);
}
.agent-stage__pedestal { position: relative; display: flex; justify-content: center; width: 100%; }
.agent-stage__mark {
  --mark: clamp(120px, 13vw, 168px);
  position: relative; z-index: 1;
  padding: clamp(10px, 1.1vw, 14px);
  border-radius: calc(var(--mark) * .27);
  border: 1.5px solid rgba(var(--ag-rgb), .75);
  background: rgba(var(--ag-rgb), .06);
  box-shadow:
    0 0 0 6px rgba(var(--ag-rgb), .07),
    0 0 48px -6px rgba(var(--ag-rgb), .55),
    inset 0 0 24px rgba(var(--ag-rgb), .12);
}
.agent-stage__mark img { display: block; width: var(--mark); height: var(--mark); }
/* Pool of light under the mark. */
.agent-stage__pedestal::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: calc(100% + 5px);
  width: min(440px, 95%); height: 110px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--ag-rgb), .34), transparent 72%);
  filter: blur(8px);
}
.agent-stage__label {
  position: relative; z-index: 1;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ag);
}
.agent-stage__name {
  position: relative; z-index: 1;
  margin-top: .5rem;
  font-family: var(--font-brand); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.01em;
  color: var(--fg-on-dark);
}

/* Relay — the path one contribution takes through the agents (agents.html).
   Numbered steps in a row, stacking under 940px. Light defaults, .on-dark
   overrides. */
.relay {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.relay__step {
  position: relative; background: var(--paper);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1rem, 1.8vw, 1.375rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.relay__step--human { background: var(--paper-2); }
.relay__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint);
}
.relay__who {
  display: flex; align-items: center; gap: .4375rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em;
}
.relay__what { font-size: .9375rem; line-height: 1.5; color: var(--fg-muted); }
@media (max-width: 940px) {
  .relay { grid-template-columns: minmax(0, 1fr); }
}

/* Off / Assist / Auto */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mode {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.375rem, 2.4vw, 1.875rem);
  position: relative;
}
.on-dark .mode { border-color: var(--line-dark); }
.mode--key { border-color: var(--accent); background: var(--accent-soft); }
.on-dark .mode--key { border-color: var(--accent-lift); background: var(--accent-dark-sf); }
.mode__name {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg);
}
.on-dark .mode__name { color: var(--fg-on-dark); }
.mode--key .mode__name { color: var(--accent-ink); }
.on-dark .mode--key .mode__name { color: var(--accent-on-dark); }
.mode__desc { font-size: .9375rem; color: var(--fg-muted); margin-top: .875rem; line-height: 1.55; }
.on-dark .mode__desc { color: var(--fg-on-dark-mut); }
.mode__flag {
  display: inline-block; margin-top: 1rem; font-size: .8125rem; font-weight: 550;
  color: var(--safe);
}
.on-dark .mode__flag { color: var(--safe-lift); }

/* Agent mode configuration widget */
.mode-config {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper);
}
.on-dark .mode-config { border-color: var(--line-dark); background: var(--ink-2); }
.mode-config__head {
  padding: .75rem 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
}
.mode-config__row {
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--line);
}
.on-dark .mode-config__head { border-bottom-color: var(--line-dark); color: var(--fg-on-dark-fnt); }
.on-dark .mode-config__row { border-bottom-color: var(--line-dark); }
.mode-config__row:last-child { border-bottom: 0; }
.mode-config__agent { display: flex; align-items: center; gap: .5rem; font-weight: 550; font-size: .9375rem; }
.mode-config__note { font-size: .8125rem; color: var(--fg-faint); margin-left: auto; text-align: right; }
.on-dark .mode-config__note { color: var(--fg-on-dark-fnt); }
.switch {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 2px; flex: none;
}
.on-dark .switch { border-color: var(--line-dark-str); }
.switch span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: .3125rem .625rem; border-radius: 999px; color: var(--fg-faint);
}
.on-dark .switch span { color: var(--fg-on-dark-fnt); }
.switch span[data-on] { background: var(--ink); color: var(--fg-on-dark); }
.on-dark .switch span[data-on] { background: var(--fg-on-dark); color: var(--ink); }
.switch span[data-on='accent'] { background: var(--accent-lift); color: var(--accent-lift-fg); }
.switch span[data-on='safe'] { background: var(--safe-lift); color: var(--ink); }

/* Comparison table */
.compare { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.on-dark .compare { border-color: var(--line-dark); }
.compare th, .compare td {
  text-align: left; padding: clamp(.875rem, 1.6vw, 1.125rem) clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}
.on-dark .compare th, .on-dark .compare td { border-bottom-color: var(--line-dark); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 400; color: var(--fg-faint); background: var(--paper-2);
}
.on-dark .compare thead th { color: var(--fg-on-dark-fnt); background: var(--ink-2); }
.compare td:first-child { color: var(--fg-muted); }
.on-dark .compare td:first-child { color: var(--fg-on-dark-fnt); }
.compare td:last-child { font-weight: 550; }
.compare thead th:last-child { color: var(--accent); }
.on-dark .compare thead th:last-child { color: var(--accent-on-dark); }

/* --- 11  Page furniture ----------------------------------------------- */

.page-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.page-hero .lede { margin-top: 1.5rem; }

/* Alternating feature block */
.feature-block { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature-block + .feature-block { margin-top: clamp(3.5rem, 8vw, 7rem); }
.feature-block--flip > *:first-child { order: 2; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2.125rem); background: var(--paper);
  display: flex; flex-direction: column; height: 100%;
}
.plan--key { border-color: var(--ink); box-shadow: var(--sh-2); }
.on-dark .plan--key { border-color: var(--fg-on-dark-mut); }
.plan__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.plan__for { font-size: .875rem; color: var(--fg-muted); margin-top: .375rem; min-height: 2.6em; }
.plan__price { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; margin-top: 1.25rem; }
.plan__price small { font-family: var(--font); font-size: .8125rem; color: var(--fg-faint); letter-spacing: 0; display: block; margin-top: .25rem; font-weight: 400; }
.plan .btn { margin-top: 1.5rem; }
.plan .list { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.plan .list li { font-size: .875rem; }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 30rem; }
.form--wide { max-width: 44rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .375rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .8125rem; font-weight: 550; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .9375rem;
  padding: .625rem .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--fg);
  width: 100%;
}
.on-dark .field label { color: var(--fg-on-dark); }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea {
  background: var(--ink-2); border-color: var(--line-dark-str); color: var(--fg-on-dark);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field__hint { font-size: .75rem; color: var(--fg-faint); }
.form__status { font-size: .875rem; grid-column: 1 / -1; min-height: 1.4em; }
.form__status[data-state='ok'] { color: var(--safe); }
.form__status[data-state='err'] { color: var(--live); }
.on-dark .form__status[data-state='ok'] { color: var(--safe-lift); }

/* Prose for manifesto / legal / long text */
.prose { max-width: var(--maxw-text); }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.2; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.prose h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; margin-top: 2rem; }
.prose p, .prose li { color: var(--fg-muted); line-height: 1.65; }
.prose strong { color: var(--fg); font-weight: 550; }
.prose ul { display: grid; gap: .5rem; padding-left: 1.125rem; list-style: disc; }
.prose ul li::marker { color: var(--fg-faint); }
.prose blockquote {
  border-left: 2px solid var(--accent); padding-left: 1.25rem;
  font-size: 1.125rem; color: var(--fg); font-weight: 450;
}
.prose .lede { color: var(--fg-muted); }
.prose hr { margin-block: clamp(2rem, 4vw, 3rem); }

/* Notice block (drafts, verification, transparency) */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--hold-lift);
  border-radius: var(--r-sm); padding: 1rem 1.25rem;
  background: var(--paper-2); font-size: .9375rem; color: var(--fg-muted);
}
.on-dark .notice { background: var(--ink-2); border-color: var(--line-dark); color: var(--fg-on-dark-mut); }

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band .h1 { margin-inline: auto; max-width: 32rem; }
.cta-band .body { margin-inline: auto; text-align: center; }

/* --- indexB — alternate homepage ("event co-pilot") ------------------
   Only what indexB.html needs beyond the shared components. */
.hero-b { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero-b__title { margin-top: .75rem; font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
.announce-pill {
  display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem;
  padding: .4375rem .875rem; border-radius: 999px;
  font-size: .8125rem; color: var(--fg-on-dark-mut);
  border: 1px solid var(--line-dark-str); background: rgba(255, 255, 255, .03);
  transition: border-color .2s var(--ease);
}
.announce-pill b { color: var(--fg-on-dark); font-weight: 550; }
.announce-pill:hover { border-color: var(--fg-on-dark-fnt); }

/* Event-type ticker: a slim band that scrolls; stops under reduced motion. */
.section--ticker { padding-block: 0; }
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; width: max-content; padding-block: 1.125rem;
  animation: ticker 40s linear infinite;
}
.ticker__track span {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-on-dark-mut); white-space: nowrap; padding-inline: 1.5rem;
  display: inline-flex; align-items: center; gap: 1.5rem;
}
.ticker__track span::after { content: '◆'; font-size: .5rem; color: var(--fg-on-dark-fnt); margin-left: 1.5rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

.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;
}

.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .g-5 { grid-template-columns: minmax(0, 1fr); } }
.card--key { border-color: var(--fg-on-dark-fnt); }
.g-5 > .card, .g-3 > a.card { display: flex; flex-direction: column; }
.g-5 > .card .tlink { margin-top: auto; padding-top: 1rem; }

.table-scroll { overflow-x: auto; }
.table-scroll .compare { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; }

.shots-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 820px) { .shots-b { grid-template-columns: minmax(0, 1fr); } }

/* Live today / roadmap columns. */
.lr { border-top-width: 2px; }
.lr--live { border-top-color: var(--safe-lift); }
.lr--road { border-top-color: var(--hold-lift); }
.lr--live .eyebrow { color: var(--safe-lift); }
.lr--road .eyebrow { color: var(--hold-lift); }
.lr__road { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.lr__road li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .625rem; }
.lr__road li::before { content: '→'; grid-row: span 2; font-family: var(--mono); color: var(--hold-lift); }
.lr__road b { font-weight: 550; font-size: .9375rem; }
.lr__road span { font-size: .875rem; color: var(--fg-on-dark-mut); margin-top: .125rem; }

/* FAQ accordion. */
.faq { border-top: 1px solid var(--line-dark-str); }
.faq details { border-bottom: 1px solid var(--line-dark-str); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding-block: 1.125rem; font-size: 1.0625rem; font-weight: 550; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none; font-family: var(--mono); font-size: 1.25rem; color: var(--fg-on-dark-fnt);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.25rem; max-width: 46rem; color: var(--fg-on-dark-mut); }

/* --- indexC — Stagent AI concept homepage ----------------------------- */
.hero-home__art--stagent { background-image: url('../resources/website-bg-stagent.webp'); }
.stagent-dot { background: var(--ft-stagent-lift); }
.feature-c__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.feature-c__top .feature-c__n { margin-bottom: 0; }
/* Which agent owns the job. */
.job-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1875rem .5rem .1875rem .1875rem; border-radius: 999px;
  font-family: var(--font-brand); font-weight: 700; font-size: .8125rem; line-height: 1;
  color: var(--fg-on-dark); border: 1px solid var(--line-dark-str); background: rgba(255, 255, 255, .03);
}
.job-tag img { width: 20px; height: 20px; display: block; }
.job-tag--engage  { border-color: rgba(var(--ag-engage-rgb), .45); }
.job-tag--answer  { border-color: rgba(var(--ag-answer-rgb), .45); }
.job-tag--protect { border-color: rgba(var(--ag-protect-rgb), .45); }
.job-tag--report  { padding-left: .5rem; }
.feature-c__n {
  display: block; margin-bottom: .75rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ft-stagent-lift);
}
.impact-c .list li { font-size: .9375rem; }

/* indexC: agent cards split into "what it does" / "with Stagent AI". */
.agent-duo { display: flex; flex-direction: column; }
.agent-duo__row { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--line-dark-str); }
.agent-duo__row .card__body { margin-top: .375rem; }
.agent-duo__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.agent-duo__row--stagent .agent-duo__label { color: var(--ft-stagent-lift); }
.agent-duo .tlink { margin-top: auto; padding-top: 1.25rem; }
.compare--3 td:nth-child(2) { color: var(--fg-on-dark-mut); }
.compare--3 td:first-child { color: var(--fg-on-dark); font-weight: 550; }

/* indexC: agent bands — Stagent AI feeding each agent. A signal travels down
   the beam from the Stagent AI mark into the agent, the agent's outline pulses
   as it arrives, and the chip beside the beam cycles through what was sent
   (3 items, 3s each). Reduced motion: still beam, first chip. */
.agent-link { display: flex; flex-direction: column; align-items: center; padding-block: 1rem 2rem; }
.agent-link__source {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem .375rem .375rem; border-radius: 999px;
  border: 1px solid rgba(255, 95, 117, .35); background: rgba(255, 95, 117, .06);
  font-family: var(--font-brand); font-weight: 700; font-size: .9375rem; color: var(--fg-on-dark);
}
.agent-link__source img { width: 28px; height: 28px; display: block; }
.agent-link__beam {
  position: relative; width: 2px; height: clamp(64px, 8vw, 96px); margin-block: .5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 95, 117, .5), rgba(var(--ag-rgb), .6));
}
.agent-link__beam i {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 999px;
  background: var(--fg-on-dark); box-shadow: 0 0 10px 2px rgba(var(--ag-rgb), .9);
  opacity: 0; animation: agent-beam 1.8s linear infinite;
}
.agent-link__beam i:nth-child(2) { animation-delay: .6s; }
.agent-link__beam i:nth-child(3) { animation-delay: 1.2s; }
@keyframes agent-beam {
  0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; }
}
.agent-link__chips { display: grid; height: 0; overflow: visible; position: relative; top: calc(-1 * clamp(64px, 8vw, 96px) / 2 - 1.5rem); left: clamp(5rem, 9vw, 7.5rem); }
.agent-link__chip {
  grid-area: 1 / 1; white-space: nowrap; justify-self: start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  padding: .3125rem .625rem; border-radius: var(--r-sm);
  color: var(--fg-on-dark); background: rgba(13, 15, 22, .9);
  border: 1px solid rgba(var(--ag-rgb), .45);
  opacity: 0; animation: agent-chip 9s linear infinite;
}
.agent-link__step-2 { animation-delay: 3s; }
.agent-link__step-3 { animation-delay: 6s; }
@keyframes agent-chip {
  0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; }
  29% { opacity: 1; transform: none; } 33% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; }
}
.agent-link .agent-link__mark { --mark: clamp(150px, 17vw, 220px); animation: agent-pulse 1.8s ease-out infinite; }
@keyframes agent-pulse {
  0%   { box-shadow: 0 0 0 6px rgba(var(--ag-rgb), .07), 0 0 48px -6px rgba(var(--ag-rgb), .55), inset 0 0 24px rgba(var(--ag-rgb), .12); }
  45%  { box-shadow: 0 0 0 14px rgba(var(--ag-rgb), .0), 0 0 72px 0 rgba(var(--ag-rgb), .75), inset 0 0 30px rgba(var(--ag-rgb), .2); }
  100% { box-shadow: 0 0 0 6px rgba(var(--ag-rgb), .07), 0 0 48px -6px rgba(var(--ag-rgb), .55), inset 0 0 24px rgba(var(--ag-rgb), .12); }
}
.agent-link .agent-stage__label { margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.agent-link .agent-stage__name { font-size: clamp(2.5rem, 5vw, 3.75rem); }
@media (max-width: 640px) { .agent-link__chips { left: 0; top: calc(-1 * clamp(64px, 8vw, 96px) - .5rem); } }
@media (prefers-reduced-motion: reduce) {
  .agent-link__beam i, .agent-link__chip, .agent-link .agent-link__mark { animation: none !important; }
  .agent-link__beam i:first-child { opacity: 1; top: 50%; }
  .agent-link__step-1 { opacity: 1; }
}

.agent-job .h1 { margin-top: .5rem; }
.agent-job__block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.agent-job__block .body, .agent-job__block .list { margin-top: .625rem; }
.agent-job__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.agent-job__block--stagent .agent-job__label { color: var(--ft-stagent-lift); }
.agent-job__block--impact .agent-job__label { color: var(--ag); }
.agent-job__impact {
  margin-top: .625rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.45;
  font-weight: 500; letter-spacing: -.01em; color: var(--fg-on-dark);
}

/* --- Homepage hero demo ---------------------------------------------
   Two events, same questions: one without AI, one on ReactLive. A single 14s
   loop — rows arrive one by one on both sides, the ReactLive side then resolves
   each row, and both totals land at the end. Everything is CSS; reduced motion
   freezes it on the finished state. */
.hero-live { overflow: clip; }
.hero-demo__panel {
  border: 1px solid var(--line-dark-str); border-radius: var(--r-lg);
  background: #0c0d15; box-shadow: var(--sh-dark); overflow: hidden;
}
.hero-demo__bar {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .875rem; border-bottom: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .02);
}
.hero-demo__title { font-size: 12.5px; font-weight: 550; }
.hero-demo__clock { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--fg-on-dark-fnt); }
.hero-demo__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-demo__col { padding: .875rem; display: flex; flex-direction: column; }
.hero-demo__col + .hero-demo__col { border-left: 1px solid var(--line-dark); }
.hero-demo__col--new { background: rgba(255, 255, 255, .02); }
.hero-demo__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt); margin-bottom: .625rem;
}
.hero-demo__label--new { color: var(--fg-on-dark); }
.hero-demo__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.hd-row {
  position: relative; display: grid;
  padding: .4375rem .5rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark);
  font-size: 11.5px; line-height: 1.35; min-height: 2.6em;
  opacity: 0; animation: hd-in 14s linear infinite;
}
.hd-q, .hd-a { grid-area: 1 / 1; display: flex; align-items: center; gap: .375rem; }
.hd-q { color: var(--fg-on-dark-mut); }
.hd-q--more { color: var(--fg-on-dark-fnt); font-family: var(--mono); font-size: 10.5px; }
.hd-q--fade { animation: hd-q-out 14s linear infinite; }
.hd-a { color: var(--fg-on-dark); opacity: 0; animation: hd-a-in 14s linear infinite; }
.hero-demo__foot {
  margin-top: auto; padding-top: .75rem;
  font-size: 11.5px; color: var(--fg-on-dark-fnt);
  opacity: 0; animation: hd-in 14s linear infinite;
}
.hero-demo__foot b { color: var(--live-lift); font-weight: 600; }
.hero-demo__foot--new b { color: var(--safe-lift); }
/* Row 1 lands at 1s, then one per second; each side's total at 8s. */
.hd-d1 { animation-delay: 1s; } .hd-d2 { animation-delay: 2s; } .hd-d3 { animation-delay: 3s; }
.hd-d4 { animation-delay: 4s; } .hd-d5 { animation-delay: 5s; } .hd-d6 { animation-delay: 8s; }
/* The ReactLive side resolves each row 1.6s after it arrives. */
.hd-q--fade, .hd-a { animation-delay: inherit; }
.hd-a1 { animation-delay: 2.6s; } .hd-a2 { animation-delay: 3.6s; } .hd-a3 { animation-delay: 4.6s; }
.hd-a4 { animation-delay: 5.6s; } .hd-a5 { animation-delay: 6.6s; }
.hd-row.hd-d1 .hd-q--fade { animation-delay: 2.6s; } .hd-row.hd-d2 .hd-q--fade { animation-delay: 3.6s; }
.hd-row.hd-d3 .hd-q--fade { animation-delay: 4.6s; } .hd-row.hd-d4 .hd-q--fade { animation-delay: 5.6s; }
.hd-row.hd-d5 .hd-q--fade { animation-delay: 6.6s; }
@keyframes hd-in {
  0% { opacity: 0; transform: translateY(6px); }
  3% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes hd-q-out { 0% { opacity: 1; } 3%, 100% { opacity: 0; } }
@keyframes hd-a-in {
  0% { opacity: 0; transform: translateY(4px); }
  3% { opacity: 1; transform: none; }
  81% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@media (max-width: 560px) {
  .hero-demo__cols { grid-template-columns: minmax(0, 1fr); }
  .hero-demo__col + .hero-demo__col { border-left: 0; border-top: 1px solid var(--line-dark); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-row, .hero-demo__foot, .hd-a { animation: none !important; opacity: 1 !important; }
  .hd-q--fade { animation: none !important; opacity: 0 !important; }
}

/* A hero that carries the demo panel instead of the banner artwork. */
[class*='scope-'] .page-hero--demo::after { display: none; }

/* --- Homepage Stream Agent demo -------------------------------------
   One 13s loop: the stage is heard, it becomes a question-and-answer pair,
   then an audience question is answered from that same moment. Reduced motion
   freezes it on the finished state. */
.sa-demo__panel {
  border: 1px solid var(--line-dark-str); border-radius: var(--r-lg);
  background: #0e0a0c; box-shadow: var(--sh-dark); overflow: hidden;
}
.sa-demo__bar {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .875rem; border-bottom: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .02);
}
.sa-demo__title { font-size: 12.5px; font-weight: 550; }
.sa-demo__clock { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--fg-on-dark-fnt); }
.sa-lane { padding: .875rem; display: grid; gap: .625rem; }
.sa-lane--audience { border-top: 1px solid var(--line-dark); background: rgba(255, 255, 255, .02); }
.sa-lane__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
/* Live stage audio: bars keep moving for the whole loop. */
.sa-wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.sa-wave i {
  flex: 1; border-radius: 1px; background: rgba(255, 95, 117, .55);
  animation: sa-wave 1.1s ease-in-out infinite alternate;
}
.sa-wave i:nth-child(3n)   { animation-delay: .12s; }
.sa-wave i:nth-child(3n+1) { animation-delay: .34s; }
.sa-wave i:nth-child(4n)   { animation-delay: .56s; }
@keyframes sa-wave { from { height: 18%; } to { height: 92%; } }

.sa-said, .sa-ask { font-size: 12.5px; line-height: 1.4; color: var(--fg-on-dark); }
.sa-ask { padding: .4375rem .5rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); }
.sa-card {
  padding: .5rem .625rem; border-radius: var(--r-sm);
  border: 1px solid rgba(255, 95, 117, .35); background: rgba(255, 95, 117, .06);
}
.sa-card--answer { border-color: rgba(var(--ag-answer-rgb), .4); background: rgba(var(--ag-answer-rgb), .07); }
.sa-card__label {
  display: flex; align-items: center; gap: .375rem;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-on-dark-mut);
}
.sa-qa { font-size: 12px; line-height: 1.45; margin-top: .3125rem; color: var(--fg-on-dark); }
.sa-qa b { font-family: var(--mono); font-size: 10.5px; color: var(--fg-on-dark-fnt); margin-right: .25rem; }
.sa-src { display: block; margin-top: .375rem; font-family: var(--mono); font-size: 10px; color: var(--fg-on-dark-fnt); }
/* The question travelling from the audience to the answer. */
.sa-flow { display: flex; justify-content: center; gap: .375rem; height: 10px; }
.sa-flow i { width: 5px; height: 5px; border-radius: 999px; background: var(--ag-answer-lift); opacity: .25; animation: sa-flow 1.2s linear infinite; }
.sa-flow i:nth-child(2) { animation-delay: .2s; }
.sa-flow i:nth-child(3) { animation-delay: .4s; }
@keyframes sa-flow { 0%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(3px); } }

.sa-s1, .sa-s2, .sa-s3, .sa-s4, .sa-s5 { opacity: 0; animation: sa-in 13s linear infinite; }
.sa-s1 { animation-delay: .6s; }
.sa-s2 { animation-delay: 2.6s; }
.sa-s3 { animation-delay: 5s; }
.sa-s4 { animation-delay: 6.4s; }
.sa-s5 { animation-delay: 7.4s; }
@keyframes sa-in {
  0% { opacity: 0; transform: translateY(6px); }
  4% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-s1, .sa-s2, .sa-s3, .sa-s4, .sa-s5, .sa-wave i, .sa-flow i { animation: none !important; opacity: 1 !important; }
  .sa-wave i { height: 55%; }
}

/* Homepage "Find your event": one card per event type — an icon for the
   format, who it is for, the situation, and two things that change. */
.event-grid {
  display: grid; gap: clamp(.875rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.event-grid > * { grid-column: span 2; }
.event-grid > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1000px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid > *, .event-grid > :nth-child(n+4) { grid-column: span 1; }
  .event-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .event-grid { grid-template-columns: minmax(0, 1fr); }
}
.event-card { display: flex; flex-direction: column; gap: .5rem; }
.event-card .card__body { flex: 1; }
.event-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .5rem;
  border-radius: var(--r); color: var(--fg-on-dark);
  background:
    linear-gradient(135deg, rgba(var(--ag-engage-rgb), .16), rgba(var(--ag-answer-rgb), .12) 55%, rgba(var(--ag-protect-rgb), .16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .2s var(--ease);
}
.event-card:hover .event-card__icon { transform: translateY(-2px); }
.event-card__who {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.event-card__outs {
  list-style: none; margin: .5rem 0 0; padding: .75rem 0 0; display: grid; gap: .5rem;
  border-top: 1px solid var(--line-dark-str);
}
.event-card__outs li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem;
  font-size: .875rem; line-height: 1.4; color: var(--fg-on-dark);
}
.event-card__outs li::before {
  content: ''; width: 14px; height: 14px; margin-top: .15em; border-radius: 999px;
  background: var(--safe-dark-sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2 6 9.5l4.4-4.8' fill='none' stroke='%233fcf7f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.event-card .tlink { margin-top: auto; padding-top: 1rem; }

/* --- 12  Motion + responsive ------------------------------------------ */

/* Entrance animation is opt-in on JS being present: the <head> inline script
   sets .js on <html>. Without it — JS disabled, script blocked, a renderer that
   does not execute JS — .reveal has no hidden state and all content is visible.
   Never write a bare `.reveal { opacity: 0 }`; it makes the page depend on a
   script for its content to exist. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal[data-delay='1'].is-in { transition-delay: .08s; }
.js .reveal[data-delay='2'].is-in { transition-delay: .16s; }
.js .reveal[data-delay='3'].is-in { transition-delay: .24s; }

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .nav, .nav-actions .signin { display: none; }
  .nav-toggle { display: block; }
  .nav-actions { margin-left: auto; }
  .g-split, .g-split--text, .feature-block { grid-template-columns: minmax(0, 1fr); }
  .feature-block--flip > *:first-child { order: 0; }
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .console__body > * + * { border-left: 0; border-top: 1px solid var(--c-line); }
  .triad, .modes, .plans, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .form--wide { grid-template-columns: minmax(0, 1fr); }
}

/* The Console title bar is a single flex row with a non-shrinking metric group.
   On a phone that group has to drop to its own line, or it is clipped by the
   frame's overflow and the participant/question counts disappear. */
@media (max-width: 520px) {
  .console__bar { flex-wrap: wrap; }
  .console__meta { margin-left: 0; width: 100%; gap: .875rem; }
}

/* --- Comparison pages — alternatives/ ------------------------------
   Only what the six "vs" pages need beyond the shared components. Every
   one of them is on-dark, so there are no light-theme variants here. */
.alt-hero__title { font-size: clamp(2.4rem, 4.8vw, 3.9rem); }
.alt-micro {
  margin-top: 1.5rem; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-on-dark-fnt);
}

/* Hero demo: the Console frame, one drafted answer in Answer's colour. */
.alt-demo { margin: 0; }
.alt-demo__body { grid-template-columns: minmax(0, 1fr); }
.alt-demo__q { display: flex; gap: .75rem; align-items: flex-start; }
.alt-av {
  flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--fg-on-dark-mut);
  background: var(--ink-3); border: 1px solid var(--line-dark-str);
}
.alt-demo__who { font-size: 11.5px; color: var(--fg-on-dark-fnt); margin-bottom: .25rem; }
.alt-demo .suggest { border-color: rgba(var(--ag-answer-rgb), .45); background: rgba(var(--ag-answer-rgb), .08); padding: .75rem; }
.alt-demo .suggest__label { color: var(--ag-answer-lift); }
.alt-demo__head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.alt-demo__state {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.alt-demo__src { margin-top: .625rem; font-family: var(--mono); font-size: 11px; color: var(--fg-on-dark-fnt); }
.alt-demo .switch { justify-self: start; }

/* Breadcrumb at the top of each comparison hero — says where you are. */
.alt-crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.75rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.alt-crumb li + li::before { content: '/'; margin-right: .5rem; color: var(--fg-on-dark-fnt); }
.alt-crumb a {
  display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem;
  border: 1px solid var(--line-dark-str); border-radius: 999px; color: var(--fg-on-dark-mut);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.alt-crumb a::before { content: '←'; font-family: var(--font); }
.alt-crumb a:hover { color: var(--fg-on-dark); border-color: var(--fg-on-dark-fnt); }
.alt-crumb [aria-current] { color: var(--fg-on-dark); }
.mega__item[aria-current] { background: rgba(255, 255, 255, .06); }

/* Comparison cards (use-case pages and the /alternatives/ hub). */
.alt-card { transition: border-color .18s var(--ease), background .18s var(--ease); }
.on-dark .alt-card:hover { border-color: var(--fg-on-dark-fnt); background: var(--ink-3); }
.alt-card .tlink { margin-top: auto; padding-top: 1.25rem; }

/* Grouped questions in the demo card: what several people asked, recognised as
   one question before the moderator saw it, then answered once. Answer owns
   duplicate recognition, so the whole group wears Answer's colour. */
.alt-group__head {
  display: flex; align-items: center; gap: .4375rem; margin-bottom: .5rem;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-answer-lift);
}
.alt-group__head::before {
  content: ''; width: 11px; height: 11px; flex: none; border-radius: 2px;
  border: 1px solid currentColor; box-shadow: 3px -3px 0 -1px var(--c-surface), 3px -3px 0 currentColor;
}
.alt-group__more { list-style: none; margin: 0; padding: .5rem 0 0 .75rem; display: grid; gap: .4375rem; }
.alt-group__more li {
  position: relative; padding-left: .875rem;
  font-size: 12px; line-height: 1.4; color: var(--fg-on-dark-fnt);
}
/* One continuous spine down the group, ticked at each question. */
.alt-group__more li::before {
  content: ''; position: absolute; left: 0; top: -.4375rem; bottom: -.4375rem;
  border-left: 1px solid rgba(var(--ag-answer-rgb), .35);
}
.alt-group__more li:last-child::before { bottom: 50%; }
.alt-group__more li::after {
  content: ''; position: absolute; left: 0; top: 50%; width: .5rem;
  border-top: 1px solid rgba(var(--ag-answer-rgb), .35);
}
.alt-group__who { color: var(--fg-on-dark-mut); margin-right: .375rem; }
.alt-group__rest { font-style: italic; }
.alt-demo__sent {
  margin-top: .625rem; padding-top: .5rem; border-top: 1px solid rgba(var(--ag-answer-rgb), .25);
  font-size: 11.5px; line-height: 1.45; color: var(--ag-answer-lift);
}

/* Spacing between stacked blocks inside one section. */
.sec-head .lede + .body { margin-top: 1.25rem; }
.container > .alt-block:not(:first-child) { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.card--key .eyebrow { color: var(--fg-on-dark); }

/* Specialist cards — one agent per panel, in that agent's colour. */
.alt-agent { border-top-width: 2px; }
.alt-agent--answer  { border-top-color: var(--ag-answer-lift); }
.alt-agent--protect { border-top-color: var(--ag-protect-lift); }
.alt-agent--engage  { border-top-color: var(--ag-engage-lift); }
.alt-agent--answer .eyebrow  { color: var(--ag-answer-lift); }
.alt-agent--protect .eyebrow { color: var(--ag-protect-lift); }
.alt-agent--engage .eyebrow  { color: var(--ag-engage-lift); }
.alt-vs {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-dark-str);
  font-size: .875rem; line-height: 1.55; color: var(--fg-on-dark-fnt);
}
.alt-vs b { color: var(--fg-on-dark); font-weight: 550; }

/* Callout under a grid: a statement, or a quote with the mode switch. */
.alt-callout .body { max-width: none; }
.alt-callout--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.alt-callout__quote { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 550; letter-spacing: -.015em; color: var(--fg-on-dark); }

/* Comparison table: legend, marks, group rows, a labelled mobile stack. */
.alt-legend {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.25rem;
  font-size: .875rem; color: var(--fg-on-dark-mut);
}
.alt-legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.alt-legend .mk { margin-right: 0; }
.mk {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  margin-right: .5rem; vertical-align: -4px; flex: none;
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
}
.mk--yes  { background: var(--safe-dark-sf); color: var(--safe-lift); }
.mk--road { background: var(--hold-dark-sf); color: var(--hold-lift); }
.mk--no   { color: var(--fg-on-dark-fnt); box-shadow: inset 0 0 0 1px var(--line-dark-str); }
.compare--alt th, .compare--alt td { vertical-align: top; }
.compare--alt tbody th { width: 36%; font-weight: 550; color: var(--fg-on-dark); }
.compare--alt td { color: var(--fg-on-dark-mut); }
.compare--alt td:last-child { color: var(--fg-on-dark); font-weight: 500; }
.compare--alt-4 tbody th { width: 28%; }
.table-scroll .compare--alt-4 { min-width: 52rem; }
.compare--alt .compare__group th {
  width: auto; padding-block: .625rem; background: var(--ink-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-on-dark-fnt);
}
.alt-fine { margin-top: 1rem; max-width: var(--maxw-text); font-size: .8125rem; line-height: 1.55; color: var(--fg-on-dark-fnt); }

/* Pricing reference lists. */
.alt-plist > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .625rem; border-bottom: 1px solid var(--line-dark);
}
.alt-plist > div:last-child { border-bottom: 0; }
.alt-plist dt { font-size: .9375rem; color: var(--fg-on-dark-mut); }
.alt-plist dd { margin: 0; text-align: right; font-size: .9375rem; font-weight: 550; color: var(--fg-on-dark); }

@media (max-width: 640px) {
  .table-scroll .compare--alt, .table-scroll .compare--alt-4 { min-width: 0; }
  .compare--alt tbody th { width: auto; padding-bottom: 0; }
  .compare--alt td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .25rem;
    font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-on-dark-fnt);
  }
  .alt-plist > div { flex-direction: column; gap: .125rem; }
  .alt-plist dd { text-align: left; }
}

/* Below ~420px the brand, the CTA and the menu button no longer fit the bar at
   full size. Tighten the chrome and swap to the short CTA label rather than
   letting the header push the page into horizontal scroll. */
.nav-cta__short { display: none; }
@media (max-width: 420px) {
  :root { --header-h: 62px; }
  .site-header__inner { gap: .75rem; padding-inline: 1rem; }
  .nav-actions { gap: .375rem; margin-left: auto; }
  .nav-cta { font-size: 12px; padding: .4375rem .75rem; }
  .nav-cta__long { display: none; }
  .nav-cta__short { display: inline; }
  .mobile-nav { padding-inline: 1rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .g-2 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .surface-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'a' 'b' 'hub' 'c' 'd'; }
  .btn-row .btn { width: 100%; }
  .mode-config__row { flex-wrap: wrap; }
  .mode-config__note { margin-left: 0; width: 100%; text-align: left; }
  .compare thead { display: none; }
  .compare tr { display: grid; border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare td { border-bottom: 0; padding-block: .5rem; }
  .compare td:first-child { padding-bottom: 0; font-size: .8125rem; }
  .compare td:last-child { padding-top: .25rem; }
  .on-dark .compare tr { border-bottom-color: var(--line-dark); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
  .on-dark { background: #fff !important; color: #000 !important; }
}