/* =========================================================================
   Hidden Signal Advisory — Material Design 3 tokens + components
   Brand seed: #f2a93d (amber accent, --brand-amber). Slate-blue primary on
   cool cream-gray surface. Light theme only — no dark theme is wired up.
   ========================================================================= */

/* ---------- M3 system tokens (light) ----------
   CANONICAL: computed by the HCT engine (material-color-utilities) from seed
   #2c5494, "vibrant" variant. Regenerate via ../design-tokens (npm run tokens) —
   do not hand-edit the values below; they are the source-of-truth output.
   Two NON-THEME semantic constants live outside the generated scheme so they
   survive any palette regeneration: --brand-amber (accent) and --brand-success
   (success green — M3's tertiary is purple, which would misread as success). */
:root,
:root[data-theme="light"] {
  /* Brand accent — wordmark dot, focus halo, link underline, card hover.
     Honey-gold complement of the blue primary. Not part of the M3 scheme. */
  --brand-amber: #f2a93d;

  /* Semantic success — used for form success text + banner (not M3 tertiary). */
  --brand-success: #2e6b4f;
  --brand-success-container: #cdecd9;
  --brand-on-success-container: #07210f;

  /* Primary */
  --md-sys-color-primary: #005cbd;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d7e2ff;
  --md-sys-color-on-primary-container: #004590;

  /* Secondary */
  --md-sys-color-secondary: #585c7e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dfe0ff;
  --md-sys-color-on-secondary-container: #404565;

  /* Tertiary (canonical M3 — muted violet; reserved for incidental accents) */
  --md-sys-color-tertiary: #615889;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e6deff;
  --md-sys-color-on-tertiary-container: #494070;

  /* Error */
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;

  /* Surface system (cool blue-white neutral ramp) */
  --md-sys-color-surface: #f9f9ff;
  --md-sys-color-on-surface: #171c25;
  --md-sys-color-surface-variant: #dde2f2;
  --md-sys-color-on-surface-variant: #414753;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f3ff;
  --md-sys-color-surface-container: #eaedfa;
  --md-sys-color-surface-container-high: #e5e8f5;
  --md-sys-color-surface-container-highest: #dfe2ef;

  --md-sys-color-outline: #727785;
  --md-sys-color-outline-variant: #c1c6d6;

  --md-sys-color-inverse-surface: #2c303a;
  --md-sys-color-on-inverse-surface: #edf0fd;
  --md-sys-color-scrim: #000000;

  /* State layer opacities */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.12;
  --md-sys-state-pressed: 0.16;

  /* Shape scale */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Spacing — 4dp grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Elevation — tinted toward the primary's own shadow hue (#004790) so shadows
     read as "a shadow of the blue", not a generic gray drop. Same geometry. */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 71, 144, 0.13), 0 1px 3px 1px rgba(0, 71, 144, 0.07);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 71, 144, 0.13), 0 2px 6px 2px rgba(0, 71, 144, 0.09);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 71, 144, 0.09), 0 1px 3px rgba(0, 71, 144, 0.13);

  /* Motion — M3 emphasized easing */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 350ms;

  /* Type families */
  --md-sys-typescale-brand: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --md-sys-typescale-plain: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --content-max: 1200px;
  --reading-max: 720px;
  --app-bar-height: 72px;
  /* Vertical-rhythm scale — one cadence for every standard section, one
     deliberately-larger breath for the dark contrast beat. */
  --section-py:    clamp(var(--space-12), 8vw, var(--space-24));
  --section-py-lg: clamp(var(--space-24), 11vw, 140px);
  /* Reading measure — comfortable ~58-64ch body line length; scales with font-size. */
  --measure: 60ch;
}

/* Anchor links land below the sticky app bar, not under it */
html { scroll-padding-top: calc(var(--app-bar-height) + 8px); }
.hero, .section, [id] { scroll-margin-top: calc(var(--app-bar-height) + 8px); }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--md-sys-typescale-plain);
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: column layout so the footer sits at the bottom of the
     viewport on short pages (404, /thanks) instead of leaving a gap. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
#main { flex: 1 0 auto; }   /* content grows to push the footer down */
.footer { flex-shrink: 0; }

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand-amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
a:hover {
  text-decoration-thickness: 2px;
}

/* Buttons + nav links + wordmark opt out of the underline treatment
   (footer + body links keep the amber-underline signal). */
.btn, .nav__link, .wordmark, .skip-link {
  text-decoration: none;
}

/* Focus indicator: high-contrast slate ring with amber halo.
   Slate-on-cream is ~7:1 (AAA); amber halo preserves brand without being load-bearing for contrast. */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: 0 0 0 4px rgba(242, 169, 61, 0.45);
  /* Outline (the AA-load-bearing ring) is instant; only the amber halo eases in. */
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}

/* ---------- Typography (M3 type scale) ---------- */
/* Optical, size-aware negative tracking: tighter as type grows (Inter Tight reads best this way). */
.t-display-large  { font-family: var(--md-sys-typescale-brand); font-size: clamp(2.5rem, 4vw + 1rem, 3.5625rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 400; text-wrap: balance; }
.t-display-medium { font-family: var(--md-sys-typescale-brand); font-size: clamp(2rem, 3vw + 1rem, 2.8125rem); line-height: 1.16; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.t-display-small  { font-family: var(--md-sys-typescale-brand); font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); line-height: 1.22; letter-spacing: -0.01em; font-weight: 500; text-wrap: balance; }
.t-headline-large { font-family: var(--md-sys-typescale-brand); font-size: clamp(1.75rem, 1.5vw + 1rem, 2rem); line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; text-wrap: balance; }
.t-headline-medium{ font-family: var(--md-sys-typescale-brand); font-size: 1.75rem; line-height: 1.29; letter-spacing: -0.008em; font-weight: 500; text-wrap: balance; }
.t-title-large    { font-family: var(--md-sys-typescale-brand); font-size: 1.375rem; line-height: 1.27; letter-spacing: -0.004em; font-weight: 500; text-wrap: balance; }
/* Engage the variable optical-sizing axis on brand-family headings (no-op where unsupported). */
h1, h2, h3,
.t-display-large, .t-display-medium, .t-display-small,
.t-headline-large, .t-headline-medium, .t-title-large { font-optical-sizing: auto; }
/* Body copy: kill last-line orphans. */
.t-body-large, .t-body-medium,
.hero__sub, .problem__copy, .services__header p, .approach__header p,
.signal-band__sub, .contact__copy, .footer__tagline { text-wrap: pretty; }
.t-title-medium   { font-family: var(--md-sys-typescale-plain); font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.009em; }
.t-body-large     { font-family: var(--md-sys-typescale-plain); font-size: 1rem; line-height: 1.5; letter-spacing: 0.03em; }
.t-body-medium    { font-family: var(--md-sys-typescale-plain); font-size: 0.875rem; line-height: 1.43; letter-spacing: 0.018em; }
.t-label-large    { font-family: var(--md-sys-typescale-plain); font-size: 0.875rem; line-height: 1.43; font-weight: 500; letter-spacing: 0.007em; }
.t-label-medium   { font-family: var(--md-sys-typescale-plain); font-size: 0.75rem; line-height: 1.33; font-weight: 500; letter-spacing: 0.04em; }
.t-label-small    { font-family: var(--md-sys-typescale-plain); font-size: 0.6875rem; line-height: 1.45; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

h1, h2, h3, h4, p { margin: 0; }

/* Utilities (kept minimal — used by privacy.php to avoid inline styles for CSP) */
.u-muted    { color: var(--md-sys-color-on-surface-variant); }
.u-mt-2     { margin-top: var(--space-2); }
.u-mt-3     { margin-top: var(--space-3); }
.u-mt-4     { margin-top: var(--space-4); }
.u-mt-8     { margin-top: var(--space-8); }
.u-mt-12    { margin-top: var(--space-12); }
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--md-sys-shape-corner-small);
  font-weight: 500;
  z-index: 100;
  transition: top var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* ---------- Top app bar ---------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 249, 255, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.app-bar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}
.wordmark__primary {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.wordmark__dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.18em;
  border-radius: 50%;
  background: var(--brand-amber);
  vertical-align: 0.18em;
  box-shadow: 0 0 0 0 var(--brand-amber);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 169, 61, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(242, 169, 61, 0); }
}
.wordmark__sub {
  margin-top: 4px;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.wordmark:hover { text-decoration: none; color: var(--md-sys-color-on-surface); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.007em;
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.nav__link:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
}
.nav-toggle:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  }
  .nav[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav__link {
    padding: var(--space-4);
    border-radius: var(--md-sys-shape-corner-medium);
  }
}

/* ---------- Layout primitives ---------- */
.section {
  position: relative;
  overflow: hidden;
  padding: var(--section-py) var(--space-6);
}
.section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
}
.section--reading .section__inner { max-width: var(--reading-max); }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--md-sys-color-primary);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--app-bar-height));
  display: grid;
  place-items: center;
  padding: var(--space-24) var(--space-6);
  overflow: hidden;
  /* The hero background (multi-layer light mesh over the inline --hero-bg image,
     which PHP sets on <body> so the cache-buster covers it) is defined in the
     liven-up layer below — see the `.hero { background: … !important }` rule near
     the signal-band styles. Kept there as the single source, not duplicated here. */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 28, 37, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  max-width: 880px;
  text-align: center;
}
.hero h1 { margin-bottom: var(--space-6); }
.hero__sub {
  color: var(--md-sys-color-on-surface-variant);
  max-width: 36rem;
  margin: 0 auto var(--space-12);
  font-size: 1.1875rem;
  line-height: 1.6;
}
.hero__ctas {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Buttons (M3) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-plain);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.007em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  z-index: 0;
}
.btn:hover::before  { opacity: var(--md-sys-state-hover); }
.btn:focus-visible::before { opacity: var(--md-sys-state-focus); }
.btn:active::before { opacity: var(--md-sys-state-pressed); }
.btn > * { position: relative; z-index: 1; }

.btn--filled {
  /* Convex catch of light: faint top-lightness gradient over the primary fill.
     Bottom stop = the original #005cbd, so on-primary white text contrast is unchanged. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--md-sys-color-primary) 90%, white) 0%,
    var(--md-sys-color-primary) 100%);
  color: var(--md-sys-color-on-primary);
  box-shadow: 0 1px 2px rgba(0, 49, 102, 0.18);
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized),
              transform 120ms cubic-bezier(0.2, 0, 0, 1),
              background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
/* Top-edge sheen highlight — above the fill, below the z-index:1 label, non-interactive. */
.btn--filled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
  z-index: 0;
}
.btn--filled:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--md-sys-elevation-1),
    0 6px 16px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
  text-decoration: none;
}
.btn--filled:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn--filled:hover, .btn--filled:active { transform: none; }
}

.btn--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn--outlined:hover { text-decoration: none; }

.btn--text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 var(--space-3);
}
.btn--text:hover { text-decoration: none; }

.btn[disabled],
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.65;
}

/* ---------- Problem ---------- */
.problem { background: var(--md-sys-color-surface-container-low); }
.problem__copy {
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--space-4);
}
/* Chips as a uniform GRID of equal cells (not ragged flex-wrap) so every
   "noise source" reads as a consistent card across all columns and rows.
   2 cols on mobile → 3 cols at ≥600px. */
.chips {
  /* .chips is a <ul> — kill the UA default list padding (padding-inline-start:
     40px) + bullets, or the grid gets shoved ~40px to the right on mobile. */
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .chips { grid-template-columns: repeat(3, 1fr); }
}
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  background: var(--md-sys-color-surface-container-low);
}

/* ---------- Services ---------- */
.services { background: var(--md-sys-color-surface); }
.services__header { margin-bottom: var(--space-12); max-width: 720px; }
.services__header p { color: var(--md-sys-color-on-surface-variant); margin-top: var(--space-3); max-width: var(--measure); }
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 600px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  /* Material sheen — catches ambient light from above (top stop is lightest tone). */
  background: linear-gradient(180deg,
    var(--md-sys-color-surface-container-lowest) 0%,
    var(--md-sys-color-surface-container-low) 72%);
  border: 1px solid transparent;            /* transparent keeps the amber hover border-color transition working */
  border-radius: var(--md-sys-shape-corner-medium);
  /* elevation + crisp primary-tint inset hairline ring + soft top highlight */
  box-shadow:
    var(--md-sys-elevation-1),
    inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-medium) cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.card:hover {
  box-shadow:
    var(--md-sys-elevation-3),
    inset 0 0 0 1px color-mix(in srgb, var(--brand-amber) 28%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
  border-color: color-mix(in srgb, var(--brand-amber) 50%, var(--md-sys-color-outline-variant));
  transform: translateY(-4px);               /* springy lift via the cubic-bezier above */
}
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: grid;
  place-items: center;
}
.card__icon svg { width: 24px; height: 24px; }
.card__title { color: var(--md-sys-color-on-surface); }
.card__body { color: var(--md-sys-color-on-surface-variant); }
/* Resources cards carry a CTA — pin it to the bottom so buttons align across
   cards of unequal body length, and let it size to its label (not full width). */
.resources .cards { grid-template-columns: 1fr; }
@media (min-width: 720px) { .resources .cards { grid-template-columns: 1fr 1fr; } }
.resources .card .btn { margin-top: auto; align-self: start; }

/* ---------- Approach ---------- */
.approach { background: var(--md-sys-color-surface-container); }
.approach__header { margin-bottom: var(--space-12); max-width: 720px; }
.approach__header p { color: var(--md-sys-color-on-surface-variant); margin-top: var(--space-3); max-width: var(--measure); }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
}
/* Align .steps to the same shared breakpoints as .cards (600 / 1024). */
@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
  /* Connector line draws only at true 4-up. */
  .steps::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    z-index: 0;
  }
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  z-index: 1;
}
.step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: 1.125rem;
  border: 4px solid var(--md-sys-color-surface-container-low);
}
.step__title { color: var(--md-sys-color-on-surface); }
.step__body  { color: var(--md-sys-color-on-surface-variant); }

/* ---------- Ideal Fit ---------- */
.fit { background: var(--md-sys-color-surface-container-low); }
.fit__header { margin-bottom: var(--space-12); max-width: 720px; }
.fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .fit__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-8); }
}
.fit__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--md-sys-color-on-surface);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.fit__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-primary);
}

/* ---------- Ideal fit: two columns (great fit / not a fit) ---------- */
.fit__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 720px) {
  .fit__cols { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.fit__col-title { margin: 0 0 var(--space-4); }
.fit__col--muted .fit__col-title { color: var(--md-sys-color-on-surface-variant); }
/* Inside the two columns each list is single-column; override the base
   .fit__list two-up grid so it doesn't double up at >=720px. */
.fit__cols .fit__list { grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 720px) {
  .fit__cols .fit__list { grid-template-columns: 1fr; gap: var(--space-2); }
}
/* Muted "not a fit" items: neutral dash marker, softened text — calm, not alarming */
.fit__item--muted { color: var(--md-sys-color-on-surface-variant); }
.fit__x {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-outline);
}
.fit__note {
  margin: var(--space-4) 0 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------- How We Work ----------
   Mirrors the Ideal Fit checklist: primary-colored ticks (matching .fit__check),
   with the final boundary item drawn as a muted dash so it reads as a limit,
   not a benefit. Namespaced .hww__* so it stands alone. */
.how-we-work { border-top: 1px solid var(--md-sys-color-outline-variant); }
.how-we-work__header { margin-bottom: var(--space-12); max-width: 720px; }
.how-we-work__header p {
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--space-3);
  max-width: var(--measure);
}
.hww__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: 60ch;
}
.hww__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--md-sys-color-on-surface);
}
.hww__mark {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 0.15em;
  color: var(--md-sys-color-primary);
}
/* Boundary item ("not an agency") reads as a limit, not a checkmark. */
.hww__mark--bound { color: var(--md-sys-color-outline); }

/* Contact availability note — understated, static amber dot. */
.contact__note {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: var(--measure);
  margin: var(--space-3) auto var(--space-6);
}
.contact__note-dot {
  flex: 0 0 auto;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--brand-amber);
  transform: translateY(0.06em);
}

/* ---------- Contact ---------- */
.contact { background: var(--md-sys-color-surface); }
.contact__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.contact h2 { margin-bottom: var(--space-4); }
.contact__copy {
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-12);
  max-width: var(--measure);
  margin-inline: auto;
}

.form {
  display: grid;
  gap: var(--space-4);
  text-align: left;
}
@media (min-width: 600px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form__row--full { grid-column: 1 / -1; }
}

/* M3 filled text field */
.field {
  position: relative;
  display: block;
}
.field__input,
.field__textarea {
  width: 100%;
  font-family: var(--md-sys-typescale-plain);
  font-size: 1rem;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
  padding: 26px var(--space-4) 8px;
  height: 56px;
  outline: none;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.field__textarea {
  height: auto;
  min-height: 120px;
  padding-top: 28px;
  resize: vertical;
  line-height: 1.5;
}
.field__label {
  position: absolute;
  left: var(--space-4);
  top: 18px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1rem;
  pointer-events: none;
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              font-size var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  transform-origin: left top;
}
.field__input:focus,
.field__textarea:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 7px;
}
/* Core float — focus / typed value / JS has-value. Uses the GENERAL sibling
   combinator (~) NOT adjacent (+): password managers (1Password, etc.) inject
   their own icon/button as a sibling right after the input, which pushes the
   <label> out of the "immediately next" position and breaks `input + label`.
   `~` matches the label regardless of injected siblings. NO autofill
   pseudo-classes here on purpose: if a browser doesn't recognise :autofill or
   :-webkit-autofill, an unknown selector would invalidate this ENTIRE comma
   list and kill the float for every field. Autofill cases isolated below. */
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input.has-value ~ .field__label,
.field__textarea:focus ~ .field__label,
.field__textarea:not(:placeholder-shown) ~ .field__label,
.field__textarea.has-value ~ .field__label {
  transform: translateY(-14px) scale(0.75);
  color: var(--md-sys-color-primary);
}
/* Autofill float — each pseudo in its OWN rule so one being unknown can't take
   the other down with it. `~` for the same password-manager reason as above. */
.field__input:-webkit-autofill ~ .field__label { transform: translateY(-14px) scale(0.75); color: var(--md-sys-color-primary); }
.field__input:autofill ~ .field__label { transform: translateY(-14px) scale(0.75); color: var(--md-sys-color-primary); }
/* Autofill detector — the browser/password-manager fires this animation when it
   fills a field; app.js listens for animationstart to add .has-value even when no
   input event is dispatched. The keyframe MUST animate a real property — an empty
   @keyframes does NOT reliably fire animationstart in Chrome (the desktop autofill
   bug where name/email/business labels stayed un-floated). */
@keyframes hsa-autofill { from { background-position: 0 0; } to { background-position: 0.01px 0; } }
.field__input:-webkit-autofill { animation-name: hsa-autofill; animation-duration: 1ms; }
.field__input:autofill { animation-name: hsa-autofill; animation-duration: 1ms; }
/* Error state association */
.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-bottom-color: var(--md-sys-color-error);
}
.field__input[aria-invalid="true"]:focus,
.field__textarea[aria-invalid="true"]:focus {
  border-bottom: 2px solid var(--md-sys-color-error);
}
.field__error {
  display: block;
  margin-top: var(--space-1);
  color: var(--md-sys-color-error);
  font-size: 0.75rem;
  padding-left: var(--space-4);
  min-height: 1em;
}
.field__input::placeholder,
.field__textarea::placeholder { color: transparent; }
.field__hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem;
  padding-left: var(--space-4);
}

/* Honeypot — visually hidden via standard sr-only pattern; field is tabindex=-1 + autocomplete=off
   so keyboard users skip it. Not marked aria-hidden because that's a screen-reader red flag on a focusable element. */
.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form__submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--space-2);
}

.form__status {
  grid-column: 1 / -1;
  min-height: 24px;
  font-size: 0.9375rem;
}
.form__status[data-state="success"] { color: var(--brand-success); }
.form__status[data-state="error"]   { color: var(--md-sys-color-error); }

/* Server-rendered alert for the no-JS failed-submit path (/?error=1). */
.form__alert {
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--md-sys-color-error) 8%, var(--md-sys-color-surface));
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 40%, transparent);
  color: var(--md-sys-color-on-surface);
  font-size: 0.9375rem;
}

.contact__email {
  margin-top: var(--space-12);
  color: var(--md-sys-color-on-surface-variant);
}
.contact__email a { font-weight: 500; }

/* ---------- Footer ---------- */
.footer {
  /* Dark beat to close the page — reuses the signal-band gradient family */
  background:
    radial-gradient(ellipse at 12% 0%, rgba(242, 169, 61, 0.12), transparent 45%),
    radial-gradient(ellipse at 100% 120%, rgba(124, 162, 222, 0.14), transparent 55%),
    linear-gradient(135deg, #001b3f 0%, #002f66 100%);
  padding: var(--space-12) var(--space-6) var(--space-8);
  color: rgba(234, 241, 251, 0.72);
  font-size: 0.875rem;
}
.footer a { color: #eaf1fb; }
.footer a:hover { text-decoration-color: var(--brand-amber); }
.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.footer__tagline {
  max-width: var(--content-max);
  margin: 0 auto var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(234, 241, 251, 0.16);
  text-align: center;
  color: rgba(234, 241, 251, 0.82);
}
.footer__links {
  display: flex;
  gap: var(--space-6);
}

/* Mobile: stack + center the footer. column-reverse puts the nav links
   (email, privacy) ABOVE the copyright line, so legal sits last — the
   conventional footer order. */
@media (max-width: 640px) {
  .footer__inner {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Larger gap so the copyright sits clearly apart from the email/privacy links. */
    gap: var(--space-8);
  }
  .footer__links {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--md-sys-motion-easing-emphasized),
              transform 600ms var(--md-sys-motion-easing-emphasized);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* =========================================================================
   LIVEN-UP LAYER — editorial structure, signal motif, contrast beat
   (Bold & expressive pass. Loaded last so it wins the cascade.)
   ========================================================================= */

/* ---- Numbered editorial eyebrow: "/ 01  Services" ---- */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--md-sys-color-on-surface-variant);
}
.eyebrow__n {
  font-family: var(--md-sys-typescale-plain);
  font-weight: 600;
  font-size: 1.05em;            /* folio number leads the word */
  letter-spacing: 0;            /* tight numeral against the wider word */
  font-variant-numeric: tabular-nums; /* 01..05 share one width */
  color: var(--md-sys-color-primary);
}
.eyebrow__n::before {
  content: "/ ";
  color: var(--brand-amber);
}
/* Widen the eyebrow word slightly for editorial-folio character. */
.eyebrow { letter-spacing: 0.12em; }

/* ---- Hero: bigger, with the amber accent word + motif ---- */
/* t-display-large ships weight 400, which we don't load — force a loaded weight.
   Tracking now owned by .t-display-large itself (-0.02em). */
.hero h1 {
  font-weight: 600;
  line-height: 1.06;
}
/* Hero keyword "signal": confident ink text with an amber underline signature
   (fixes the marginal amber-on-near-white contrast; ties the accent into type).
   Scoped to .hero so the dark band's amber-on-navy .hl is untouched. */
.hero h1 .hl {
  position: relative;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  background-image: linear-gradient(var(--brand-amber), var(--brand-amber));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.08em;
  padding-bottom: 0.04em;
}
/* third light source for a richer mesh */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(249, 249, 255, 0.74), rgba(249, 249, 255, 0.93) 90%),
    radial-gradient(ellipse at 18% -10%, rgba(242, 169, 61, 0.22), transparent 52%),
    radial-gradient(ellipse at 92% 8%, rgba(0, 92, 189, 0.14), transparent 55%),
    radial-gradient(ellipse at 60% 115%, rgba(0, 92, 189, 0.12), transparent 60%),
    var(--hero-bg, none) center/cover no-repeat,
    var(--md-sys-color-surface) !important;
}
.hero__content { max-width: 940px; }

/* ---- Signal-wave motif (self-animating SVG used as <img>) ---- */
.signal-wave {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.hero__wave {
  margin-top: var(--space-12);
  height: 48px;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* ---- Dark "signal band" — the contrast beat before contact ---- */
.signal-band {
  position: relative;
  overflow: hidden;
  padding: var(--section-py-lg) var(--space-6);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(242, 169, 61, 0.22), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(124, 162, 222, 0.18), transparent 55%),
    linear-gradient(135deg, #001b3f 0%, #004590 100%);
  color: #eaf1fb;
  text-align: center;
}
.signal-band__inner {
  position: relative;
  z-index: 1;            /* lift band text above the decorative quote glyph */
  max-width: 860px;
  margin: 0 auto;
}
/* Top light-seam: amber (left) → primary blue (right) — the complement pair made
   physical along the band's machined top edge. */
.signal-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--brand-amber) 0%,
    color-mix(in srgb, var(--brand-amber) 45%, var(--md-sys-color-primary)) 42%,
    var(--md-sys-color-primary) 72%,
    color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent) 90%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}
/* Oversized editorial quotation mark behind the pull-quote (faint amber, self-clips). */
.signal-band::after {
  content: "\201C";
  position: absolute;
  top: -0.12em; left: 0.18em;
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: clamp(8rem, 18vw, 15rem);
  line-height: 1;
  color: rgba(242, 169, 61, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.signal-band__eyebrow {
  display: inline-flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: rgba(234, 241, 251, 0.7);
}
.signal-band__eyebrow .eyebrow__n { color: #fff; }
.signal-band__eyebrow .eyebrow__n::before { color: var(--brand-amber); }
.signal-band__quote {
  color: #fff;
  letter-spacing: -0.01em;
}
.signal-band__quote .hl { color: var(--brand-amber); }
.signal-band__sub {
  margin: var(--space-6) auto 0;
  max-width: var(--measure);
  color: rgba(234, 241, 251, 0.82);
}
.signal-band__cta { margin-top: var(--space-8); }
/* Band CTA is amber on navy — give it its own amber convex gradient + amber glow
   so it doesn't inherit the blue hover glow. */
.signal-band .btn--filled {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-amber) 90%, white) 0%,
    var(--brand-amber) 100%);
  color: #2a1c00;
}
.signal-band .btn--filled:hover {
  box-shadow:
    var(--md-sys-elevation-1),
    0 6px 16px color-mix(in srgb, var(--brand-amber) 30%, transparent);
}
.signal-band__wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  opacity: 0.5;
}

/* ---- Staggered reveal for grids ---- */
.cards .card.reveal:nth-child(2) { transition-delay: 90ms; }
.cards .card.reveal:nth-child(3) { transition-delay: 180ms; }
.cards .card.reveal:nth-child(4) { transition-delay: 270ms; }
.steps .step.reveal:nth-child(2) { transition-delay: 90ms; }
.steps .step.reveal:nth-child(3) { transition-delay: 180ms; }
.steps .step.reveal:nth-child(4) { transition-delay: 270ms; }

/* ---- Card: amber top-accent that draws in on hover ---- */
.card {
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  background: var(--brand-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}
.card:hover::after { transform: scaleX(1); }
.card:hover .card__icon {
  background: var(--brand-amber);
  color: #2a1c00;
}
.card__icon {
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

/* ---- Approach step numbers: larger, amber-edged, count-up ready ---- */
.step__num {
  font-variant-numeric: tabular-nums;
}

/* ---- Section headline gets a short amber underline accent ---- */
.services__header h2::after,
.approach__header h2::after,
.fit__header h2::after,
.problem h2::after,
.contact__inner h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--space-4);
  background: var(--brand-amber);
  border-radius: 2px;
}
.contact__inner h2::after { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

/* ---- M3 select fields (triage dropdowns) ---- */
.field--select { position: relative; }
.field__select {
  width: 100%;
  font-family: var(--md-sys-typescale-plain);
  font-size: 1rem;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
  padding: 26px var(--space-8) 8px var(--space-4);
  height: 56px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.field__select:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 7px;
}
/* Select label sits in the floated position permanently (a select always shows a value slot) */
.field--select .field__label {
  transform: translateY(-14px) scale(0.75);
  transform-origin: left top;
}
.field--select .field__select:focus ~ .field__label {
  color: var(--md-sys-color-primary);
}
/* chevron */
.field--select::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--md-sys-color-on-surface-variant);
  border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__select[aria-invalid="true"] { border-bottom-color: var(--md-sys-color-error); }
.field__select[aria-invalid="true"]:focus { border-bottom: 2px solid var(--md-sys-color-error); }
/* show the placeholder slot in muted tone until a real option is chosen */
.field__select:invalid { color: var(--md-sys-color-on-surface-variant); }

/* ---- No-JS submit banner (handler 303-redirects here) ---- */
.form-banner {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: 0.9375rem;
  text-align: left;
}
.form-banner--ok {
  background: var(--brand-success-container);
  color: var(--brand-on-success-container);
}
.form-banner--err {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* =========================================================================
   SECTION POP — subtle texture + soft color washes per section.
   Trusting, not loud: dot-grid at ~4% alpha (the "signal in noise" motif),
   corner light-washes in brand amber / primary blue at <8% alpha. Layered as
   ::before (texture) and ::after (wash) behind content (.section__inner z-index:1).
   ========================================================================= */

/* Shared base for both pseudo layers */
.problem::before, .problem::after,
.services::after,
.approach::before, .approach::after,
.fit::before, .fit::after,
.contact::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Dot-grid texture, faded with a radial mask so edges never harden */
.problem::before,
.approach::before,
.fit::before {
  inset: 0;
  background-image: radial-gradient(rgba(23, 28, 37, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}
.problem::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 18% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 75% at 18% 30%, #000 20%, transparent 78%);
}
.approach::before {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 82%);
}
.fit::before {
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 85% 35%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 55% 80% at 85% 35%, #000 18%, transparent 76%);
}

/* Corner color-washes — one warm, one cool, alternating side to side */
.problem::after {
  inset: -10% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse at 88% 0%, rgba(242, 169, 61, 0.10), transparent 60%);
}
.services::after {
  inset: -10% -10% auto auto;
  width: 55%; height: 70%;
  background: radial-gradient(ellipse at 100% 0%, rgba(0, 92, 189, 0.08), transparent 62%);
}
.approach::after {
  inset: auto -10% -12% -10%;
  height: 65%;
  background: radial-gradient(ellipse at 12% 100%, rgba(242, 169, 61, 0.09), transparent 60%);
}
.fit::after {
  inset: -10% auto auto -10%;
  width: 55%; height: 70%;
  background: radial-gradient(ellipse at 0% 0%, rgba(0, 92, 189, 0.08), transparent 62%);
}
/* Contact: a soft centered glow that lifts the form off the surface */
.contact::after {
  inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 50% 32%, rgba(0, 92, 189, 0.07), transparent 70%),
    radial-gradient(ellipse 40% 40% at 88% 90%, rgba(242, 169, 61, 0.07), transparent 65%);
}

/* Hairline top accents to crisply delineate adjacent light sections */
.services, .approach, .contact { border-top: 1px solid var(--md-sys-color-outline-variant); }

/* Chips get a hair more presence so the "noise" row reads as a feature */
.chip { box-shadow: var(--md-sys-elevation-1); }

/* =========================================================================
   ELEVATION PASS 2 — editorial headers, signal signature, conversion polish.
   Verified set from the design-elevation workflow. Loaded last.
   ========================================================================= */

/* ---- Editorial asymmetric section intros (desktop): headline left, lead right ---- */
@media (min-width: 1024px) {
  .services__header,
  .approach__header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    column-gap: var(--space-16);
    max-width: var(--content-max);
    margin-bottom: var(--space-16);
  }
  .services__header .eyebrow,
  .approach__header .eyebrow { grid-column: 1; grid-row: 1; }
  .services__header h2,
  .approach__header h2 { grid-column: 1; grid-row: 2; max-width: 18ch; }
  .services__header p,
  .approach__header p {
    grid-column: 2; grid-row: 2;
    margin-top: 0; align-self: end; max-width: 42ch;
  }
}

/* ---- Hero trust strip: response-time + scope reassurance with a live success dot ---- */
.hero-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-4) auto 0;
  max-width: 46ch;
  color: var(--md-sys-color-on-surface-variant);
}
.hero-trust__dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-success) 18%, transparent);
  flex: none;
}
/* Mobile: the flex hanging-dot stranded the dot out in the left margin. Make it
   a leading inline marker that sits right before the text, and center the line. */
@media (max-width: 600px) {
  .hero-trust {
    display: block;
    max-width: none;
    text-align: center;
  }
  .hero-trust__dot {
    display: inline-block;
    margin: 0 8px 0 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

/* ---- Service-card outcome line: scannable "what you get", tinted primary ---- */
.card-outcome {
  font-family: var(--md-sys-typescale-brand);  /* Inter Tight, loaded */
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--md-sys-color-primary);
  margin: calc(var(--space-2) * -1) 0 0;        /* pull up toward the title */
  text-wrap: balance;
}

/* ---- Hero oscilloscope baseline: faint instrument readout behind the hero ----
   Static, decorative, NOT in the reveal system. ::after because .hero::before is the dot-grid. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 18%;
  height: 56px;
  z-index: 0;
  background-image:
    linear-gradient(to right,
      color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent) 0 100%),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent) 0 1px,
      transparent 1px 64px);
  background-repeat: no-repeat, repeat-x;
  background-size: 100% 1px, 64px 12px;
  background-position: left bottom, left bottom;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* ---- "Signal baseline" section seam: faint sampled-signal ticks at section tops ----
   Replaces the plain hairline on .services + .contact (collision-free; .approach
   keeps its plain hairline because its ::before is the dot-grid texture). */
.services::before,
.contact::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(242, 169, 61, 0) 0px, rgba(242, 169, 61, 0) 6px,
    rgba(242, 169, 61, 0.38) 6px, rgba(242, 169, 61, 0.38) 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---- Signal-band wave: settle to its 0.5 resting opacity when revealed (not 1) ---- */
.signal-band__wave.reveal.is-visible { opacity: 0.5; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .signal-band__wave.reveal { opacity: 0.5; transform: none; transition: none; }
}

/* =========================================================================
   LEAD-GUIDE (.lg-*) — print-optimized deliverable pages (Field Guide,
   Friction Map). Screen styles below; @page + @media print at the end.
   Mirrors the Blue Diamond capability-statement print pattern, re-tokenized
   to HSA's M3 system. Shared by both guides; only inner blocks differ.
   ========================================================================= */
.lg-doc {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-4), 4vw, var(--space-8));
}

/* On-screen action bar (hidden in print) */
.lg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--space-8);
}
.lg-actions .btn { min-height: 0; padding: 0.55rem 1rem; font-size: 0.85rem; }
.lg-actions__spacer { margin-right: auto; }

/* Document header — wordmark + title + brand rule */
.lg-header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: 2px solid var(--md-sys-color-primary);
}
.lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  color: var(--md-sys-color-primary);
  margin-bottom: var(--space-3);
}
.lg-eyebrow__n { color: var(--brand-amber); font-weight: 600; }
.lg-header h1 {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.1;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  text-wrap: balance;
}
.lg-header .lg-lede {
  margin-top: var(--space-4);
  color: var(--md-sys-color-on-surface-variant);
  max-width: var(--measure);
}

/* ---- Field Guide: numbered signal blocks ---- */
.lg-signal {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.lg-signal__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.lg-signal__n {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand-amber);
  flex: none;
}
.lg-signal__title {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.lg-kv { margin: 0 0 var(--space-3); }
.lg-kv:last-child { margin-bottom: 0; }
.lg-kv__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-1);
}
.lg-kv__value {
  color: var(--md-sys-color-on-surface);
  line-height: 1.55;
}
/* The self-check question gets a subtle amber-tinted callout */
.lg-kv--check .lg-kv__value {
  border-left: 3px solid var(--brand-amber);
  background: rgba(242, 169, 61, 0.08);
  border-radius: 0 8px 8px 0;
  padding: var(--space-3) var(--space-4);
  font-style: italic;
}

/* ---- Friction Map: prompt + fillable blank ---- */
.lg-intro {
  margin: 0 0 var(--space-8);
  color: var(--md-sys-color-on-surface-variant);
  max-width: var(--measure);
}
.lg-prompt {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.lg-prompt__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.lg-prompt__n {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  color: var(--brand-amber);
  flex: none;
}
.lg-prompt__q {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.lg-prompt__hint {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}
/* The blank box to write in (print-and-fill) */
/* Fillable answer box — a real textarea so it's typeable on screen AND
   print-and-fill on paper. */
.lg-fill {
  display: block;
  width: 100%;
  min-height: 72px;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  font-family: var(--md-sys-typescale-plain);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  resize: vertical;
}
.lg-fill::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; }
.lg-fill:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.lg-foot {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.85rem;
  line-height: 1.6;
}
.lg-foot a { color: var(--md-sys-color-primary); }

/* =========================================================================
   LEAD-GUIDE — print / PDF (Letter, 0.55in margins, brand color preserved)
   ========================================================================= */
@page {
  size: Letter;
  margin: 0.55in 0.55in 0.7in;
}
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* Hide site chrome + on-page UI */
  .app-bar, .footer, .lg-actions, .skip-link { display: none !important; }

  html, body { background: #ffffff !important; }
  body { font-size: 10pt; line-height: 1.45; color: var(--md-sys-color-on-surface); }

  .lg-doc { max-width: 100%; margin: 0; padding: 0; }

  .lg-header {
    padding-bottom: 8pt;
    margin-bottom: 12pt;
    border-bottom: 2pt solid var(--md-sys-color-primary);
    page-break-after: avoid;
    break-after: avoid;
  }
  .lg-header h1 { font-size: 21pt; line-height: 1.12; }
  .lg-header .lg-lede { font-size: 10pt; margin-top: 6pt; }
  .lg-eyebrow { margin-bottom: 5pt; }

  /* Keep each signal / prompt intact on one page */
  .lg-signal, .lg-prompt, .lg-foot {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .lg-signal { padding: 10pt 0; }
  .lg-signal__title { font-size: 12.5pt; }
  .lg-signal__n { font-size: 15pt; }
  .lg-kv { margin-bottom: 6pt; }
  .lg-kv__label { font-size: 7pt; }
  .lg-kv__value { font-size: 10pt; line-height: 1.45; }
  .lg-kv--check .lg-kv__value { padding: 6pt 9pt; }

  .lg-prompt { padding: 9pt 0; }
  .lg-prompt__q { font-size: 11.5pt; }
  .lg-prompt__hint { font-size: 9pt; }
  /* Print as a clean empty box: drop focus glow, hide placeholder, keep border */
  .lg-fill {
    min-height: 58pt;
    box-shadow: none !important;
    border: 1pt solid var(--md-sys-color-outline-variant) !important;
    background: #fff !important;
    padding: 4pt 6pt;
  }
  .lg-fill::placeholder { color: transparent !important; }

  .lg-foot { margin-top: 14pt; padding-top: 7pt; font-size: 8pt; }

  /* Print-only running footer on every page */
  body::after {
    content: "Hidden Signal Advisory  ·  AskHiddenSignal.com";
    position: fixed;
    bottom: 0.25in; left: 0.55in; right: 0.55in;
    font-size: 7pt;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.04em;
    text-align: center;
    border-top: 0.5pt solid var(--md-sys-color-outline-variant);
    padding-top: 4pt;
  }

  a { text-decoration: none !important; color: var(--md-sys-color-primary) !important; }
  a[href]::after { content: ''; }
  p, li { orphans: 3; widows: 3; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
}

/* ---- Friction Map → 1-page printable result (Map + full profile) ----------
   Only meaningful on the completed profile (.fm--done); the visitor triggers it
   via the "Print / Save as PDF" button friction-map.js adds to the CTA. Goal:
   the visitor's PERSONALIZED map snapshot + the full Hidden Signal Profile on a
   single Letter page. Reuses the @page + exact-color + running-footer setup from
   the .lg-* block above; everything here is .fm-specific. */
@media print {
  /* Freeze all map/profile motion so nothing prints mid-transition or mid-fade. */
  .fm *, .fm *::before, .fm *::after { animation: none !important; transition: none !important; }
  .fm-profile, .fm--done .fm-map, .fm-strength, .fm-block { opacity: 1 !important; transform: none !important; }

  /* Drop interactive-only + navigation UI (the action buttons, live instrument
     readout, tooltip, quiz nav, restart, and the print button itself). */
  .fm-actions, .fm-status, .fm-tip, .fm-nav,
  .fm-restart, .fm-print, .fm-cta__actions, .fm noscript { display: none !important; }

  /* Page shell — full width, no outer padding, stack map over profile. */
  .fm { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .fm-body { display: block !important; gap: 0 !important; }
  .fm-stage { position: static !important; margin: 0 0 8pt !important; }

  /* Header — keep the title, drop the long interactive-tool intro lede. */
  .fm-header { margin-bottom: 12pt !important; page-break-after: avoid; break-after: avoid; }
  .fm-header h1 { font-size: 20pt !important; line-height: 1.12 !important; margin: 0 !important; }
  .fm-lede { display: none !important; }

  /* Map snapshot — FULL-WIDTH hero (no height cap → renders at its natural width-
     driven height, ~3.3in, with no side letterboxing so the topology + node labels
     are big and legible). The profile flows below; the result is a clean, readable
     TWO-PAGE PDF (the visitor opted for 2 pages over a shrunken map). Kept whole
     via break-inside so the map never splits across the page boundary. */
  .fm--done .fm-map { display: block !important; break-inside: avoid; page-break-inside: avoid; }
  .fm-map {
    border: 0.75pt solid var(--md-sys-color-outline-variant) !important;
    border-radius: 6pt !important; background: #fff !important;
    padding: 6pt !important; min-height: 0 !important; box-shadow: none !important;
  }
  .fm-map::before { display: none !important; }          /* drop the screen dot-grid backdrop */
  .fm-map svg { width: 100% !important; height: auto !important; max-height: none !important; }

  /* Profile — readable type; two-column grid for a tidy layout. The profile is
     rendered inside .fm-quiz (a tinted, bordered card on screen) — flatten it for
     print so the container can't split awkwardly across the page boundary. */
  .fm-quiz { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
  .fm-profile { margin: 0 !important; }
  .fm-profile__title { font-size: 17pt !important; margin: 10pt 0 4pt !important; }
  .fm-profile__lede { font-size: 10pt !important; line-height: 1.5 !important; margin: 0 0 12pt !important; max-width: 100% !important; }
  .fm-strength { margin: 0 0 12pt !important; padding: 8pt 10pt !important; break-inside: avoid; }
  .fm-strength__value { font-size: 16pt !important; }
  /* Deliberate split: PAGE 1 = the hero (title + full-width map + "Noisy signal"
     verdict + signal-strength score); PAGE 2 = the detailed findings grid + CTA.
     Forcing the break here means no finding is ever cut mid-paragraph and nothing
     collides with the running footer. The grid (worst case ~ a half page) fits
     comfortably on page 2, so it never needs a second internal break. */
  .fm-profile__grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18pt !important;
    break-before: page !important; page-break-before: always !important;
  }
  .fm-block__title { font-size: 11pt !important; margin-top: 12pt !important; }
  .fm-block__title:first-child, .fm-block__title:not(.fm-block__title--mt):first-of-type { margin-top: 0 !important; }
  .fm-finding { break-inside: avoid; padding: 5pt 0 !important; gap: 7pt !important; }
  .fm-finding__name { font-size: 11pt !important; }
  .fm-finding__sev { font-size: 8pt !important; }
  .fm-finding__body { font-size: 9.5pt !important; line-height: 1.45 !important; }
  .fm-notes li { font-size: 9.5pt !important; line-height: 1.45 !important; margin-bottom: 4pt !important; break-inside: avoid; }

  /* CTA — keep the invitation copy (with the footer URL it tells them how to
     follow up), drop the on-screen buttons. */
  .fm-cta {
    margin-top: 14pt !important; padding-top: 10pt !important; break-inside: avoid;
    border-top: 0.75pt solid var(--md-sys-color-outline-variant) !important;
  }
  .fm-cta__copy { font-size: 9.5pt !important; line-height: 1.45 !important; margin: 0 !important; max-width: 100% !important; }
}

/* =========================================================================
   FRICTION MAP — interactive operational diagnostic (.fm-*)
   A living systems topology that evolves from answer state. Signal-routing /
   transit-map visual language; calm, premium, interpretive. All motion
   respects prefers-reduced-motion (frozen by the global reduce block; also
   handled explicitly below). Colors map to friction severity:
     stable/low → primary (slate blue, clean signal)
     med        → amber (--brand-amber, friction)
     high       → warm red (congestion)
   ========================================================================= */
.fm {
  --fm-stable: var(--md-sys-color-primary);
  --fm-amber: var(--brand-amber);
  --fm-red: #d1432f;
  --fm-track: var(--md-sys-color-outline-variant);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-4), 4vw, var(--space-8));
}

/* ---- Layout: questions beside the live map (MD3 adaptive panes) ----
   Compact + medium (<840dp): single pane, stacked — map+status on top, questions
   below (big, legible map for phones + tablet-portrait). Expanded+ (≥840dp): two
   panes — questions (left) beside a sticky map (right), per MD3 guidance for
   low-density two-pane content. Completion (.fm--done): full-width map centerpiece
   on top, profile below. */
.fm-body { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 840px) {
  .fm-body {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    grid-template-areas: "quiz stage";
    gap: var(--space-8);
  }
  .fm-quiz { grid-area: quiz; margin: 0; }
  /* `.fm-body .fm-stage` (not just `.fm-stage`) so this beats the base
     `.fm-stage { position: relative }` rule that appears later in the file. */
  .fm-body .fm-stage {
    grid-area: stage;
    position: sticky;
    top: calc(var(--app-bar-height) + var(--space-4));
  }
  /* On completion the map becomes the full-width centerpiece, profile below it. */
  .fm--done .fm-body {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "quiz";
    gap: var(--space-8);
  }
  .fm--done .fm-stage { position: static; }
}
.fm-stage { display: grid; gap: var(--space-4); position: relative; }

/* ---- Mobile: guaranteed single-screen quiz; the map is the reveal ----
   Locks the quiz flow into the viewport below the app-bar; the Back/Continue
   nav is pinned to the bottom of the card (always visible) and the options are
   the elastic middle band. Short one-line labels + this lock guarantee no page
   scroll on a standard phone (proven for the worst-case 6-option question at
   375×667). Desktop/tablet (≥600px) are completely unaffected. */
@media (max-width: 600px) {
  /* Reclaim vertical budget; no large page padding during the quiz. */
  .fm { padding-top: var(--space-2); padding-bottom: 0; }
  .fm-actions { display: none; }

  /* Hide the intro title DURING the quiz (the app-bar + status pill carry
     context); it returns with the map + profile on completion. */
  .fm:not(.fm--done) .fm-header { display: none; }
  .fm-header { margin-bottom: var(--space-2); }
  .fm-header .eyebrow,
  .fm-header .fm-lede { display: none; }
  .fm-header h1 { font-size: 1.25rem; }

  /* Map hidden during the quiz, revealed with the profile. */
  .fm:not(.fm--done) .fm-map { display: none; }
  .fm--done .fm-map { display: block; animation: fm-profile-in 360ms var(--md-sys-motion-easing-emphasized) both; }

  /* Lock the quiz flow into the space below the app-bar so it can never make
     the page taller than one screen. dvh with svh/vh fallbacks for chrome. */
  .fm:not(.fm--done) .fm-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;        /* full-width children (override the grid's align-items:start) */
    gap: var(--space-2);
    height: calc(100vh  - var(--app-bar-height) - var(--space-2));
    height: calc(100svh - var(--app-bar-height) - var(--space-2));
    height: calc(100dvh - var(--app-bar-height) - var(--space-2));
    min-height: 0;
  }
  .fm--done .fm-body { gap: var(--space-3); }

  /* Stage = just the one-line status pill during the quiz. */
  .fm:not(.fm--done) .fm-stage { flex: 0 0 auto; gap: 0; }
  .fm-status { padding: var(--space-2) var(--space-4); }

  /* The card fills the remaining column and lays out as a flex column. */
  .fm:not(.fm--done) .fm-quiz {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    overflow: hidden;            /* the card itself never scrolls */
  }
  .fm-progress { margin-bottom: var(--space-2); flex: 0 0 auto; }
  .fm-progress__meta { margin-bottom: var(--space-1); }
  .fm-q__prompt { font-size: 1.05rem; line-height: 1.25; margin-bottom: var(--space-2); flex: 0 0 auto; }
  .fm-q__hint { display: none; }

  /* Options = elastic middle band; internal scroll is a safety net only. */
  .fm:not(.fm--done) .fm-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 6px;
    margin-bottom: 0;
    align-content: start;
  }
  .fm-option { min-height: 46px; padding: 6px var(--space-3); font-size: 0.9rem; gap: var(--space-2); }
  /* Single-line guarantee: never wrap; clip rather than grow the row. */
  .fm-option__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .fm-option__mark { width: 16px; height: 16px; }

  /* Nav pinned to the bottom of the card, always visible. */
  .fm-nav { flex: 0 0 auto; margin-top: auto; padding-top: var(--space-2); }
  .fm-nav .btn { height: 44px; padding: 0 var(--space-4); }
  .fm-nav .btn--text { padding: 0 var(--space-3); }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .fm:not(.fm--done) .fm-options { scroll-behavior: auto; }
}
/* During the active quiz on a phone, drop the page footer so the whole screen
   is just the quiz — zero page scroll. The footer returns on the profile. */
@media (max-width: 600px) {
  body.fm-quiz-active .footer { display: none; }
}

.fm-header { margin-bottom: var(--space-8); }
.fm-header h1 {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.fm-header .fm-lede {
  margin-top: var(--space-4);
  color: var(--md-sys-color-on-surface-variant);
  max-width: var(--measure);
}
.fm-actions { margin-bottom: var(--space-6); }

/* ---- Live status indicator (instrument-panel feel) ---- */
.fm-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  transition: border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.fm-status__dot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--fm-stable);
  box-shadow: 0 0 0 0 currentColor;
  animation: fm-blip 3.2s ease-in-out infinite;
}
.fm-status__text {
  font-family: var(--md-sys-typescale-plain);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--md-sys-color-on-surface);
  /* If a long readout ever wraps, balance it instead of orphaning a word. */
  text-wrap: balance;
}
@media (max-width: 600px) {
  .fm-status__text { font-size: 0.85rem; }
}
.fm-status[data-tone="strong"] { border-color: color-mix(in srgb, var(--brand-success) 45%, var(--md-sys-color-outline-variant)); }
.fm-status[data-tone="strong"] .fm-status__dot { background: var(--brand-success); color: var(--brand-success); }
.fm-status[data-tone="emerging"] { border-color: color-mix(in srgb, var(--fm-amber) 55%, var(--md-sys-color-outline-variant)); }
.fm-status[data-tone="emerging"] .fm-status__dot { background: var(--fm-amber); color: var(--fm-amber); }
.fm-status[data-tone="high"] { border-color: color-mix(in srgb, var(--fm-red) 55%, var(--md-sys-color-outline-variant)); }
.fm-status[data-tone="high"] .fm-status__dot { background: var(--fm-red); color: var(--fm-red); }
@keyframes fm-blip {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ---- Map ---- */
.fm-map {
  position: relative;
  background:
    radial-gradient(ellipse 70% 90% at 50% 40%, color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent), transparent 70%),
    var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: var(--space-2);
  box-shadow: var(--md-sys-elevation-1);
  overflow: hidden;
}
/* Faint dotted grid — systems-diagram texture, masked toward edges */
.fm-map::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 92%);
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 92%);
  opacity: 0.5;
  pointer-events: none;
}
.fm-map svg { width: 100%; height: auto; display: block; position: relative; }

/* edges */
.fm-edge-track {
  fill: none;
  stroke: var(--fm-track);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke 400ms var(--md-sys-motion-easing-standard), stroke-width 400ms var(--md-sys-motion-easing-standard);
}
/* cool (clean) → warm (friction). Reinforced edges read a touch bluer; friction warms + thickens. */
.fm-edge-track.is-optimal { stroke: color-mix(in srgb, var(--fm-stable) 32%, var(--fm-track)); }
.fm-edge-track.is-good    { stroke: color-mix(in srgb, var(--fm-stable) 20%, var(--fm-track)); }
.fm-edge-track.is-low  { stroke: color-mix(in srgb, var(--fm-amber) 28%, var(--fm-track)); }
.fm-edge-track.is-med  { stroke: color-mix(in srgb, var(--fm-amber) 45%, var(--fm-track)); stroke-width: 3.5; }
.fm-edge-track.is-high { stroke: color-mix(in srgb, var(--fm-red) 45%, var(--fm-track)); stroke-width: 4.5; }
.fm-edge-track.is-dashed { stroke-dasharray: 2 9; }
.fm-edge--heavy { stroke-width: 6; }
.fm-edge--ai { stroke-dasharray: 3 12; stroke: color-mix(in srgb, var(--fm-amber) 40%, var(--fm-track)); }

/* animated signal flow over each edge */
.fm-flow {
  fill: none;
  stroke: var(--fm-stable);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation-name: fm-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fm-flow.is-optimal { stroke: color-mix(in srgb, var(--fm-stable) 88%, white); stroke-width: 3.2; }
.fm-flow.is-good    { stroke: var(--fm-stable); stroke-width: 2.8; }
.fm-flow.is-stable  { stroke: var(--fm-stable); }
.fm-flow.is-low  { stroke: color-mix(in srgb, var(--fm-amber) 80%, var(--fm-stable)); }
.fm-flow.is-med  { stroke: var(--fm-amber); stroke-width: 3; }
.fm-flow.is-high { stroke: var(--fm-red); stroke-width: 3.5; }
.fm-flow--heavy { stroke-width: 5; stroke: var(--fm-red); }
.fm-flow--ai { stroke: var(--fm-amber); stroke-width: 2; }
@keyframes fm-flow { to { stroke-dashoffset: -120; } }
/* Friction halo — a soft radar ping outward (scale set on .fm-node__halo via fill-box). */
@keyframes fm-pulse {
  0%   { transform: scale(0.9); opacity: 0.3; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* nodes */
.fm-node { cursor: default; }
.fm-node[role="button"] { cursor: pointer; }
.fm-node__ring {
  fill: var(--md-sys-color-surface-container-lowest);
  stroke: var(--fm-stable);
  stroke-width: 3;
  transition: stroke 400ms var(--md-sys-motion-easing-standard), fill 400ms var(--md-sys-motion-easing-standard);
}
.fm-node__core {
  fill: var(--fm-stable);
  transition: fill 400ms var(--md-sys-motion-easing-standard);
}
.fm-node__halo {
  fill: var(--fm-amber);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* Focus ring — a calm dashed indicator marking the visitor's stated priority. */
.fm-node__focus {
  fill: none;
  stroke: var(--fm-stable);
  stroke-width: 2;
  stroke-dasharray: 3 4;
  opacity: 0.7;
}
.fm-node__label {
  font-family: var(--md-sys-typescale-plain);
  font-size: 17px;
  font-weight: 600;
  fill: var(--md-sys-color-on-surface);
  text-anchor: middle;
  letter-spacing: 0.01em;
  /* Map-label halo: a thick background-colored stroke painted UNDER the fill
     masks the connector lines behind each label, so text never blends into a
     route (transit-map station-label technique). */
  paint-order: stroke;
  stroke: var(--md-sys-color-surface-container-lowest);
  stroke-width: 5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* ---- State coloring on the cool→warm axis ----
   optimal/good  = reinforced (blue + glow, brighter when optimal)
   stable        = plain blue
   low/med/high  = friction (amber → red, pulsing at med/high) */
.fm-node.is-optimal .fm-node__ring,
.fm-node.is-good    .fm-node__ring,
.fm-node.is-stable  .fm-node__ring { stroke: var(--fm-stable); }
.fm-node.is-optimal .fm-node__core,
.fm-node.is-good    .fm-node__core,
.fm-node.is-stable  .fm-node__core { fill: var(--fm-stable); }
/* reinforced glow (blue halo, static) — stronger at optimal */
.fm-node.is-good    .fm-node__halo { fill: var(--fm-stable); opacity: 0.12; }
.fm-node.is-optimal .fm-node__halo { fill: var(--fm-stable); opacity: 0.22; }
.fm-node.is-optimal .fm-node__ring { stroke-width: 3.5; }
.fm-node.is-optimal .fm-node__core { fill: color-mix(in srgb, var(--fm-stable) 86%, white); }
/* low friction — pale amber, no pulse */
.fm-node.is-low  .fm-node__ring { stroke: color-mix(in srgb, var(--fm-amber) 85%, var(--fm-stable)); }
.fm-node.is-low  .fm-node__core { fill: color-mix(in srgb, var(--fm-amber) 60%, var(--md-sys-color-surface)); }
.fm-node.is-low  .fm-node__halo { fill: var(--fm-amber); opacity: 0.1; }
/* medium friction — amber, slow pulse */
.fm-node.is-med  .fm-node__ring { stroke: var(--fm-amber); }
.fm-node.is-med  .fm-node__core { fill: var(--fm-amber); }
.fm-node.is-med  .fm-node__halo { fill: var(--fm-amber); opacity: 0.2; animation: fm-pulse 3.4s ease-in-out infinite; }
/* high friction — red, faster pulse */
.fm-node.is-high .fm-node__ring { stroke: var(--fm-red); }
.fm-node.is-high .fm-node__core { fill: var(--fm-red); }
.fm-node.is-high .fm-node__halo { fill: var(--fm-red); opacity: 0.24; animation: fm-pulse 2.2s ease-in-out infinite; }
/* Keyboard focus — a high-contrast DARK halo that reads against every node
   state. Crucially it does NOT recolor the ring/core, so a red friction node
   stays red while focused (focus must never change what the map says). The old
   `drop-shadow(0 0 0 2px ...)` was a no-op — drop-shadow has no spread param. */
.fm-node[role="button"]:focus-visible { outline: none; }
.fm-node[role="button"]:focus-visible .fm-node__ring {
  stroke-width: 5;
  filter:
    drop-shadow(0 0 0 var(--md-sys-color-on-surface))
    drop-shadow(0 1px 0 var(--md-sys-color-on-surface))
    drop-shadow(0 -1px 0 var(--md-sys-color-on-surface))
    drop-shadow(1px 0 0 var(--md-sys-color-on-surface))
    drop-shadow(-1px 0 0 var(--md-sys-color-on-surface));
}
.fm-node[role="button"]:hover .fm-node__ring { stroke-width: 4; }

/* Non-color severity cue (SC 1.4.1): base-node rings also carry a dash signature,
   so state survives grayscale / color-blindness / reduced-motion. Scoped to
   --base so the AI node keeps its own dashed identity and tool/key stay solid. */
.fm-node--base.is-optimal .fm-node__ring,
.fm-node--base.is-good .fm-node__ring,
.fm-node--base.is-stable .fm-node__ring { stroke-dasharray: none; }
.fm-node--base.is-low  .fm-node__ring { stroke-dasharray: 10 3; }
.fm-node--base.is-med  .fm-node__ring { stroke-dasharray: 7 4; }
.fm-node--base.is-high .fm-node__ring { stroke-dasharray: 3 5; }

/* Key Person — overloaded, heavier */
.fm-node--key .fm-node__core { fill: var(--fm-amber); }
.fm-node--key.is-high .fm-node__core { fill: var(--fm-red); }
.fm-node--key .fm-node__label { font-weight: 600; }

/* Tool satellites — small, muted */
.fm-node--tool .fm-node__ring { stroke: var(--fm-amber); stroke-width: 2; }
.fm-node--tool .fm-node__core { fill: color-mix(in srgb, var(--fm-amber) 70%, var(--md-sys-color-surface)); }

/* AI Opportunity — potential, not active: dashed ring, no fill */
.fm-node--ai .fm-node__ring {
  stroke: var(--fm-amber);
  stroke-width: 2.5;
  stroke-dasharray: 4 5;
  fill: color-mix(in srgb, var(--fm-amber) 8%, var(--md-sys-color-surface-container-lowest));
}
.fm-node--ai .fm-node__core { fill: var(--fm-amber); opacity: 0.55; }
.fm-node--ai .fm-node__label { fill: var(--md-sys-color-on-surface-variant); font-size: 15px; }

/* ---- Tooltip ---- */
.fm-tip {
  position: absolute;
  z-index: 5;
  /* Fixed width (not max-width) so every node's card is the SAME size and
     readable — an absolutely-positioned shrink-to-fit card near the stage's
     right edge would otherwise get squished into a skinny column. Caps to the
     viewport on small phones. */
  width: min(280px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-on-inverse-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-2);
  transform: translate(-50%, -100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.fm-tip[data-placement="below"] { transform: translate(-50%, 0); }
.fm-tip[data-show="true"] { opacity: 1; }
.fm-tip__title {
  display: block;
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
  color: #fff;
}
.fm-tip__body { display: block; font-size: 0.85rem; line-height: 1.45; }

/* ---- Quiz ---- */
.fm-quiz {
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}
.fm-progress { margin-bottom: var(--space-4); }
.fm-progress__meta {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-2);
}
.fm-progress__track {
  height: 4px; border-radius: 99px;
  background: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}
.fm-progress__bar {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: 99px;
  transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}
.fm-q__prompt {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.fm-q__prompt:focus-visible { outline: none; }
.fm-q__hint {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.95rem;
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}
.fm-options { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.fm-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px; /* MD3 minimum touch target */
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--md-sys-color-surface-container-lowest);
  /* --outline (not --outline-variant) so the resting card edge clears the WCAG
     1.4.11 3:1 non-text contrast bar (variant on white is only ~1.7:1). Hover /
     selected / focus states override this with the primary color below. */
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  font-family: var(--md-sys-typescale-plain);
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              transform 120ms var(--md-sys-motion-easing-standard);
}
.fm-option:hover {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
}
.fm-option:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
/* Press feedback — activates the (previously dead) transform transition; the
   one-shot settle is keyed off .fm-just-picked, set only on a fresh pick. */
.fm-option:active { transform: translateY(1px); }
@keyframes fm-option-pick { 0% { transform: scale(1); } 40% { transform: scale(0.985); } 100% { transform: scale(1); } }
.fm-option.fm-just-picked { animation: fm-option-pick 220ms var(--md-sys-motion-easing-emphasized); }
.fm-option__mark {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-outline);
  position: relative;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.fm-option__mark::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  transform: scale(0);
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.fm-option.is-selected {
  border-color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-lowest));
}
.fm-option.is-selected .fm-option__mark { border-color: var(--md-sys-color-primary); }
.fm-option.is-selected .fm-option__mark::after { transform: scale(1); }
.fm-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

/* ---- Profile ---- */
.fm-profile:focus-visible { outline: none; }
.fm-profile__title {
  font-family: var(--md-sys-typescale-brand);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: var(--space-1) 0 var(--space-3);
}
.fm-profile__lede { color: var(--md-sys-color-on-surface-variant); max-width: var(--measure); margin-bottom: var(--space-6); }

.fm-strength {
  --fm-meter: var(--md-sys-color-primary);
  padding: var(--space-4);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  margin-bottom: var(--space-6);
}
.fm-strength--strong   { --fm-meter: var(--brand-success); }
.fm-strength--mixed    { --fm-meter: var(--md-sys-color-primary); }
.fm-strength--strained { --fm-meter: var(--brand-amber); }
.fm-strength--noisy    { --fm-meter: #d1432f; }
.fm-strength__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.fm-strength__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.fm-strength__value { font-family: var(--md-sys-typescale-brand); font-weight: 600; font-size: 1.5rem; color: var(--fm-meter); }
.fm-strength__track { height: 8px; border-radius: 99px; background: var(--md-sys-color-surface-container-highest); overflow: hidden; }
.fm-strength__bar { height: 100%; border-radius: 99px; background: var(--fm-meter); transition: width 700ms var(--md-sys-motion-easing-emphasized); }

.fm-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.fm-block__title { font-family: var(--md-sys-typescale-brand); font-weight: 600; font-size: 1.05rem; margin: 0 0 var(--space-3); }
.fm-block__title--mt { margin-top: var(--space-6); }
.fm-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fm-finding { display: flex; gap: var(--space-3); }
.fm-finding__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--md-sys-color-primary); }
.fm-finding.is-med  .fm-finding__dot { background: var(--brand-amber); }
.fm-finding.is-high .fm-finding__dot { background: #d1432f; }
.fm-finding.is-none .fm-finding__dot { background: var(--brand-success); }
/* Compound patterns — the named interaction of two frictions. Set apart as a
   callout so the "how did it know that" insight reads as the headline. */
.fm-finding.is-compound {
  padding: var(--space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 3px solid var(--brand-amber);
}
.fm-finding.is-compound.is-high { border-left-color: #d1432f; }
.fm-finding.is-compound .fm-finding__sev { color: var(--brand-amber); }
.fm-finding.is-compound.is-high .fm-finding__sev { color: #d1432f; }
.fm-finding__name { font-family: var(--md-sys-typescale-plain); font-weight: 600; font-size: 0.95rem; margin: 0 0 2px; }
.fm-finding__sev { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.fm-finding__body { font-size: 0.9rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); margin: 0; }
.fm-notes { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2); }
.fm-notes li { font-size: 0.9rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); }
.fm-notes strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
/* "What's working" — reinforced/positive list, marked with success-green markers */
.fm-notes--good { list-style: none; padding-left: 0; display: grid; gap: var(--space-3); }
.fm-notes--good li { position: relative; padding-left: 1.5em; }
.fm-notes--good li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-success);
}

.fm-cta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.fm-cta__copy { color: var(--md-sys-color-on-surface-variant); max-width: var(--measure); margin-bottom: var(--space-4); }
.fm-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

@media (max-width: 640px) {
  .fm-profile__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .fm-block__title--mt { margin-top: var(--space-6); }
}

/* ---- Profile reveal choreography ----
   The completion beat lands as a considered resolution: a calm fade+rise on the
   profile, an ~80ms top-down stagger of the meter + the two blocks, and (via JS)
   the strength bar filling from 0. The global reduce block resolves `both`
   fill-mode instantly, so no local reduce override is needed here. */
@keyframes fm-profile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fm--done .fm-profile { animation: fm-profile-in 360ms var(--md-sys-motion-easing-emphasized) both; }
.fm--done .fm-strength,
.fm--done .fm-profile__grid > .fm-block:nth-child(1),
.fm--done .fm-profile__grid > .fm-block:nth-child(2) { animation: fm-profile-in 420ms var(--md-sys-motion-easing-emphasized) both; }
.fm--done .fm-strength { animation-delay: 90ms; }
.fm--done .fm-profile__grid > .fm-block:nth-child(1) { animation-delay: 160ms; }
.fm--done .fm-profile__grid > .fm-block:nth-child(2) { animation-delay: 230ms; }
/* Live status text settles subtly on change (never blinks fully out). */
@keyframes fm-status-settle { from { opacity: 0.35; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.fm-status__text.is-updating { animation: fm-status-settle var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized); }

/* Reduced motion — freeze all the living animation into a calm static state.
   (The global reduce block already neutralizes durations; these make the
   resting state intentional rather than frozen mid-keyframe.) */
@media (prefers-reduced-motion: reduce) {
  .fm-status__dot,
  .fm-node__halo,
  .fm-flow { animation: none !important; }
  /* Per-severity static halos so med vs high stay distinct without motion/color
     (these win over the blanket 0.16 below). */
  .fm-node__halo { opacity: 0.16; }
  .fm-node.is-low  .fm-node__halo { opacity: 0.14; }
  .fm-node.is-med  .fm-node__halo { opacity: 0.24; }
  .fm-node.is-high .fm-node__halo { opacity: 0.34; }
  /* Frozen flow lines read as solid rails, not broken routes (flowAttrs sets
     the dash inline, hence !important). Only the flow, never the edge track. */
  .fm-flow { stroke-dasharray: none !important; }
}