/* ==========================================================================
   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: 22px; align-items: center; }
/* eight links since 3 November 2026 (Trade lanes, Buyer Book): never let one wrap onto two lines */
.nav__links a { font-size: 0.813rem; font-weight: 500; letter-spacing: 0.01em; color: var(--color-body); white-space: nowrap; 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); white-space: nowrap;
  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; }
}

/* --- made here: the sovereignty record's first public page, 2 November 2026 --- */
.mh { list-style: none; margin: 0; padding: 0; display: grid; }
.mh__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 170px; gap: 16px 28px; padding: clamp(22px, 3.5vh, 34px) 0; border-top: 1px solid var(--color-line); align-items: start; }
.mh__row:first-child { border-top-color: var(--color-ink); }
.mh__n { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; color: var(--color-gold-ink); padding-top: 4px; font-variant-numeric: tabular-nums; }
.mh__t { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-ink); text-wrap: pretty; }
.mh__code { display: inline-block; margin-left: 10px; font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--color-muted); font-variant-numeric: tabular-nums; vertical-align: middle; }
.mh__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 26px; margin-top: 14px; }
.mh__facts > div { display: grid; gap: 4px; }
.mh__k { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold-ink); }
.mh__v { font-size: 0.875rem; line-height: 1.5; color: var(--color-body); }
.mh__why { margin-top: 12px; font-size: 0.813rem; line-height: 1.55; color: var(--color-muted); max-width: 76ch; }
.mh__bill { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); text-align: right; font-variant-numeric: tabular-nums; }
.mh__bill small { display: block; margin-top: 6px; font-family: var(--sans); font-weight: 500; font-size: 0.688rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.mh__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; position: relative; }
.mh__stat { padding: 22px 22px 20px; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-surface-dark); display: grid; gap: 8px; }
.mh__stat b { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--color-cloud); font-variant-numeric: tabular-nums; }
.mh__stat span { font-size: 0.813rem; line-height: 1.5; color: var(--color-silver); }
.mh__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mh__list li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.875rem; line-height: 1.5; }
.mh__list b { color: var(--color-white); font-weight: 600; }
.mh__opt { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--color-silver); max-width: 56ch; cursor: pointer; }
.mh__opt input { margin-top: 4px; accent-color: var(--color-gold); }
@media (max-width: 620px) {
  .mh__row { grid-template-columns: 30px minmax(0, 1fr); gap: 12px 16px; }
  .mh__bill { grid-column: 2; text-align: left; }
}

/* --- made here: the country picker and the country grid, 2 November 2026 --- */
.mh__pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; position: relative; z-index: 2; }
.mh__pick label { font-size: 0.688rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted-dark); }
.mh__pick select { appearance: none; -webkit-appearance: none; background-color: var(--color-navy-mid); color: var(--color-cloud); border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-sm); padding: 12px 42px 12px 16px; font: 500 0.95rem/1.2 var(--sans); min-width: 260px; max-width: 100%; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-gold) 50%), linear-gradient(135deg, var(--color-gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.mh__pick select:hover { border-color: var(--color-silver); }
.mh__pick select:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.mhc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mhc a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: 0.9rem; box-shadow: var(--shadow-1); }
.mhc a:hover { border-color: var(--color-ink); }
.mhc a span { font-size: 0.75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh__thin { font-size: 0.813rem; color: var(--color-muted); line-height: 1.6; max-width: 90ch; }
@media (max-width: 620px) { .mh__pick select { width: 100%; } }

/* --- made here: the gaps most countries share, 2 November 2026 --- */
.mhg { max-width: 900px; margin-bottom: 8px; }
.mhg__list { list-style: none; margin: 0; padding: 0; counter-reset: gap; display: grid; }
.mhg__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 170px; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--color-line); align-items: baseline; counter-increment: gap; }
.mhg__list li::before { content: counter(gap); font-family: var(--display); font-weight: 600; color: var(--color-gold-ink); font-variant-numeric: tabular-nums; }
.mhg__list li:first-child { border-top-color: var(--color-ink); }
.mhg__t { font-weight: 600; color: var(--color-ink); font-size: 0.95rem; }
.mhg__n { font-size: 0.813rem; color: var(--color-body); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mhg__v { grid-column: 2 / 4; font-size: 0.813rem; color: var(--color-muted); }
@media (max-width: 620px) { .mhg__list li { grid-template-columns: 24px minmax(0, 1fr); } .mhg__n { grid-column: 2; text-align: left; } .mhg__v { grid-column: 2; } }
.mhc a.mhc--full { border-color: var(--color-gold-ink); }
.mhc a.mhc--full span { color: var(--color-gold-ink); }

/* ---- Trade lanes (/lanes/), 3 November 2026 ------------------------------
   Appended by the integrator after the .mh* block. Tokens only, no raw hex.
   The lane pages reuse .mh, .mh__row, .mh__facts, .mh__stats, .mhc, .wl and
   .mh__pick; these rules add the compact lists for the four smaller lists. */
.ln__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 0 36px; }
.ln__item { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--color-line); font-size: 0.875rem; line-height: 1.5; min-width: 0; }
.ln__item b { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-ink); text-wrap: pretty; }
.ln__code { font-size: 0.688rem; font-weight: 500; letter-spacing: 0.08em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ln__v { color: var(--color-body); font-variant-numeric: tabular-nums; }
.scene--cobalt .ln__item, .scene--slate .ln__item, .scene--navy .ln__item, .scene--void .ln__item { border-top-color: rgba(255, 255, 255, 0.16); }
.scene--cobalt .ln__item b, .scene--slate .ln__item b, .scene--navy .ln__item b, .scene--void .ln__item b { color: var(--color-white); }
.scene--cobalt .ln__code, .scene--slate .ln__code, .scene--navy .ln__code, .scene--void .ln__code { color: var(--color-silver); }
.scene--cobalt .ln__v, .scene--slate .ln__v, .scene--navy .ln__v, .scene--void .ln__v { color: var(--color-cloud); }
.ln__honest { font-weight: 600; color: var(--color-cloud); }
.ln__year { color: var(--color-silver); }
/* An exporter with a lane page is a link inside the heading: it keeps the
   heading's size and weight (the .tlink default is 0.813rem, which made China
   and India small beside Pakistan on /lanes/sri-lanka/; Maheshika, 3 Nov). */
.mh__t .tlink { color: inherit; font: inherit; letter-spacing: inherit; display: inline; padding-bottom: 2px; border-bottom: 2px solid rgba(42, 96, 153, 0.35); }
.mh__t .tlink:hover { color: var(--color-signal-ink); border-color: var(--color-signal-ink); }
/* A country name on /lanes/<importer>/ is the row's subject: bigger than a product line (Maheshika, 3 Nov). */
.mh__t--country { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.025em; }
/* Bold labels inside prose on the dark scenes. .prose strong is ink, and the
   band twins cover .band--dark but no .scene--*, so on the navy method scene
   of every Made here country page the bold labels ("Import bill", "Scope")
   are ink on navy and all but invisible. Found on the lane pages 3 November;
   this rule fixes both families. */
.scene--void .prose strong, .scene--navy .prose strong, .scene--slate .prose strong, .scene--cobalt .prose strong { color: var(--color-cloud); }
/* On a phone the value of a top-50 line reads first, under its number. */
@media (max-width: 620px) {
  .ln__top .mh__bill { grid-column: 2; grid-row: 1; }
  .ln__top .mh__row > div:not(.mh__bill) { grid-column: 2; grid-row: 2; }
  .ln__top .mh__n { grid-row: 1; }
}

/* The Buyer Book samplers (/buyer-book/ and /buyer-book/<hs4>/), 3 November
   2026. Append to public/css/buzzbaboon.css; palette tokens only, no raw
   hexes. Reuses .mh__stats, .mh__stat, .mhc, .wl, .mh__opt from the Made
   here block. No rule here positions or transforms .field. */
.bbk { list-style: none; margin: 0; padding: 0; display: grid; }
.bbk__row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 12px 24px; padding: 18px 0; border-top: 1px solid var(--color-line); align-items: baseline; }
.bbk__row:first-child { border-top-color: var(--color-ink); }
.bbk__c { display: grid; gap: 4px; min-width: 0; }
.bbk__c b { font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); }
.bbk__c span { font-size: 0.75rem; line-height: 1.45; color: var(--color-muted); }
.bbk__n { display: grid; gap: 4px; text-align: right; }
.bbk__n b { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.bbk__k { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold-ink); }
.bbk__held { margin-top: 36px; padding: 24px 26px; border: 1px solid var(--color-line); border-left: 4px solid var(--color-gold); border-radius: var(--radius-sm); background: var(--color-white); box-shadow: var(--shadow-1); max-width: 860px; display: grid; gap: 10px; }
.bbk__held p { font-size: 0.95rem; line-height: 1.6; color: var(--color-body); margin: 0; }
.bbc a { align-items: flex-start; flex-direction: column; gap: 6px; }
@media (max-width: 620px) {
  .bbk__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; padding: 16px 0; }
  .bbk__c { grid-column: 1 / -1; }
  .bbk__n { text-align: left; }
  .bbk__held { padding: 20px 18px; }
}

/* The procurement search (/search/) and the public-buyer pages (/buyers/),
   4 November 2026. Append to public/css/buzzbaboon.css. Palette tokens only,
   no raw hexes. Reuses .mh__stats, .mh__stat, .mhc, .wl, .scene, .split,
   .prose, .tlink, .btn from the existing sheet. No rule here positions or
   transforms .field. */

/* the box, on the dark hero */
.srch__box { display: flex; gap: 10px; align-items: stretch; max-width: 760px; position: relative; z-index: 2; }
.srch__box input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-line-dark-2); background: var(--color-surface-dark-2); color: var(--color-cloud); font: 500 1.05rem/1.3 var(--sans); }
.srch__box input[type="search"]::placeholder { color: var(--color-muted-dark); }
.srch__box input[type="search"]:focus-visible { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--glow-gold-soft); }
.srch__box .btn { flex: 0 0 auto; white-space: nowrap; }
.srch__try { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 22px; position: relative; z-index: 2; }
.srch__ex { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; line-height: 1.5; }
.srch__jump { position: relative; z-index: 2; }

/* the filter bar, on the light band */
.srch__band { padding-block: clamp(48px, 7vh, 88px); }
.srch__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-white); box-shadow: var(--shadow-1); }
.srch__f { display: grid; gap: 6px; min-width: 0; }
.srch__f--wide { grid-column: span 2; }
.srch__f label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted); }
.srch__f select, .srch__f input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-xs); background: var(--color-ivory); color: var(--color-ink); font: 500 0.9rem/1.25 var(--sans); }
.srch__f select:focus-visible, .srch__f input:focus-visible { outline: 2px solid var(--color-signal-ink); outline-offset: 1px; }
.srch__chip { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin: 0; font-size: 0.875rem; color: var(--color-body); }
.srch__chip b { color: var(--color-ink); font-weight: 600; }
.srch__clear { border: 1px solid var(--color-line); background: var(--color-ivory); color: var(--color-signal-ink); border-radius: var(--radius-pill); padding: 4px 12px; font: 600 0.75rem/1.3 var(--sans); cursor: pointer; }
.srch__count { margin: 26px 0 10px; font-size: 0.938rem; color: var(--color-body); min-height: 1.5em; }

/* the rows: one renderer, used by the search and by the buyer pages */
.srch__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--color-ink); }
.srch__row { padding: 20px 0 22px; border-bottom: 1px solid var(--color-line); display: grid; gap: 8px; min-width: 0; }
.srch__top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.srch__badge { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); color: var(--color-muted); background: var(--color-white); white-space: nowrap; }
.srch__badge--open { color: var(--color-navy); background: var(--color-gold); border-color: var(--color-gold); }
.srch__badge--early { color: var(--color-signal-ink); background: var(--color-signal-wash); border-color: var(--color-signal-wash); }
.srch__badge--award { color: var(--color-ink); background: var(--color-stone); border-color: var(--color-stone); }
.srch__badge--closed { color: var(--color-muted); }
.srch__when { font-size: 0.813rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.srch__t { font-family: var(--display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; overflow-wrap: anywhere; }
.srch__t a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-line); }
.srch__t a:hover, .srch__t a:focus-visible { border-bottom-color: var(--color-signal-ink); color: var(--color-signal-ink-deep); }
.srch__meta { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-body); overflow-wrap: anywhere; }
.srch__ex-t { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-body); max-width: 78ch; }
.srch__val { margin: 0; font-size: 0.875rem; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.srch__prov { margin: 0; font-size: 0.75rem; line-height: 1.55; color: var(--color-muted); }
.srch__empty { padding: 30px 26px; margin-top: 10px; border: 1px solid var(--color-line); border-left: 4px solid var(--color-gold); border-radius: var(--radius-sm); background: var(--color-white); }
.srch__empty h2 { color: var(--color-ink); }
.srch__empty p { color: var(--color-body); max-width: 70ch; }
.srch__more { margin-top: 26px; background: var(--color-white); color: var(--color-ink); border-color: var(--color-line); }
.srch__more:hover { border-color: var(--color-ink); }
.srch__fdesc { color: var(--color-cloud); font-weight: 600; }
.srch__not { color: var(--color-cloud); font-weight: 500; }

/* the buyer pages */
.byr__name { overflow-wrap: anywhere; }
.byr__band { padding-block: clamp(56px, 8vh, 104px); }
.byr__band + .byr__band { border-top: 1px solid var(--color-line); }
.byr__region + .byr__region { margin-top: clamp(48px, 7vh, 80px); }

/* phones: one column, the box stacks */
@media (max-width: 900px) {
  .srch__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .srch__box { flex-direction: column; }
  .srch__box .btn { width: 100%; }
  .srch__filters { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .srch__f--wide { grid-column: auto; }
  .srch__row { padding: 18px 0; }
  .srch__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .srch__stats .mh__stat { padding: 16px 14px; }
}

/* --- the Reports page, 5 November 2026 ------------------------------------
   Four report cards on ivory, each with its criteria form; the order steps on
   navy. Light-scene colours only: ink, body, gold-ink, signal-ink. */
.rpt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.rpt { display: flex; flex-direction: column; gap: 8px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 30px 28px 26px; box-shadow: var(--shadow-1); transition: box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease); }
.rpt:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.rpt .display { color: var(--color-ink); }
.rpt__price { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; color: var(--color-ink); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.rpt__price[data-fixed="true"]::after { content: "fixed"; display: inline-block; margin-left: 10px; vertical-align: middle; font-family: var(--sans); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy); background: var(--color-gold); border-radius: var(--radius-pill); padding: 4px 9px; }
.rpt__sub { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-body); text-wrap: pretty; }
.rpt__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.875rem; color: var(--color-body); }
.rpt__list li { position: relative; padding-left: 20px; line-height: 1.5; }
.rpt__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); }
.rpt__k { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold-ink); margin-bottom: 8px; }
.rpt__samples { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-line); display: grid; gap: 6px; font-size: 0.875rem; }
.rpt__samples .tlink { justify-self: start; }
.rpt__form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-line); display: grid; gap: 12px; }
.rpt__field { display: grid; gap: 6px; }
.rpt__field label { font-size: 0.75rem; font-weight: 600; color: var(--color-ink); }
.rpt__field input, .rpt__field select, .rpt__row input[type="email"] { width: 100%; box-sizing: border-box; background: var(--color-surface-light); color: var(--color-ink); border: 1px solid var(--color-light-border); border-radius: var(--radius-sm); padding: 11px 14px; font: 500 0.9rem/1.3 var(--sans); }
.rpt__field input::placeholder, .rpt__row input[type="email"]::placeholder { color: var(--color-muted); }
.rpt__field input:focus-visible, .rpt__field select:focus-visible, .rpt__row input[type="email"]:focus-visible { outline: none; border-color: var(--color-signal-ink); box-shadow: 0 0 0 3px var(--color-signal-wash); }
.rpt__field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-gold-ink) 50%), linear-gradient(135deg, var(--color-gold-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.rpt__hint { font-size: 0.75rem; line-height: 1.5; color: var(--color-muted); }
.rpt__row { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.rpt__row .btn { flex: 0 0 auto; white-space: nowrap; }
.rpt__fine { margin: 0; font-size: 0.75rem; line-height: 1.55; color: var(--color-body); }
.rpt__only { margin-top: 16px; padding: 14px 16px; background: var(--color-gold-wash); border-left: 3px solid var(--color-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rpt__only .rpt__k { margin-bottom: 6px; }
.rpt__only p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--color-ink); }
.rpt-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.rpt-who__col { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.rpt-who__col .lede { font-size: 1.05rem; }
.rpt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.rpt-step { display: grid; gap: 12px; padding: 22px 22px 20px; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-surface-dark); }
.rpt-step b { font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; color: var(--color-gold); }
.rpt-step span { font-size: 0.875rem; line-height: 1.55; color: var(--color-silver); }
@media (max-width: 960px) { .rpt-grid { grid-template-columns: 1fr; } .rpt-who { grid-template-columns: 1fr; } .rpt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rpt { padding: 24px 18px 20px; } .rpt__row { flex-direction: column; } .rpt__row .btn { width: 100%; } .rpt-steps { grid-template-columns: 1fr; } }

/* --- the grouped nav and the company page, 5 November 2026 ---------------
   Maheshika: "too many headers on the site, group some of them". Two groups,
   The record and Company, open on hover and on keyboard focus (no script);
   inside the phone menu they lie flat under their label. */
.nav__grp { position: relative; }
.nav__grp-btn { background: none; border: 0; padding: 0; cursor: pointer; font: 500 0.813rem/1 var(--sans); letter-spacing: 0.01em; color: var(--color-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nav__grp-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav--dark .nav__grp-btn, body[data-theme="dark"] .nav__grp-btn { color: var(--color-silver); }
.nav__grp:hover .nav__grp-btn, .nav__grp:focus-within .nav__grp-btn { color: var(--color-ink); }
.nav--dark .nav__grp:hover .nav__grp-btn, .nav--dark .nav__grp:focus-within .nav__grp-btn, body[data-theme="dark"] .nav__grp:hover .nav__grp-btn { color: var(--color-white); }
.nav__menu { position: absolute; top: 100%; left: -18px; padding-top: 14px; display: none; min-width: 200px; z-index: 60; }
.nav__menu::before { content: ""; position: absolute; inset: 14px 0 0 0; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); z-index: -1; }
.nav--dark .nav__menu::before, body[data-theme="dark"] .nav__menu::before { background: var(--color-deep); border-color: var(--color-line-dark-2); }
.nav__grp:hover .nav__menu, .nav__grp:focus-within .nav__menu { display: grid; gap: 2px; padding-bottom: 10px; }
.nav__menu a { display: block; padding: 10px 18px; }
@media (max-width: 900px) {
  .nav__links.is-open .nav__grp { display: grid; gap: 12px; }
  .nav__links.is-open .nav__grp-btn { cursor: default; font-size: 0.688rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-ink); }
  .nav--dark .nav__links.is-open .nav__grp-btn { color: var(--color-gold); }
  .nav__links.is-open .nav__grp-btn::after { display: none; }
  .nav__links.is-open .nav__menu { position: static; display: grid; gap: 12px; padding: 0 0 0 12px; min-width: 0; }
  .nav__links.is-open .nav__menu::before { display: none; }
  .nav__links.is-open .nav__menu a { padding: 0; }
}
.ab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 72px); }
.ab-pair .display { color: var(--color-ink); }
.ab-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-value { display: grid; gap: 10px; align-content: start; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-1); }
.ab-value b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--color-gold-ink); font-variant-numeric: tabular-nums; }
.ab-value .display { color: var(--color-ink); }
.ab-value p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--color-body); }
@media (max-width: 960px) { .ab-pair { grid-template-columns: 1fr; } .ab-values { grid-template-columns: 1fr; } }

/* ---- the council cards, 5 November 2026 (scripts/councils/styles.css) ---- */
/* "Ending at your council in 2027": /councils/ and /councils/<slug>/,
   5 November 2026. Append to public/css/buzzbaboon.css. Palette tokens only,
   no raw hexes; every class is prefixed cc-. Reuses .scene, .shell, .split,
   .prose, .mh__stats, .price-hero, .wl, .btn, .act and .tlink from the sheet.
   No rule here positions or transforms .field. */

/* the card page hero: words left, the card right, one column on phones */
.cc-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; position: relative; z-index: 2; }
.cc-h b, .cc-lede b { color: var(--color-gold); font-weight: 700; }
.cc-links { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cc-window { max-width: 760px; }
.cc-not { font-weight: 600; }

/* the share card, as HTML: the PNG drawn by bb-council-card.js mirrors it */
.cc-card { margin: 0; display: grid; gap: 16px; }
.cc-cardin {
  position: relative; overflow: hidden; display: grid;
  grid-template-rows: auto auto 1fr auto auto; gap: 10px; padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius); border: 1px solid var(--color-line-dark-2);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--glow-signal), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, var(--glow-gold-soft), transparent 60%),
    var(--color-void);
  box-shadow: 0 30px 80px -40px var(--glow-gold-soft), inset 0 1px 0 var(--color-surface-dark-2);
}
.cc-cname { font: 600 clamp(0.62rem, 1.1vw, 0.8rem)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-signal); overflow-wrap: anywhere; }
.cc-cn { font: 600 clamp(1.1rem, 2.4vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--color-cloud); }
.cc-cn b { color: var(--color-gold); font-weight: 700; }
.cc-bars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: stretch; height: clamp(84px, 11vw, 124px); }
.cc-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.cc-bar b { font: 700 0.62rem/1 var(--sans); color: var(--color-cloud); font-variant-numeric: tabular-nums; }
.cc-bar i { font: 600 0.56rem/1.4 var(--sans); font-style: normal; color: var(--color-muted-dark); letter-spacing: 0.04em; }
.cc-fill { display: block; width: 100%; flex: 0 0 auto; height: calc((100% - 34px) * var(--h, 0)); min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--color-gold-soft), var(--color-gold)); }
.cc-bar--zero .cc-fill { background: var(--color-line-dark-2); }
.cc-bar--zero b { color: var(--color-muted-dark); }
.cc-top { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-top li { font: 600 clamp(0.56rem, 0.9vw, 0.7rem)/1.3 var(--sans); color: var(--color-silver); padding: 3px 9px; border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-pill); background: var(--color-surface-dark); }
.cc-mark { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 clamp(0.8rem, 1.4vw, 1rem)/1 var(--display); color: var(--color-cloud); }
.cc-mark em { font-style: normal; color: var(--color-gold); }
.cc-mark i { font: 600 clamp(0.5rem, 0.85vw, 0.66rem)/1.2 var(--sans); font-style: normal; color: var(--color-muted-dark); overflow-wrap: anywhere; text-align: right; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cc-acts .act { border-color: var(--color-line-dark-2); color: var(--color-silver); }
.cc-acts .act:hover { border-color: var(--color-cloud); color: var(--color-cloud); }
.cc-status { font-size: 0.813rem; color: var(--color-silver); min-height: 1.4em; }
.cc-status a { color: var(--color-signal); }

/* the framework warning, on the dark hero */
.cc-flag { position: relative; z-index: 2; max-width: 860px; padding: 18px 22px; border-radius: var(--radius-sm); border: 1px solid var(--color-gold); background: var(--color-surface-dark); color: var(--color-silver); }
.cc-flag b { color: var(--color-gold); }

/* the months, on ivory */
.cc-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-ink); }
.cc-months li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--color-line); color: var(--color-body); }
.cc-months b { font: 700 1.25rem/1 var(--display); color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* counted lists, on white */
.cc-counts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--color-ink); }
.cc-counts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--color-line); color: var(--color-body); min-width: 0; }
.cc-counts li > a, .cc-counts li > span { min-width: 0; overflow-wrap: anywhere; }
.cc-counts b { font: 700 1.1rem/1 var(--display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cc-sub { font: 600 1rem/1.3 var(--display); color: var(--color-ink); }

/* the index: nations, regions, councils */
.cc-nation { margin-top: clamp(40px, 6vh, 72px); }
.cc-nation h2 b { color: var(--color-gold-ink); }
.cc-region { margin-top: 22px; }
.cc-rname { font: 700 0.688rem/1.3 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; }
.cc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-item { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); box-shadow: var(--shadow-1); min-width: 0; }
.cc-iname { font: 600 1rem/1.3 var(--display); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.cc-iname:hover { color: var(--color-signal-ink); }
.cc-in { font-size: 0.875rem; color: var(--color-body); }
.cc-in b { color: var(--color-gold-ink); font-weight: 700; }
.cc-ilinks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.813rem; }

@media (max-width: 980px) {
  .cc-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cc-list { grid-template-columns: minmax(0, 1fr); }
  .cc-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-bar i { font-size: 0.5rem; }
}

/* --- the experience on the About page, 5 November 2026 ------------------- */
.ab-exp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ab-exp__col { display: flex; flex-direction: column; padding: 26px 24px 22px; border: 1px solid var(--color-line-dark); border-radius: var(--radius); background: var(--color-surface-dark); }
.ab-exp__when { margin: 8px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-gold); }
.ab-exp__steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: abx; display: grid; gap: 12px; }
.ab-exp__steps li { counter-increment: abx; position: relative; padding-left: 34px; font-size: 0.875rem; line-height: 1.55; color: var(--color-silver); }
.ab-exp__steps li::before { content: counter(abx); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 0.7rem/1 var(--sans); color: var(--color-navy); background: var(--color-gold); }
.ab-exp__have { margin-top: auto; padding-top: 18px; }
.ab-exp__have p { margin: 0; padding: 14px 16px; border-left: 3px solid var(--color-gold); background: var(--color-surface-dark-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-cloud); }
.ab-exp__k { display: block; margin-bottom: 8px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold); }
.ab-exp__close { color: var(--color-cloud); }
@media (max-width: 960px) { .ab-exp { grid-template-columns: 1fr; } }

/* --- the inner-page hero, 5 November 2026 ------------------------------------
   Maheshika: "move the hero text upwards, not all of the hero is visible on one
   screen" (About at 1340x830). Every page that opens with .price-hero (About,
   Reports, Pricing, Councils) gets the tight top padding #price-hero already
   had, a smaller headline and a smaller Baboon, so headline, lede and the first
   action sit inside a laptop screen. */
#about-hero, #rpt-hero, #price-hero, .scene:has(> .shell > .price-hero) { padding-block: clamp(28px, 4.5vh, 64px) clamp(40px, 6vh, 80px); }
.price-hero h1.d1 { font-size: clamp(2.2rem, 4.2vw, 3.7rem); line-height: 1.04; }
.price-hero .lede { font-size: clamp(1rem, 1.15vw, 1.15rem); }
.price-hero__baboon { max-width: 290px; }
@media (max-height: 820px) and (min-width: 901px) { .price-hero h1.d1 { font-size: clamp(2.1rem, 3.7vw, 3.3rem); } .price-hero__baboon { max-width: 250px; } }

/* --- every page's opening section, 5 November 2026 ---------------------------
   Maheshika: "i meant all pages - not only the main hero". The first section
   of every page (scene, band or compact hero) opens closer to the nav, and the
   page headline (.d1) is a size that leaves the lede and the first action on a
   laptop screen. The homepage hero keeps its own sizing. The nav is sticky, so
   content already starts below it. */
main > .scene:first-child, main > .band:first-child, main > .hero--compact:first-child { padding-top: clamp(28px, 4.5vh, 64px); }
main > .band:first-child { padding-bottom: clamp(40px, 6vh, 84px); }
.d1 { font-size: clamp(2.2rem, 4.2vw, 3.7rem); line-height: 1.04; }
@media (max-height: 820px) and (min-width: 901px) { .d1 { font-size: clamp(2.1rem, 3.7vw, 3.3rem); } }
/* the homepage hero: the country picker must sit on a laptop screen too */
.hero--world .hero__grid { min-height: min(calc(100svh - var(--nav-h)), 660px); padding-block: clamp(14px, 2.5vh, 32px) clamp(28px, 4vh, 56px); }
.hero--world h1 { font-size: clamp(2.2rem, 3.9vw, 3.6rem); margin-bottom: 14px; }
.hero--world .hero__logo { width: clamp(170px, 16vw, 250px); margin-bottom: clamp(12px, 2vh, 22px); }
.hero--world .hero__lede { margin-bottom: 18px; }
@media (max-height: 820px) and (min-width: 901px) { .hero--world h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); } .hero--world .hero__lede { font-size: 1rem; } }

/* --- one screen, one section, 6 November 2026 ------------------------------
   Maheshika: "ideal is if one section is fully visible in each screen". On a
   desktop the first section of every page fills the window below the nav and
   centres its content, so the next section starts at the fold, not inside it. */
@media (min-width: 901px) {
  main > section:first-child { min-height: min(calc(100vh - var(--nav-h)), 1000px); min-height: min(calc(100svh - var(--nav-h)), 1000px); display: flex; flex-direction: column; justify-content: center; }
  main > section:first-child > .shell { width: 100%; }
  .hero--world .hero__grid { min-height: min(calc(100svh - var(--nav-h)), 1000px); }
}

/* --- the region jump on /buyers/, 6 November 2026 ------------------------
   Maheshika: "this section looks messy". Underlined links wrapping in a ragged
   row became a grid of tiles, each with its buyer count. */
.rjump { position: relative; z-index: 2; }
.rjump__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rjump__tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-surface-dark); text-decoration: none; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.rjump__tile b { font: 600 0.938rem/1.25 var(--sans); color: var(--color-white); }
.rjump__tile span { font-size: 0.75rem; color: var(--color-silver); }
.rjump__tile:hover, .rjump__tile:focus-visible { border-color: var(--color-gold); background: var(--color-surface-dark-2); transform: translateY(-2px); }
.rjump__tile:hover span { color: var(--color-gold); }
@media (max-width: 620px) { .rjump__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- the homepage hero names the whole record, 6 November 2026 ----------- */
.hero__ways { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.hero__ways a { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--color-line-dark-2); border-radius: var(--radius-sm); background: rgba(6, 10, 22, 0.55); backdrop-filter: blur(6px); text-decoration: none; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.hero__ways b { font: 600 0.813rem/1.2 var(--sans); color: var(--color-white); }
.hero__ways span { font-size: 0.688rem; line-height: 1.3; color: var(--color-silver); }
.hero__ways a:hover, .hero__ways a:focus-visible { border-color: var(--color-gold); transform: translateY(-2px); }
.hero__ways a:hover span { color: var(--color-gold); }
@media (max-width: 900px) { .hero__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .hero__ways a:last-child { grid-column: 1 / -1; } }
@media (min-width: 901px) {
  .hero__ways { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
  .hero__ways a { flex-direction: row; padding: 9px 14px; border-radius: var(--radius-pill); }
  .hero__ways span { display: none; }
  .hero--world h1 { font-size: clamp(2.1rem, 3.3vw, 3.3rem); }
}