/* ==========================================================================
   BuzzBaboon design system, 12 September 2026

   The expensive feeling comes from restraint. Quiet grounds (near black,
   deep navy, warm ivory, stone), one loud thing at a time, and the Baboon is
   the colour. Two typefaces. Cinematic spacing. Motion you barely notice.

   Rules this file keeps from the 11 September lock, all MEASURED:
     Buzz Gold is never text on light (1.99:1). Gold is a fill with navy on it.
     Signal Blue is the on-dark blue; --color-signal-ink is the on-light blue.
     One :root. Every colour below the tokens is a var(). Zero raw hexes.
     No transform on the hero mascot container (it breaks the multiply blend).
   ========================================================================== */

:root {
  /* The six brand colours, exactly as specified in BRAND.md */
  --color-navy:            #0D203A;
  --color-gold:            #E3A41F;
  --color-signal:          #7CAEE7;   /* on dark only */
  --color-coral:           #DA4E4A;   /* sparing */
  --color-bone:            #F7F4EE;   /* the light ground */
  --color-body:            #3E4B61;   /* graphite body copy */

  /* Quiet grounds, added 12 September for the premium redesign */
  --color-void:            #070B12;   /* near black. The product surface */
  --color-deep:            #0B1220;   /* the second dark surface */
  --color-navy-mid:        #13233D;   /* raised dark surface */
  --color-navy-deep:       #081727;
  --color-cobalt:          #0F3466;   /* the signal environment. cloud 10.1, gold 5.6, signal 5.3. Coral is NEVER text here (2.8) */
  --color-slate:           #101722;   /* the real map scene, distinct from void. cloud 14.8, signal 7.8 */
  --color-ivory:           #FBF9F4;   /* the lighter warm white surface */
  --color-stone:           #ECE7DD;   /* the secondary light surface */
  --color-white:           #FFFFFF;
  --color-ink:             #0D203A;   /* primary text on light */

  /* Derived, each solving a measured failure */
  --color-signal-ink:      #2A6099;   /* on-light blue, 5.92 on bone */
  --color-signal-ink-deep: #1F4A78;
  --color-gold-ink:        #845F12;   /* gold as text on light, 5.27 */
  --color-gold-hover:      #C98C12;
  --color-gold-soft:       #EFB63C;
  --color-coral-ink:       #C24542;   /* coral as text on light, 4.53 */
  --color-coral-lift:      #DD5E5A;   /* coral as text on navy, 4.53 */
  --color-muted:           #616D80;   /* 4.77 on bone */
  --color-muted-dark:      #9EA6B0;   /* metadata on dark, 6.64 */
  --color-silver:          #C3C7CE;   /* body on dark, 9.64 */
  --color-cloud:           #E6E9EE;   /* headings on dark */

  /* Washes and lines */
  --color-signal-wash:     #E9F1FA;
  --color-gold-wash:       #FBF2DC;
  --color-line:            #E3DED4;
  --color-light-border:    #E3DED4;
  --color-line-dark:       rgba(199, 207, 219, 0.12);
  --color-line-dark-2:     rgba(199, 207, 219, 0.24);
  --color-surface-dark:    rgba(255, 255, 255, 0.045);
  --color-surface-dark-2:  rgba(255, 255, 255, 0.08);
  --color-surface-light:   rgba(13, 32, 58, 0.04);

  /* Semantic, restrained */
  --color-positive:        #2E7D6B;
  --color-risk:            #C24542;
  --color-neutral:         #9EA6B0;
  --color-warn:            #845F12;
  --color-warn-line:       #E3A41F;

  /* Glows and gradients, used sparingly */
  --glow-gold:             rgba(227, 164, 31, 0.55);
  --glow-gold-soft:        rgba(227, 164, 31, 0.18);
  --glow-signal:           rgba(124, 174, 231, 0.22);
  --shade:                 rgba(13, 32, 58, 0.10);
  --shade-2:               rgba(13, 32, 58, 0.30);
  --ink-veil:              rgba(7, 11, 18, 0.72);
  --grad-cta:  linear-gradient(180deg, #EFB63C 0%, #E3A41F 62%);
  --grad-cta-hover: linear-gradient(180deg, #E3A41F 0%, #C98C12 70%);
  --grad-void: linear-gradient(180deg, #0B1220 0%, #070B12 100%);

  /* Type: two families, locked */
  --display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm: cinematic */
  --shell: 1240px;
  --shell-narrow: 760px;
  --gutter: clamp(20px, 5vw, 72px);
  --band: clamp(88px, 12vh, 168px);
  --band-tight: clamp(56px, 8vh, 104px);
  --radius: 16px;
  --radius-sm: 11px;
  --radius-xs: 7px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(13, 32, 58, 0.05), 0 18px 44px -28px rgba(13, 32, 58, 0.30);
  --shadow-2: 0 2px 6px rgba(13, 32, 58, 0.06), 0 34px 70px -34px rgba(13, 32, 58, 0.38);
  --shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 70px -40px rgba(0, 0, 0, 0.8);

  /* Motion: slow, smooth, invisible */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --mid: 340ms;
  --slow: 680ms;
  --cine: 1200ms;

  --nav-h: 72px;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body[data-theme="dark"] { background: var(--color-void); color: var(--color-silver); }
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-signal-ink); outline-offset: 3px; border-radius: 3px; }
.is-dark :focus-visible, .band--dark :focus-visible, .band--void :focus-visible, .band--graphite :focus-visible,
.band--blue :focus-visible, .foot :focus-visible { outline-color: var(--color-signal); }
::selection { background: var(--color-gold); color: var(--color-navy); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-ink); color: var(--color-white); padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Layout -------------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: var(--shell-narrow); }
.shell--read { max-width: 820px; }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: var(--band-tight); }
.band--white    { background: var(--color-ivory); color: var(--color-ink); }
.band--wash     { background: var(--color-bone); color: var(--color-ink); }
.band--wash-flat{ background: var(--color-stone); color: var(--color-ink); }
.band--wash-flat .muted, .band--wash-flat .fine, .opp__you .muted { color: var(--color-body); } /* muted grey is 4.25 on stone; body is 7.15 */
.band--dark     { background: var(--color-deep); color: var(--color-silver); }
.band--void     { background: var(--grad-void); color: var(--color-silver); }
.band--graphite { background: var(--color-navy-mid); color: var(--color-silver); }
.band--blue     { background: var(--color-navy); color: var(--color-white); }
.is-dark { color: var(--color-silver); }

.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4,
.band--void h1, .band--void h2, .band--void h3, .band--void h4,
.band--graphite h1, .band--graphite h2, .band--graphite h3, .band--graphite h4,
.is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4 { color: var(--color-cloud); }
.band--blue h1, .band--blue h2, .band--blue h3, .band--blue h4 { color: var(--color-white); }

/* Ambient light: the one place depth is allowed to be visible */
.band--dark::before, .band--void::before, .band--blue::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -10%, var(--glow-signal), transparent 62%),
    radial-gradient(700px 440px at -5% 110%, var(--glow-gold-soft), transparent 60%);
}
.band--dark > .shell, .band--void > .shell, .band--blue > .shell { position: relative; z-index: 1; }

.rule-top { border-top: 1px solid var(--color-line); position: relative; }
.rule-top::after { content: ""; position: absolute; top: -1px; left: 0; width: 54px; height: 2px; border-radius: 1px; background: var(--color-gold); }
.band--dark .rule-top, .band--void .rule-top, .band--graphite .rule-top, .is-dark .rule-top { border-top-color: var(--color-line-dark); }
.band--blue .rule-top { border-top-color: rgba(255, 255, 255, 0.22); }

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

.display { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.d1 { font-size: clamp(2.5rem, 6vw, 5.1rem); letter-spacing: -0.035em; }
.d2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.d3 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.12; letter-spacing: -0.024em; }
.d4 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.22; letter-spacing: -0.02em; }
.d0 { font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -0.045em; line-height: 0.96; }

.lede { font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.58; color: var(--color-body); max-width: 46ch; text-wrap: pretty; }
.band--dark .lede, .band--void .lede, .band--graphite .lede, .is-dark .lede { color: var(--color-silver); }
.band--blue .lede { color: var(--color-white); }

.prose { max-width: 62ch; color: var(--color-body); text-wrap: pretty; }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--color-ink); font-weight: 600; }
.band--dark .prose, .band--void .prose, .band--graphite .prose, .is-dark .prose { color: var(--color-silver); }
.band--dark .prose strong, .band--void .prose strong, .band--graphite .prose strong, .is-dark .prose strong { color: var(--color-cloud); }
.band--blue .prose, .band--blue .prose strong { color: var(--color-white); }

/* The eyebrow. Tiny, tracked, the first thing read in every frame. */
.label {
  font-family: var(--sans); font-size: 0.688rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-signal-ink); display: inline-block;
}
.band--dark .label, .band--void .label, .band--graphite .label, .is-dark .label, .foot .label { color: var(--color-signal); }
.band--blue .label { color: var(--color-white); }
.label--accent { color: var(--color-signal-ink) !important; }
.band--dark .label--accent, .band--void .label--accent, .band--graphite .label--accent, .is-dark .label--accent { color: var(--color-signal) !important; }
.label--cyan { color: var(--color-signal) !important; }
.label--gold { color: var(--color-gold) !important; }
.hero--light .label--cyan, .band--white .label--cyan, .band--wash .label--cyan { color: var(--color-signal-ink) !important; }
.label--muted { color: var(--color-muted) !important; }
.band--dark .label--muted, .band--void .label--muted, .band--graphite .label--muted, .is-dark .label--muted { color: var(--color-silver) !important; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--color-muted); }
.band--dark .muted, .band--void .muted, .band--graphite .muted, .is-dark .muted { color: var(--color-muted-dark); }
.band--blue .muted { color: var(--color-white); }

/* Statement type: a phrase as an object */
.statement { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(1.7rem, 3.6vw, 3rem); max-width: 22ch; text-wrap: balance; }

.sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: clamp(16px, 3vw, 44px); padding-top: 22px; margin-bottom: clamp(34px, 5vh, 66px); }
.sec-head__num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--color-signal-ink); padding-top: 0.5em; }
.band--dark .sec-head__num, .band--void .sec-head__num, .band--graphite .sec-head__num, .is-dark .sec-head__num { color: var(--color-signal); }
.band--blue .sec-head__num { color: rgba(255, 255, 255, 0.85); }

/* --- Buttons: tactile, restrained ---------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-align: center;
  cursor: pointer; text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--mid) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px) scale(0.99); }
.btn__arw { transition: transform var(--mid) var(--ease); }
.btn:hover .btn__arw { transform: translateX(4px); }
.btn--lead { padding: 18px 30px; font-size: 0.938rem; }
.btn--primary {
  background: var(--grad-cta); color: var(--color-navy); border-color: var(--color-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 12px 28px -14px var(--glow-gold);
}
.btn--primary:hover { background: var(--grad-cta-hover); border-color: var(--color-gold-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 16px 34px -12px var(--glow-gold); }
.btn--white { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.btn--white:hover { background: var(--color-signal-wash); }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--secondary:hover { background: var(--color-white); border-color: var(--color-muted); }
.band--dark .btn--secondary, .band--void .btn--secondary, .band--graphite .btn--secondary, .is-dark .btn--secondary { color: var(--color-cloud); border-color: var(--color-line-dark-2); }
.band--dark .btn--secondary:hover, .band--void .btn--secondary:hover, .band--graphite .btn--secondary:hover, .is-dark .btn--secondary:hover { background: var(--color-surface-dark); border-color: var(--color-silver); }
.band--blue .btn--secondary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.55); }
.btn[disabled] { opacity: 0.5; cursor: default; box-shadow: none; }

.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.813rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-signal-ink); padding-bottom: 3px;
  border-bottom: 1px solid rgba(42, 96, 153, 0.30);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tlink:hover { color: var(--color-signal-ink-deep); border-color: var(--color-signal-ink-deep); }
.tlink__arw { transition: transform var(--mid) var(--ease); }
.tlink:hover .tlink__arw { transform: translateX(4px); }
.band--dark .tlink, .band--void .tlink, .band--graphite .tlink, .is-dark .tlink, .foot .tlink { color: var(--color-signal); border-bottom-color: rgba(124, 174, 231, 0.36); }
.band--dark .tlink:hover, .band--void .tlink:hover, .band--graphite .tlink:hover, .is-dark .tlink:hover, .foot .tlink:hover { color: var(--color-white); border-bottom-color: var(--color-signal); }
.band--blue .tlink { color: var(--color-white); border-bottom-color: rgba(255, 255, 255, 0.6); }
.band--wash .tlink, .band--wash-flat .tlink { color: var(--color-signal-ink-deep); }

/* Small actions */
.act {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 8px 15px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-body); cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.act:hover { border-color: var(--color-ink); color: var(--color-ink); }
.act.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.act--quiet { border-color: transparent; color: var(--color-muted); }
.act[disabled] { opacity: 0.55; cursor: default; }
.act[disabled]:hover { border-color: var(--color-line); color: var(--color-body); }
.band--dark .act, .band--void .act, .band--graphite .act, .is-dark .act { border-color: var(--color-line-dark-2); color: var(--color-silver); }
.band--dark .act:hover, .band--void .act:hover, .band--graphite .act:hover, .is-dark .act:hover { border-color: var(--color-cloud); color: var(--color-cloud); }
.band--dark .act--quiet, .band--void .act--quiet, .is-dark .act--quiet { border-color: transparent; }

/* --- Navigation: quiet, adaptive ---------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 249, 244, 0.86);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.nav.is-solid { border-bottom-color: var(--color-line); box-shadow: 0 10px 30px -26px var(--shade-2); }
.nav--dark, body[data-theme="dark"] .nav { background: rgba(7, 11, 18, 0.72); }
.nav--dark.is-solid, body[data-theme="dark"] .nav.is-solid { border-bottom-color: var(--color-line-dark); }
.nav__in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.nav__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav__mark { width: 28px; height: 28px; flex: none; }
.nav__word { font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--color-navy); white-space: nowrap; }
.nav__word b { font-weight: 700; }
.nav__word em { font-style: normal; color: var(--color-gold-ink); }
.nav--dark .nav__word, body[data-theme="dark"] .nav__word { color: var(--color-cloud); }
.nav--dark .nav__word em, body[data-theme="dark"] .nav__word em { color: var(--color-gold); }
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__links a { font-size: 0.813rem; font-weight: 500; letter-spacing: 0.01em; color: var(--color-body); transition: color var(--fast) var(--ease); }
.nav__links a:hover { color: var(--color-ink); }
.nav--dark .nav__links a, body[data-theme="dark"] .nav__links a { color: var(--color-silver); }
.nav--dark .nav__links a:hover, body[data-theme="dark"] .nav__links a:hover { color: var(--color-white); }
/* Pricing was briefly bolded on 16 September because it could not be found on
   the live site. The real cause was that the page did not exist yet, not that
   the link was too quiet, so the emphasis came off on 17 September at
   Maheshika's instruction: every nav item looks the same. */
.nav__alerts { position: relative; padding-left: 15px; }
.nav__alerts::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); }
.nav__cta {
  padding: 11px 20px; border: 1px solid var(--color-ink); border-radius: var(--radius-pill);
  font-size: 0.813rem; font-weight: 600; color: var(--color-ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav__cta:hover { background: var(--color-ink); color: var(--color-ivory); }
.nav--dark .nav__cta, body[data-theme="dark"] .nav__cta { border-color: var(--color-line-dark-2); color: var(--color-cloud); }
.nav--dark .nav__cta:hover, body[data-theme="dark"] .nav__cta:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.nav__burger { display: none; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 9px 14px; cursor: pointer; color: var(--color-ink); }
.nav--dark .nav__burger, body[data-theme="dark"] .nav__burger { border-color: var(--color-line-dark-2); color: var(--color-cloud); }
.nav__burger .label--muted { color: inherit !important; }

/* --- Hero: brutally simple ----------------------------------------------- */

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero--light { background: var(--color-bone); color: var(--color-body); }
.hero--light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 74% 48%, var(--glow-gold-soft), transparent 64%),
    radial-gradient(760px 520px at 4% 0%, rgba(42, 96, 153, 0.09), transparent 62%);
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  min-height: min(calc(100vh - var(--nav-h)), 880px); min-height: min(calc(100svh - var(--nav-h)), 880px);
  padding-block: clamp(40px, 6vh, 90px);
}
.hero--compact .hero__grid { min-height: 0; padding-block: clamp(36px, 6vh, 80px); }
.hero__copy { min-width: 0; }
.hero__logo { width: clamp(220px, 26vw, 360px); height: auto; margin-bottom: clamp(28px, 4vh, 48px); }
.hero h1 { color: var(--color-navy); margin: 0 0 22px; }
.hero--light h1 { color: var(--color-navy); }
.hero__lede { max-width: 40ch; margin-bottom: 30px; color: var(--color-body); }
.hero__micro { margin-top: 16px; font-size: 0.813rem; color: var(--color-muted); }
.hero__sig { margin-top: 8px; font-size: 0.688rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-signal-ink); }

/* The mascot. No transform on this container, ever. */
.hero__mascot {
  position: relative; min-width: 0; width: 112%; margin-left: -6%;
  top: 0; animation: mascot-float 7.5s var(--ease) infinite;
  filter: drop-shadow(0 30px 44px var(--shade));
}
.hero__mascot img, .hero__mascot video {
  display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(66% 78% at 52% 49%, black 44%, transparent 79%);
          mask-image: radial-gradient(66% 78% at 52% 49%, black 44%, transparent 79%);
}
.hero__mascot video { position: absolute; inset: 0; height: 100%; object-fit: contain; }
.hero__mascot--still { width: 100%; margin-left: 0; max-width: 420px; }
.hero__mascot--still img { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
@keyframes mascot-float { 0%, 100% { top: 0; } 50% { top: -7px; } }

/* The URL field: large, pill, the one object in the hero */
.scanbar { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; max-width: 580px; }
.scanbar__field {
  flex: 1 1 280px; display: flex; align-items: center;
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 0 8px 0 22px; box-shadow: var(--shadow-1);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.scanbar__field:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(227, 164, 31, 0.20), var(--shadow-1); }
.scanbar__field .label { color: var(--color-muted); padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--color-line); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 0.875rem; }
.scanbar input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--color-ink); font-size: 1.02rem; padding: 18px 0 18px 20px; }
.scanbar input::placeholder { color: var(--color-muted-dark); }
.scanbar input:focus { outline: none; }
.scanbar .btn { flex: none; }
.scanbar [data-checkerr] { flex: 1 1 100%; color: var(--color-coral-ink); font-weight: 500; font-size: 0.813rem; padding-left: 22px; }
.scanbar--inline .scanbar__field { padding-right: 6px; }
.scanbar--inline .btn { border-radius: var(--radius-pill); }
.band--dark .scanbar__field, .band--void .scanbar__field, .is-dark .scanbar__field { background: var(--color-navy-mid); border-color: var(--color-line-dark-2); box-shadow: none; }
.band--dark .scanbar input, .band--void .scanbar input, .is-dark .scanbar input { color: var(--color-cloud); }
.band--dark .scanbar [data-checkerr], .band--void .scanbar [data-checkerr], .is-dark .scanbar [data-checkerr] { color: var(--color-gold); }
.band--dark .scanbar__field .label, .band--void .scanbar__field .label, .is-dark .scanbar__field .label { color: var(--color-muted-dark); border-right-color: var(--color-line-dark-2); }
.band--blue .scanbar [data-checkerr] { color: var(--color-white); }
.scanbar--light .scanbar__field { background: var(--color-white); }

/* --- Tags, pills, badges ------------------------------------------------- */

.tag { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); color: var(--color-muted); border: 1px solid var(--color-line); white-space: nowrap; }
.tag--demo { color: var(--color-gold-ink); border-color: rgba(227, 164, 31, 0.45); background: rgba(227, 164, 31, 0.08); }
.band--dark .tag, .band--void .tag, .is-dark .tag { color: var(--color-muted-dark); border-color: var(--color-line-dark-2); }
.band--dark .tag--demo, .band--void .tag--demo, .is-dark .tag--demo { color: var(--color-gold); border-color: rgba(227, 164, 31, 0.5); background: rgba(227, 164, 31, 0.10); }

/* The priority label. Four states, every one explainable on hover. */
.pri { display: inline-flex; align-items: center; gap: 7px; font-size: 0.688rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.pri::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pri--act { background: var(--color-gold); color: var(--color-navy); }
.pri--investigate { background: var(--color-signal-wash); color: var(--color-signal-ink-deep); }
.pri--watch { background: var(--color-surface-light); color: var(--color-body); }
.pri--low { background: transparent; color: var(--color-muted); border: 1px solid var(--color-line); }
.band--dark .pri--investigate, .band--void .pri--investigate, .is-dark .pri--investigate { background: rgba(124, 174, 231, 0.14); color: var(--color-signal); }
.band--dark .pri--watch, .band--void .pri--watch, .is-dark .pri--watch { background: var(--color-surface-dark-2); color: var(--color-silver); }
.band--dark .pri--low, .band--void .pri--low, .is-dark .pri--low { color: var(--color-muted-dark); border-color: var(--color-line-dark-2); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-muted); white-space: nowrap; }
.badge--primary  { border-color: var(--color-signal-ink); color: var(--color-signal-ink); }
.badge--gov      { color: var(--color-muted); }
.badge--company  { color: var(--color-ink); }
.badge--news     { border-color: rgba(42, 96, 153, 0.30); color: var(--color-signal-ink-deep); background: var(--color-signal-wash); }
.badge--licensed { border-color: rgba(42, 96, 153, 0.30); color: var(--color-signal-ink); }
.badge--demo     { border-color: rgba(227, 164, 31, 0.45); color: var(--color-gold-ink); background: rgba(227, 164, 31, 0.08); }
.badge--high     { border-color: var(--color-signal-ink); color: var(--color-signal-ink); }
.badge--medium   { color: var(--color-body); }
.badge--low      { border-color: rgba(218, 78, 74, 0.40); color: var(--color-coral-ink); }
.band--dark .badge, .band--void .badge, .band--graphite .badge, .is-dark .badge { border-color: var(--color-line-dark-2); color: var(--color-silver); }
.band--dark .badge--primary, .band--void .badge--primary, .is-dark .badge--primary { border-color: var(--color-signal); color: var(--color-signal); }
.band--dark .badge--news, .band--void .badge--news, .is-dark .badge--news { background: none; border-color: rgba(124, 174, 231, 0.45); color: var(--color-signal); }
.band--dark .badge--demo, .band--void .badge--demo, .is-dark .badge--demo { border-color: var(--color-gold); color: var(--color-gold); background: rgba(145, 105, 20, 0.1); }
.tags, .result__tags { display: flex; gap: 7px; flex-wrap: wrap; }

/* --- Cards and surfaces -------------------------------------------------- */

.card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-1); transition: box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease); }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.band--dark .card, .band--void .card, .band--graphite .card, .is-dark .card { background: var(--color-surface-dark); border-color: var(--color-line-dark); color: var(--color-silver); box-shadow: var(--shadow-dark); }

/* A dark product surface on a light page, and vice versa */
.stage { background: var(--grad-void); color: var(--color-silver); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-dark); position: relative; overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 400px at 80% -10%, var(--glow-signal), transparent 60%); }
.stage > * { position: relative; }
.stage h2, .stage h3 { color: var(--color-cloud); }

.split { display: grid; gap: clamp(28px, 4.5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

.panel { padding-top: 26px; border-top: 2px solid var(--color-ink); }
.panel--interp { border-top-color: var(--color-signal-ink); }
.band--dark .panel, .band--void .panel, .is-dark .panel { border-top-color: var(--color-silver); }
.band--dark .panel--interp, .band--void .panel--interp, .is-dark .panel--interp { border-top-color: var(--color-signal); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.interp-note { background: var(--color-signal-wash); border-left: 2px solid var(--color-signal-ink); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; padding: 16px 20px; font-size: 0.875rem; color: var(--color-signal-ink-deep); margin-top: 20px; }

.sig { display: block; padding-top: 20px; border-top: 1px solid var(--color-ink); transition: border-color var(--mid) var(--ease); }
.sig:hover { border-top-color: var(--color-signal-ink); }
.sig__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.sig__score { font-size: 0.813rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-signal-ink); }
.sig__title { font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.18; letter-spacing: -0.014em; margin-bottom: 12px; text-wrap: pretty; transition: color var(--fast) var(--ease); }
.sig:hover .sig__title { color: var(--color-signal-ink); }
.sig__sum { font-size: 0.938rem; color: var(--color-body); line-height: 1.58; margin-bottom: 18px; }
.sig__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-line); }
.sig__meta .label { color: var(--color-muted); font-weight: 500; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(26px, 3.4vw, 48px); }
.band--dark .sig, .band--void .sig, .is-dark .sig { border-top-color: var(--color-line-dark-2); }
.band--dark .sig__title, .band--void .sig__title, .is-dark .sig__title { color: var(--color-cloud); }
.band--dark .sig__sum, .band--void .sig__sum, .is-dark .sig__sum { color: var(--color-silver); }
.band--dark .sig__foot, .band--void .sig__foot, .is-dark .sig__foot { border-top-color: var(--color-line-dark); }
.band--dark .sig__score, .band--void .sig__score, .is-dark .sig__score { color: var(--color-signal); }

/* --- Data list, sources, disclosures, forms ------------------------------ */

.dl { border-top: 1px solid var(--color-line); }
.dl__row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.dl__row dt { color: var(--color-muted); }
.dl__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-ink); text-align: right; font-weight: 500; }
.band--dark .dl, .band--void .dl, .is-dark .dl { border-top-color: var(--color-line-dark); }
.band--dark .dl__row, .band--void .dl__row, .is-dark .dl__row { border-bottom-color: var(--color-line-dark); }
.band--dark .dl__row dt, .band--void .dl__row dt, .is-dark .dl__row dt { color: var(--color-muted-dark); }
.band--dark .dl__row dd, .band--void .dl__row dd, .is-dark .dl__row dd { color: var(--color-cloud); }

.src { padding: 20px 0; border-bottom: 1px solid var(--color-line); display: grid; gap: 10px; }
.src__top { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.src__pub { font-weight: 600; font-size: 0.938rem; }
.src__title { font-size: 0.938rem; color: var(--color-body); }
.src__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.688rem; color: var(--color-muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.src__none { font-size: 0.813rem; color: var(--color-muted); }
.band--dark .src, .band--void .src, .is-dark .src { border-bottom-color: var(--color-line-dark); }
.band--dark .src__title, .band--void .src__title, .is-dark .src__title { color: var(--color-silver); }
.band--dark .src__meta, .band--void .src__meta, .is-dark .src__meta, .band--dark .src__none, .band--void .src__none, .is-dark .src__none { color: var(--color-muted-dark); }

.disclose { border: 1px solid var(--color-line); border-left: 2px solid var(--color-warn-line); background: var(--color-white); border-radius: var(--radius-sm); padding: 18px 22px; }
.disclose__sum { cursor: pointer; font-size: 0.875rem; font-weight: 500; list-style: none; display: flex; gap: 10px; align-items: center; }
.disclose__sum::-webkit-details-marker { display: none; }
.disclose__sum::after { content: "+"; margin-left: auto; color: var(--color-muted); }
.disclose[open] .disclose__sum::after { content: "\2212"; }
.disclose > div.disclose__sum::after { content: none; }
.disclose__body { margin-top: 14px; font-size: 0.875rem; color: var(--color-body); line-height: 1.62; max-width: 76ch; }
.band--dark .disclose, .band--void .disclose, .is-dark .disclose { background: var(--color-surface-dark); border-color: var(--color-line-dark); color: var(--color-silver); }
.band--dark .disclose__body, .band--void .disclose__body, .is-dark .disclose__body { color: var(--color-silver); }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > .label { color: var(--color-muted); letter-spacing: 0.1em; }
.field input[type=text], .field input[type=url], .field input[type=email], .field select, .field textarea {
  width: 100%; padding: 15px 18px; border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-ink); font-family: var(--sans); font-size: 0.975rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted-dark); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(227, 164, 31, 0.18); }
.field__help { font-size: 0.813rem; color: var(--color-muted); }
.band--dark .field input, .band--dark .field select, .band--dark .field textarea,
.band--void .field input, .band--void .field select, .band--void .field textarea,
.is-dark .field input, .is-dark .field select, .is-dark .field textarea { background: var(--color-navy-mid); border-color: var(--color-line-dark-2); color: var(--color-cloud); }
.band--dark .field__help, .band--void .field__help, .is-dark .field__help { color: var(--color-muted-dark); }
.band--dark .field > .label, .band--void .field > .label, .is-dark .field > .label { color: var(--color-muted-dark); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--color-body); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--color-gold); width: 16px; height: 16px; }
.is-dark .check, .band--dark .check, .band--void .check { color: var(--color-silver); }

.choice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-sm); background: var(--color-surface-dark); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.choice:hover { border-color: var(--color-silver); }
.choice input { margin-top: 5px; accent-color: var(--color-gold); }
.choice.is-on { border-color: var(--color-gold); background: rgba(227, 164, 31, 0.08); }
.choice__t { font-weight: 600; font-size: 0.975rem; display: block; margin-bottom: 3px; color: var(--color-cloud); }
.choice__d { font-size: 0.875rem; color: var(--color-silver); }
.band--white .choice, .band--wash .choice { background: var(--color-white); border-color: var(--color-line); }
.scene--white .choice, .scene--ivory .choice { background: var(--color-white); border-color: var(--color-line); }
.band--white .choice__t, .band--wash .choice__t { color: var(--color-ink); }
.scene--white .choice__t, .scene--ivory .choice__t { color: var(--color-ink); }
.band--white .choice__d, .band--wash .choice__d { color: var(--color-body); }
.scene--white .choice__d, .scene--ivory .choice__d { color: var(--color-body); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; padding: 8px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-body); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease); }
.chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
.chip.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.chip--static { cursor: default; }
.band--dark .chip, .band--void .chip, .is-dark .chip { background: var(--color-surface-dark); border-color: var(--color-line-dark-2); color: var(--color-silver); }
.band--dark .chip:hover, .band--void .chip:hover, .is-dark .chip:hover { border-color: var(--color-cloud); color: var(--color-cloud); }
.band--dark .chip.is-on, .band--void .chip.is-on, .is-dark .chip.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }

.note { border-left: 2px solid var(--color-signal-ink); padding: 2px 0 2px 18px; font-size: 0.875rem; line-height: 1.62; color: var(--color-body); max-width: 72ch; }
.note--warn { border-left-color: var(--color-warn-line); }
.note strong { color: var(--color-ink); font-weight: 600; }
.band--dark .note, .band--void .note, .is-dark .note { color: var(--color-silver); border-left-color: var(--color-signal); }
.band--dark .note strong, .band--void .note strong, .is-dark .note strong { color: var(--color-cloud); }
.band--dark .note--warn, .band--void .note--warn, .is-dark .note--warn { border-left-color: var(--color-gold); }
.band--blue .note { color: var(--color-white); border-left-color: rgba(255, 255, 255, 0.6); }
.band--blue .note strong { color: var(--color-white); }
.fine { font-size: 0.813rem; color: var(--color-muted); line-height: 1.6; max-width: 72ch; }
.is-dark .fine, .band--dark .fine, .band--void .fine { color: var(--color-muted-dark); }

/* --- The company profile ------------------------------------------------- */

.prof { border-top: 1px solid var(--color-line-dark-2); padding-top: 22px; max-width: 800px; }
.prof__dom { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; margin-bottom: 6px; }
.prof__src { font-size: 0.813rem; color: var(--color-muted-dark); margin-bottom: 16px; }
.prof__acts { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.band--white .prof, .band--wash .prof { border-top-color: var(--color-line); }
.scene--white .prof, .scene--ivory .prof { border-top-color: var(--color-line); }
.band--white .prof__src, .band--wash .prof__src { color: var(--color-muted); }
.scene--white .prof__src, .scene--ivory .prof__src { color: var(--color-muted); }

/* --- The scan experience ------------------------------------------------- */

.seq { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; }
.seq__field { position: absolute; inset: 0; pointer-events: none; }
.seq__svg { width: 100%; height: 100%; }
.seq__ring { fill: none; stroke: var(--color-line-dark); stroke-width: 1; }
.seq__line { fill: none; stroke: var(--color-signal); stroke-width: 1.2; stroke-linecap: round; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.seq__line.is-drawn { animation: seq-draw var(--cine) var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes seq-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 20% { opacity: 0.55; } 100% { opacity: 0.32; stroke-dashoffset: 0; } }
.seq__pt { fill: var(--color-signal); opacity: 0; }
.seq__pt.is-on { animation: seq-pt var(--slow) var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes seq-pt { from { opacity: 0; r: 1; } to { opacity: 0.85; r: 3; } }
.seq__core { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; }
.seq__node { width: 14px; height: 14px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 0 10px rgba(227, 164, 31, 0.14), 0 0 60px 8px var(--glow-gold-soft); animation: seq-pulse 3.2s var(--ease) infinite; }
@keyframes seq-pulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(227, 164, 31, 0.14), 0 0 60px 8px var(--glow-gold-soft); } 50% { box-shadow: 0 0 0 14px rgba(227, 164, 31, 0.10), 0 0 80px 14px var(--glow-gold-soft); } }
.seq__dom { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; color: var(--color-cloud); }
.seq__phrase { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--color-silver); min-height: 1.6em; opacity: 0; transition: opacity var(--slow) var(--ease); }
.seq__phrase.is-in { opacity: 1; }
.seq__baboon { width: clamp(120px, 14vw, 180px); margin-bottom: 4px; opacity: 0.92; }
.seq__baboon img { width: 100%; height: auto; }
.seq__ready { opacity: 0; transition: opacity var(--cine) var(--ease); }
.seq__ready.is-in { opacity: 1; }

/* Lead capture, after the scan */
.save { max-width: 560px; margin-inline: auto; text-align: center; }
.save .display { color: var(--color-cloud); }
.save__count { font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--color-silver); margin-top: 14px; }
.save__form { margin-top: 34px; text-align: left; }
.save__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.save__fine { font-size: 0.813rem; color: var(--color-muted-dark); margin-top: 12px; }

/* The reveal */
.reveal { max-width: 900px; }
.greet { font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.01em; color: var(--color-muted-dark); margin-bottom: 18px; }
.reveal__n { display: block; }
.greet__warn { display: block; margin-top: 8px; font-family: var(--sans); font-size: 0.813rem; color: var(--color-gold); letter-spacing: 0; }

/* Three things */
.top3 { display: grid; gap: 0; margin-top: clamp(30px, 5vh, 56px); border-top: 1px solid var(--color-line-dark-2); }
.top3__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: clamp(24px, 3.5vh, 38px) 0; border-bottom: 1px solid var(--color-line-dark); align-items: start; }
.top3__n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-gold); }
.top3__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.top3__where { font-size: 0.75rem; color: var(--color-muted-dark); letter-spacing: 0.02em; }
.top3__t { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.022em; color: var(--color-cloud); text-wrap: pretty; }
.top3__t a:hover { color: var(--color-signal); }
.top3__so { margin-top: 12px; font-size: 1rem; line-height: 1.58; color: var(--color-silver); max-width: 64ch; }
.band--white .top3, .band--wash .top3 { border-top-color: var(--color-ink); }
.scene--white .top3, .scene--ivory .top3 { border-top-color: var(--color-ink); }
.band--white .top3__item, .band--wash .top3__item { border-bottom-color: var(--color-line); }
.scene--white .top3__item, .scene--ivory .top3__item { border-bottom-color: var(--color-line); }
.band--white .top3__t, .band--wash .top3__t { color: var(--color-ink); }
.scene--white .top3__t, .scene--ivory .top3__t { color: var(--color-ink); }
.band--white .top3__so, .band--wash .top3__so { color: var(--color-body); }
.scene--white .top3__so, .scene--ivory .top3__so { color: var(--color-body); }
.band--white .top3__where, .band--wash .top3__where { color: var(--color-muted); }
.scene--white .top3__where, .scene--ivory .top3__where { color: var(--color-muted); }

/* CEO Brief */
.ceo { background: var(--color-surface-dark); border: 1px solid var(--color-line-dark); border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-dark); }
.ceo__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.ceo__k { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; font-size: 0.875rem; text-transform: uppercase; color: var(--color-gold); }
.ceo__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 28px; padding: 18px 0; border-top: 1px solid var(--color-line-dark); }
.ceo__l { font-size: 0.688rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-signal); padding-top: 6px; }
.ceo__v { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.38; letter-spacing: -0.012em; color: var(--color-cloud); text-wrap: pretty; }
.ceo__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.ceo__read { font-size: 0.813rem; color: var(--color-muted-dark); }
.band--white .ceo, .band--wash .ceo { background: var(--color-white); border-color: var(--color-line); box-shadow: var(--shadow-1); }
.scene--white .ceo, .scene--ivory .ceo { background: var(--color-white); border-color: var(--color-line); box-shadow: var(--shadow-1); }
.band--white .ceo__row, .band--wash .ceo__row { border-top-color: var(--color-line); }
.scene--white .ceo__row, .scene--ivory .ceo__row { border-top-color: var(--color-line); }
.band--white .ceo__l, .band--wash .ceo__l { color: var(--color-signal-ink); }
.scene--white .ceo__l, .scene--ivory .ceo__l { color: var(--color-signal-ink); }
.band--white .ceo__v, .band--wash .ceo__v { color: var(--color-ink); }
.scene--white .ceo__v, .scene--ivory .ceo__v { color: var(--color-ink); }
.band--white .ceo__k, .band--wash .ceo__k { color: var(--color-gold-ink); }
.scene--white .ceo__k, .scene--ivory .ceo__k { color: var(--color-gold-ink); }
.band--white .ceo__read, .band--wash .ceo__read { color: var(--color-muted); }
.scene--white .ceo__read, .scene--ivory .ceo__read { color: var(--color-muted); }

/* Signal map */
.map { position: relative; }
.map__svg { width: 100%; height: auto; display: block; }
.map__ring { fill: none; stroke: var(--color-line-dark); stroke-width: 1; }
.map__link { fill: none; stroke: var(--color-signal); stroke-width: 1.4; stroke-linecap: round; opacity: calc(var(--lit) * 0.7); stroke-dasharray: 1; stroke-dashoffset: 1; animation: map-draw var(--cine) var(--ease-out) forwards; animation-delay: calc(var(--i) * 140ms + 300ms); }
@keyframes map-draw { to { stroke-dashoffset: 0; } }
.map__link.is-dim { opacity: 0.12; }
.map__centre { fill: var(--color-gold); }
.map__halo { opacity: 0.9; }
.map__you { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--color-cloud); letter-spacing: -0.01em; }
.map__node { cursor: pointer; opacity: 0; animation: map-in var(--slow) var(--ease-out) forwards; animation-delay: calc(var(--i) * 140ms + 700ms); outline: none; }
@keyframes map-in { to { opacity: 1; } }
.map__dot { fill: var(--color-signal); opacity: var(--lit); transition: opacity var(--mid) var(--ease); }
.map__glow { opacity: calc(var(--lit) * 0.9); transition: opacity var(--mid) var(--ease); }
.map__label { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--color-cloud); opacity: calc(0.55 + var(--lit) * 0.45); }
.map__count { font-family: var(--sans); font-size: 11px; fill: var(--color-muted-dark); font-variant-numeric: tabular-nums; }
.map__node:hover .map__dot, .map__node:focus-visible .map__dot, .map__node.is-on .map__dot { opacity: 1; fill: var(--color-gold); }
.map__node:hover .map__label, .map__node.is-on .map__label { opacity: 1; }
.map__node.is-dim { opacity: 0.35; }
.map__list { display: none; border-top: 1px solid var(--color-line-dark-2); }
.map__li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line-dark); font-size: 0.938rem; color: var(--color-cloud); }
.map__li-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-signal); opacity: var(--lit); box-shadow: 0 0 12px 2px var(--glow-signal); }
.map__li-l { font-weight: 500; }
.map__li-c { font-size: 0.75rem; color: var(--color-muted-dark); font-variant-numeric: tabular-nums; }
.map__hint { font-size: 0.813rem; color: var(--color-muted-dark); margin-top: 10px; }
.band--white .map__ring, .band--wash .map__ring { stroke: var(--color-line); }
.scene--white .map__ring, .scene--ivory .map__ring { stroke: var(--color-line); }
.band--white .map__you, .band--white .map__label, .band--wash .map__you, .band--wash .map__label { fill: var(--color-ink); }
.scene--white .map__you, .scene--white .map__label, .scene--ivory .map__you, .scene--ivory .map__label { fill: var(--color-ink); }
.band--white .map__dot, .band--wash .map__dot { fill: var(--color-signal-ink); }
.scene--white .map__dot, .scene--ivory .map__dot { fill: var(--color-signal-ink); }
.band--white .map__link, .band--wash .map__link { stroke: var(--color-signal-ink); }
.scene--white .map__link, .scene--ivory .map__link { stroke: var(--color-signal-ink); }
.band--white .map__count, .band--wash .map__count { fill: var(--color-muted); }
.scene--white .map__count, .scene--ivory .map__count { fill: var(--color-muted); }

/* --- The insight anatomy ------------------------------------------------- */

.ins { border-top: 1px solid var(--color-line-dark-2); padding-top: clamp(26px, 4vh, 40px); scroll-margin-top: 90px; }
.ins + .ins { margin-top: clamp(34px, 5vh, 56px); }
.ins.is-dismissed { opacity: 0.4; }
.ins__head { max-width: 800px; }
.ins__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ins__where, .ins__date { font-size: 0.75rem; color: var(--color-muted-dark); letter-spacing: 0.02em; }
.ins__title { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.12; letter-spacing: -0.022em; color: var(--color-cloud); text-wrap: pretty; }
.ins__title a:hover { color: var(--color-signal); }
.ins__so { margin-top: 12px; font-size: 1.02rem; line-height: 1.58; color: var(--color-silver); max-width: 64ch; }
.ins__more { margin-top: 20px; }
.ins__sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 0.813rem; font-weight: 600; color: var(--color-signal); padding: 10px 0; border-bottom: 1px solid rgba(124, 174, 231, 0.36); }
.ins__sum::-webkit-details-marker { display: none; }
.ins__sum::after { content: "+"; font-size: 1rem; }
.ins__more[open] .ins__sum::after { content: "\2212"; }
.ins__sum-close { display: none; }
.ins__more[open] .ins__sum-open { display: none; }
.ins__more[open] .ins__sum-close { display: inline; }
.ins__body { display: grid; gap: clamp(26px, 4vh, 40px); margin-top: clamp(22px, 3.5vh, 34px); max-width: 800px; animation: ins-in var(--slow) var(--ease-out); }
@keyframes ins-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ins__sec { display: grid; gap: 10px; }
.ins__k { font-size: 0.688rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }
.ins__q { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.012em; color: var(--color-cloud); }
.ins__q--sub { font-size: 0.938rem; margin-top: 10px; color: var(--color-silver); }
.ins__p { font-size: 0.975rem; line-height: 1.62; color: var(--color-silver); max-width: 66ch; }
.ins__p--interp { padding-left: 16px; border-left: 2px solid var(--color-signal); }
.ins__fine { font-size: 0.75rem; color: var(--color-muted-dark); }
.ins__pts { display: grid; gap: 9px; }
.ins__pts li { position: relative; padding-left: 20px; font-size: 0.975rem; line-height: 1.55; color: var(--color-cloud); }
.ins__pts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; border-radius: 1px; background: var(--color-gold); }
.ins__list { display: grid; gap: 8px; }
.ins__list li { position: relative; padding-left: 20px; font-size: 0.938rem; line-height: 1.55; color: var(--color-silver); }
.ins__list li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-signal); }
.ins__sec--do .ins__list li::before { background: var(--color-gold); }
.ins__sec--ask { padding-top: 6px; }
.top3__in { min-width: 0; }
.ins__sec--insight { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--color-surface-dark); border: 1px solid var(--color-line-dark); }
.band--white .ins__sec--insight, .band--wash .ins__sec--insight { background: var(--color-white); border-color: var(--color-line); }
.scene--white .ins__sec--insight, .scene--ivory .ins__sec--insight { background: var(--color-white); border-color: var(--color-line); }
.ins__src { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.875rem; }
.ins__acts { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--color-line-dark); }
.ins__status { font-size: 0.813rem; color: var(--color-gold); font-weight: 500; }
.figs { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.fig { display: grid; gap: 2px; }
.fig__v { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-cloud); line-height: 1.1; }
.fig__l { font-size: 0.688rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-dark); }

/* Light-band variants of the anatomy (signal pages, homepage example) */
.band--white .ins, .band--wash .ins { border-top-color: var(--color-ink); }
.scene--white .ins, .scene--ivory .ins { border-top-color: var(--color-ink); }
.band--white .ins__title, .band--wash .ins__title, .band--white .ins__q, .band--wash .ins__q, .band--white .ins__pts li, .band--wash .ins__pts li, .band--white .fig__v, .band--wash .fig__v { color: var(--color-ink); }
.scene--white .ins__title, .scene--ivory .ins__title, .scene--white .ins__q, .scene--ivory .ins__q, .scene--white .ins__pts li, .scene--ivory .ins__pts li, .scene--white .fig__v, .scene--ivory .fig__v { color: var(--color-ink); }
.band--white .ins__so, .band--wash .ins__so, .band--white .ins__p, .band--wash .ins__p, .band--white .ins__list li, .band--wash .ins__list li, .band--white .ins__q--sub, .band--wash .ins__q--sub { color: var(--color-body); }
.scene--white .ins__so, .scene--ivory .ins__so, .scene--white .ins__p, .scene--ivory .ins__p, .scene--white .ins__list li, .scene--ivory .ins__list li, .scene--white .ins__q--sub, .scene--ivory .ins__q--sub { color: var(--color-body); }
.band--white .ins__where, .band--white .ins__date, .band--white .ins__fine, .band--white .fig__l, .band--wash .ins__where, .band--wash .ins__date, .band--wash .ins__fine, .band--wash .fig__l { color: var(--color-muted); }
.scene--white .ins__where, .scene--white .ins__date, .scene--white .ins__fine, .scene--white .fig__l, .scene--ivory .ins__where, .scene--ivory .ins__date, .scene--ivory .ins__fine, .scene--ivory .fig__l { color: var(--color-muted); }
.band--white .ins__k, .band--wash .ins__k { color: var(--color-gold-ink); }
.scene--white .ins__k, .scene--ivory .ins__k { color: var(--color-gold-ink); }
.band--white .ins__sum, .band--wash .ins__sum { color: var(--color-signal-ink); border-bottom-color: rgba(42, 96, 153, 0.3); }
.scene--white .ins__sum, .scene--ivory .ins__sum { color: var(--color-signal-ink); border-bottom-color: rgba(42, 96, 153, 0.3); }
.band--white .ins__p--interp, .band--wash .ins__p--interp { border-left-color: var(--color-signal-ink); }
.scene--white .ins__p--interp, .scene--ivory .ins__p--interp { border-left-color: var(--color-signal-ink); }
.band--white .ins__list li::before, .band--wash .ins__list li::before { background: var(--color-signal-ink); }
.scene--white .ins__list li::before, .scene--ivory .ins__list li::before { background: var(--color-signal-ink); }
.band--white .ins__acts, .band--wash .ins__acts { border-top-color: var(--color-line); }
.scene--white .ins__acts, .scene--ivory .ins__acts { border-top-color: var(--color-line); }
.band--white .ins__status, .band--wash .ins__status { color: var(--color-gold-ink); }
.scene--white .ins__status, .scene--ivory .ins__status { color: var(--color-gold-ink); }

/* Connection chain: horizontal on desktop, vertical on phone */
.conn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: c; }
.conn__node { position: relative; padding: 14px 22px 14px 0; display: grid; gap: 4px; }
.conn__node::after { content: "\2192"; position: absolute; right: 6px; top: 14px; color: var(--color-gold); font-size: 1.1rem; }
.conn__node--end::after { content: none; }
.conn__k { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted-dark); }
.conn__v { font-family: var(--display); font-weight: 500; font-size: 0.975rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-cloud); }
.conn__node--end .conn__v { color: var(--color-gold); }
.band--white .conn__v, .band--wash .conn__v { color: var(--color-ink); }
.scene--white .conn__v, .scene--ivory .conn__v { color: var(--color-ink); }
.band--white .conn__k, .band--wash .conn__k { color: var(--color-muted); }
.scene--white .conn__k, .scene--ivory .conn__k { color: var(--color-muted); }
.band--white .conn__node--end .conn__v, .band--wash .conn__node--end .conn__v { color: var(--color-gold-ink); }
.scene--white .conn__node--end .conn__v, .scene--ivory .conn__node--end .conn__v { color: var(--color-gold-ink); }

/* Consequence steps: the cascade the event sets off */
.steps { display: grid; gap: 0; }
.steps__i { position: relative; padding: 0 0 16px 28px; font-size: 0.938rem; line-height: 1.5; color: var(--color-silver); }
.steps__i::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal); }
.steps__i::after { content: ""; position: absolute; left: 7px; top: 1.3em; bottom: -0.1em; width: 1px; background: var(--color-line-dark-2); }
.steps__i:last-child { padding-bottom: 0; }
.steps__i:last-child::after { display: none; }
.steps__i--seed { color: var(--color-cloud); font-weight: 600; }
.steps__i--seed::before { background: var(--color-gold); width: 11px; height: 11px; left: 2px; top: 0.42em; }
.steps__i--wait::before { background: var(--color-neutral); }
.band--white .steps__i, .band--wash .steps__i { color: var(--color-body); }
.scene--white .steps__i, .scene--ivory .steps__i { color: var(--color-body); }
.band--white .steps__i--seed, .band--wash .steps__i--seed { color: var(--color-ink); }
.scene--white .steps__i--seed, .scene--ivory .steps__i--seed { color: var(--color-ink); }
.band--white .steps__i::before, .band--wash .steps__i::before { background: var(--color-signal-ink); }
.scene--white .steps__i::before, .scene--ivory .steps__i::before { background: var(--color-signal-ink); }
.band--white .steps__i--seed::before, .band--wash .steps__i--seed::before { background: var(--color-gold); }
.scene--white .steps__i--seed::before, .scene--ivory .steps__i--seed::before { background: var(--color-gold); }
.band--white .steps__i::after, .band--wash .steps__i::after { background: var(--color-line); }
.scene--white .steps__i::after, .scene--ivory .steps__i::after { background: var(--color-line); }

/* Why matched: the score and the labels, each explained */
.why { display: grid; gap: 22px; }
.why__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; }
.why__num { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; color: var(--color-cloud); grid-row: span 2; }
.why__of { font-size: 0.688rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted-dark); font-weight: 600; }
.why__f { font-size: 0.813rem; color: var(--color-silver); }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.why__cell { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-surface-dark); }
.why__l { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted-dark); }
.why__v { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--color-cloud); letter-spacing: -0.01em; }
.why__d { font-size: 0.75rem; line-height: 1.5; color: var(--color-silver); }
.why__reasons { display: grid; gap: 6px; font-size: 0.875rem; color: var(--color-silver); }
.why__k { color: var(--color-signal); font-weight: 600; }
.why__note { font-size: 0.875rem; color: var(--color-muted-dark); }
.band--white .why__num, .band--wash .why__num, .band--white .why__v, .band--wash .why__v { color: var(--color-ink); }
.scene--white .why__num, .scene--ivory .why__num, .scene--white .why__v, .scene--ivory .why__v { color: var(--color-ink); }
.band--white .why__cell, .band--wash .why__cell { background: var(--color-white); border-color: var(--color-line); }
.scene--white .why__cell, .scene--ivory .why__cell { background: var(--color-white); border-color: var(--color-line); }
.band--white .why__of, .band--white .why__l, .band--white .why__note, .band--wash .why__of, .band--wash .why__l, .band--wash .why__note { color: var(--color-muted); }
.scene--white .why__of, .scene--white .why__l, .scene--white .why__note, .scene--ivory .why__of, .scene--ivory .why__l, .scene--ivory .why__note { color: var(--color-muted); }
.band--white .why__f, .band--white .why__d, .band--white .why__reasons, .band--wash .why__f, .band--wash .why__d, .band--wash .why__reasons { color: var(--color-body); }
.scene--white .why__f, .scene--white .why__d, .scene--white .why__reasons, .scene--ivory .why__f, .scene--ivory .why__d, .scene--ivory .why__reasons { color: var(--color-body); }
.band--white .why__k, .band--wash .why__k { color: var(--color-signal-ink); }
.scene--white .why__k, .scene--ivory .why__k { color: var(--color-signal-ink); }

/* Ask BuzzBaboon */
.ask__qs { display: flex; gap: 8px; flex-wrap: wrap; }
.ask__q { background: var(--color-surface-dark); border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-pill); padding: 9px 15px; font-size: 0.813rem; color: var(--color-cloud); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.ask__q:hover { border-color: var(--color-silver); }
.ask__q.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.ask__a { margin-top: 6px; padding: 20px 22px; border-radius: var(--radius-sm); background: var(--color-surface-dark); border: 1px solid var(--color-line-dark); display: grid; gap: 16px; animation: ins-in var(--mid) var(--ease-out); }
.ask__t { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--color-cloud); }
.ask__sec { display: grid; gap: 6px; }
.ask__k { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-signal); }
.ask__list { display: grid; gap: 6px; }
.ask__list li { position: relative; padding-left: 16px; font-size: 0.875rem; line-height: 1.55; color: var(--color-silver); }
.ask__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); }
.ask__a p { font-size: 0.875rem; line-height: 1.55; color: var(--color-silver); }
.band--white .ask__q, .band--wash .ask__q { background: var(--color-white); border-color: var(--color-line); color: var(--color-ink); }
.scene--white .ask__q, .scene--ivory .ask__q { background: var(--color-white); border-color: var(--color-line); color: var(--color-ink); }
.band--white .ask__a, .band--wash .ask__a { background: var(--color-white); border-color: var(--color-line); }
.scene--white .ask__a, .scene--ivory .ask__a { background: var(--color-white); border-color: var(--color-line); }
.band--white .ask__t, .band--wash .ask__t { color: var(--color-ink); }
.scene--white .ask__t, .scene--ivory .ask__t { color: var(--color-ink); }
.band--white .ask__k, .band--wash .ask__k { color: var(--color-signal-ink); }
.scene--white .ask__k, .scene--ivory .ask__k { color: var(--color-signal-ink); }
.band--white .ask__list li, .band--white .ask__a p, .band--wash .ask__list li, .band--wash .ask__a p { color: var(--color-body); }
.scene--white .ask__list li, .scene--white .ask__a p, .scene--ivory .ask__list li, .scene--ivory .ask__a p { color: var(--color-body); }

/* --- The Buzz Brief card: made to be screenshotted ----------------------- */

.bbrief { background: var(--color-white); color: var(--color-ink); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-2); max-width: 560px; border: 1px solid var(--color-line); }
.bbrief__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bbrief__logo { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--color-navy); }
.bbrief__logo em { font-style: normal; color: var(--color-gold-ink); }
.bbrief__date { font-size: 0.75rem; color: var(--color-muted); letter-spacing: 0.02em; }
.bbrief__for { margin-top: 6px; font-size: 0.813rem; color: var(--color-muted); display: flex; gap: 10px; align-items: center; }
.bbrief__sec { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.bbrief__k { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; margin-bottom: 12px; color: var(--color-navy); }
.bbrief__list { display: grid; gap: 12px; counter-reset: b; }
.bbrief__item { display: grid; gap: 3px; position: relative; padding-left: 22px; }
.bbrief__list:not(.bbrief__list--plain) .bbrief__item::before { counter-increment: b; content: counter(b); position: absolute; left: 0; top: 0.1em; font-family: var(--display); font-weight: 700; font-size: 0.813rem; color: var(--color-gold-ink); }
.bbrief__list--plain .bbrief__item::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal-ink); }
.bbrief__t { font-weight: 600; font-size: 0.938rem; line-height: 1.35; color: var(--color-ink); }
.bbrief__s { font-size: 0.875rem; line-height: 1.5; color: var(--color-body); }
.bbrief__do { font-size: 0.938rem; line-height: 1.5; color: var(--color-ink); font-weight: 500; }
.bbrief__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-line); font-size: 0.688rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }

/* Share card */
.sc { background: var(--color-void); color: var(--color-cloud); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); max-width: 560px; aspect-ratio: 1.91 / 1; display: grid; grid-template-rows: auto 1fr auto; box-shadow: var(--shadow-dark); position: relative; overflow: hidden; }
.sc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 90% 0%, var(--glow-signal), transparent 60%), radial-gradient(400px 260px at 0% 100%, var(--glow-gold-soft), transparent 60%); pointer-events: none; }
.sc > * { position: relative; }
.sc__co { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-signal); font-weight: 600; }
.sc__f { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.15; letter-spacing: -0.022em; align-self: center; text-wrap: pretty; }
.sc__c { font-size: 0.875rem; color: var(--color-silver); margin-top: 10px; }
.sc__logo { font-family: var(--display); font-weight: 700; font-size: 0.938rem; color: var(--color-cloud); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc__logo em { font-style: normal; color: var(--color-gold); }
.sc__by { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-dark); font-weight: 600; }
.sc__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* --- Opportunities feed: editorial, not CRM ------------------------------ */

.opp { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px 48px; padding: clamp(26px, 4vh, 40px) 0; border-top: 1px solid var(--color-line); align-items: start; }
.opp:first-child { border-top-color: var(--color-ink); }
.opp.is-dismissed { opacity: 0.4; }
.opp__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.opp__t { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.14; letter-spacing: -0.02em; text-wrap: pretty; }
.opp__t a:hover { color: var(--color-signal-ink); }
.opp__one { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--color-body); max-width: 62ch; }
.opp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 22px; }
.opp__cell { display: grid; gap: 4px; }
.opp__k { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold-ink); }
.opp__v { font-size: 0.875rem; line-height: 1.5; color: var(--color-body); }
.opp__side { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.opp__score { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); }
.opp__score small { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-left: 6px; font-family: var(--sans); font-weight: 600; }
.opp__status { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.opp__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.opp__src { font-size: 0.813rem; color: var(--color-muted); }
.opp__you { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--color-stone); font-size: 0.813rem; color: var(--color-body); }

/* --- Homepage sections --------------------------------------------------- */

.fan { display: grid; gap: clamp(22px, 3vw, 38px); }
.fan__source { max-width: 560px; }
.fan__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.fan__card { border-top: 1px solid var(--color-line-dark-2); padding-top: 18px; }
.fan__n { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.9; color: var(--color-cloud); }
.fan__n small { font-size: 0.35em; letter-spacing: 0; font-weight: 500; color: var(--color-muted-dark); margin-left: 4px; }
.fan__card .label { display: block; margin-bottom: 12px; }
.band--white .fan__card, .band--wash .fan__card { border-top-color: var(--color-line); }
.scene--white .fan__card, .scene--ivory .fan__card { border-top-color: var(--color-line); }
.band--white .fan__n, .band--wash .fan__n { color: var(--color-ink); }
.scene--white .fan__n, .scene--ivory .fan__n { color: var(--color-ink); }
.band--white .fan__n small, .band--wash .fan__n small { color: var(--color-muted); }
.scene--white .fan__n small, .scene--ivory .fan__n small { color: var(--color-muted); }

.brief { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; max-width: 620px; }
.brief__bar { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--color-line); background: var(--color-bone); }
.brief__body { padding: 24px 24px 28px; }
.brief__sub { font-family: var(--display); font-size: 1.24rem; line-height: 1.24; margin-bottom: 20px; }
.brief__item { padding: 15px 0; border-top: 1px solid var(--color-line); }

.listp { display: grid; gap: 12px; }
.listp li { position: relative; padding-left: 22px; color: var(--color-body); line-height: 1.55; font-size: 1rem; }
.listp li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; border-radius: 1px; background: var(--color-gold); }
.listp--flat li { color: var(--color-muted); }
.listp--flat li::before { background: var(--color-line); }
.band--dark .listp li, .band--void .listp li, .is-dark .listp li { color: var(--color-silver); }
.band--dark .listp--flat li, .band--void .listp--flat li { color: var(--color-muted-dark); }

.cascade { max-width: 34ch; }
.cascade li { position: relative; padding: 0 0 20px 30px; }
.cascade li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal); }
.cascade li::after { content: ""; position: absolute; left: 7.5px; top: 1.3em; bottom: -0.1em; width: 1px; background: var(--color-line-dark-2); }
.cascade li:last-child { padding-bottom: 0; }
.cascade li:last-child::after { display: none; }
.cascade__seed { font-weight: 600; color: var(--color-white); font-size: 1.06rem; }
.cascade__seed::before { background: var(--color-gold); width: 12px; height: 12px; left: 2px; top: 0.42em; }

.chain { display: grid; }
.chain li { position: relative; padding: 0 0 26px 28px; }
.chain li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 4px var(--glow-signal); }
.chain li::after { content: ""; position: absolute; left: 7px; top: 1.3em; bottom: 0; width: 1px; background: var(--color-line); }
.chain__last::before { background: var(--color-gold); box-shadow: 0 0 0 4px var(--glow-gold-soft); }
.chain__last { padding-bottom: 0; }
.chain__last::after { display: none; }
.chain__k { font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.is-dark .chain__k, .band--dark .chain__k, .band--void .chain__k { color: var(--color-cloud); }
.is-dark .chain li::after, .band--dark .chain li::after, .band--void .chain li::after { background: var(--color-line-dark-2); }

/* The four-step promise, as objects */
.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-line-dark-2); }
.promise__i { padding: 26px 26px 26px 0; position: relative; }
.promise__i::after { content: "\2192"; position: absolute; right: 12px; top: 26px; color: var(--color-gold); font-size: 1.2rem; }
.promise__i:last-child::after { content: none; }
.promise__k { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-dark); margin-bottom: 10px; }
.promise__v { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--color-cloud); }
.band--white .promise, .band--wash .promise { border-top-color: var(--color-ink); }
.scene--white .promise, .scene--ivory .promise { border-top-color: var(--color-ink); }
.band--white .promise__v, .band--wash .promise__v { color: var(--color-ink); }
.scene--white .promise__v, .scene--ivory .promise__v { color: var(--color-ink); }
.band--white .promise__k, .band--wash .promise__k { color: var(--color-muted); }
.scene--white .promise__k, .scene--ivory .promise__k { color: var(--color-muted); }

.mascot img { display: block; width: 100%; height: auto; }
.mascot--tall { max-width: 300px; margin: 0 0 0 auto; }
.mascot--inline { max-width: 200px; margin: 0 0 20px; }
.mascot--empty { max-width: 190px; margin: 0 0 8px; }
.mascot--hero-side { max-width: 300px; margin: 0 0 0 auto; }
.mascot--role { max-width: 150px; filter: drop-shadow(0 18px 24px var(--shade)); }
.mascot--sm { max-width: 120px; }

.buzzmark { display: inline-flex; align-items: flex-end; gap: 7px; height: 26px; }
.buzzmark i { display: block; width: 4px; border-radius: 2px; background: var(--color-gold); }
.buzzmark i:nth-child(1) { height: 14px; transform: rotate(-24deg); transform-origin: bottom center; }
.buzzmark i:nth-child(2) { height: 22px; }
.buzzmark i:nth-child(3) { height: 14px; transform: rotate(24deg); transform-origin: bottom center; }
.finale { max-width: 780px; }
.finale .buzzmark { height: 40px; gap: 10px; }
.finale .buzzmark i { width: 5px; }
.finale .buzzmark i:nth-child(1) { height: 22px; }
.finale .buzzmark i:nth-child(2) { height: 34px; }
.finale .buzzmark i:nth-child(3) { height: 22px; }
.finale__sub { color: var(--color-gold); margin-top: 8px; }

.strip { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--color-line-dark-2); margin-bottom: 22px; max-width: 780px; }
.strip__q { font-size: 0.875rem; line-height: 1.5; color: var(--color-silver); flex: 1 1 260px; }
.strip__cta { font-size: 0.688rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-signal); border-bottom: 1px solid rgba(124, 174, 231, 0.4); padding-bottom: 3px; white-space: nowrap; }

.shared { border: 1px solid var(--color-line); border-left: 2px solid var(--color-signal-ink); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--color-signal-wash); padding: 16px 20px; max-width: 760px; }
.shared__t { font-family: var(--display); font-size: 1.24rem; line-height: 1.22; }
.shared__d { font-size: 0.875rem; color: var(--color-body); margin-top: 6px; }

.empty { border-top: 1px solid var(--color-line-dark-2); padding-top: 26px; max-width: 66ch; }
.empty__t { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.14; margin-bottom: 12px; color: var(--color-cloud); }
.band--white .empty, .band--wash .empty { border-top-color: var(--color-ink); }
.scene--white .empty, .scene--ivory .empty { border-top-color: var(--color-ink); }
.band--white .empty__t, .band--wash .empty__t { color: var(--color-ink); }
.scene--white .empty__t, .scene--ivory .empty__t { color: var(--color-ink); }

.fb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fb__q { font-size: 0.813rem; color: var(--color-muted); }
.fb__note { font-size: 0.813rem; color: var(--color-signal-ink); font-weight: 500; }
.band--dark .fb__q, .band--void .fb__q, .is-dark .fb__q { color: var(--color-muted-dark); }
.band--dark .fb__note, .band--void .fb__note, .is-dark .fb__note { color: var(--color-signal); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--color-line); }
.stat { padding: 22px 20px 24px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.stat__n { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; color: var(--color-signal-ink); font-variant-numeric: tabular-nums; }
.stat__l { display: block; font-size: 0.688rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-muted); margin-top: 10px; }

.vs { border-top: 1px solid var(--color-ink); }
.vs__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); gap: 14px 30px; padding: 22px 0; border-bottom: 1px solid var(--color-line); }
.vs__row--head { padding: 12px 0; }
.vs__cat { font-size: 0.688rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted); padding-top: 3px; }
.vs__cat small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 4px; color: var(--color-muted); }
.vs__them { font-size: 0.938rem; line-height: 1.58; color: var(--color-body); }
.vs__us { font-size: 0.938rem; line-height: 1.58; color: var(--color-ink); font-weight: 500; border-left: 2px solid var(--color-signal-ink); padding-left: 16px; }
.vs__row--head .vs__them, .vs__row--head .vs__us { font-size: 0.688rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted); border-left: 0; padding-left: 0; }
.vs__row--head .vs__us { color: var(--color-signal-ink); }

/* --- Alerts setup -------------------------------------------------------- */

.setup { position: relative; background: var(--color-bone); }
.setup__bar { position: sticky; top: var(--nav-h); z-index: 40; height: 3px; background: var(--color-line); }
.setup__fill { display: block; height: 100%; width: 16%; background: var(--color-gold); transition: width var(--slow) var(--ease); }
.setup__panel { scroll-margin-top: 90px; }
.setup__head { margin-bottom: 26px; }
.setup__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.setup__nav .btn { min-width: 132px; }
.pickset { border: 0; padding: 0; margin: 0 0 26px; }
.pickset legend { padding: 0; margin-bottom: 12px; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 10px; }
.pickrows { display: grid; gap: 10px; }
.pick { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); }
.pick:hover { border-color: var(--color-ink); box-shadow: 0 10px 24px -18px var(--shade-2); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--color-line); border-radius: 6px; background: var(--color-bone); display: grid; place-items: center; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.pick__box--round { border-radius: 50%; }
.pick__tick { width: 9px; height: 9px; border-radius: 2px; background: transparent; transition: background var(--fast) var(--ease); }
.pick__box--round .pick__tick { border-radius: 50%; }
.pick__label { font-size: 0.938rem; line-height: 1.45; color: var(--color-ink); }
.pick__note { display: block; font-size: 0.813rem; color: var(--color-muted); margin-top: 3px; }
.pick input:checked ~ .pick__box { background: var(--color-gold); border-color: var(--color-gold); }
.pick input:checked ~ .pick__box .pick__tick { background: var(--color-navy); }
.pick:has(input:checked) { border-color: var(--color-gold); background: var(--color-gold-wash); }
.pick input:focus-visible ~ .pick__box { box-shadow: 0 0 0 3px rgba(42, 96, 153, 0.3); }
.pick--row { width: 100%; }
.pick--feature { border-style: dashed; }
.pick--feature .pick__label { font-weight: 500; }
.pick.is-off { opacity: 0.45; cursor: not-allowed; }
.done { text-align: left; padding-block: 20px; }

/* --- Footer: quiet ------------------------------------------------------- */

.foot { background: var(--color-void); color: var(--color-silver); padding-block: clamp(56px, 8vh, 96px) 32px; font-size: 0.875rem; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px; padding-bottom: 38px; border-bottom: 1px solid var(--color-line-dark); }
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__grid a { color: var(--color-silver); transition: color var(--fast) var(--ease); }
.foot__grid a:hover { color: var(--color-white); }
.foot__base { padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.813rem; color: var(--color-muted-dark); }
.foot__base a { color: var(--color-signal); }
.foot__tag { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.688rem; font-weight: 600; }

/* --- Utilities ----------------------------------------------------------- */

.stack { display: grid; align-content: start; }
.stack--xs { gap: 8px; } .stack--sm { gap: 14px; } .stack--md { gap: 22px; } .stack--lg { gap: 32px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mt-sm { margin-top: 14px; } .mt-md { margin-top: 26px; } .mt-lg { margin-top: 44px; } .mt-xl { margin-top: clamp(56px, 8vh, 96px); }
.center { text-align: center; }
.maxw { max-width: 62ch; }
.rev { opacity: 0; transform: translateY(16px); transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
.rev.is-in { opacity: 1; transform: none; }
.fade { opacity: 0; transition: opacity var(--cine) var(--ease); }
.fade.is-in { opacity: 1; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .opp__grid { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(36px, 6vh, 60px) 40px; }
  .hero__mascot { width: 100%; max-width: 300px; margin: 6px auto 0; }
  .hero__logo { width: clamp(180px, 46vw, 240px); margin-bottom: 26px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__word { font-size: 1.2rem; }
  .nav__links.is-open { display: grid; position: absolute; inset: var(--nav-h) 0 auto 0; background: var(--color-ivory); border-bottom: 1px solid var(--color-line); padding: 20px var(--gutter) 26px; gap: 16px; }
  .nav--dark .nav__links.is-open, body[data-theme="dark"] .nav__links.is-open { background: var(--color-deep); border-bottom-color: var(--color-line-dark); }
  .nav__links.is-open a { font-size: 0.938rem; }
  .split--wide { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; }
  .promise__i { padding: 18px 0; border-bottom: 1px solid var(--color-line-dark); }
  .promise__i::after { content: none; }
  .ceo__row { grid-template-columns: 1fr; gap: 6px; }
  .foot__base { flex-direction: column; }
  .mascot--tall, .mascot--hero-side { margin: 22px auto 0; max-width: 240px; }
  .mascot--inline { max-width: 160px; }
  .opp { grid-template-columns: 1fr; }
  .opp__side { padding-top: 0; }
  .seq { min-height: 60vh; }
}

@media (max-width: 700px) {
  /* The signal map recomposes into a vertical consequence chain. */
  .map__svg { display: none; }
  .map__list { display: block; }
  .conn { grid-template-columns: 1fr; }
  .conn__node { padding: 12px 0 12px 22px; border-left: 1px solid var(--color-line-dark-2); }
  .conn__node::after { content: "\2193"; right: auto; left: -7px; top: auto; bottom: -12px; font-size: 0.9rem; background: var(--color-deep); line-height: 1; }
  .band--white .conn__node::after, .band--wash .conn__node::after { background: var(--color-ivory); }
  .band--white .conn__node, .band--wash .conn__node { border-left-color: var(--color-line); }
  .top3__item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .save__row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sec-head { grid-template-columns: 1fr; gap: 10px; }
  .sec-head__num { padding-top: 0; }
  .dl__row { flex-direction: column; gap: 3px; }
  .dl__row dd { text-align: left; }
  .scanbar__field .label { display: none; }
  /* The field becomes a column: input on top, button full width beneath.
     The old rule kept the row and set the button to 100%, which pushed it
     7 to 33px past the right edge on /scan/, /how-it-works/,
     /opportunities/, /versus/ and every signal page (measured 17 Sep). */
  .scanbar__field { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: var(--radius); }
  .scanbar input { padding: 12px 12px; }
  .scanbar .btn { width: 100%; }
  .stat { border-right: 0; }
  .pickgrid { grid-template-columns: 1fr; }
  .setup__nav { flex-direction: column-reverse; align-items: stretch; }
  .setup__nav .btn { width: 100%; }
  .setup__nav > span { display: none; }
  .vs__row { grid-template-columns: 1fr; gap: 10px; }
  .vs__row--head { display: none; }
  .vs__them::before { content: "They: "; font-weight: 600; color: var(--color-muted); }
  .vs__us::before { content: "BuzzBaboon: "; font-weight: 600; color: var(--color-signal-ink); }
  .figs { gap: 18px; }
  .why__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 440px) {
  /* Measured at a true 390px: logo, Menu and the CTA together wrapped the CTA
     onto two lines. The burger becomes an icon (its label stays for screen
     readers) and the CTA tightens rather than hides: it is the primary action. */
  .nav__in { gap: 10px; }
  .nav__cta { padding: 9px 12px; font-size: 0.75rem; white-space: nowrap; }
  .nav__word { font-size: 1.1rem; }
  .nav__mark { width: 24px; height: 24px; }
  .nav__logo { gap: 7px; }
  .nav__burger { padding: 8px 11px; }
  .nav__burger::before { content: "\2630"; font-size: 1rem; line-height: 1; }
  .nav__burger .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .why__grid { grid-template-columns: 1fr; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rev, .fade, .seq__phrase, .seq__ready { opacity: 1; transform: none; }
  .hero__mascot { animation: none; }
  .hero__mascot video { display: none; }
  .map__link { stroke-dashoffset: 0; }
  .map__node { opacity: 1; }
  .card:hover { transform: none; }
}


/* ==========================================================================
   SECOND DESIGN PASS, 12 September 2026: the homepage as product theatre.

   "Apple-level polish without Apple-level emotional quietness." The scan and
   the secondary pages keep the system above. The homepage becomes eight
   scenes with a colour rhythm: ivory, near black, ivory, cobalt, slate, warm
   white, navy, near black. Depth is three layers: foreground mascot,
   mid-ground UI, background intelligence field. Motion is choreographed and
   sparse. Reduced motion collapses all of it to a static page.
   ========================================================================== */

/* --- Scenes ---------------------------------------------------------------- */

.scene { position: relative; padding-block: clamp(84px, 11vh, 156px); overflow: hidden; isolation: isolate; }
.scene--ivory  { background: var(--color-ivory); color: var(--color-ink); }
.scene--void   { background: var(--grad-void); color: var(--color-silver); }
.scene--cobalt { background: var(--color-cobalt); color: var(--color-cloud); }
.scene--slate  { background: var(--color-slate); color: var(--color-silver); }
.scene--white  { background: var(--color-ivory); color: var(--color-ink); }
.scene--navy   { background: var(--color-navy); color: var(--color-silver); }
.scene--void h1, .scene--void h2, .scene--void h3, .scene--cobalt h1, .scene--cobalt h2, .scene--cobalt h3,
.scene--slate h1, .scene--slate h2, .scene--slate h3, .scene--navy h1, .scene--navy h2, .scene--navy h3 { color: var(--color-cloud); }
.scene--void .lede, .scene--slate .lede, .scene--navy .lede { color: var(--color-silver); }
.scene--cobalt .lede { color: var(--color-cloud); }
.scene--void .label, .scene--slate .label, .scene--navy .label { color: var(--color-signal); }
.scene--cobalt .label { color: var(--color-gold); }
.scene--void .tlink, .scene--slate .tlink, .scene--navy .tlink { color: var(--color-signal); border-bottom-color: rgba(124, 174, 231, 0.36); }
.scene--cobalt .tlink { color: var(--color-cloud); border-bottom-color: rgba(230, 233, 238, 0.4); }
.scene--void .fine, .scene--slate .fine, .scene--navy .fine { color: var(--color-muted-dark); }
.scene--cobalt .fine { color: var(--color-silver); }
.scene--void .muted, .scene--slate .muted, .scene--navy .muted, .scene--cobalt .muted { color: var(--color-muted-dark); }
.scene--void .prose, .scene--slate .prose, .scene--navy .prose { color: var(--color-silver); }
.scene--cobalt .prose { color: var(--color-cloud); }
.scene > .shell { position: relative; z-index: 2; }
.scene--void .tag--demo, .scene--slate .tag--demo, .scene--navy .tag--demo, .scene--cobalt .tag--demo { color: var(--color-gold); border-color: rgba(227, 164, 31, 0.55); background: rgba(227, 164, 31, 0.10); }

/* Colour crossfade at a scene edge: the previous ground dissolves into this one. */
.scene--from-ivory::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--color-ivory) 0%, transparent 100%); opacity: 0.9; }
.scene--from-white::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--color-ivory) 0%, transparent 100%); opacity: 0.9; }

/* A scene headline: eyebrow, statement, one line. The pulse line under it
   travels once when the scene enters. */
.scene__head { max-width: 760px; margin-bottom: clamp(36px, 6vh, 72px); position: relative; }
.scene__head .display { margin-top: 14px; }
.scene__head .lede { margin-top: 18px; }
.pulse-line { position: relative; display: block; width: 72px; height: 2px; margin-top: 22px; background: var(--color-line-dark-2); border-radius: 1px; overflow: hidden; }
.scene--ivory .pulse-line, .scene--white .pulse-line { background: var(--color-line); }
.pulse-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--color-gold); border-radius: 1px; transform: translateX(-100%); }
.scene.is-in .pulse-line::after { animation: pulse-travel 1400ms var(--ease-out) 300ms forwards; }
@keyframes pulse-travel { to { transform: translateX(350%); } }

/* A gold discovery spark at the top of each scene, once, on entry. */
.scene__spark { position: absolute; top: 0; left: var(--gutter); width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); opacity: 0; z-index: 3; pointer-events: none; }
.scene.is-in .scene__spark { animation: spark 1100ms var(--ease-out) 200ms; }
@keyframes spark { 0% { opacity: 0; transform: scale(0.4); box-shadow: 0 0 0 0 rgba(227, 164, 31, 0.6); } 25% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 26px rgba(227, 164, 31, 0); } }

/* --- Entrances: elements arrive once, choreographed ------------------------ */

.enter { opacity: 0; transition: opacity var(--cine) var(--ease-out), transform var(--cine) var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms); transform: translateY(22px); }
.enter[data-enter="left"] { transform: translateX(-36px); }
.enter[data-enter="right"] { transform: translateX(36px); }
.enter[data-enter="peek"] { transform: translate(18%, 14%) rotate(3deg); }
.enter[data-enter="peek-left"] { transform: translate(-18%, 14%) rotate(-3deg); }
.enter[data-enter="rise"] { transform: translateY(60px); }
.enter[data-enter="scale"] { transform: scale(0.94); }
.enter.is-in { opacity: 1; transform: none; }

/* --- The intelligence field: faint nodes, thin paths, one found ------------ */

.ifield { position: absolute; inset: -6% -4%; width: 108%; height: 112%; z-index: 0; pointer-events: none; will-change: transform; }
.ifield__ring { fill: none; stroke: var(--color-navy); stroke-width: 1; opacity: 0.06; }
.ifield__path { fill: none; stroke: var(--color-signal-ink); stroke-width: 1; opacity: 0.16; stroke-dasharray: 6 10; animation: field-drift 28s linear infinite; animation-delay: calc(var(--i) * -3s); transition: opacity var(--slow) var(--ease), stroke var(--slow) var(--ease), stroke-width var(--slow) var(--ease); }
@keyframes field-drift { to { stroke-dashoffset: -320; } }
.ifield__path.is-found { stroke: var(--color-signal-ink); opacity: 0.85; stroke-width: 1.6; stroke-dasharray: none; animation: field-found 2600ms var(--ease-out) forwards; }
@keyframes field-found { 0% { stroke-dashoffset: 0; } 60% { opacity: 0.9; } 100% { opacity: 0.16; } }
.ifield__node { fill: var(--color-signal-ink); opacity: 0.22; transition: opacity var(--slow) var(--ease), fill var(--slow) var(--ease); }
.ifield__node.is-found { fill: var(--color-gold); opacity: 1; animation: node-found 2600ms var(--ease-out) forwards; }
@keyframes node-found { 0% { r: 2.5; } 18% { r: 6; } 100% { r: 2.5; opacity: 0.22; } }
.ifield__pulse { fill: var(--color-gold); opacity: 0; animation: field-pulse 9s var(--ease) infinite; animation-delay: calc(var(--i) * 2.7s); }
@keyframes field-pulse { 0%, 88%, 100% { opacity: 0; r: 2; } 92% { opacity: 0.9; r: 4; } 96% { opacity: 0; r: 7; } }
/* On dark grounds the field is brighter blue and the rings lighter. */
.ifield--dark .ifield__ring { stroke: var(--color-cloud); opacity: 0.05; }
.ifield--dark .ifield__path { stroke: var(--color-signal); opacity: 0.14; }
.ifield--dark .ifield__path.is-found { stroke: var(--color-signal); }
.ifield--dark .ifield__node { fill: var(--color-signal); opacity: 0.3; }

/* --- Scene 1: the hero, dimensional ---------------------------------------- */

.hero--stage { min-height: 0; }
/* The world hero, 12 September afternoon: Maheshika's aerial of the signal
   rivers is the ground, full bleed, with the transparent Baboon in the
   foreground. Three depths: media (moves least), field, copy and mascot. */
.hero--world { background: var(--color-void); color: var(--color-silver); }
.hero--world .hero__media { position: absolute; inset: -4%; z-index: 0; overflow: hidden; will-change: transform; }
.hero--world .hero__media img, .hero--world .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero--world .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7, 11, 18, 0.94) 0%, rgba(7, 11, 18, 0.86) 30%, rgba(7, 11, 18, 0.48) 54%, rgba(7, 11, 18, 0.10) 78%, rgba(7, 11, 18, 0.06) 100%),
    linear-gradient(180deg, rgba(7, 11, 18, 0.55) 0%, rgba(7, 11, 18, 0) 26%, rgba(7, 11, 18, 0.05) 70%, rgba(7, 11, 18, 0.9) 100%); }
.hero--world .hero__field { z-index: 1; opacity: 0.8; }
.hero--world .hero__grid { min-height: min(calc(100svh - var(--nav-h)), 740px); align-items: center; padding-block: clamp(18px, 3vh, 40px) clamp(36px, 5vh, 72px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
/* The Baboon sits high in the right column, in the open sky over the river,
   not stranded at the foot of the frame. The headline is one step smaller so
   the field and the CTA clear the fold on an 800px-tall screen. */
.hero--world h1 { font-size: clamp(2.4rem, 4.6vw, 4.3rem); margin-bottom: 18px; }
.hero--world .hero__lede { margin-bottom: 22px; max-width: 50ch; }
.hero--world h1 { color: var(--color-cloud); }
.hero--world .hero__lede { color: var(--color-silver); }
.hero--world .hero__micro { color: var(--color-muted-dark); }
.hero--world .hero__logo { width: clamp(190px, 20vw, 300px); margin-bottom: clamp(18px, 3vh, 30px); }
.hero--world .scanbar__field { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero--world .scanbar__field:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(227, 164, 31, 0.22), 0 20px 50px -20px rgba(0, 0, 0, 0.7); }
.hero--world .scanbar input { color: var(--color-cloud); }
.hero--world .scanbar input::placeholder { color: var(--color-muted-dark); }
.hero--world .scanbar__field .label { color: var(--color-muted-dark); border-right-color: rgba(255, 255, 255, 0.16); }
.hero--world .scanbar [data-checkerr] { color: var(--color-gold); }
.hero__mascot--world { width: 100%; margin-left: 0; animation: none; align-self: start; justify-self: end; max-width: 560px; margin-top: -2%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); }
.hero__mascot--world img { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.hero__mascot--world .hero__shadow { left: 12%; right: 12%; bottom: 0; height: 12%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 72%); }
.hero__mascot--world .hero__spark { left: 56%; top: 36%; }
.hero--world :focus-visible { outline-color: var(--color-signal); }
.hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.hero--stage .hero__grid { position: relative; z-index: 2; }
.hero__mascot { z-index: 2; }
.hero__shadow { position: absolute; left: 20%; right: 20%; bottom: 3%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 32, 58, 0.30), rgba(13, 32, 58, 0) 72%); filter: blur(8px); z-index: -1; pointer-events: none; }
.hero__spark { position: absolute; left: 61%; top: 43%; width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold); opacity: 0; pointer-events: none; }
.hero__spark.is-on { animation: hero-spark 1500ms var(--ease-out); }
@keyframes hero-spark { 0% { opacity: 0; transform: scale(0.3); box-shadow: 0 0 0 0 rgba(227, 164, 31, 0.7); } 20% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.8); box-shadow: 0 0 0 34px rgba(227, 164, 31, 0); } }
.hero__copy { position: relative; z-index: 3; }
.hero__lede--wide { max-width: 44ch; }

/* --- Scene 2: the live product demonstration -------------------------------- */

.demo { position: relative; }
.demo__label { position: absolute; top: 0; left: var(--gutter); z-index: 4; }
.demo__stage { position: relative; aspect-ratio: 16 / 9; max-height: 760px; }
.demo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__ring { fill: none; stroke: var(--color-cloud); stroke-width: 1; opacity: 0.05; }
.demo__sweep { animation: demo-sweep 26s linear infinite; transform-box: view-box; will-change: transform; }
@keyframes demo-sweep { to { transform: rotate(360deg); } }
.demo__sweep-edge { stroke: var(--color-signal); stroke-width: 1; opacity: 0.22; }
.demo__node.is-blink .demo__glow { animation: demo-blink 1400ms var(--ease) forwards; }
.demo__node.is-blink .demo__dot { animation: demo-blink-dot 1400ms var(--ease) forwards; }
@keyframes demo-blink { 0% { opacity: 0; } 35% { opacity: 0.32; } 100% { opacity: 0; } }
@keyframes demo-blink-dot { 0% { opacity: 0.5; } 35% { opacity: 1; } 100% { opacity: 0.5; } }
.demo__link { fill: none; stroke: var(--color-silver); stroke-width: 1; opacity: 0.16; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity var(--slow) var(--ease), stroke var(--slow) var(--ease); }
.demo__link.is-live { stroke: var(--color-signal); opacity: 0.9; stroke-width: 1.6; stroke-dashoffset: 1; animation: demo-draw 1100ms var(--ease-out) forwards; }
@keyframes demo-draw { to { stroke-dashoffset: 0; } }
.demo__link.is-hot { stroke: var(--color-gold); }
.demo__node { cursor: pointer; transition: opacity var(--slow) var(--ease); transform: translate(calc(var(--mx, 0) * var(--d, 0) * 18px), calc(var(--my, 0) * var(--d, 0) * 12px)); will-change: transform; }
.demo__node.is-far { --d: 0.35; opacity: 0.7; }
.demo__node.is-mid { --d: 0.7; opacity: 0.85; }
.demo__node.is-near { --d: 1.1; opacity: 1; }
.demo__drift { animation: demo-drift 14s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.3s); }
@keyframes demo-drift { from { transform: translate(0, 0); } to { transform: translate(6px, -5px); } }
.demo__dot { fill: var(--color-silver); opacity: 0.5; transition: fill var(--slow) var(--ease), opacity var(--slow) var(--ease), r var(--slow) var(--ease); }
.demo__glow { fill: var(--color-signal); opacity: 0; transition: opacity var(--slow) var(--ease); filter: blur(10px); }
.demo__name { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--color-silver); opacity: 0.85; transition: fill var(--slow) var(--ease), opacity var(--slow) var(--ease); }
.demo__node.is-live { opacity: 1; }
.demo__node.is-live .demo__dot { fill: var(--color-signal); opacity: 1; r: 7; }
.demo__node.is-live .demo__glow { opacity: 0.5; }
.demo__node.is-live .demo__name { fill: var(--color-cloud); opacity: 1; }
.demo__node.is-hot .demo__dot { fill: var(--color-gold); }
.demo__node.is-hot .demo__glow { fill: var(--color-gold); opacity: 0.6; }
.demo__node:hover .demo__dot { opacity: 1; r: 6; }
.demo__centre { fill: var(--color-gold); }
.demo__halo { fill: var(--color-gold); opacity: 0.18; filter: blur(18px); }
.demo__centre.is-hot { animation: centre-hot 1400ms var(--ease-out); }
@keyframes centre-hot { 0% { r: 9; } 30% { r: 15; } 100% { r: 9; } }
.demo__you { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--color-cloud); }
.demo__signal { fill: var(--color-coral); opacity: 0; }
.demo__node.is-live .demo__signal { animation: demo-signal 1200ms var(--ease-out); }
@keyframes demo-signal { 0% { opacity: 0; r: 2; } 30% { opacity: 1; r: 5; } 100% { opacity: 0; r: 12; } }

.demo__chain { position: absolute; right: 4%; top: 10%; width: 320px; z-index: 3; }
.demo__lead { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--color-cloud); margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line-dark-2); text-wrap: pretty; }
.demo__steps { display: grid; gap: 0; }
.demo__step { position: relative; padding: 0 0 18px 26px; font-family: var(--display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-cloud); opacity: 0; transform: translateY(8px); transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); min-height: 2.1em; }
.demo__step::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal); }
.demo__step::after { content: ""; position: absolute; left: 7px; top: 1.2em; bottom: 0; width: 1px; background: var(--color-line-dark-2); }
.demo__step:last-child::after { display: none; }
.demo__step:last-child::before { background: var(--color-gold); }
.demo__step:not(.is-in) { opacity: 1; transform: none; color: transparent; background: linear-gradient(var(--color-line-dark-2) 0 0) no-repeat 26px 0.42em / 58% 7px; border-radius: 4px; }
.demo__step:not(.is-in):nth-child(2) { background-size: 44% 7px; }
.demo__step:not(.is-in):nth-child(3) { background-size: 66% 7px; }
.demo__step:not(.is-in):nth-child(4) { background-size: 52% 7px; }
.demo__step:not(.is-in)::before { background: var(--color-line-dark-2); }
.demo__step.is-in { opacity: 1; transform: none; color: var(--color-cloud); background: none; }
.demo__verdict { margin-top: 6px; opacity: 0; transform: translateY(6px); transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
.demo__verdict.is-in { opacity: 1; transform: none; }
.demo__status { position: absolute; left: 4%; top: 12%; z-index: 3; font-size: 0.688rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-dark); }

.demo__panel { position: absolute; left: 4%; bottom: 6%; width: min(520px, 60%); z-index: 3; background: rgba(16, 23, 34, 0.72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--color-line-dark-2); border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-dark); opacity: 0; transform: translateY(28px); transition: opacity var(--cine) var(--ease-out), transform var(--cine) var(--ease-out); }
.demo__panel.is-in { opacity: 1; transform: none; }
.demo__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--color-line-dark); align-items: baseline; }
.demo__row:first-child { border-top: 0; padding-top: 0; }
.demo__k { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }
.demo__row:nth-child(2) .demo__k { color: var(--color-signal); }
.demo__row:nth-child(3) .demo__k { color: var(--color-coral-lift); }
.demo__v { font-size: 0.975rem; line-height: 1.45; color: var(--color-cloud); transition: opacity 420ms var(--ease); }
.demo__panel.is-swap .demo__v, .demo__verdict.is-swap { opacity: 0.15; }

/* --- Scene 3: what you get, three cinematic panels -------------------------- */

.gives { display: grid; gap: 0; }
.gives__panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(44px, 7vh, 88px) 0; border-top: 1px solid var(--color-line); }
.gives__panel:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.gives__panel:nth-child(even) .gives__copy { order: 2; }
.gives__panel:nth-child(even) .gives__art { order: 1; justify-content: flex-start; }
.gives__n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-gold-ink); font-variant-numeric: tabular-nums; }
.gives__k { display: block; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.04em; line-height: 0.95; color: var(--color-navy); }
.gives__panel:nth-child(1) .gives__k { color: var(--color-signal-ink); }
.gives__panel:nth-child(2) .gives__k { color: var(--color-gold-ink); }
.gives__panel:nth-child(3) .gives__k { color: var(--color-coral-ink); }
.gives__t { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-ink); max-width: 18ch; text-wrap: balance; }
.gives__d { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--color-body); max-width: 40ch; }
.gives__art { display: flex; justify-content: flex-end; position: relative; }
.gives__art img { width: clamp(180px, 22vw, 300px); height: auto; filter: drop-shadow(0 26px 30px rgba(13, 32, 58, 0.18)); }
.gives__art::before { content: ""; position: absolute; inset: 10% -10% -8%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-gold-soft), transparent 70%); z-index: -1; }

/* --- Scene 4: the CEO Brief, the product carrying the section ---------------- */

.brief-scene { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.brief-scene__copy .display { color: var(--color-cloud); }
.brief-scene__stage { position: relative; }
.bbrief--xl { max-width: 640px; padding: clamp(30px, 4vw, 48px); border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 50px 100px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); transition: transform var(--slow) var(--ease); }
.brief-scene__stage:hover .bbrief--xl { transform: perspective(1400px) rotateY(-1deg) rotateX(0.5deg); }
.bbrief--xl .bbrief__k { font-size: 1.2rem; }
.bbrief--xl .bbrief__t { font-size: 1.02rem; }
.brief-scene__baboon { position: absolute; right: -6%; bottom: -12%; width: clamp(150px, 16vw, 230px); z-index: 3; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.45)); pointer-events: none; }
.brief-scene__baboon img { width: 100%; height: auto; }
.scene--cobalt .bbrief__logo em { color: var(--color-gold-ink); }

/* --- Scene 5: the real map ------------------------------------------------- */

.mapscene { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mapscene .map__svg { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5)); }
.scene--slate .map__node { transform-box: fill-box; transform-origin: center; transition: transform var(--mid) var(--ease); }
.scene--slate .map__node:hover { transform: scale(1.12); }
.dots { display: grid; gap: 14px; }
.dots__i { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.dots__n { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--color-gold); line-height: 1; }
.dots__t { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--color-cloud); }
.dots__d { display: block; margin-top: 3px; font-size: 0.875rem; color: var(--color-silver); font-family: var(--sans); font-weight: 400; }

/* Light scenes share every light-band variant above: generated twins follow the
   originals, one per rule, so the anatomy reads on ivory as well as on void. */
/* --- Scene 6: deep insight, calm on top ------------------------------------ */

.deep { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.deep__copy { position: sticky; top: 100px; }
.deep__stage { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--shadow-2); position: relative; }
.deep__stage .ins { border-top: 0; padding-top: 0; }
.deep__stage .ins__body { max-width: none; }
.deep__lens { position: absolute; right: -28px; top: -34px; width: 96px; height: auto; transform: rotate(14deg); filter: drop-shadow(0 12px 16px rgba(13, 32, 58, 0.25)); pointer-events: none; }
.deep__layers { display: grid; gap: 8px; margin-top: 26px; }
.deep__layers li { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); padding-left: 18px; position: relative; }
.deep__layers li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 2px; background: var(--color-gold); border-radius: 1px; }

/* --- Scene 7: keep watching, the horizon --------------------------------- */

.horizon { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.horizon__line { position: absolute; left: 0; right: 0; bottom: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 174, 231, 0.5) 30%, rgba(124, 174, 231, 0.5) 70%, transparent); z-index: 1; }
.horizon__baboon { display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 2; }
.horizon__baboon img { width: clamp(220px, 26vw, 360px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }

/* The Signature scene on /pricing/. Its own layout rather than .horizon,
   which aligns to the baseline for the standing sentinel and left this
   seated pose floating above a gap. */
.sig-scene { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.sig-scene__art { display: flex; justify-content: center; }
.sig-scene__art img { width: clamp(200px, 24vw, 330px); height: auto; filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.45)); }
@media (max-width: 900px) {
  .sig-scene { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sig-scene__art img { width: clamp(180px, 46vw, 240px); }
}

/* --- Scene 8: the finale ------------------------------------------------- */

.finale-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 80px); align-items: center; position: relative; z-index: 2; }
.finale-stage .display { color: var(--color-cloud); }
.finale__baboon { position: relative; display: flex; justify-content: center; }
.finale__baboon img { width: clamp(260px, 32vw, 520px); height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); position: relative; z-index: 2; }
.finale__halo { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 164, 31, 0.28), transparent 70%); filter: blur(20px); z-index: 1; }
.scene--void .scanbar__field { background: rgba(255, 255, 255, 0.06); border-color: var(--color-line-dark-2); box-shadow: none; }
.scene--void .scanbar input { color: var(--color-cloud); }
.scene--void .scanbar__field .label { color: var(--color-muted-dark); border-right-color: var(--color-line-dark-2); }
.scene--void .scanbar [data-checkerr] { color: var(--color-gold); }
.scene--navy .scanbar__field { background: rgba(255, 255, 255, 0.06); border-color: var(--color-line-dark-2); box-shadow: none; }
.scene--navy .scanbar input { color: var(--color-cloud); }
.scene--navy .scanbar__field .label { color: var(--color-muted-dark); border-right-color: var(--color-line-dark-2); }
.scene--navy .scanbar [data-checkerr] { color: var(--color-gold); }

/* --- Responsive for the scenes ------------------------------------------- */

@media (max-width: 1000px) {
  .demo__chain { width: 240px; }
  .demo__panel { width: min(460px, 56%); }
}
@media (max-width: 900px) {
  .hero--world .hero__grid { min-height: 0; align-items: start; grid-template-columns: minmax(0, 1fr); }
  .hero__mascot--world { max-width: 320px; margin: 0 auto; justify-self: center; }
  .hero--world .hero__media img, .hero--world .hero__media video { object-position: 50% 50%; }
  .hero--world .hero__veil { background: linear-gradient(180deg, rgba(7, 11, 18, 0.92) 0%, rgba(7, 11, 18, 0.78) 45%, rgba(7, 11, 18, 0.6) 70%, rgba(7, 11, 18, 0.95) 100%); }
  .hero__mascot--world .hero__shadow { display: none; }
  .gives__panel, .gives__panel:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .gives__panel:nth-child(even) .gives__copy { order: 1; }
  .gives__panel:nth-child(even) .gives__art { order: 2; }
  .gives__art { justify-content: flex-start; }
  .gives__art img { width: 160px; }
  .brief-scene, .mapscene, .deep, .horizon, .finale-stage { grid-template-columns: 1fr; }
  .deep__copy { position: static; }
  .bbrief--xl { transform: none; }
  .brief-scene__baboon { right: 0; bottom: -8%; width: 130px; }
  .finale__baboon { order: -1; }
  .finale__baboon img { width: 240px; }
  .horizon__baboon img { width: 200px; }
  .deep__lens { width: 64px; right: -10px; top: -22px; }
}
@media (max-width: 760px) {
  /* The demonstration recomposes: the constellation, then the chain, then the panel. */
  .demo__stage { aspect-ratio: auto; display: grid; gap: 18px; }
  .demo__svg { position: relative; aspect-ratio: 4 / 3; }
  .demo__chain, .demo__panel, .demo__status { position: static; width: auto; }
  .demo__status { order: -1; }
  .demo__panel { transform: none; }
  .demo__row { grid-template-columns: 1fr; gap: 4px; }
  .demo__label { position: static; display: inline-block; margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .enter { opacity: 1; transform: none; }
  .ifield__path, .ifield__pulse, .demo__drift, .demo__node.is-live .demo__signal { animation: none; }
  .demo__step, .demo__verdict, .demo__panel { opacity: 1; transform: none; }
  .demo__link.is-live { stroke-dashoffset: 0; animation: none; }
  .bbrief--xl { transform: none; }
  .scene.is-in .scene__spark, .scene.is-in .pulse-line::after { animation: none; }
  .pulse-line::after { transform: translateX(350%); }
}

/* --- pricing tiers -------------------------------------------------------
   Restored 16 September 2026 with the pricing page. The rules were deleted
   when the page was archived on 12 September, so the restored markup rendered
   as unstyled blocks: four full-width stacks and page-wide inputs. The gate
   now scans every built page for orphaned classes, not a fixed list, so this
   cannot recur silently. Four columns on a wide screen, two on a tablet, one
   on a phone; the featured tier lifts rather than growing, so the row keeps
   its rhythm. */
/* A band that follows its own intro: the two were separate bands and the
   stacked padding left a void between the copy and the cards. */
.band--flush { padding-top: 0; }

/* The waiting-list form in the pricing hero. The hero told the visitor to
   join a list and then made them scroll to find one (Maheshika, 17 Sep).
   Field and button on one line, stacking on a phone. */
.wl { max-width: 520px; }
.wl__row { display: flex; gap: 10px; align-items: stretch; }
.wl__row input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 15px 18px; font: inherit; font-size: 0.938rem;
  color: var(--color-cloud); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-pill);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wl__row input[type="email"]::placeholder { color: var(--color-silver); }
.wl__row input[type="email"]:focus-visible { outline: none; border-color: var(--color-gold); background: rgba(255, 255, 255, 0.09); }
.wl__row .btn { flex: 0 0 auto; white-space: nowrap; }
.wl__fine { font-size: 0.813rem; color: var(--color-silver); margin-top: 12px; }
@media (max-width: 620px) {
  .wl__row { flex-direction: column; }
  .wl__row .btn { width: 100%; }
}

/* The pricing hero: copy left, the sentinel right, on the near-black ground
   with the intelligence field behind it. Same shape as the homepage hero so
   the page belongs to the same site (16 September: the restored page was a
   flat white band in a cinematic house and read as a different product). */
/* The hero must not run past the fold: the headline, the promise and the
   waiting-list form all belong above it. */
.price-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
#price-hero { padding-block: clamp(48px, 6vh, 84px); }
.price-hero__baboon { position: relative; justify-self: center; max-width: 340px; width: 100%; }
/* The animated sentinel: VP9 with a real alpha channel, the white plate keyed
   out in ffmpeg. ONE element, not a video layered over a still: layering them
   showed both baboons at once when the box and the image disagreed on height
   (17 September). The poster is the same pose, so a browser that cannot
   decode VP9 alpha shows the still frame in the same place, and the <img>
   inside the <video> catches anything older still. */
.price-hero__baboon video, .price-hero__baboon img { position: relative; width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .price-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .price-hero__baboon { max-width: 260px; order: -1; }
}
.tiers {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tier {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  background: var(--color-white); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-1);
  transition: box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.tier:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tier--feature {
  border-color: var(--color-gold); box-shadow: var(--shadow-2);
  transform: translateY(-8px);
}
.tier--feature:hover { transform: translateY(-10px); }
.tier__price { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--color-ink); letter-spacing: -0.02em; }
.tier__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.875rem; color: var(--color-body); }
.tier__list li { position: relative; padding-left: 20px; line-height: 1.5; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold);
}
.tier__cta { margin-top: auto; padding-top: 20px; }
/* The label stays on one line: "Join the waiting list" wrapped at four
   columns and the cards lost their rhythm. */
.tier__cta .btn { width: 100%; padding-inline: 14px; white-space: nowrap; }
.tier__cta .btn__arw { margin-left: 2px; }
@media (min-width: 1081px) and (max-width: 1320px) {
  .tier__cta .btn { font-size: 0.813rem; }
}
.tier__form { gap: 10px; }
.tier__form input[type="email"] {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 0.875rem;
  color: var(--color-ink); background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.tier__form input[type="email"]:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; border-color: var(--color-gold); }
.tier__form .field__help { font-size: 0.75rem; margin: 0; }

@media (max-width: 1080px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier--feature, .tier--feature:hover { transform: none; }
}
@media (max-width: 620px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
}

/* The homepage price strip: four figures on slate, before the finale, so the
   price is met while scrolling rather than hunted for in the nav. */
.pricestrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pricestrip__i {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-line-dark-2);
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.pricestrip__i:hover { border-color: var(--color-silver); transform: translateY(-2px); }
.pricestrip__i--on { border-color: var(--color-gold); background: rgba(227, 164, 31, 0.09); }
.pricestrip__p { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--color-cloud); letter-spacing: -0.02em; line-height: 1.05; }
.pricestrip__i--on .pricestrip__p { color: var(--color-gold); }
.pricestrip__k { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-silver); }
.pricestrip__d { font-size: 0.875rem; color: var(--color-silver); line-height: 1.55; margin-top: 4px; }
@media (max-width: 960px) { .pricestrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pricestrip { grid-template-columns: minmax(0, 1fr); } }

/* In-page anchors clear the fixed nav. The footer's "Report a missing signal"
   lands on /sources/#submit, which sat under the bar (launch audit, 17 Sep). */
#submit, .band[id], .scene[id] { scroll-margin-top: 96px; }

@media print {
  .nav, .foot, .ins__acts, .ask__qs, .seq__field { display: none; }
  body { background: var(--color-white); color: var(--color-ink); }
  .band { padding-block: 20px; }
}