/* ============================================================
   Broker Risk — StyleSheet.css
   Warm-Cream Editorial Design System · Light Theme Only
   ============================================================ */


/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* Surfaces & ink */
  --ColorEggshell:       #fdfcfc;  /* page canvas — warm off-white, never pure white   */
  --ColorWarmTaupe:     #f5f3f1;  /* section bands & feature cards                    */
  --ColorStone:          #ebe8e4;  /* hairline borders, dividers, icon plates          */
  --ColorInk:            #000000;  /* primary text, filled buttons — the only hard     */
  --ColorInkSoft:       #262320;  /* hover state for ink-filled surfaces              */
  --ColorGraphite:       #44403b;  /* strong secondary text                            */
  --ColorSmoke:          #777169;  /* body & muted copy (light-canvas floor: 4.7:1)    */
  --ColorSmokeDeep:     #6b655d;  /* smoke variant for taupe surfaces — keeps muted
                                       copy above the 4.5:1 contrast floor              */
  --ColorAsh:            #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. */
  --ColorVioletSpark:   #0447ff;
  --ColorEmberOrange:   #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. */
  --ColorAccentViolet:  #0447ff;
  --ColorAccentEmber:   #ff4704;
  --ColorAccentTeal:    #008f72;
  --ColorAccentGold:    #b87400;
  /* Sand family — three warm steps (pale sun → camel → earth)
     used by the MetaTrader positioning cards. */
  --ColorAccentSun:     #a67c00;
  --ColorAccentCamel:   #a06a2c;
  --ColorAccentEarth:   #7c6440;
  --ColorAccentGray:    #6e6a66;
  --TintViolet:          rgba(4, 71, 255, 0.07);
  --TintEmber:           rgba(255, 71, 4, 0.07);
  --TintTeal:            rgba(0, 143, 114, 0.08);
  --TintGold:            rgba(184, 116, 0, 0.08);
  --TintGray:            rgba(110, 106, 102, 0.09);
  --TintSun:             rgba(212, 168, 20, 0.10);
  --TintCamel:           rgba(166, 112, 48, 0.13);
  --TintEarth:           rgba(124, 100, 64, 0.17);

  /* Functional colors */
  --ColorBorderButton:  #e5e5e5;                    /* pill button hairline           */
  --ColorEggshellFrost: rgba(253, 252, 252, 0.82);  /* frosted nav background         */
  --ColorError:          #b42318;                    /* form validation only           */
  --ColorOnInkMuted:   #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. */
  --FontDisplay: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --FontBody:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --FontMono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --TextCaption:     0.75rem;    /* 12px — mono micro-labels        */
  --TextBodySm:     0.875rem;   /* 14px                            */
  --TextBody:        1rem;       /* 16px                            */
  --TextSubheading:  1.125rem;   /* 18px                            */
  --TextBodyLg:     1.25rem;    /* 20px                            */
  --TextHeading2xs: 1.375rem;   /* 22px — card titles              */
  --TextHeadingXs:  1.5rem;     /* 24px — panel titles             */
  --TextHeading:     clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);  /* 28→36px section titles */
  --TextDisplay:     clamp(2.125rem, 1.6rem + 2.3vw, 3rem);     /* 34→48px hero           */

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

  --WeightLight:   300;          /* display only — never bolder     */
  --WeightRegular: 400;
  --WeightMedium:  500;
  --WeightBrand:   600;          /* wordmark only                   */

  /* Spacing (4px base) */
  --Space4:   0.25rem;
  --Space8:   0.5rem;
  --Space12:  0.75rem;
  --Space16:  1rem;
  --Space20:  1.25rem;
  --Space24:  1.5rem;
  --Space32:  2rem;
  --Space40:  2.5rem;
  --Space48:  3rem;
  --Space64:  4rem;
  --Space96:  6rem;

  /* Layout */
  --PageGutter: clamp(20px, 4vw, 32px);
  --PageMaxWidth: calc(1200px + (var(--PageGutter) * 2));
  --NavHeight:     64px;

  /* Radii */
  --RadiusInputs:      6px;
  --RadiusCards:       20px;
  --RadiusLargeCards: 24px;
  --RadiusFull:        9999px;

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

  /* Motion */
  --EaseOut:    cubic-bezier(0.16, 1, 0.3, 1);
  --EaseIn:     cubic-bezier(0.7, 0, 0.84, 0);
  --EaseInOut: cubic-bezier(0.65, 0, 0.35, 1);
  --DurMicro:   120ms;
  --DurShort:   220ms;
  --DurLong:    420ms;

  /* Named z-scale — no freestyle z-index values */
  --ZRaised:   10;
  --ZSticky:   200;
  --ZOverlay:  400;
}


/* ============================================================
   Reset And Base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;                       /* page never scrolls sideways      */
  scroll-padding-top: calc(var(--NavHeight) + 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(--ColorEggshell);
  color: var(--ColorInk);
  font-family: var(--FontBody);
  font-size: var(--TextBody);
  font-weight: var(--WeightRegular);
  letter-spacing: var(--TrackingBody);
  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(--ColorStone);
  color: var(--ColorInk);
}

/* Emphasised keywords inside running copy: heavier and one step
   darker than the muted paragraph around them. */
strong {
  font-weight: var(--WeightBrand);
  color: var(--ColorGraphite);
  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(--ColorInk);
  outline-offset: 3px;
  border-radius: var(--RadiusInputs);
}

/* 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 {
  --ColorSmoke: var(--ColorSmokeDeep);
}

/* 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;
}


/* ============================================================
   Utilities
   ============================================================ */
.Container {
  max-width: var(--PageMaxWidth);
  margin-inline: auto;
  padding-inline: var(--PageGutter);
}

/* Technical micro-label voice: mono, tracked, uppercase, quiet. */
.MonoLabel {
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  font-weight: var(--WeightRegular);
  letter-spacing: var(--TrackingMono);
  text-transform: uppercase;
  color: var(--ColorSmoke);
}

/* Visible only when focused — first tab stop on the page. */
.SkipLink {
  position: fixed;
  top: var(--Space12);
  left: var(--Space12);
  z-index: var(--ZOverlay);
  padding: var(--Space12) var(--Space20);
  background: var(--ColorInk);
  color: var(--ColorEggshell);
  border-radius: var(--RadiusFull);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  transform: translateY(-200%);
}
.SkipLink:focus-visible {
  transform: none;
  outline-color: var(--ColorInk);
}


/* ============================================================
   Buttons
   ============================================================ */
.PillButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                       /* touch-target floor               */
  padding: 0 var(--Space24);
  border-radius: var(--RadiusFull);
  font-family: var(--FontBody);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  letter-spacing: var(--TrackingBody);
  white-space: nowrap;                    /* affordances never wrap           */
  cursor: pointer;
  transition: background-color var(--DurShort) var(--EaseOut),
              border-color var(--DurShort) var(--EaseOut),
              transform var(--DurMicro) var(--EaseOut);
}
.PillButton:active { transform: translateY(1px); }

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

.PillButtonSecondary {
  background: var(--ColorEggshell);
  color: var(--ColorInk);
  border: 1px solid var(--ColorBorderButton);
}

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

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


/* ============================================================
   Header & Navigation
   ============================================================ */
.SiteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--ZSticky);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--DurShort) var(--EaseOut),
              border-color var(--DurShort) var(--EaseOut);
}
.SiteHeader.IsScrolled {
  background: var(--ColorEggshellFrost);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--ColorStone);
}

/* --- 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(--TintGold);          /* creamy pale-camel wash          */
  border-bottom: 1px solid var(--ColorStone);
  transition: grid-template-rows var(--DurShort) var(--EaseInOut);
}
.SiteHeader.IsScrolled .AnnouncementBar { grid-template-rows: 0fr; border-bottom-color: transparent; }
[hidden] { display: none !important; }
.AnnouncementBar[hidden] { display: none; }
.AnnouncementClip { overflow: hidden; }
.AnnouncementInner {
  max-width: var(--PageMaxWidth);
  margin-inline: auto;
  padding-inline: var(--PageGutter);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--Space12);
}
.AnnouncementText {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  font-size: var(--TextBodySm);
  color: var(--ColorGraphite);
  min-width: 0;
}
.AnnouncementDot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ColorAccentGold);
}
.AnnouncementLink {
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorInk);
  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(--RadiusFull);
  color: var(--ColorGraphite);
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut);
}
.AnnouncementDismiss:active { background: var(--ColorStone); }
@media (hover: hover) and (pointer: fine) {
  .AnnouncementDismiss:hover { background: var(--ColorWarmTaupe); color: var(--ColorInk); }
}

.NavInner {
  max-width: var(--PageMaxWidth);
  margin-inline: auto;
  padding-inline: var(--PageGutter);
  height: var(--NavHeight);
  display: grid;
  grid-template-columns: 1fr auto;        /* brand | actions (mobile)         */
  align-items: center;
  gap: var(--Space16);
}

.NavBrand {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  justify-self: start;
  font-family: var(--FontDisplay);
  font-size: var(--TextSubheading);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.BrandMark { color: var(--ColorInk); flex: none; }
/* Keep the shield face matched to the page canvas on the brand tile. */
.BrandMark path:nth-child(2) { fill: var(--ColorEggshell); }

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

.NavLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--Space12);
  border-radius: var(--RadiusFull);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorGraphite);
  white-space: nowrap;
  transition: color var(--DurMicro) var(--EaseOut),
              background-color var(--DurMicro) var(--EaseOut);
}
@media (hover: hover) and (pointer: fine) {
  .NavLink:hover { color: var(--ColorInk); background: var(--ColorWarmTaupe); }
}
/* Active section marker, driven by IntersectionObserver in Script.js. */
.NavLink.IsActive { color: var(--ColorInk); background: var(--ColorWarmTaupe); }

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

/* Hamburger — two bars that form an X when open. */
.NavToggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--Space4);
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ColorBorderButton);
  border-radius: var(--RadiusFull);
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut);
}
.NavToggle:active { background: var(--ColorWarmTaupe); }
.NavToggleBar {
  width: 16px;
  height: 1.5px;
  background: var(--ColorInk);
  transition: transform var(--DurShort) var(--EaseInOut);
}
.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(--ColorEggshell);
  border-bottom: 1px solid var(--ColorStone);
}
.MobileMenu nav {
  max-width: var(--PageMaxWidth);
  margin-inline: auto;
  padding: var(--Space8) var(--PageGutter) var(--Space24);
  display: grid;
  gap: var(--Space4);
}
.MobileMenuLink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--Space12);
  border-radius: var(--RadiusInputs);
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
  color: var(--ColorGraphite);
}
.MobileMenuLink:active { background: var(--ColorWarmTaupe); }
.MobileMenuCta { margin-top: var(--Space12); 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; }
}


/* ============================================================
   Hero
   ============================================================ */
.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(--NavHeight) + clamp(5.5rem, 10vw, 9rem));
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

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

.HeroTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextDisplay);
  font-weight: var(--WeightLight);       /* the whisper weight — never bolder */
  letter-spacing: var(--TrackingDisplay);
  line-height: 1.08;
  max-width: 16ch;
}

.HeroLede {
  margin-top: var(--Space24);
  max-width: 52ch;
  font-size: var(--TextSubheading);
  line-height: 1.6;
  color: var(--ColorSmoke);
}

.HeroActions {
  margin-top: var(--Space32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space12);
}

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

/* --- Risk-intelligence panel — illustrative product concept.
       The one place the violet/orange sparks are permitted.     --- */
.RiskPanel {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space24);
  max-width: 26rem;
}

.RiskPanelHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--Space16);
  padding-bottom: var(--Space16);
  border-bottom: 1px solid var(--ColorStone);
}
.RiskPanelTitle {
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
}

.RiskPanelScore {
  display: flex;
  align-items: center;
  gap: var(--Space24);
  padding-block: var(--Space20);
}

/* 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(--ColorVioletSpark),
    var(--ColorEmberOrange) 68%,
    var(--ColorStone) 68% 100%
  );
  display: grid;
  place-items: center;
}
.ScoreDialInner {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--ColorEggshell);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--Space4);
}
.ScoreValue {
  font-family: var(--FontDisplay);
  font-size: 1.75rem;
  font-weight: var(--WeightLight);
  letter-spacing: var(--TrackingDisplay);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ScoreBand {
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: var(--TrackingMono);
  text-transform: uppercase;
  color: var(--ColorGraphite);
}

.ScoreLegend {
  display: grid;
  gap: var(--Space8);
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
}
.ScoreLegend li { display: flex; align-items: center; gap: var(--Space8); }
.LegendDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.LegendDotHigh { background: var(--ColorEmberOrange); }
.LegendDotMid  { background: var(--ColorVioletSpark); }
.LegendDotLow  { background: var(--ColorStone); }

.SignalList {
  display: grid;
  gap: var(--Space12);
  padding-block: var(--Space16);
  border-top: 1px solid var(--ColorStone);
}
.SignalRow { display: grid; gap: var(--Space4); }
.SignalName { font-size: var(--TextBodySm); color: var(--ColorGraphite); }
.SignalMeter {
  height: 4px;
  border-radius: var(--RadiusFull);
  background: var(--ColorStone);
  overflow: hidden;
}
.SignalMeterFill {
  display: block;
  height: 100%;
  width: var(--MeterValue, 50%);
  border-radius: inherit;
  background: var(--ColorVioletSpark);
}
.SignalMeterHigh { background: var(--ColorEmberOrange); }

.RiskPanelCaption {
  padding-top: var(--Space12);
  border-top: 1px solid var(--ColorStone);
}

.DeskShowcase .RiskPanelCaption {
  margin: 0 var(--Space24) var(--Space16);
}

/* --- Trust chips: broker-facing operating commitments, each with
       a small accent dot. The dots are the only color they carry. --- */
.TrustRow {
  margin-top: var(--Space40);
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
}
.TrustChip {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 40px;
  padding: 0 var(--Space16);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusFull);
  font-size: var(--TextBodySm);
  color: var(--ColorGraphite);
  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(--ColorAccentViolet); }
.DotEmber  { background: var(--ColorAccentEmber); }
.DotTeal   { background: var(--ColorAccentTeal); }
.DotGold   { background: var(--ColorAccentGold); }

/* --- Stat strip: product scope, not performance claims. --- */
.StatStrip {
  margin-top: var(--Space64);
  padding-top: var(--Space40);
  border-top: 1px solid var(--ColorStone);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Space32) var(--Space24);
}
/* Icon plate on the left, value + caption stacked on the right. */
.StatItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--Space8) var(--Space16);
  align-content: start;
}
.StatItem .IconPlate {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  margin: 0;
}
.StatItem .StatIcon { width: 26px; height: 26px; color: var(--ColorInk); }
.StatValue {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeadingXs);
  font-weight: var(--WeightLight);
  letter-spacing: var(--TrackingDisplay);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: end;
}
.StatCaption {
  font-size: var(--TextBodySm);
  line-height: 1.55;
  color: var(--ColorSmoke);
  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)); }
}


/* ============================================================
   Sections
   ============================================================ */
.Section { padding-block: clamp(4rem, 9vw, 6.5rem); }
.SectionTaupe { background: var(--ColorWarmTaupe); }
.SectionRuled { border-top: 1px solid var(--ColorStone); }
/* 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(--FontDisplay);
  font-size: var(--TextHeading);
  font-weight: var(--WeightLight);
  letter-spacing: var(--TrackingDisplay);
  line-height: 1.17;
  max-width: 20ch;
}

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

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

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


/* ============================================================
   Pain Ledger
   ============================================================ */
.PainLedger { border-top: 1px solid var(--ColorStone); }
.SectionTaupe .PainLedger { border-color: var(--ColorStone); }

.PainRow {
  padding-block: var(--Space20);
  border-bottom: 1px solid var(--ColorStone);
}
.PainTitle {
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.PainBody {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  max-width: 58ch;
}


/* ============================================================
   Pillar Cards
   ============================================================ */
.PillarGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space16);
}

.PillarCard {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  padding: var(--Space32);
}
/* 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(--ColorEggshell);
  border: 1px solid var(--ColorStone);
}
.PillarTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeading2xs);
  font-weight: var(--WeightLight);
  letter-spacing: -0.01em;
}
.PillarBody {
  margin-top: var(--Space12);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
}

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


/* ============================================================
   Coverage
   ============================================================ */
.CoveragePanel {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: clamp(var(--Space24), 4vw, var(--Space40));
}

.TabList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
  padding-bottom: var(--Space24);
  border-bottom: 1px solid var(--ColorStone);
}

.TabPill {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 44px;
  padding: 0 var(--Space16);
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorBorderButton);
  border-radius: var(--RadiusFull);
  font-family: var(--FontBody);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorGraphite);
  white-space: nowrap;                     /* tab labels never wrap           */
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut),
              border-color var(--DurMicro) var(--EaseOut),
              color var(--DurMicro) var(--EaseOut);
}
.TabPill:active { background: var(--ColorStone); }
.TabPill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ColorStone);
  transition: background-color var(--DurMicro) var(--EaseOut);
}
@media (hover: hover) and (pointer: fine) {
  .TabPill:hover { background: var(--ColorWarmTaupe); }
}
.TabPill[aria-selected="true"] {
  border-color: var(--ColorInk);
  color: var(--ColorInk);
}
.TabPill[aria-selected="true"]::before { background: var(--ColorInk); }

.TabPanel { padding-top: var(--Space24); }
.TabPanelTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeadingXs);
  font-weight: var(--WeightLight);
  letter-spacing: -0.01em;
}
.TabPanelBody {
  margin-top: var(--Space12);
  color: var(--ColorSmoke);
  line-height: 1.6;
  max-width: 62ch;
}

.SignalChips {
  margin-top: var(--Space24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
}
.SignalChip {
  padding: var(--Space8) var(--Space16);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusFull);
  font-size: 0.8125rem;                    /* 13px */
  line-height: 1.4;
  color: var(--ColorGraphite);
}


/* ============================================================
   Signals & Score Ladder
   ============================================================ */
.SignalFamilies {
  margin-top: var(--Space32);
  border-top: 1px solid var(--ColorStone);
}
.SignalFamily {
  padding-block: var(--Space16);
  border-bottom: 1px solid var(--ColorStone);
}
.SignalFamilyName {
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.SignalFamilyBody {
  margin: var(--Space8) 0 0;
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  max-width: 58ch;
}

.ScoreLadder {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space32);
  align-self: start;
}
.ScoreLadderHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--Space16);
  padding-bottom: var(--Space16);
  border-bottom: 1px solid var(--ColorStone);
}
.ScoreBandList { display: grid; }
.ScoreBandRow {
  display: grid;
  grid-template-columns: 4.5rem 5.5rem 1fr;
  align-items: baseline;
  gap: var(--Space12);
  padding-block: var(--Space16);
  border-bottom: 1px solid var(--ColorStone);
}
.ScoreBandRange { color: var(--ColorGraphite); }
.ScoreBandName { font-weight: var(--WeightMedium); }
.ScoreBandNote {
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
}
.ScoreLadder .RiskPanelCaption { border-top: 0; padding-top: var(--Space16); }

@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); }
}


/* ============================================================
   Step Sequence
   ============================================================ */
.StepList {
  max-width: 46rem;
  border-top: 1px solid var(--ColorStone);
}
.StepItem {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--Space16);
  padding-block: var(--Space24);
  border-bottom: 1px solid var(--ColorStone);
}
.StepNumber { padding-top: var(--Space4); color: var(--ColorSmoke); }
.StepTitle {
  font-size: var(--TextSubheading);
  font-weight: var(--WeightMedium);
}
.StepText {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  max-width: 58ch;
}

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


/* ============================================================
   Team Rows
   ============================================================ */
.TeamRows { border-top: 1px solid var(--ColorStone); }
.TeamRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space8) var(--Space32);
  padding-block: var(--Space24);
  border-bottom: 1px solid var(--ColorStone);
}
.TeamName {
  font-size: var(--TextSubheading);
  font-weight: var(--WeightMedium);
}
.TeamBody {
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  max-width: 62ch;
}

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


/* ============================================================
   Integration Columns
   ============================================================ */
.InfoColumns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space16);
}
.InfoColumn {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusCards);
  padding: var(--Space32);
}
.InfoColumnTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeading2xs);
  font-weight: var(--WeightLight);
  letter-spacing: -0.01em;
  padding-bottom: var(--Space16);
}
.InfoList { border-top: 1px solid var(--ColorStone); }
.InfoItem {
  padding-block: var(--Space12);
  border-bottom: 1px solid var(--ColorStone);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorGraphite);
}

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


/* ============================================================
   FAQ
   ============================================================ */
.FaqInner { max-width: 52rem; }
.FaqInner .SectionHead { margin-bottom: var(--Space32); }

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

.FaqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space24);
  width: 100%;
  padding: var(--Space20) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--FontBody);
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
  letter-spacing: var(--TrackingBody);
  color: var(--ColorInk);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .FaqQuestion:hover { color: var(--ColorGraphite); }
}
.FaqQuestion:active { color: var(--ColorSmoke); }

/* 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(--ColorInk);
  transform: translateY(-50%);
  transition: transform var(--DurShort) var(--EaseInOut);
}
.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(--DurLong) var(--EaseInOut);
}
.FaqItem.IsOpen .FaqAnswer { grid-template-rows: 1fr; }
.FaqAnswerInner { overflow: hidden; }
.FaqAnswerInner p {
  padding-bottom: var(--Space20);
  max-width: 65ch;
  font-size: var(--TextBodySm);
  line-height: 1.65;
  color: var(--ColorSmoke);
}


/* ============================================================
   CTA Band
   ============================================================ */
.CtaBanner {
  background: var(--ColorInk);
  color: var(--ColorEggshell);
  padding-block: clamp(4rem, 9vw, 6rem);
}
.CtaInner { max-width: 44rem; }
.CtaTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeading);
  font-weight: var(--WeightLight);
  letter-spacing: var(--TrackingDisplay);
  line-height: 1.17;
  max-width: 22ch;
}
.CtaText {
  margin-top: var(--Space16);
  max-width: 48ch;
  line-height: 1.6;
  color: var(--ColorOnInkMuted);
}
.CtaBanner .PillButtonInverse { margin-top: var(--Space32); }
/* Focus rings must stay visible against the ink surface. */
.CtaBanner :focus-visible { outline-color: var(--ColorEggshell); }


/* ============================================================
   Contact & Form
   ============================================================ */
#Contact { padding-bottom: clamp(5rem, 10vw, 7.5rem); }

.ContactDetails {
  margin-top: var(--Space40);
  border-top: 1px solid var(--ColorStone);
}
.ContactDetail {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--Space16);
  align-items: baseline;
  padding-block: var(--Space16);
  border-bottom: 1px solid var(--ColorStone);
}
.ContactDetailValue { font-size: var(--TextBodySm); line-height: 1.6; color: var(--ColorGraphite); }
a.ContactDetailValue { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ColorStone); }
@media (hover: hover) and (pointer: fine) {
  a.ContactDetailValue:hover { text-decoration-color: var(--ColorInk); }
}

.ContactFormWrapper {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusLargeCards);
  padding: clamp(var(--Space24), 4vw, var(--Space40));
}

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

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

.FieldLabel {
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
}

.FieldInput {
  min-height: 44px;                        /* matches button height           */
  padding: var(--Space8) var(--Space12);
  background: var(--ColorEggshell);
  color: var(--ColorInk);
  border: 1px solid var(--ColorBorderButton);   /* width constant, all states */
  border-radius: var(--RadiusInputs);
  font-family: var(--FontBody);
  font-size: var(--TextBodySm);
  letter-spacing: var(--TrackingBody);
  outline: 2px solid transparent;          /* reserved focus slot — no shift  */
  outline-offset: 1px;
  transition: background-color var(--DurMicro) var(--EaseOut),
              border-color var(--DurMicro) var(--EaseOut);
}
.FieldInput::placeholder { color: var(--ColorSmoke); }
@media (hover: hover) and (pointer: fine) {
  .FieldInput:hover { background: var(--ColorWarmTaupe); }
}
.FieldInput:focus-visible {
  outline-color: var(--ColorInk);
  border-color: var(--ColorGraphite);
  border-radius: var(--RadiusInputs);
  background: var(--ColorEggshell);
}
.FieldInput[aria-invalid="true"] { border-color: var(--ColorError); }

.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(--ColorSmoke);
}
.FieldHelp.IsError { color: var(--ColorError); }

/* 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(--Space8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Space16);
}
.FormNote {
  font-size: var(--TextBodySm);
  line-height: 1.5;
  color: var(--ColorSmoke);
}
.FormNote.IsError { color: var(--ColorError); }

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


/* ============================================================
   Footer
   ============================================================ */
.SiteFooter {
  border-top: 1px solid var(--ColorStone);
  padding-block: var(--Space64) var(--Space32);
}

.FooterGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space40) var(--Space32);
}
.FooterWordmark {
  font-family: var(--FontDisplay);
  font-size: var(--TextBodyLg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.FooterTagline {
  margin-top: var(--Space4);
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
}
.FooterDescription {
  margin-top: var(--Space16);
  max-width: 34ch;
  font-size: var(--TextBodySm);
  line-height: 1.7;
  color: var(--ColorSmoke);
}
.FooterAddress {
  margin-top: var(--Space20);
  font-size: var(--TextBodySm);
  line-height: 1.7;
  color: var(--ColorSmoke);
}

.FooterColumnTitle { margin-bottom: var(--Space12); }
.FooterLinkList { display: grid; }
.FooterLink {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--TextBodySm);
  color: var(--ColorGraphite);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .FooterLink:hover { color: var(--ColorInk); text-decoration: underline; text-underline-offset: 3px; }
}

.FooterResponsibility {
  margin-top: var(--Space48);
  padding-top: var(--Space24);
  border-top: 1px solid var(--ColorStone);
  max-width: 75ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ColorSmoke);
}
.BrokerSetupMark {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.FooterLegal {
  margin-top: var(--Space24);
  max-width: 90ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ColorSmoke);
}
.FooterBottom {
  margin-top: var(--Space24);
  padding-top: var(--Space24);
  border-top: 1px solid var(--ColorStone);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--Space8) var(--Space24);
}
.FooterCopyright {
  font-size: 0.8125rem;
  color: var(--ColorSmoke);
}

@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(--Space40) var(--Space40);
  }
  .FooterBrand { grid-column: auto; }
}


/* ============================================================
   Scroll-to-top
   ============================================================ */
.ScrollTopButton {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--ZRaised);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ColorEggshell);
  color: var(--ColorInk);
  border: 1px solid var(--ColorBorderButton);
  border-radius: var(--RadiusFull);
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut),
              transform var(--DurMicro) var(--EaseOut);
}
@media (hover: hover) and (pointer: fine) {
  .ScrollTopButton:hover { background: var(--ColorWarmTaupe); transform: translateY(-1px); }
}
.ScrollTopButton:active { transform: translateY(0); }
.ScrollTopButton[hidden] { display: none; }


/* ============================================================
   Motion
   ============================================================ */
@keyframes HeroEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.HeroCopy  { animation: HeroEnter var(--DurLong) var(--EaseOut) backwards; }
.RiskPanel { animation: HeroEnter var(--DurLong) var(--EaseOut) 120ms backwards; }
.StatStrip { animation: HeroEnter var(--DurLong) var(--EaseOut) 220ms backwards; }

.JsEnabled .Reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--DurLong) var(--EaseOut),
              transform var(--DurLong) var(--EaseOut);
}
.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; }
}


/* ============================================================
   Accent Components
   ============================================================ */

/* --- Tinted cards (positioning + cost sections) --- */
.TintCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space16);
}
.TintCard,
.CostCard {
  border-radius: var(--RadiusCards);
  padding: var(--Space32);
}
.TintCardViolet { background: var(--TintViolet); }
.TintCardEmber  { background: var(--TintEmber); }
.TintCardTeal   { background: var(--TintTeal); }
.TintCardGold   { background: var(--TintGold); }
.TintCardGray   { background: var(--TintGray); }
.TintCardSun    { background: var(--TintSun); }
.TintCardCamel  { background: var(--TintCamel); }
.TintCardEarth  { background: var(--TintEarth); }

/* 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(--Space20);
}
.TintCardViolet .CardIcon { color: var(--ColorAccentViolet); }
.TintCardEmber  .CardIcon { color: var(--ColorAccentEmber); }
.TintCardTeal   .CardIcon { color: var(--ColorAccentTeal); }
.TintCardGold   .CardIcon { color: var(--ColorAccentGold); }
.TintCardGray   .CardIcon { color: var(--ColorAccentGray); }
.TintCardSun    .CardIcon { color: var(--ColorAccentSun); }
.TintCardCamel  .CardIcon { color: var(--ColorAccentCamel); }
.TintCardEarth  .CardIcon { color: var(--ColorAccentEarth); }

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

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

.TintCardTitle,
.CostCardTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeading2xs);
  font-weight: var(--WeightMedium);
  letter-spacing: -0.01em;
}
.TintCardBody,
.CostCardBody {
  margin-top: var(--Space12);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
}

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

@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(--Space16);
  counter-reset: none;
}
.LifecycleStep {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  padding: var(--Space32);
}
.LifecycleNumber {
  display: block;
  font-family: var(--FontDisplay);
  font-size: 2.5rem;
  font-weight: var(--WeightLight);
  line-height: 1;
  letter-spacing: var(--TrackingDisplay);
  font-variant-numeric: tabular-nums;
}
.NumberViolet { color: var(--ColorAccentViolet); }
.NumberEmber  { color: var(--ColorAccentEmber); }
.NumberTeal   { color: var(--ColorAccentTeal); }
.NumberGold   { color: var(--ColorAccentGold); }
.LifecycleTitle {
  margin-top: var(--Space16);
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.LifecycleBody {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
}
@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(--Space16);
}
.DetailCard {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  padding: var(--Space24) var(--Space24) var(--Space32);
}
.SectionTaupe .DetailCard {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
}
.DetailDot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-bottom: var(--Space16);
}
.AccentViolet .DetailDot { background: var(--ColorAccentViolet); }
.AccentEmber  .DetailDot { background: var(--ColorAccentEmber); }
.AccentTeal   .DetailDot { background: var(--ColorAccentTeal); }
.AccentGold   .DetailDot { background: var(--ColorAccentGold); }
.DetailTitle {
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.DetailBody {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
}
@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(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space24);
  align-self: start;
}
.BehaviourRows {
  display: grid;
  gap: var(--Space16);
  padding-block: var(--Space20);
}
.BehaviourRow { display: grid; gap: var(--Space4); }
.BehaviourLabel {
  font-size: var(--TextBodySm);
  color: var(--ColorGraphite);
  margin-bottom: var(--Space4);
}
.BehaviourTrack {
  display: block;
  height: 6px;
  border-radius: var(--RadiusFull);
  background: var(--ColorWarmTaupe);
  overflow: hidden;
}
.BehaviourBarAccount,
.BehaviourBarBaseline {
  display: block;
  height: 100%;
  width: var(--BarValue, 50%);
  border-radius: inherit;
}
.BehaviourBarAccount  { background: var(--ColorVioletSpark); }
.BehaviourBarBaseline { background: var(--ColorStone); }
.BehaviourLegend {
  display: flex;
  align-items: center;
  gap: var(--Space8);
  font-size: 0.8125rem;
  color: var(--ColorSmoke);
  padding-bottom: var(--Space12);
}
.LegendSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.LegendSwatch + span { margin-inline-end: var(--Space8); }
.LegendSwatchAccount  { background: var(--ColorVioletSpark); }
.LegendSwatchBaseline { background: var(--ColorStone); margin-inline-start: var(--Space8); }

/* --- Case-timeline card (illustrative): vertical rule, colored
       event dots, mono timestamps. --- */
.TimelineCard {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space24);
  align-self: start;
}
.TimelineList {
  position: relative;
  display: grid;
  gap: var(--Space24);
  padding: var(--Space20) 0 var(--Space20) var(--Space4);
}
.TimelineList::before {
  content: "";
  position: absolute;
  top: var(--Space24);
  bottom: var(--Space24);
  left: 8px;
  width: 1px;
  background: var(--ColorStone);
}
.TimelineEvent {
  position: relative;
  display: grid;
  grid-template-columns: var(--Space24) 1fr;
  align-items: baseline;
  gap: var(--Space4) var(--Space8);
}
.TimelineDot {
  position: relative;
  z-index: var(--ZRaised);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ColorEggshell);
  box-sizing: content-box;
  margin-left: 2px;
  align-self: center;
}
.TimelineTime { grid-column: 2; }
.TimelineText {
  grid-column: 2;
  font-size: var(--TextBodySm);
  line-height: 1.5;
  color: var(--ColorGraphite);
}

/* --- Profitability & LP protection cards --- */
.ProfitGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space16);
}
.ProfitCard {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space40);
}
.ProfitTitle {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeadingXs);
  font-weight: var(--WeightMedium);
  letter-spacing: -0.01em;
}
.ProfitBody {
  margin-top: var(--Space16);
  font-size: var(--TextBodySm);
  line-height: 1.65;
  color: var(--ColorSmoke);
}
.ProfitList {
  margin-top: var(--Space24);
  border-top: 1px solid var(--ColorStone);
}
.ProfitItem {
  padding-block: var(--Space12);
  border-bottom: 1px solid var(--ColorStone);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorGraphite);
}
.ProfitFootnote {
  margin-top: var(--Space32);
  max-width: 62ch;
  font-size: var(--TextBodySm);
  line-height: 1.7;
  color: var(--ColorSmoke);
}
@media (min-width: 66rem) {
  .ProfitGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--Space24); }
}

/* --- Testimonials: quote cards with an oversized display-face
       quotation mark as the only ornament. --- */
.QuoteGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space16);
}
.QuoteCard {
  margin: 0;
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  padding: var(--Space32);
  display: flex;
  flex-direction: column;
}
.QuoteMark {
  font-family: var(--FontDisplay);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.6;
  color: var(--ColorAsh);
}
.QuoteText {
  margin: var(--Space16) 0 0;
  font-size: var(--TextBody);
  line-height: 1.65;
  color: var(--ColorGraphite);
}
.QuoteAttribution {
  margin-top: auto;
  padding-top: var(--Space24);
  display: grid;
  gap: var(--Space4);
}
.QuoteAuthor {
  font-size: var(--TextBodySm);
  font-weight: var(--WeightBrand);
}
.QuoteRole {
  font-size: 0.8125rem;
  color: var(--ColorSmoke);
}
@media (min-width: 66rem) {
  .QuoteGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--Space24); }
}


/* ============================================================
   Trading-Day Risk Strip
   ============================================================ */
.SessionLanes {
  display: grid;
  gap: var(--Space8);
  padding-block: var(--Space20) var(--Space24);
}

.SessionLane {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: var(--Space12);
}

.SessionLaneLabel {
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: var(--TrackingMono);
  text-transform: uppercase;
  color: var(--ColorGraphite);
}

.SessionLaneTrack {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  height: 26px;
}

.SessionLaneBar {
  display: flex;
  align-items: center;
  padding-inline: var(--Space12);
  border-radius: var(--RadiusFull);
  font-family: var(--FontMono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}

.LaneAsia {
  grid-column: 1 / 10;
  background: var(--TintTeal);
  color: var(--ColorAccentTeal);
}

.LaneLondon {
  grid-column: 9 / 18;
  background: var(--TintViolet);
  color: var(--ColorAccentViolet);
}

.LaneNewYork {
  grid-column: 14 / 23;
  background: var(--TintEmber);
  color: var(--ColorAccentEmber);
}

.RiskFlagRow {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 0;
  margin-top: var(--Space8);
}

.RiskFlag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  justify-self: start;
  min-width: max-content;
  padding: var(--Space8) var(--Space12);
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusCards);
  margin-bottom: 14px;
}

.RiskFlag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24px;
  width: 2px;
  height: 14px;
}

.RiskFlagGold::after { background: var(--ColorAccentGold); }
.RiskFlagEmber::after { background: var(--ColorAccentEmber); }

.FlagWindowOne { grid-column: 1 / span 6; }
.FlagWindowTwo { grid-column: 9 / span 6; }
.FlagWindowThree { grid-column: 16 / span 5; }
.FlagWindowFour { grid-column: 21 / span 4; justify-self: end; }

.FlagWindowFour::after { left: auto; right: 24px; }

.RiskFlagBadge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--FontMono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ColorEggshell);
  flex: none;
}

.RiskFlagGold .RiskFlagBadge { background: var(--ColorAccentGold); }
.RiskFlagEmber .RiskFlagBadge { background: var(--ColorAccentEmber); }

.RiskFlagText {
  display: grid;
  line-height: 1.3;
}

.RiskFlagText strong {
  font-size: 0.8125rem;
  font-weight: var(--WeightMedium);
  color: var(--ColorInk);
  text-transform: none;
}

.RiskFlagText span {
  font-family: var(--FontMono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ColorSmokeDeep);
}

.RiskHeatStrip {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  height: 46px;
}

.HourCell {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: 6px;
}

.HourCell.HourElevated {
  background: rgba(184, 116, 0, 0.28);
  border-color: var(--ColorAccentGold);
}

.HourCell.HourHigh {
  background: var(--ColorAccentEmber);
  border-color: var(--ColorAccentEmber);
}

.HourScale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--Space8);
  font-family: var(--FontMono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ColorSmokeDeep);
}

.SwatchCalm { background: var(--ColorEggshell); border: 1px solid var(--ColorStone); }
.SwatchElevated { background: rgba(184, 116, 0, 0.28); border: 1px solid var(--ColorAccentGold); }
.SwatchHigh { background: var(--ColorAccentEmber); border: 1px solid var(--ColorAccentEmber); }

@media (max-width: 47.5rem) {
  .RiskFlagRow {
    grid-template-columns: 1fr 1fr;
    gap: var(--Space8);
  }

  .RiskFlag,
  .FlagWindowOne,
  .FlagWindowTwo,
  .FlagWindowThree,
  .FlagWindowFour {
    grid-column: auto;
    justify-self: stretch;
    min-width: 0;
    margin-bottom: var(--Space8);
  }

  .RiskFlag::after {
    display: none;
  }

  .SessionLaneBar {
    font-size: 0;
    padding-inline: 0;
  }
}

/* ============================================================
   Risk Desk Preview
   ============================================================ */
.DeskShowcase {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  overflow: hidden;
}

.DeskTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--Space12);
  padding: var(--Space16) var(--Space24);
  border-bottom: 1px solid var(--ColorStone);
}

.DeskBrand {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightBrand);
  color: var(--ColorInk);
}

.DeskChips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--Space8);
}

.DeskChip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusFull);
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: 0.04em;
  color: var(--ColorSmokeDeep);
  white-space: nowrap;
}

.DeskChipLive {
  border-color: var(--ColorAccentTeal);
  color: var(--ColorAccentTeal);
  background: var(--TintTeal);
}

.DeskFrame {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}

.DeskSidebar {
  display: flex;
  flex-direction: column;
  gap: var(--Space4);
  padding: var(--Space16) var(--Space12);
  border-right: 1px solid var(--ColorStone);
  background: var(--ColorWarmTaupe);
}

.DeskNavItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space8);
  width: 100%;
  padding: var(--Space8) var(--Space12);
  background: transparent;
  border: 0;
  border-radius: var(--RadiusInputs);
  font-family: var(--FontBody);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorSmokeDeep);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut), color var(--DurMicro) var(--EaseOut);
}

.DeskNavItem:hover {
  background: var(--ColorEggshell);
  color: var(--ColorInk);
}

.DeskNavItem.IsCurrent {
  background: var(--ColorInk);
  color: var(--ColorEggshell);
}

.DeskNavBadge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--RadiusFull);
  background: var(--ColorError);
  color: var(--ColorEggshell);
  font-family: var(--FontMono);
  font-size: 10px;
}

.DeskMain {
  padding: var(--Space24);
  min-width: 0;
}

.DeskView {
  display: grid;
  gap: var(--Space20);
}

.DeskKpiRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--Space8);
}

.DeskKpi {
  display: grid;
  gap: 2px;
  padding: var(--Space12) var(--Space16);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  min-width: 0;
}

.DeskKpiLabel {
  font-family: var(--FontMono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ColorSmokeDeep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.DeskKpiValue {
  font-family: var(--FontDisplay);
  font-size: var(--TextHeadingXs);
  font-weight: var(--WeightLight);
  color: var(--ColorInk);
}

.DeskKpiValueHot {
  color: var(--ColorError);
}

.DeskKpiMeta {
  font-size: 0.8125rem;
  color: var(--ColorSmokeDeep);
}

.DeskOverviewGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--Space16);
}

.DeskPanel {
  display: grid;
  gap: var(--Space12);
  align-content: start;
  padding: var(--Space16);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  min-width: 0;
}

.DeskPanelTitle {
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorInk);
}

.DeskPanelFoot {
  font-family: var(--FontMono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ColorSmokeDeep);
}

.DeskLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8) var(--Space16);
  font-size: 0.8125rem;
  color: var(--ColorSmokeDeep);
}

.DeskLegend span {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
}

.DeskSignalList {
  border-top: 0;
  padding-block: 0;
}

.DeskCaseRows {
  display: grid;
  gap: var(--Space8);
}

.DeskCaseRow {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--Space12);
  padding: var(--Space12) var(--Space16);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
}

.DeskGhostLink {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--Space12);
  border: 1px solid var(--ColorBorderButton);
  border-radius: var(--RadiusFull);
  font-size: 0.8125rem;
  font-weight: var(--WeightMedium);
  color: var(--ColorInk);
  transition: background-color var(--DurMicro) var(--EaseOut);
}

.DeskGhostLink:hover {
  background: var(--ColorEggshell);
}

.DeskFilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
}

.DeskFilter {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 40px;
  padding: 0 var(--Space16);
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorBorderButton);
  border-radius: var(--RadiusFull);
  font-family: var(--FontBody);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorGraphite);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--DurMicro) var(--EaseOut), border-color var(--DurMicro) var(--EaseOut);
}

.DeskFilter::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ColorStone);
}

.DeskFilter:hover {
  background: var(--ColorWarmTaupe);
}

.DeskFilter.IsSelected {
  border-color: var(--ColorInk);
  color: var(--ColorInk);
}

.DeskFilter.IsSelected::before {
  background: var(--ColorInk);
}

.DeskBody {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--Space24);
  align-items: start;
}

.DeskRows {
  display: grid;
  gap: var(--Space8);
}

.DeskRow {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--Space12);
  width: 100%;
  padding: var(--Space12) var(--Space16);
  background: var(--ColorWarmTaupe);
  border: 1px solid transparent;
  border-radius: var(--RadiusCards);
  font-family: var(--FontBody);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--DurMicro) var(--EaseOut), background-color var(--DurMicro) var(--EaseOut);
}

.DeskRow:hover {
  border-color: var(--ColorAsh);
}

.DeskRow.IsActive {
  background: var(--ColorEggshell);
  border-color: var(--ColorInk);
}

.DeskRow.IsFiltered {
  display: none;
}

.DeskRowAccount {
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: var(--TrackingMono);
  color: var(--ColorGraphite);
}

.DeskRowSignal {
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DeskBand {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--RadiusFull);
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.DeskBandLow {
  background: var(--TintTeal);
  color: var(--ColorAccentTeal);
}

.DeskBandElevated {
  background: var(--TintGold);
  color: var(--ColorAccentGold);
}

.DeskBandHigh {
  background: var(--TintEmber);
  color: var(--ColorAccentEmber);
}

.DeskBandCritical {
  background: rgba(180, 35, 24, 0.09);
  color: var(--ColorError);
}

.DeskDetail {
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space24);
}

.DeskDetailSignal {
  padding-block: var(--Space12);
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
}

.DeskDetailCta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  font-weight: var(--WeightMedium);
  color: var(--ColorInk);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ColorStone);
  transition: text-decoration-color var(--DurMicro) var(--EaseOut);
}

.DeskDetailCta:hover {
  text-decoration-color: var(--ColorInk);
}

@media (max-width: 60rem) {
  .DeskBody,
  .DeskOverviewGrid {
    grid-template-columns: 1fr;
  }

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

  .DeskFrame {
    grid-template-columns: 1fr;
  }

  .DeskSidebar {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--ColorStone);
  }

  .DeskNavItem {
    width: auto;
  }
}

/* ============================================================
   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(--Space24);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    z-index: var(--ZRaised);
    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(--DurShort) var(--EaseOut),
                transform var(--DurShort) var(--EaseOut);
  }
  .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(--RadiusFull);
    background: var(--ColorAsh);
    transition: background-color var(--DurMicro) var(--EaseOut),
                transform var(--DurMicro) var(--EaseOut);
  }
  .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(--Space8));
    top: 50%;
    opacity: 0;
    transform: translate(4px, -50%);
    padding: var(--Space4) var(--Space12);
    background: var(--ColorEggshell);
    border: 1px solid var(--ColorStone);
    border-radius: var(--RadiusFull);
    font-size: var(--TextCaption);
    font-weight: var(--WeightMedium);
    color: var(--ColorGraphite);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity var(--DurMicro) var(--EaseOut),
                transform var(--DurMicro) var(--EaseOut);
  }
  .RailLink:hover .RailLabel,
  .RailLink:focus-visible .RailLabel { opacity: 1; transform: translate(0, -50%); }
  .RailLink:hover .RailTick { background: var(--ColorGraphite); }
  .RailLink.IsActive .RailTick {
    background: var(--ColorInk);
    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(--Space24);
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: clamp(var(--Space24), 4vw, var(--Space40));
}
.DomainMixHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--Space16);
  padding-bottom: var(--Space20);
}
.DomainMixBar {
  display: flex;
  height: 14px;
  border-radius: var(--RadiusFull);
  overflow: hidden;
  background: var(--ColorWarmTaupe);
}
.DomainMixSegment { display: block; height: 100%; width: var(--SegValue, 10%); }
.SegViolet   { background: var(--ColorAccentViolet); }
.SegEmber    { background: var(--ColorAccentEmber); }
.SegTeal     { background: var(--ColorAccentTeal); }
.SegGold     { background: var(--ColorAccentGold); }
.SegGraphite { background: var(--ColorGraphite); }
.SegStone    { background: var(--ColorStone); }
.DomainMixLegend {
  margin-top: var(--Space20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8) var(--Space20);
}
.DomainMixKey {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  font-size: 0.8125rem;
  color: var(--ColorSmoke);
}
.DomainMixSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.DomainMix .RiskPanelCaption {
  border-top: 1px solid var(--ColorStone);
  margin-top: var(--Space20);
}

/* --- 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(--Space16);
  align-self: start;
}
.DistributionCard {
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space32);
}
.DistributionBars {
  display: flex;
  align-items: flex-end;
  gap: var(--Space8);
  height: 120px;
  margin-top: var(--Space20);
  padding-bottom: var(--Space8);
  border-bottom: 1px solid var(--ColorStone);
}
.DistributionBar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--BarH, 20%);
  border-radius: 3px 3px 0 0;
  background: var(--ColorStone);
}
.DistributionBarHot { background: var(--ColorEmberOrange); }
.DistributionScale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--Space8);
}
.DistributionCard .RiskPanelCaption { border-top: 0; padding-top: var(--Space16); }

/* --- Loss-curve chart: two SVG paths on a hairline grid —
       conceptual shape only, clearly labelled as such. --- */
.LossCurveCard {
  margin-bottom: var(--Space48);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusLargeCards);
  padding: clamp(var(--Space24), 4vw, var(--Space40));
}
.LossCurveChart { width: 100%; height: auto; display: block; margin-top: var(--Space20); }
.LossCurveLegend {
  margin-top: var(--Space16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8) var(--Space20);
}
.LossCurveCard .RiskPanelCaption {
  border-top: 1px solid var(--ColorStone);
  margin-top: var(--Space20);
}

/* --- 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(--ColorStone); }
.RadarArtwork {
  width: min(100%, 320px);
  height: auto;
  justify-self: end;
  color: var(--ColorStone);
}
.FlowArtwork {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ColorStone);
  margin-bottom: var(--Space40);
}
.CtaBanner { position: relative; overflow: hidden; }
.CtaInner { position: relative; z-index: var(--ZRaised); }
.CtaArtwork {
  position: absolute;
  right: max(var(--Space24), 6vw);
  top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 420px);
  height: auto;
  color: var(--ColorEggshell);
  opacity: 0.22;
  pointer-events: none;
  display: none;
}
@media (min-width: 66rem) {
  .CtaArtwork { display: block; }
}


/* ============================================================
   Section Variety & Footer Extras
   ============================================================ */

/* --- 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(--ColorGraphite);
}
.InlineIcon {
  display: inline-block;
  vertical-align: -4px;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--Space8);
  color: var(--ColorGraphite);
}

/* --- 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(--Space16) var(--Space32);
  margin-bottom: var(--Space40);
  padding: var(--Space24) var(--Space32);
  background: var(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusCards);
}
.FamilyStatFigure {
  display: flex;
  gap: var(--Space12);
}
.FamilyStatNumber {
  font-family: var(--FontDisplay);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--WeightLight);
  line-height: 1;
  letter-spacing: var(--TrackingDisplay);
  color: var(--ColorAccentViolet);
}
.FamilyStatLabel {
  max-width: 14ch;
  font-size: var(--TextBodySm);
  line-height: 1.4;
  color: var(--ColorGraphite);
}
.FamilyStatChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
  margin-inline-start: auto;
}
.FamilyStatChip {
  padding: var(--Space4) var(--Space12);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusFull);
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: var(--TrackingMono);
  text-transform: uppercase;
  color: var(--ColorSmoke);
  white-space: nowrap;
}
@media (min-width: 66rem) {
  .DetailGridCompact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .DetailGridCompact .DetailCard { padding: var(--Space20) var(--Space20) var(--Space24); }
}

/* --- Event family: a 24-hour risk-window strip above a two-
       column hairline ledger (no cards at all). --- */
.EventStrip {
  margin-bottom: var(--Space40);
  background: var(--ColorWarmTaupe);
  border-radius: var(--RadiusCards);
  padding: var(--Space24) var(--Space32) var(--Space20);
}
/* 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(--FontMono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--ColorSmoke);
}
.EventChartLabel {
  font-family: var(--FontMono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--ColorGraphite);
}
.EventChartBadge {
  font-family: var(--FontMono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  fill: var(--ColorEggshell);
}
.EventStripLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8) var(--Space20);
  margin-top: var(--Space12);
}
.EventStrip .RiskPanelCaption {
  border-top: 1px solid var(--ColorStone);
  margin-top: var(--Space16);
  padding-top: var(--Space12);
}

.LedgerGrid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--Space64);
  border-top: 1px solid var(--ColorStone);
}
.LedgerRow {
  padding-block: var(--Space20);
  border-bottom: 1px solid var(--ColorStone);
}
.LedgerRow .DetailDot {
  display: inline-block;
  margin: 0 var(--Space8) 1px 0;
}
.LedgerTitle {
  display: inline;
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.LedgerBody {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  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(--ColorEggshell);
  border: 1px solid var(--ColorStone);
  border-radius: var(--RadiusLargeCards);
  padding: var(--Space32);
  align-self: start;
}
.ClusterFigure {
  font-family: var(--FontDisplay);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: var(--WeightLight);
  letter-spacing: var(--TrackingDisplay);
  line-height: 1.05;
}
.ClusterFigure em {
  font-style: normal;
  color: var(--ColorError);   /* red highlight — rose-red in dark   */
}
.ClusterCaption {
  margin-top: var(--Space8);
  font-size: var(--TextBodySm);
  color: var(--ColorSmoke);
}
.ClusterMeters {
  margin-top: var(--Space24);
  display: grid;
  gap: var(--Space12);
  padding-top: var(--Space20);
  border-top: 1px solid var(--ColorStone);
}
.SignalMeterTeal { background: var(--ColorError); }   /* cluster meters read as red flags */
.ClusterPanel .RiskPanelCaption {
  margin-top: var(--Space20);
  padding-top: var(--Space12);
}
.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(--ColorStone); }
.SpecRow {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--Space4) var(--Space16);
  padding-block: var(--Space20);
  border-bottom: 1px solid var(--ColorStone);
}
.SpecCode {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  font-family: var(--FontMono);
  font-size: var(--TextCaption);
  letter-spacing: var(--TrackingMono);
  color: var(--ColorGraphite);
  padding-top: var(--Space4);
}
.SpecCode .DetailDot { margin: 0; }
.SpecTitle {
  font-size: var(--TextBody);
  font-weight: var(--WeightMedium);
}
.SpecBody {
  grid-column: 2;
  margin-top: var(--Space4);
  font-size: var(--TextBodySm);
  line-height: 1.6;
  color: var(--ColorSmoke);
  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(--Space48);
}
.ProcessArtwork {
  display: none;
  color: var(--ColorStone);
  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(--Space40);
  width: min(100%, 280px);
  height: auto;
  color: var(--ColorStone);
}
.ContactArtwork {
  margin-top: var(--Space40);
  width: min(100%, 280px);
  height: auto;
  color: var(--ColorStone);
}
.TeamsArtwork {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ColorStone);
  margin-bottom: var(--Space32);
}
.FaqArtwork {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ColorStone);
  margin-bottom: var(--Space24);
}

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

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

/* Bare monochrome social icons — no circles, no borders. */
.FooterSocialRow {
  margin-top: var(--Space8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Space16);
}
.SocialLink {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ColorGraphite);
  transition: color var(--DurMicro) var(--EaseOut);
}
.SocialLink:active { color: var(--ColorSmoke); }
@media (hover: hover) and (pointer: fine) {
  .SocialLink:hover { color: var(--ColorInk); }
}
.SocialLink svg { width: 20px; height: 20px; }