/* ============================================================================
 * BrokerShield — StyleSheet.css
 *
 * Design language: warm-cream editorial fintech — eggshell canvas, taupe
 * surfaces, hairline stone rules, pill controls, whisper-weight display
 * type, and a small family of accent colors reserved for markers, tints,
 * and the illustrative product visuals.
 *
 * Contents
 *   1.  Design tokens        (colors, type, spacing, radii, shadows, motion, z)
 *   1b. Dark theme           (token overrides under [data-theme="Dark"])
 *   2.  Reset & base         (box model, page canvas, typography defaults)
 *   3.  Utilities            (Container, MonoLabel, SkipLink, Reveal)
 *   4.  Buttons              (pill primary / secondary / inverse)
 *   5.  Header & navigation  (announcement bar, fixed bar, frost-on-scroll,
 *                             theme toggle, mobile menu)
 *   6.  Hero                 (split diptych + risk panel + trust chips
 *                             + stat strip)
 *   7.  Sections             (shared heads, taupe bands, split rows)
 *   8.  Pain ledger
 *   9.  Pillar cards
 *  10.  Coverage tabs & signal chips
 *  11.  Signals & score ladder
 *  12.  Step sequence
 *  13.  Team rows
 *  14.  Integration columns
 *  15.  FAQ accordion
 *  16.  CTA band
 *  17.  Contact & form (full input-state recipe)
 *  18.  Footer (brand + link columns + disclaimer + bottom bar)
 *  19.  Scroll-to-top button
 *  20.  Motion & reduced-motion
 *  21.  Accent components    (tint cards, cost grid, lifecycle strip,
 *                             detection library, behaviour & timeline
 *                             cards, profit cards, testimonials)
 *
 * Naming: every class and id uses PascalCase (project convention).
 * Breakpoints (mobile-first): 40rem (~640px) · 66rem (~1056px) · 80rem (~1280px)
 * ============================================================================ */


/* ============================================================
   1. DESIGN TOKENS — from DESIGN.md, the locked design system.
   Every color / font / radius below is referenced by name;
   no raw values appear past this block.
   ============================================================ */
:root {
  /* Surfaces & ink */
  --color-eggshell:       #fdfcfc;  /* page canvas — warm off-white, never pure white   */
  --color-warm-taupe:     #f5f3f1;  /* section bands & feature cards                    */
  --color-stone:          #ebe8e4;  /* hairline borders, dividers, icon plates          */
  --color-ink:            #000000;  /* primary text, filled buttons — the only hard     */
  --color-ink-soft:       #262320;  /* hover state for ink-filled surfaces              */
  --color-graphite:       #44403b;  /* strong secondary text                            */
  --color-smoke:          #777169;  /* body & muted copy (light-canvas floor: 4.7:1)    */
  --color-smoke-deep:     #6b655d;  /* smoke variant for taupe surfaces — keeps muted
                                       copy above the 4.5:1 contrast floor              */
  --color-ash:            #a59f97;  /* decorative hairline accents ONLY — ash fails the
                                       4.5:1 text floor on light surfaces, so muted text
                                       uses smoke instead                               */

  /* Product-visual sparks — used inside the illustrative dashboard
     graphics (dial, meters, bars), never for buttons or links. */
  --color-violet-spark:   #0447ff;
  --color-ember-orange:   #ff4704;

  /* Accent family — small markers, dots, numerals, and soft card
     tints. Solid accents appear only at marker/large-numeral size;
     tints stay in the 7–9% alpha range so surfaces remain calm. */
  --color-accent-violet:  #0447ff;
  --color-accent-ember:   #ff4704;
  --color-accent-teal:    #008f72;
  --color-accent-gold:    #b87400;
  /* Sand family — three warm steps (pale sun → camel → earth)
     used by the MetaTrader positioning cards. */
  --color-accent-sun:     #a67c00;
  --color-accent-camel:   #a06a2c;
  --color-accent-earth:   #7c6440;
  --tint-violet:          rgba(4, 71, 255, 0.07);
  --tint-ember:           rgba(255, 71, 4, 0.07);
  --tint-teal:            rgba(0, 143, 114, 0.08);
  --tint-gold:            rgba(184, 116, 0, 0.08);
  --tint-sun:             rgba(212, 168, 20, 0.10);
  --tint-camel:           rgba(166, 112, 48, 0.13);
  --tint-earth:           rgba(124, 100, 64, 0.17);

  /* Functional colors */
  --color-border-button:  #e5e5e5;                    /* pill button hairline           */
  --color-eggshell-frost: rgba(253, 252, 252, 0.82);  /* frosted nav background         */
  --color-error:          #b42318;                    /* form validation only           */
  --color-on-ink-muted:   #b8b3ac;                    /* muted copy on ink surfaces     */

  /* Typography — Bricolage Grotesque for display and large numerals,
     Inter for body and UI, Geist Mono for technical micro-labels. */
  --font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption:     0.75rem;    /* 12px — mono micro-labels        */
  --text-body-sm:     0.875rem;   /* 14px                            */
  --text-body:        1rem;       /* 16px                            */
  --text-subheading:  1.125rem;   /* 18px                            */
  --text-body-lg:     1.25rem;    /* 20px                            */
  --text-heading-2xs: 1.375rem;   /* 22px — card titles              */
  --text-heading-xs:  1.5rem;     /* 24px — panel titles             */
  --text-heading:     clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);  /* 28→36px section titles */
  --text-display:     clamp(2.125rem, 1.6rem + 2.3vw, 3rem);     /* 34→48px hero           */

  --tracking-display: -0.02em;    /* whisper headlines pull tighter  */
  --tracking-body:    0.01em;     /* body opens slightly at 14–16px  */
  --tracking-mono:    0.08em;     /* uppercase micro-labels          */

  --weight-light:   300;          /* display only — never bolder     */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-brand:   600;          /* wordmark only                   */

  /* Spacing (4px base) */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;

  /* Layout */
  --page-max-width: 1280px;
  --page-gutter:    clamp(1.25rem, 5vw, 4rem);
  --nav-height:     64px;

  /* Radii */
  --radius-inputs:      6px;
  --radius-cards:       20px;
  --radius-large-cards: 24px;
  --radius-full:        9999px;

  /* Elevation — the system is fully flat: hairline stone borders
     separate surfaces, never drop shadows. */

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Named z-scale — no freestyle z-index values */
  --z-raised:   10;
  --z-sticky:   200;
  --z-overlay:  400;
}


/* ============================================================
   1b. DARK THEME
   Token overrides only — every component reads the same names,
   so the whole page re-skins from this one block. Set on <html>
   as data-theme="Dark"; toggled from the navigation bar and
   persisted in localStorage.
   ============================================================ */
[data-theme="Dark"] {
  --color-eggshell:       #141210;   /* warm near-black canvas            */
  --color-warm-taupe:     #1e1b18;   /* raised surfaces                   */
  --color-stone:          #2e2a26;   /* hairlines & dividers              */
  --color-ink:            #f4f1ed;   /* primary text & filled controls    */
  --color-ink-soft:       #dbd6cf;   /* hover for light-filled controls   */
  --color-graphite:       #cfc9c1;
  --color-smoke:          #a49d94;
  --color-smoke-deep:     #b0a9a0;
  --color-ash:            #6d675f;

  --color-violet-spark:   #5b84ff;   /* sparks lift for dark surfaces     */
  --color-ember-orange:   #ff7a4d;

  --color-accent-violet:  #6b90ff;
  --color-accent-ember:   #ff7a4d;
  /* The green tonality doesn't sit well on the dark canvas, so the
     third accent shifts to a soft rose in dark mode only. */
  --color-accent-teal:    #f12d51;
  --color-accent-gold:    #e0a33e;
  --color-accent-sun:     #e5c05c;
  --color-accent-camel:   #d7a25f;
  --color-accent-earth:   #bfa47c;
  /* Pastel washes read wrong on a dark canvas, so tinted surfaces
     go neutral here — the colored markers and icons carry the
     identity instead. */
  --tint-violet:          #1e1b18;
  --tint-ember:           #1e1b18;
  --tint-teal:            #1e1b18;
  --tint-gold:            #1e1b18;
  --tint-sun:             #1e1b18;
  --tint-camel:           #1e1b18;
  --tint-earth:           #1e1b18;

  --color-border-button:  #37322c;
  --color-eggshell-frost: rgba(20, 18, 16, 0.82);
  --color-error:          #ef4329;
  --color-on-ink-muted:   #57534c;   /* muted copy on the light CTA band  */

  color-scheme: dark;                /* native form controls follow suit  */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;                       /* page never scrolls sideways      */
  scroll-padding-top: calc(var(--nav-height) + 1.5rem);  /* anchor offset for
                                             the fixed header                 */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-eggshell);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }

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

::selection {
  background: var(--color-stone);
  color: var(--color-ink);
}

/* Emphasised keywords inside running copy: heavier and one step
   darker than the muted paragraph around them. */
strong {
  font-weight: var(--weight-brand);
  color: var(--color-graphite);
  text-transform: capitalize;
}

/* Focus rings appear instantly (never animated) and sit clear of
   the element. Ink on the warm canvas exceeds 3:1 everywhere. */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-inputs);
}

/* Taupe and tinted surfaces are one step darker than the canvas,
   so muted copy inside them steps down to the deeper smoke to
   hold the 4.5:1 contrast floor. */
.SectionTaupe,
.PillarCard,
.ScoreLadder,
.ContactFormWrapper,
.DetailCard,
.TintCard,
.CostCard,
.LifecycleStep,
.QuoteCard,
.ProfitCard,
.BehaviourCard {
  --color-smoke: var(--color-smoke-deep);
}

/* Shared disabled treatment — three channels, never opacity alone
   (the disabled attribute itself is the third channel). */
.PillButton:disabled,
.PillButton[aria-disabled="true"],
.FieldInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ============================================================
   3. UTILITIES
   ============================================================ */
.Container {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Technical micro-label voice: mono, tracked, uppercase, quiet. */
.MonoLabel {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-smoke);
}

/* Visible only when focused — first tab stop on the page. */
.SkipLink {
  position: fixed;
  top: var(--space-12);
  left: var(--space-12);
  z-index: var(--z-overlay);
  padding: var(--space-12) var(--space-20);
  background: var(--color-ink);
  color: var(--color-eggshell);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  transform: translateY(-200%);
}
.SkipLink:focus-visible {
  transform: none;
  outline-color: var(--color-ink);
}


/* ============================================================
   4. BUTTONS — the pill is the system's signature component.
   Black fill + eggshell outline are the only two voices; the
   inverse variant exists solely for the ink CTA band.
   ============================================================ */
.PillButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                       /* touch-target floor               */
  padding: 0 var(--space-24);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;                    /* affordances never wrap           */
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.PillButton:active { transform: translateY(1px); }

.PillButtonPrimary {
  background: var(--color-ink);
  color: var(--color-eggshell);
  border: 1px solid var(--color-ink);
}

.PillButtonSecondary {
  background: var(--color-eggshell);
  color: var(--color-ink);
  border: 1px solid var(--color-border-button);
}

.PillButtonInverse {
  background: var(--color-eggshell);
  color: var(--color-ink);
  border: 1px solid var(--color-eggshell);
}

@media (hover: hover) and (pointer: fine) {
  .PillButtonPrimary:hover   { background: var(--color-ink-soft); border-color: var(--color-ink-soft); transform: translateY(-1px); }
  .PillButtonSecondary:hover { background: var(--color-warm-taupe); transform: translateY(-1px); }
  .PillButtonInverse:hover   { background: var(--color-warm-taupe); border-color: var(--color-warm-taupe); transform: translateY(-1px); }
}


/* ============================================================
   5. HEADER & NAVIGATION
   Fixed, transparent over the hero; Script.js adds .IsScrolled
   past ~24px, which frosts the bar (blur + hairline + shadow).
   ============================================================ */
.SiteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.SiteHeader.IsScrolled {
  background: var(--color-eggshell-frost);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--color-stone);
}

/* --- Announcement bar: sits above the nav inside the fixed header;
       retracts on scroll via the 0fr/1fr grid-row technique so no
       layout property is animated. --- */
.AnnouncementBar {
  display: grid;
  grid-template-rows: 1fr;
  background: var(--tint-gold);          /* creamy pale-camel wash          */
  border-bottom: 1px solid var(--color-stone);
  transition: grid-template-rows var(--dur-short) var(--ease-in-out);
}
.SiteHeader.IsScrolled .AnnouncementBar { grid-template-rows: 0fr; border-bottom-color: transparent; }
.AnnouncementBar[hidden] { display: none; }
.AnnouncementClip { overflow: hidden; }
.AnnouncementInner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.AnnouncementText {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
  min-width: 0;
}
.AnnouncementDot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-gold);
}
.AnnouncementLink {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.AnnouncementDismiss {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-graphite);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.AnnouncementDismiss:active { background: var(--color-stone); }
@media (hover: hover) and (pointer: fine) {
  .AnnouncementDismiss:hover { background: var(--color-warm-taupe); color: var(--color-ink); }
}

.NavInner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  height: var(--nav-height);
  display: grid;
  grid-template-columns: 1fr auto;        /* brand | actions (mobile)         */
  align-items: center;
  gap: var(--space-16);
}

.NavBrand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  justify-self: start;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.BrandMark { color: var(--color-ink); flex: none; }
/* Keep the shield's knockout layer matched to the canvas in both themes. */
.BrandMark path:nth-child(2) { fill: var(--color-eggshell); }

.NavCenter {
  display: none;                          /* revealed at 60rem                */
  justify-self: center;
  gap: var(--space-4);
}

.NavLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .NavLink:hover { color: var(--color-ink); background: var(--color-warm-taupe); }
}
/* Active section marker, driven by IntersectionObserver in Script.js. */
.NavLink.IsActive { color: var(--color-ink); background: var(--color-warm-taupe); }

.NavActions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.NavContactLink { display: none; }        /* wide desktop only                */
.NavCta { display: none; }                /* ≥40rem only                      */

/* --- Color-scheme toggle: circular control, sun in dark mode,
       moon in light mode. State lives on <html data-theme>. --- */
.ThemeToggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-full);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.ThemeToggle:active { background: var(--color-warm-taupe); }
@media (hover: hover) and (pointer: fine) {
  .ThemeToggle:hover { background: var(--color-warm-taupe); }
}
.ThemeIconSun { display: none; }
[data-theme="Dark"] .ThemeIconSun  { display: block; }
[data-theme="Dark"] .ThemeIconMoon { display: none; }

/* Hamburger — two bars that form an X when open. */
.NavToggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.NavToggle:active { background: var(--color-warm-taupe); }
.NavToggleBar {
  width: 16px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.NavToggle[aria-expanded="true"] .NavToggleBar:first-child  { transform: translateY(2.75px) rotate(45deg); }
.NavToggle[aria-expanded="true"] .NavToggleBar:last-child   { transform: translateY(-2.75px) rotate(-45deg); }

/* Mobile dropdown panel, directly beneath the bar. */
.MobileMenu {
  background: var(--color-eggshell);
  border-bottom: 1px solid var(--color-stone);
}
.MobileMenu nav {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--page-gutter) var(--space-24);
  display: grid;
  gap: var(--space-4);
}
.MobileMenuLink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-12);
  border-radius: var(--radius-inputs);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
}
.MobileMenuLink:active { background: var(--color-warm-taupe); }
.MobileMenuCta { margin-top: var(--space-12); justify-self: start; }

@media (min-width: 40rem) {
  .NavCta { display: inline-flex; }
}
/* The six-link centre cluster needs ~1050px to breathe beside the
   brand and actions, so the desktop layout starts at 66rem. */
@media (min-width: 66rem) {
  .NavInner { grid-template-columns: 1fr auto 1fr; }  /* brand | links | actions */
  .NavCenter { display: inline-flex; }
  .NavToggle, .MobileMenu { display: none; }
}
@media (min-width: 80rem) {
  .NavContactLink { display: inline-flex; }
}


/* ============================================================
   6. HERO — split diptych (copy 7 / panel 5) over the eggshell
   canvas, followed by the product-scope stat strip.
   ============================================================ */
.HeroSection {
  /* Top spacing clears the fixed bar plus the announcement strip;
     the bottom runs slightly deeper so the hero settles into the
     page instead of floating above it. */
  padding-top: calc(var(--nav-height) + clamp(5.5rem, 10vw, 9rem));
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.HeroInner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
.HeroInner > * { min-width: 0; }

.HeroTitle {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-light);       /* the whisper weight — never bolder */
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  max-width: 16ch;
}

.HeroLede {
  margin-top: var(--space-24);
  max-width: 52ch;
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--color-smoke);
}

.HeroActions {
  margin-top: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.HeroFootnote { margin-top: var(--space-24); }

/* --- Risk-intelligence panel — illustrative product concept.
       The one place the violet/orange sparks are permitted.     --- */
.RiskPanel {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: var(--space-24);
  max-width: 26rem;
}

.RiskPanelHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-stone);
}
.RiskPanelTitle {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
}

.RiskPanelScore {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-20);
}

/* Conic ring: violet→orange arc for the scored portion, stone for
   the remainder; an inner eggshell disc turns it into a dial. */
.ScoreDial {
  flex: none;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-violet-spark),
    var(--color-ember-orange) 68%,
    var(--color-stone) 68% 100%
  );
  display: grid;
  place-items: center;
}
.ScoreDialInner {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-eggshell);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
}
.ScoreValue {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ScoreBand {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-graphite);
}

.ScoreLegend {
  display: grid;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--color-smoke);
}
.ScoreLegend li { display: flex; align-items: center; gap: var(--space-8); }
.LegendDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.LegendDotHigh { background: var(--color-ember-orange); }
.LegendDotMid  { background: var(--color-violet-spark); }
.LegendDotLow  { background: var(--color-stone); }

.SignalList {
  display: grid;
  gap: var(--space-12);
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-stone);
}
.SignalRow { display: grid; gap: var(--space-4); }
.SignalName { font-size: var(--text-body-sm); color: var(--color-graphite); }
.SignalMeter {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-stone);
  overflow: hidden;
}
.SignalMeterFill {
  display: block;
  height: 100%;
  width: var(--MeterValue, 50%);
  border-radius: inherit;
  background: var(--color-violet-spark);
}
.SignalMeterHigh { background: var(--color-ember-orange); }

.RiskPanelCaption {
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-stone);
}

/* --- Trust chips: broker-facing operating commitments, each with
       a small accent dot. The dots are the only color they carry. --- */
.TrustRow {
  margin-top: var(--space-40);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.TrustChip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
  white-space: nowrap;
}
.TrustChipDot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
/* Shared accent-dot palette (also used by the case timeline). */
.DotViolet { background: var(--color-accent-violet); }
.DotEmber  { background: var(--color-accent-ember); }
.DotTeal   { background: var(--color-accent-teal); }
.DotGold   { background: var(--color-accent-gold); }

/* --- Stat strip: product scope, not performance claims. --- */
.StatStrip {
  margin-top: var(--space-64);
  padding-top: var(--space-40);
  border-top: 1px solid var(--color-stone);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32) var(--space-24);
}
/* Icon plate on the left, value + caption stacked on the right. */
.StatItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-8) var(--space-16);
  align-content: start;
}
.StatItem .IconPlate {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  margin: 0;
}
.StatItem .StatIcon { width: 26px; height: 26px; color: var(--color-ink); }
.StatValue {
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: end;
}
.StatCaption {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--color-smoke);
  max-width: 34ch;
}

@media (min-width: 60rem) {
  .HeroInner { grid-template-columns: 7fr 5fr; }
  .RiskPanel { justify-self: end; width: 100%; }
  .StatStrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ============================================================
   7. SECTIONS — shared rhythm. Bands alternate eggshell/taupe;
   padding varies deliberately so the rhythm is not metronomic.
   ============================================================ */
.Section { padding-block: clamp(4rem, 9vw, 6.5rem); }
.SectionTaupe { background: var(--color-warm-taupe); }
.SectionRuled { border-top: 1px solid var(--color-stone); }
/* Short intro sections (e.g. the detection-library opener) tighten
   their rhythm so they read as a preface, not a full chapter. */
.SectionCompact { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.SectionCompact .SectionHead { margin-bottom: 0; }
#Faq { padding-block: clamp(3.5rem, 8vw, 5.5rem); }   /* tighter on purpose  */

.SectionTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.17;
  max-width: 20ch;
}

.SectionLede {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 52ch;
}

/* Title-left / lede-right head, collapsing to one column on mobile. */
.SplitRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}
.SplitRow > * { min-width: 0; }
.SectionHead { margin-bottom: var(--space-48); }
.SplitCopy .SectionLede { margin-top: var(--space-20); }

@media (min-width: 60rem) {
  .SplitRow { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-64); }
  .SectionHead .SectionLede { justify-self: end; padding-top: var(--space-8); }
}


/* ============================================================
   8. PAIN LEDGER — hairline-ruled rows, no cards, no icons.
   ============================================================ */
.PainLedger { border-top: 1px solid var(--color-stone); }
.SectionTaupe .PainLedger { border-color: var(--color-stone); }

.PainRow {
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-stone);
}
.PainTitle {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.PainBody {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 58ch;
}


/* ============================================================
   9. PILLAR CARDS — asymmetric grid: the Detect card spans two
   tracks; the remaining row carries deliberate negative space.
   ============================================================ */
.PillarGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.PillarCard {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: var(--space-32);
}
/* On a taupe band the pillars flip to eggshell with a hairline
   border so the cards keep one step of separation, shadow-free. */
.SectionTaupe .PillarCard {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
}
.PillarTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading-2xs);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
}
.PillarBody {
  margin-top: var(--space-12);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
}

@media (min-width: 60rem) {
  .PillarGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .PillarCardWide { grid-column: span 2; }
}


/* ============================================================
   10. COVERAGE — tab pills over a single large panel card.
   Active pill carries an ink dot (the system's tab language).
   ============================================================ */
.CoveragePanel {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: clamp(var(--space-24), 4vw, var(--space-40));
}

.TabList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-stone);
}

.TabPill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: 0 var(--space-16);
  background: var(--color-eggshell);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  white-space: nowrap;                     /* tab labels never wrap           */
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.TabPill:active { background: var(--color-stone); }
.TabPill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-stone);
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .TabPill:hover { background: var(--color-warm-taupe); }
}
.TabPill[aria-selected="true"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.TabPill[aria-selected="true"]::before { background: var(--color-ink); }

.TabPanel { padding-top: var(--space-24); }
.TabPanelTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
}
.TabPanelBody {
  margin-top: var(--space-12);
  color: var(--color-smoke);
  line-height: 1.6;
  max-width: 62ch;
}

.SignalChips {
  margin-top: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.SignalChip {
  padding: var(--space-8) var(--space-16);
  background: var(--color-warm-taupe);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;                    /* 13px */
  line-height: 1.4;
  color: var(--color-graphite);
}


/* ============================================================
   11. SIGNALS & SCORE LADDER
   ============================================================ */
.SignalFamilies {
  margin-top: var(--space-32);
  border-top: 1px solid var(--color-stone);
}
.SignalFamily {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-stone);
}
.SignalFamilyName {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.SignalFamilyBody {
  margin: var(--space-8) 0 0;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 58ch;
}

.ScoreLadder {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: var(--space-32);
  align-self: start;
}
.ScoreLadderHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-stone);
}
.ScoreBandList { display: grid; }
.ScoreBandRow {
  display: grid;
  grid-template-columns: 4.5rem 5.5rem 1fr;
  align-items: baseline;
  gap: var(--space-12);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-stone);
}
.ScoreBandRange { color: var(--color-graphite); }
.ScoreBandName { font-weight: var(--weight-medium); }
.ScoreBandNote {
  font-size: var(--text-body-sm);
  color: var(--color-smoke);
}
.ScoreLadder .RiskPanelCaption { border-top: 0; padding-top: var(--space-16); }

@media (max-width: 40rem) {
  .ScoreBandRow { grid-template-columns: 4.5rem 1fr; }
  .ScoreBandNote { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  #Signals .SplitRow { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}


/* ============================================================
   12. STEP SEQUENCE — numbered, vertical, offset right to sit
   under the lede column (deliberate asymmetry).
   ============================================================ */
.StepList {
  max-width: 46rem;
  border-top: 1px solid var(--color-stone);
}
.StepItem {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-16);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-stone);
}
.StepNumber { padding-top: var(--space-4); color: var(--color-smoke); }
.StepTitle {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
}
.StepText {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 58ch;
}

@media (min-width: 60rem) {
  .StepList { margin-inline-start: auto; }
}


/* ============================================================
   13. TEAM ROWS — name column + body column, hairline rules.
   ============================================================ */
.TeamRows { border-top: 1px solid var(--color-stone); }
.TeamRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-32);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-stone);
}
.TeamName {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
}
.TeamBody {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 62ch;
}

@media (min-width: 60rem) {
  .TeamRow { grid-template-columns: 14rem 1fr; }
}


/* ============================================================
   14. INTEGRATION COLUMNS — two whisper-shadow cards on taupe.
   ============================================================ */
.InfoColumns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.InfoColumn {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-cards);
  padding: var(--space-32);
}
.InfoColumnTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading-2xs);
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
  padding-bottom: var(--space-16);
}
.InfoList { border-top: 1px solid var(--color-stone); }
.InfoItem {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-stone);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-graphite);
}

@media (min-width: 60rem) {
  .InfoColumns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
}


/* ============================================================
   15. FAQ — disclosure list. The answer body animates via
   grid-template-rows (0fr → 1fr), never via height.
   ============================================================ */
.FaqInner { max-width: 52rem; }
.FaqInner .SectionHead { margin-bottom: var(--space-32); }

.FaqList { border-top: 1px solid var(--color-stone); }
.FaqItem { border-bottom: 1px solid var(--color-stone); }
.FaqHeading { margin: 0; }

.FaqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-20) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .FaqQuestion:hover { color: var(--color-graphite); }
}
.FaqQuestion:active { color: var(--color-smoke); }

/* Plus glyph drawn with two bars; rotates to a minus when open. */
.FaqIcon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.FaqIcon::before,
.FaqIcon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 14px;
  height: 1.5px;
  background: var(--color-ink);
  transform: translateY(-50%);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.FaqIcon::after { transform: translateY(-50%) rotate(90deg); }
.FaqItem.IsOpen .FaqIcon::after { transform: translateY(-50%) rotate(0deg); }

.FaqAnswer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.FaqItem.IsOpen .FaqAnswer { grid-template-rows: 1fr; }
.FaqAnswerInner { overflow: hidden; }
.FaqAnswerInner p {
  padding-bottom: var(--space-20);
  max-width: 65ch;
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-smoke);
}


/* ============================================================
   16. CTA BAND — the page's single ink surface.
   Background flips dark, so text color is set here explicitly.
   ============================================================ */
.CtaBanner {
  background: var(--color-ink);
  color: var(--color-eggshell);
  padding-block: clamp(4rem, 9vw, 6rem);
}
.CtaInner { max-width: 44rem; }
.CtaTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.17;
  max-width: 22ch;
}
.CtaText {
  margin-top: var(--space-16);
  max-width: 48ch;
  line-height: 1.6;
  color: var(--color-on-ink-muted);
}
.CtaBanner .PillButtonInverse { margin-top: var(--space-32); }
/* Focus rings must stay visible against the ink surface. */
.CtaBanner :focus-visible { outline-color: var(--color-eggshell); }


/* ============================================================
   17. CONTACT & FORM
   Full input-state recipe: constant 1px border in every state;
   focus arrives via outline (no geometry shift); helper rows
   reserve one line so errors never push the layout.
   ============================================================ */
#Contact { padding-bottom: clamp(5rem, 10vw, 7.5rem); }

.ContactDetails {
  margin-top: var(--space-40);
  border-top: 1px solid var(--color-stone);
}
.ContactDetail {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-16);
  align-items: baseline;
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-stone);
}
.ContactDetailValue { font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-graphite); }
a.ContactDetailValue { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-stone); }
@media (hover: hover) and (pointer: fine) {
  a.ContactDetailValue:hover { text-decoration-color: var(--color-ink); }
}

.ContactFormWrapper {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: clamp(var(--space-24), 4vw, var(--space-40));
}

.ContactForm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.FormField { display: grid; gap: var(--space-8); }

.FieldLabel {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
}

.FieldInput {
  min-height: 44px;                        /* matches button height           */
  padding: var(--space-8) var(--space-12);
  background: var(--color-eggshell);
  color: var(--color-ink);
  border: 1px solid var(--color-border-button);   /* width constant, all states */
  border-radius: var(--radius-inputs);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  outline: 2px solid transparent;          /* reserved focus slot — no shift  */
  outline-offset: 1px;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.FieldInput::placeholder { color: var(--color-smoke); }
@media (hover: hover) and (pointer: fine) {
  .FieldInput:hover { background: var(--color-warm-taupe); }
}
.FieldInput:focus-visible {
  outline-color: var(--color-ink);
  border-color: var(--color-graphite);
  border-radius: var(--radius-inputs);
  background: var(--color-eggshell);
}
.FieldInput[aria-invalid="true"] { border-color: var(--color-error); }

.FieldSelect { appearance: auto; }         /* native select keeps native a11y */
.FieldTextarea { min-height: 7rem; resize: vertical; }

/* Helper / error line: always one line tall so validation
   messages never shift the layout beneath them. */
.FieldHelp {
  min-height: 1lh;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-smoke);
}
.FieldHelp.IsError { color: var(--color-error); }

/* Honeypot — moved far off-canvas; never display:none so basic
   bots still see and fill it. */
.FieldTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.FormFooter {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}
.FormNote {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-smoke);
}
.FormNote.IsError { color: var(--color-error); }

@media (min-width: 40rem) {
  .ContactForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .FormFieldFull, .FormFooter { grid-column: 1 / -1; }
}


/* ============================================================
   18. FOOTER — brand column + four navigation columns, then a
   disclaimer band and a bottom bar. Column heads use the mono
   micro-label voice; every link is a real destination.
   ============================================================ */
.SiteFooter {
  border-top: 1px solid var(--color-stone);
  padding-block: var(--space-64) var(--space-32);
}

.FooterGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40) var(--space-32);
}
.FooterWordmark {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.FooterTagline {
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-smoke);
}
.FooterBlurb {
  margin-top: var(--space-16);
  max-width: 34ch;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-smoke);
}
.FooterAddress {
  margin-top: var(--space-20);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-smoke);
}

.FooterColTitle { margin-bottom: var(--space-12); }
.FooterList { display: grid; }
.FooterLink {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .FooterLink:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
}

.FooterDisclaimer {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-stone);
  max-width: 75ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-smoke);
}
.FooterBottom {
  margin-top: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
}
.FooterCopyright,
.FooterLegalNote {
  font-size: 0.8125rem;
  color: var(--color-smoke);
}

@media (min-width: 40rem) {
  .FooterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .FooterBrand { grid-column: 1 / -1; }
}
@media (min-width: 66rem) {
  .FooterGrid {
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: var(--space-40) var(--space-40);
  }
  .FooterBrand { grid-column: auto; }
}


/* ============================================================
   19. SCROLL-TO-TOP — floating circle, revealed by Script.js.
   ============================================================ */
.ScrollTopButton {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-raised);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--color-eggshell);
  color: var(--color-ink);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ScrollTopButton:hover { background: var(--color-warm-taupe); transform: translateY(-1px); }
}
.ScrollTopButton:active { transform: translateY(0); }
.ScrollTopButton[hidden] { display: none; }


/* ============================================================
   20. MOTION
   One entrance for the hero, a one-shot reveal for section
   blocks (IntersectionObserver adds .IsVisible), and nothing
   else. Reveal styling only applies once JS confirms itself
   (html.JsEnabled), so content is never hidden without script.
   ============================================================ */
@keyframes HeroEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.HeroCopy  { animation: HeroEnter var(--dur-long) var(--ease-out) backwards; }
.RiskPanel { animation: HeroEnter var(--dur-long) var(--ease-out) 120ms backwards; }
.StatStrip { animation: HeroEnter var(--dur-long) var(--ease-out) 220ms backwards; }

.JsEnabled .Reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.JsEnabled .Reveal.IsVisible {
  opacity: 1;
  transform: none;
}

/* Reduced motion: spatial movement collapses to a fast crossfade;
   smooth scrolling is disabled via the media guard in section 2. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .JsEnabled .Reveal { transform: none; }
}


/* ============================================================
   21. ACCENT COMPONENTS
   The colorful layer: tinted cards, lifecycle numerals, the
   detection library, and the illustrative behaviour / timeline
   visuals. Solid accents appear only as markers, dots, bars,
   and large numerals — text stays on the neutral scale.
   ============================================================ */

/* --- Tinted cards (positioning + cost sections) --- */
.TintCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.TintCard,
.CostCard {
  border-radius: var(--radius-cards);
  padding: var(--space-32);
}
.TintCardViolet { background: var(--tint-violet); }
.TintCardEmber  { background: var(--tint-ember); }
.TintCardTeal   { background: var(--tint-teal); }
.TintCardGold   { background: var(--tint-gold); }
.TintCardSun    { background: var(--tint-sun); }
.TintCardCamel  { background: var(--tint-camel); }
.TintCardEarth  { background: var(--tint-earth); }

/* Card icons: one consistent 24px stroke set, drawn in-house.
   Tinted cards color the icon with their accent; neutral cards
   keep it in ink on a stone plate. */
.CardIcon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-20);
}
.TintCardViolet .CardIcon { color: var(--color-accent-violet); }
.TintCardEmber  .CardIcon { color: var(--color-accent-ember); }
.TintCardTeal   .CardIcon { color: var(--color-accent-teal); }
.TintCardGold   .CardIcon { color: var(--color-accent-gold); }
.TintCardSun    .CardIcon { color: var(--color-accent-sun); }
.TintCardCamel  .CardIcon { color: var(--color-accent-camel); }
.TintCardEarth  .CardIcon { color: var(--color-accent-earth); }

.IconPlate {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-stone);
  color: var(--color-ink);
  margin-bottom: var(--space-20);
}
.IconPlate .CardIcon { margin-bottom: 0; width: 22px; height: 22px; }

.InfoColumnTitle .CardIcon {
  display: inline-block;
  vertical-align: -5px;
  margin: 0 var(--space-8) 0 0;
  width: 22px;
  height: 22px;
  color: var(--color-ink);
}

.TintCardTitle,
.CostCardTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.TintCardBody,
.CostCardBody {
  margin-top: var(--space-12);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
}

.CostGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 40rem) {
  .TintCardGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .CostGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 66rem) {
  .CostGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Toxic-flow lifecycle: four taupe steps with large colored
       numerals in the display face. --- */
.LifecycleStrip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  counter-reset: none;
}
.LifecycleStep {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: var(--space-32);
}
.LifecycleNumber {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.NumberViolet { color: var(--color-accent-violet); }
.NumberEmber  { color: var(--color-accent-ember); }
.NumberTeal   { color: var(--color-accent-teal); }
.NumberGold   { color: var(--color-accent-gold); }
.LifecycleTitle {
  margin-top: var(--space-16);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.LifecycleBody {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
}
@media (min-width: 40rem) {
  .LifecycleStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 66rem) {
  .LifecycleStrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Detection library: card grids whose dot markers take the
       section's accent (set via the Accent* section classes). --- */
.DetailGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.DetailCard {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: var(--space-24) var(--space-24) var(--space-32);
}
.SectionTaupe .DetailCard {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
}
.DetailDot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-bottom: var(--space-16);
}
.AccentViolet .DetailDot { background: var(--color-accent-violet); }
.AccentEmber  .DetailDot { background: var(--color-accent-ember); }
.AccentTeal   .DetailDot { background: var(--color-accent-teal); }
.AccentGold   .DetailDot { background: var(--color-accent-gold); }
.DetailTitle {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.DetailBody {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
}
@media (min-width: 40rem) {
  .DetailGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 66rem) {
  .DetailGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .DetailGrid > .DetailCard:first-child { grid-column: span 1; }
}

/* --- Behaviour-profile card (illustrative): paired bars compare
       one account against the book baseline. --- */
.BehaviourCard {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: var(--space-24);
  align-self: start;
}
.BehaviourRows {
  display: grid;
  gap: var(--space-16);
  padding-block: var(--space-20);
}
.BehaviourRow { display: grid; gap: var(--space-4); }
.BehaviourLabel {
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
  margin-bottom: var(--space-4);
}
.BehaviourTrack {
  display: block;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-warm-taupe);
  overflow: hidden;
}
.BehaviourBarAccount,
.BehaviourBarBaseline {
  display: block;
  height: 100%;
  width: var(--BarValue, 50%);
  border-radius: inherit;
}
.BehaviourBarAccount  { background: var(--color-violet-spark); }
.BehaviourBarBaseline { background: var(--color-stone); }
.BehaviourLegend {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.8125rem;
  color: var(--color-smoke);
  padding-bottom: var(--space-12);
}
.LegendSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.LegendSwatch + span { margin-inline-end: var(--space-8); }
.LegendSwatchAccount  { background: var(--color-violet-spark); }
.LegendSwatchBaseline { background: var(--color-stone); margin-inline-start: var(--space-8); }

/* --- Case-timeline card (illustrative): vertical rule, colored
       event dots, mono timestamps. --- */
.TimelineCard {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: var(--space-24);
  align-self: start;
}
.TimelineList {
  position: relative;
  display: grid;
  gap: var(--space-24);
  padding: var(--space-20) 0 var(--space-20) var(--space-4);
}
.TimelineList::before {
  content: "";
  position: absolute;
  top: var(--space-24);
  bottom: var(--space-24);
  left: 8px;
  width: 1px;
  background: var(--color-stone);
}
.TimelineEvent {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-24) 1fr;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
}
.TimelineDot {
  position: relative;
  z-index: var(--z-raised);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--color-eggshell);
  box-sizing: content-box;
  margin-left: 2px;
  align-self: center;
}
.TimelineTime { grid-column: 2; }
.TimelineText {
  grid-column: 2;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-graphite);
}

/* --- Profitability & LP protection cards --- */
.ProfitGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.ProfitCard {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: var(--space-40);
}
.ProfitTitle {
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.ProfitBody {
  margin-top: var(--space-16);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-smoke);
}
.ProfitList {
  margin-top: var(--space-24);
  border-top: 1px solid var(--color-stone);
}
.ProfitItem {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-stone);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-graphite);
}
.ProfitFootnote {
  margin-top: var(--space-32);
  max-width: 62ch;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-smoke);
}
@media (min-width: 66rem) {
  .ProfitGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
}

/* --- Testimonials: quote cards with an oversized display-face
       quotation mark as the only ornament. --- */
.QuoteGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.QuoteCard {
  margin: 0;
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
}
.QuoteMark {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.6;
  color: var(--color-ash);
}
.QuoteText {
  margin: var(--space-16) 0 0;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-graphite);
}
.QuoteAttribution {
  margin-top: auto;
  padding-top: var(--space-24);
  display: grid;
  gap: var(--space-4);
}
.QuoteAuthor {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-brand);
}
.QuoteRole {
  font-size: 0.8125rem;
  color: var(--color-smoke);
}
@media (min-width: 66rem) {
  .QuoteGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
}


/* ============================================================
   22. PAGE RAIL · DATA VISUALS · LINE ARTWORKS
   ============================================================ */

/* --- Floating section rail: tick marks pinned to the right edge
       on wide pointer-driven screens. Labels slide in on hover
       or keyboard focus; the active tick stretches and inks. --- */
.PageRail { display: none; }
@media (min-width: 90rem) and (pointer: fine) {
  .PageRail {
    position: fixed;
    right: var(--space-24);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    z-index: var(--z-raised);
    display: grid;
    gap: 0;                               /* ticks sit tight together        */
    /* Hidden while the hero is on screen; Script.js reveals the rail
       once the visitor scrolls past it. */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
  }
  .PageRail.IsVisible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
  .RailLink {
    position: relative;                   /* anchors the floating label      */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-block: 2px;                   /* compact tick rhythm             */
    min-height: 12px;
  }
  .RailTick {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-ash);
    transition: background-color var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
  }
  .RailLabel {
    /* Floats to the left of its tick without adding to the tick's
       height, so the rail stays tightly packed. */
    position: absolute;
    right: calc(100% + var(--space-8));
    top: 50%;
    opacity: 0;
    transform: translate(4px, -50%);
    padding: var(--space-4) var(--space-12);
    background: var(--color-eggshell);
    border: 1px solid var(--color-stone);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    color: var(--color-graphite);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
  }
  .RailLink:hover .RailLabel,
  .RailLink:focus-visible .RailLabel { opacity: 1; transform: translate(0, -50%); }
  .RailLink:hover .RailTick { background: var(--color-graphite); }
  .RailLink.IsActive .RailTick {
    background: var(--color-ink);
    transform: scaleX(1.5);
    transform-origin: right center;
  }
}

/* --- Domain flow-mix bar: one stacked horizontal bar plus a
       legend of chips. Segment widths come from --SegValue. --- */
.DomainMix {
  margin-top: var(--space-24);
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: clamp(var(--space-24), 4vw, var(--space-40));
}
.DomainMixHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding-bottom: var(--space-20);
}
.DomainMixBar {
  display: flex;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-warm-taupe);
}
.DomainMixSegment { display: block; height: 100%; width: var(--SegValue, 10%); }
.SegViolet   { background: var(--color-accent-violet); }
.SegEmber    { background: var(--color-accent-ember); }
.SegTeal     { background: var(--color-accent-teal); }
.SegGold     { background: var(--color-accent-gold); }
.SegGraphite { background: var(--color-graphite); }
.SegStone    { background: var(--color-stone); }
.DomainMixLegend {
  margin-top: var(--space-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
}
.DomainMixKey {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.8125rem;
  color: var(--color-smoke);
}
.DomainMixSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.DomainMix .RiskPanelCaption {
  border-top: 1px solid var(--color-stone);
  margin-top: var(--space-20);
}

/* --- Score-distribution histogram: bars rise from a hairline
       baseline; the High and Critical buckets carry the ember
       accent. Heights come from --BarH. --- */
.ScoreStack {
  display: grid;
  gap: var(--space-16);
  align-self: start;
}
.DistributionCard {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: var(--space-32);
}
.DistributionBars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  height: 120px;
  margin-top: var(--space-20);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-stone);
}
.DistributionBar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--BarH, 20%);
  border-radius: 3px 3px 0 0;
  background: var(--color-stone);
}
.DistributionBarHot { background: var(--color-ember-orange); }
.DistributionScale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-8);
}
.DistributionCard .RiskPanelCaption { border-top: 0; padding-top: var(--space-16); }

/* --- Loss-curve chart: two SVG paths on a hairline grid —
       conceptual shape only, clearly labelled as such. --- */
.LossCurveCard {
  margin-bottom: var(--space-48);
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: clamp(var(--space-24), 4vw, var(--space-40));
}
.LossCurveChart { width: 100%; height: auto; display: block; margin-top: var(--space-20); }
.LossCurveLegend {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
}
.LossCurveCard .RiskPanelCaption {
  border-top: 1px solid var(--color-stone);
  margin-top: var(--space-20);
}

/* --- Monochrome line artworks: intricate single-color SVG
       pieces that shift the mood without adding new hues. They
       inherit stone/ink from the theme and stay decorative. --- */
.ArtworkFrame { color: var(--color-stone); }
.RadarArtwork {
  width: min(100%, 320px);
  height: auto;
  justify-self: end;
  color: var(--color-stone);
}
.FlowArtwork {
  width: 100%;
  height: auto;
  display: block;
  color: var(--color-stone);
  margin-bottom: var(--space-40);
}
.CtaBanner { position: relative; overflow: hidden; }
.CtaInner { position: relative; z-index: var(--z-raised); }
.CtaArtwork {
  position: absolute;
  right: max(var(--space-24), 6vw);
  top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 420px);
  height: auto;
  color: var(--color-eggshell);
  opacity: 0.22;
  pointer-events: none;
  display: none;
}
@media (min-width: 66rem) {
  .CtaArtwork { display: block; }
}


/* ============================================================
   23. SECTION VARIETY & FOOTER EXTRAS
   Per-family layouts for the detection library, small inline
   icons for stats / teams / signal families, extra artworks,
   and the footer's map + social row.
   ============================================================ */

/* --- Inline icons: stat strip, team rows, profit cards, and
       signal-family terms. All 20–22px, quiet graphite. --- */
.StatIcon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--color-graphite);
}
.InlineIcon {
  display: inline-block;
  vertical-align: -4px;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--space-8);
  color: var(--color-graphite);
}

/* --- Execution family: stat-led intro (big monitor count plus
       mono capability chips) over a denser four-up card grid. --- */
.FamilyStatRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-32);
  margin-bottom: var(--space-40);
  padding: var(--space-24) var(--space-32);
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-cards);
}
.FamilyStatFigure {
  display: flex;
  gap: var(--space-12);
}
.FamilyStatNumber {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent-violet);
}
.FamilyStatLabel {
  max-width: 14ch;
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-graphite);
}
.FamilyStatChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-inline-start: auto;
}
.FamilyStatChip {
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-smoke);
  white-space: nowrap;
}
@media (min-width: 66rem) {
  .DetailGridCompact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .DetailGridCompact .DetailCard { padding: var(--space-20) var(--space-20) var(--space-24); }
}

/* --- Event family: a 24-hour risk-window strip above a two-
       column hairline ledger (no cards at all). --- */
.EventStrip {
  margin-bottom: var(--space-40);
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: var(--space-24) var(--space-32) var(--space-20);
}
/* The 24-hour chart itself is SVG; text inside it uses the mono
   micro-label voice via the classes below. */
.EventChart {
  display: block;
  width: 100%;
  height: auto;
}
.EventChartText {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--color-smoke);
}
.EventChartLabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--color-graphite);
}
.EventStripLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  margin-top: var(--space-12);
}
.EventStrip .RiskPanelCaption {
  border-top: 1px solid var(--color-stone);
  margin-top: var(--space-16);
  padding-top: var(--space-12);
}

.LedgerGrid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-64);
  border-top: 1px solid var(--color-stone);
}
.LedgerRow {
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-stone);
}
.LedgerRow .DetailDot {
  display: inline-block;
  margin: 0 var(--space-8) 1px 0;
}
.LedgerTitle {
  display: inline;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.LedgerBody {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 58ch;
}
@media (min-width: 66rem) {
  .LedgerGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Collusion family: linkage panel (one strategy, many
       accounts) beside a two-up grid of compact cards. --- */
.ClusterPanel {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards);
  padding: var(--space-32);
  align-self: start;
}
.ClusterFigure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}
.ClusterFigure em {
  font-style: normal;
  color: var(--color-error);   /* red highlight — rose-red in dark   */
}
.ClusterCaption {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--color-smoke);
}
.ClusterMeters {
  margin-top: var(--space-24);
  display: grid;
  gap: var(--space-12);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-stone);
}
.SignalMeterTeal { background: var(--color-error); }   /* cluster meters read as red flags */
.ClusterPanel .RiskPanelCaption {
  margin-top: var(--space-20);
  padding-top: var(--space-12);
}
.DetailGridDuo { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .DetailGridDuo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Automation family: an indexed spec table — mono codes,
       hairline rows, no cards. --- */
.SpecTable { border-top: 1px solid var(--color-stone); }
.SpecRow {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-4) var(--space-16);
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-stone);
}
.SpecCode {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-graphite);
  padding-top: var(--space-4);
}
.SpecCode .DetailDot { margin: 0; }
.SpecTitle {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.SpecBody {
  grid-column: 2;
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-smoke);
  max-width: 62ch;
}
@media (min-width: 66rem) {
  .SpecRow { grid-template-columns: 5.5rem 16rem 1fr; }
  .SpecBody { grid-column: 3; margin-top: 0; }
}

/* --- Process section: route artwork beside the step list. --- */
.ProcessBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}
.ProcessArtwork {
  display: none;
  color: var(--color-stone);
  width: min(100%, 300px);
}
@media (min-width: 66rem) {
  .ProcessBody { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ProcessArtwork { display: block; }
}

/* --- Small artworks: erosion bars under the pain-point copy,
       map-pin grid under the contact details. --- */
.ProblemArtwork {
  margin-top: var(--space-40);
  width: min(100%, 280px);
  height: auto;
  color: var(--color-stone);
}
.ContactArtwork {
  margin-top: var(--space-40);
  width: min(100%, 280px);
  height: auto;
  color: var(--color-stone);
}
.TeamsArtwork {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-stone);
  margin-bottom: var(--space-32);
}
.FaqArtwork {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-stone);
  margin-bottom: var(--space-24);
}

/* --- Footer extras: brand mark row, Google Maps button, and a
       monochrome social-icon row. --- */
.FooterBrandRow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.FooterBrandRow .BrandMark { width: 42px; height: 42px; }

/* Quiet text link to the map — no button chrome. */
.FooterMapLink {
  margin-top: var(--space-16);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  white-space: nowrap;
}
.FooterMapLink .CardIcon {
  width: 18px;
  height: 18px;
  margin: 0;
  color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .FooterMapLink:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
}

/* Bare monochrome social icons — no circles, no borders. */
.FooterSocialRow {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}
.SocialLink {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-graphite);
  transition: color var(--dur-micro) var(--ease-out);
}
.SocialLink:active { color: var(--color-smoke); }
@media (hover: hover) and (pointer: fine) {
  .SocialLink:hover { color: var(--color-ink); }
}
.SocialLink svg { width: 20px; height: 20px; }