/* ==========================================================================
   JumpStart Fed design system, revision 2.
   Register: precision-engineered, GovCon-serious. Federal blue on ice
   white. The visual language is the software that holds the document
   program: app frames, status chips, drawn connections. Manrope carries
   the whole system, weight-driven: 800 display, 400 to 700 text and UI.
   No fabricated metrics anywhere: every number shown is program-truthful.
   ========================================================================== */

:root {
  --paper: #F7F9FB;        /* ice base */
  --paper-2: #ECF1F6;      /* wells / bands */
  --sheet: #FFFFFF;        /* frames */
  --ink: #16212E;
  --ink-2: #48586A;
  --navy: #14385E;
  --navy-deep: #0E2A48;
  --blue: #1B5FAD;
  /* Cross-brand accent: the ISO teal as referenced FROM other family
     sites (platform doors, the btn-iso button). One definition here;
     never hardcode the hex at a use site. */
  --iso-accent: #0F766E;
  --iso-accent-deep: #0C5F55;
  --iso-head: #0B534B;
  --iso-info-ink: #0B5D54;
  --iso-info-soft: #E1F0ED;
  --iso-info-line: #BBDCD6;
  --infosec-accent: #4753B8;
  --infosec-head: #303A8C;
  --infosec-info-ink: #39439B;
  --infosec-info-soft: #E9EBF8;
  --infosec-info-line: #C9CDEC;
  --iso-navy: #0E4A44;
  --iso-navy-deep: #09332E;
  --infosec-navy: #2E3680;
  --infosec-navy-deep: #232A66;
  /* Info-state trio: MUST follow the site accent (theme.css overrides
     these per site). Never hardcode these hexes in components. */
  --info-ink: #174F86;
  --info-soft: #E6EFF8;
  --info-line: #C2D8EC;
  /* On-navy tints: text and accents that sit on navy surfaces
     (footer, bands, navy tiles). Themed per site with the navy. */
  --on-navy-0: #E9EFF6;
  --on-navy-1: #BCD4EC;
  --on-navy-2: #C6D5E4;
  --on-navy-3: #8FA9C2;
  --on-navy-line: #335170;
  --on-navy-line-2: #2C4A69;
  --on-navy-line-3: #22405F;
  --on-navy-4: #7E9CBC;
  --navy-well: #12324F;
  /* Neutral chrome: every gray in the system carries the site tint
     and is themable. No raw grays in components. */
  --shade: 16, 42, 74;
  --grid-line: rgba(20, 56, 94, 0.045);
  --glass: rgba(247, 249, 251, 0.92);
  --well: #F2F6FA;
  --rail-well: #F7FAFC;
  --log-well: #FAFCFE;
  --frame-dot: #CBD7E2;
  --glyph-muted: #A9BACB;
  --dot-neutral: #C3D0DD;
  --dot-muted: #9DAEC0;
  --muted-soft: #EEF2F6;
  --muted-line: #D5DEE7;
  --neutral-line: #C6D2DE;
  --approve-ink: #1E6B45;
  --approve-line: #BFDECB;
  --approve: #21714A;
  --approve-soft: #E3F1E9;
  --rule: #DCE3EB;
  --rule-strong: #B9C6D4;
  --focus: #1B5FAD;

  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --wrap: 72rem;
  --radius: 6px;
  --shadow-sheet: 0 1px 2px rgba(var(--shade), 0.06), 0 18px 44px -18px rgba(var(--shade), 0.22);

  /* Fluid-field band colors (deep -> faint). Sibling sites override
     these (and --blue) to recolor the family system. */
  --fx-deep: #1D56A2;
  --fx-mid: #5D8BC4;
  --fx-light: #A3C2E2;
  --fx-faint: #D8E5F1;
}

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

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  /* Reserve the scrollbar gutter permanently: a scrollbar appearing
     after first paint must never reflow the page sideways. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html { overflow-x: clip; }
/* Grid children may always shrink below content width: mockup sheets
   and registers must never force a phone off its measure. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
body {
  position: relative; /* .page-corners spans the full document */
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  color: var(--head, var(--navy));
  text-wrap: balance;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: -0.028em;
}
/* Long compound headlines: a notch smaller so the intended line break
   fits instead of balance splitting at a hyphen. */
.h1-snug { font-size: clamp(2.1rem, 4.4vw, 3.05rem); }
h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.2;
  color: var(--head, var(--navy));
  text-wrap: balance;
  letter-spacing: -0.015em;
}
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -0.022em;
}
h3 { font-size: clamp(1.15rem, 1.9vw, 1.3rem); }
h4 { font-size: 1.02rem; color: var(--ink); }

p, li { max-width: 68ch; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
/* Inline text links: the underline draws in from the left on hover.
   Same 1px hyperlink underline, just animated. */
p a:not(.arrow-link):not(.btn), li a:not(.btn), .prose a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
p a:not(.arrow-link):not(.btn):hover, li a:not(.btn):hover, .prose a:hover {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: no-preference) {
  p a:not(.arrow-link):not(.btn), li a:not(.btn), .prose a {
    transition: background-size 240ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms ease;
  }
}

.arrow-link { font-weight: 600; }
.arrow-link:hover { text-decoration: none; }
.arrow-link .arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .arrow-link .arrow { transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
  .arrow-link:hover .arrow { transform: translateX(5px); }
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: color-mix(in srgb, var(--blue) 22%, #FFFFFF); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.wrap {
  width: min(var(--wrap), 100% - 3rem);
  margin-inline: auto;
}
@media (max-width: 40em) {
  .wrap { width: calc(100% - 2.5rem); }
}

.section { padding-block: clamp(4rem, 9vw, 7.25rem); }
.section-tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.kicker {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.kicker::after {
  content: "";
  flex: 0 1 6rem;
  border-top: 1px solid var(--rule-strong);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.section-head p { margin-top: 1rem; color: var(--ink-2); font-size: 1.1rem; }
/* Heads that hand off to an adjacent block instead of a full section. */
.section-head-flush { margin-bottom: 0; }
.section-head-tight { margin-bottom: 0.9rem; }

.lede { font-size: clamp(1.12rem, 1.8vw, 1.28rem); line-height: 1.6; color: var(--ink-2); }

.band-navy {
  background: var(--navy-deep);
  color: var(--on-navy-0);
}
/* Living dark band (.band-live): a fluid gradient in the navy. Four
   soft pools on two layers, each layer drifting on its own path and
   clock (directions oppose, durations desync), so the surface slowly
   folds in more than one direction and never visibly repeats. Tokens
   only; the band's own content sits above. */
.band-live { position: relative; overflow: hidden; }
.band-live > .wrap { position: relative; z-index: 1; }
.band-live::before,
.band-live::after {
  content: "";
  position: absolute;
  inset: -34%;
  pointer-events: none;
}
.band-live::before {
  background:
    radial-gradient(50% 64% at 16% 22%, color-mix(in srgb, var(--on-navy-line) 48%, transparent), transparent 70%),
    radial-gradient(44% 60% at 78% 28%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 72%);
}
.band-live::after {
  background:
    radial-gradient(56% 74% at 84% 84%, color-mix(in srgb, var(--navy-deep) 80%, transparent), transparent 74%),
    radial-gradient(40% 56% at 30% 88%, color-mix(in srgb, var(--on-navy-line-2) 56%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .band-live::before { animation: bandDriftA 17s ease-in-out infinite; }
  .band-live::after { animation: bandDriftB 26s ease-in-out infinite; }
}
@keyframes bandDriftA {
  0%, 100% { transform: translate3d(-4%, -3%, 0) rotate(-1.2deg) scale(1); }
  33% { transform: translate3d(2.5%, 1.5%, 0) rotate(0.6deg) scale(1.09); }
  66% { transform: translate3d(-1.5%, 4%, 0) rotate(-0.4deg) scale(1.04); }
}
@keyframes bandDriftB {
  0%, 100% { transform: translate3d(3.5%, 2.5%, 0) rotate(1deg) scale(1.06); }
  25% { transform: translate3d(-2.5%, 3.5%, 0) rotate(-0.8deg) scale(1); }
  55% { transform: translate3d(2%, -3.5%, 0) rotate(0.4deg) scale(1.1); }
  80% { transform: translate3d(-3.5%, -1.5%, 0) rotate(1.4deg) scale(1.03); }
}
/* Footers run the same water at a calmer level: people read legal
   lines and link columns down here. */
.site-footer.band-live::before,
.site-footer.band-live::after { opacity: 0.55; }

.band-navy h2, .band-navy h3 { color: #FFFFFF; }
.band-navy p { color: var(--on-navy-2); }
/* Kickers must stay legible over navy: the numbering system is doing
   structural work, so it gets the brighter on-navy ink. */
.band-navy .kicker { color: var(--on-navy-1); }
.band-navy .kicker::after { border-color: var(--on-navy-line); }
.band-navy a { color: var(--on-navy-1); }
.band-navy a:hover { color: #FFFFFF; }

.band-paper2 { background: var(--paper-2); }

.hairline-top { border-top: 1px solid var(--rule); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.78em 1.5em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn-sm { padding: 0.55em 1.1em; font-size: 0.92rem; }

.btn-primary { background-color: var(--navy); color: #FFFFFF; }
/* Button hovers differ by role so no treatment repeats everywhere:
   primary keeps the light sheen (the signature CTA moment), outline
   fills with a directional wipe, paper simply lifts. */
.btn-primary:hover {
  background-color: var(--navy-deep);
  color: #FFFFFF;
  background-image: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.18) 50%, transparent 68%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 140% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover {
    animation: btnSheen 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}
@keyframes btnSheen {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

.btn-outline {
  border-color: var(--navy);
  color: var(--navy);
  background-color: transparent;
  background-image: linear-gradient(var(--navy), var(--navy));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
}
.btn-outline:hover { color: #FFFFFF; background-size: 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .btn-outline {
    transition:
      background-color 140ms ease, border-color 140ms ease, color 140ms ease,
      transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease,
      background-size 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ISO-accented primary: used wherever a JumpStart ISO action appears on
   family pages, so the button wears the product's emerald. Inherits the
   primary sheen. */
.btn-primary.btn-iso { background-color: var(--iso-accent); }
.btn-primary.btn-iso:hover { background-color: var(--iso-accent-deep); }
.btn-primary.btn-infosec { background-color: var(--infosec-accent); }
.btn-primary.btn-infosec:hover { background-color: #39439C; }

.btn-paper { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.btn-paper:hover { background: var(--paper); border-color: var(--paper); color: var(--navy-deep); }

.btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --- Header / nav -------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.6em 1em;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 120ms ease;
}
.skip-link:focus { top: 0; color: #fff; }

.site-header {
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(1.25);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
html.motion .site-header { transition: box-shadow 240ms ease; }
.site-header.is-scrolled { box-shadow: 0 10px 26px -20px rgba(10, 28, 52, 0.45); }
html.motion .site-nav { transition: min-height 240ms ease; }
.is-scrolled .site-nav { min-height: 3.55rem; }

.site-nav {
  width: min(var(--wrap), 100% - 3rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.1rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--navy);
}
/* Brand monogram: drawn JS tile (inline SVG; rect fill = currentColor).
   Fed rides var(--blue); ISO's page token turns the same rule teal;
   Platforms uses the navy variant. The favicons are the same drawing. */
.brand-mark {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--blue);
}
.brand-mark-navy { color: var(--navy); }
/* Brand-mark hover: the stair mirrors vertically. The top cell eases
   straight down, the bottom cell eases straight up (equal distance,
   same clock, no delays), the middle never moves, and the echo
   crosses the top edge to its X-mirrored spot - top-right at rest,
   top-left on hover, same height. Decorative; motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark .bm-c1,
  .brand-mark .bm-c3,
  .brand-mark .bm-echo {
    transition: transform 420ms cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  .brand:hover .bm-c1 { transform: translateY(-27px); }
  .brand:hover .bm-c3 { transform: translateY(27px); }
  .brand:hover .bm-echo { transform: translateX(-48.5px); }
}
.brand-name {
  font-family: var(--display);
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name b { font-weight: 800; color: var(--blue); }

.nav-toggle {
  display: none;
  font: 600 0.95rem var(--sans);
  color: var(--navy);
  background: none;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  list-style: none;
  padding: 0;
}
.nav-links a:not(.btn) {
  position: relative;
  font-size: 0.96rem;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.35em;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}
html.motion .nav-links a:not(.btn)::after { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav-links a:not(.btn):hover { color: var(--navy); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

[data-active="product"] .nav-product,
[data-active="how"] .nav-how,
[data-active="guides"] .nav-guides,
[data-active="compare"] .nav-compare,
[data-active="pricing"] .nav-pricing,
[data-active="security"] .nav-security,
[data-active="briefings"] .nav-briefings,
[data-active="snapshot"] .nav-snapshot,
[data-active="approach"] .nav-approach,
[data-active="about"] .nav-about,
[data-active="modules"] .nav-modules {
  color: var(--navy);
  font-weight: 650;
}
[data-active="product"] .nav-product::after,
[data-active="how"] .nav-how::after,
[data-active="guides"] .nav-guides::after,
[data-active="compare"] .nav-compare::after,
[data-active="pricing"] .nav-pricing::after,
[data-active="security"] .nav-security::after,
[data-active="briefings"] .nav-briefings::after,
[data-active="snapshot"] .nav-snapshot::after,
[data-active="approach"] .nav-approach::after,
[data-active="about"] .nav-about::after,
[data-active="modules"] .nav-modules::after {
  transform: scaleX(1);
  background: var(--navy);
}

/* Mobile nav: without JS the links simply wrap below the brand (always
   usable); with JS the toggle collapses them. */
@media (max-width: 56em) {
  .js .nav-toggle { display: inline-block; }
  .js .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    flex-basis: 100%;
    gap: 0.15rem;
    padding-block: 0.5rem 1rem;
    border-top: 1px solid var(--rule);
    margin-top: 0.4rem;
  }
  .js .site-nav.nav-open .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding-block: 0.5em; }
  .nav-cta { margin-top: 0.5rem; }
  .nav-links { flex-wrap: wrap; }
}

/* --- Modules master-detail (ISO modules page) -----------------------------
   A selector rail drives one product window. Without JS every pane is
   visible stacked inside the window; JS turns the rail into a real
   tablist and shows one pane at a time. */

.mod-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.mod-nav { display: flex; flex-direction: column; }
.mod-tab {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  padding: 0.95rem 0.9rem 0.95rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.mod-tab:first-child { border-top: 1px solid var(--rule); }
.mod-tab-num {
  font: 600 0.72rem var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.mod-tab-name b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; }
.mod-tab-name small {
  display: block;
  font: 500 0.68rem var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.1rem;
}
.mod-tab .chip { justify-self: end; }
.mod-tab.is-on,
.mod-tab[aria-selected="true"] {
  border-left-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}
.mod-tab.is-on .mod-tab-num,
.mod-tab[aria-selected="true"] .mod-tab-num { color: var(--blue); }
.mod-view { position: sticky; top: 1.5rem; }
.mod-panes { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .mod-tab { transition: background-color 180ms ease, border-left-color 200ms ease; }
  .mod-tab:hover { background: color-mix(in srgb, var(--blue) 4%, transparent); }
  .mod-panes { transition: height 340ms cubic-bezier(0.3, 0.86, 0.28, 1); }
  .mod-pane.is-in { animation: modPaneIn 300ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes modPaneIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 56em) {
  .mod-split { grid-template-columns: 1fr; }
  .mod-view { position: static; }
  .mod-nav {
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 1px solid var(--rule-strong);
  }
  .mod-tab {
    grid-template-columns: auto auto;
    border-bottom: none;
    border-left: none;
    border-top: 3px solid transparent;
    white-space: nowrap;
    padding: 0.7rem 0.9rem;
  }
  .mod-tab:first-child { border-top: 3px solid transparent; }
  .mod-tab .chip { display: none; }
  .mod-tab-name small { display: none; }
  .mod-tab.is-on,
  .mod-tab[aria-selected="true"] { border-top-color: var(--blue); }
}

/* --- Module cards (ISO modules page) --------------------------------------
   Each module is a product window: frame chrome, focus-area chips,
   and the buyer archetype as an accent panel. */

.mod-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.6rem 3rem;
  align-items: start;
  padding: 1.45rem 1.6rem 1.6rem;
}
.mod-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 0.55rem; }
.mod-desc p { color: var(--ink-2); font-size: 0.97rem; margin: 0 0 0.8rem; }
.mod-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.05rem; }
.mod-for {
  border-left: 3px solid color-mix(in srgb, var(--blue) 40%, var(--rule));
  padding-left: 1.2rem;
}
.mod-for p { color: var(--ink-2); font-size: 0.93rem; margin: 0; }
@media (max-width: 56em) {
  .mod-body { grid-template-columns: 1fr; }
}

/* --- Comparison matrix -----------------------------------------------------
   The at-a-glance version of the compare page: criteria rows, one
   column per option, drawn verdict marks. The featured column carries
   a tinted band and accent top rule. */

.matrix-wrap { overflow-x: auto; }
.matrix {
  width: 100%;
  min-width: 54rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.matrix th,
.matrix td {
  padding: 0.8rem 1.05rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.matrix thead th {
  font: 600 0.64rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  padding-top: 1rem;
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix tbody th { font-weight: 600; color: var(--ink); width: 29%; }
.matrix tbody td { color: var(--ink-2); }
.matrix .mx-featured { background: color-mix(in srgb, var(--blue) 5%, transparent); }
.matrix thead .mx-featured {
  color: var(--blue);
  box-shadow: inset 0 3px 0 var(--blue);
}
.mk {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.85rem;
}
.mk i {
  font-style: normal;
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.mk-yes i { background: var(--approve-soft); color: var(--approve); border: 1px solid var(--approve-line); }
.mk-part i { background: var(--muted-soft); color: var(--ink-2); border: 1px solid var(--muted-line); }
.mk-no i { background: transparent; color: var(--dot-muted); border: 1px dashed var(--neutral-line); }
.mk-yes { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .matrix tbody tr { transition: background-color 160ms ease; }
  .matrix tbody tr:hover { background: color-mix(in srgb, var(--blue) 3%, transparent); }
}

/* --- Card variety ----------------------------------------------------------
   Three sibling forms besides the base .tile, so pages stop reading as
   the same box repeated: .ledger (numbered register rows, de-boxed),
   .tile-spine (accent left border, unboxed), .tile-glyph (base tile
   carrying a drawn glyph from the hero rail's icon language). */

.ledger { border-top: 1px solid var(--rule-strong); }
.ledger-row {
  display: grid;
  grid-template-columns: 3rem 15rem 1fr;
  gap: 1.3rem;
  align-items: start;
  padding: 1.2rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.ledger-num {
  font: 600 0.72rem var(--mono);
  letter-spacing: 0.08em;
  color: var(--blue);
  padding-top: 0.34rem;
}
.ledger-row .tile-kick { margin-bottom: 0.2rem; }
.ledger-row h3 { font-size: 1.05rem; letter-spacing: -0.012em; margin: 0; }
.ledger-row h3 .chip { margin-left: 0.6rem; vertical-align: 2px; }
.ledger-row p { margin: 0; font-size: 0.95rem; color: var(--ink-2); max-width: 58ch; }
@media (max-width: 56em) {
  .ledger-row { grid-template-columns: 2.2rem 1fr; }
  .ledger-row p { grid-column: 2; }
}

.tile-spine {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.3rem;
  border-left: 3px solid color-mix(in srgb, var(--blue) 40%, var(--rule));
}
.tile-spine h3 { font-size: 1.08rem; letter-spacing: -0.012em; margin-bottom: 0.45rem; }
.tile-spine p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
/* Compact claim lists inside spine tiles (the is / is-not pairing). */
.spine-list {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.spine-list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}
.spine-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--blue);
}
.spine-list li strong { color: var(--ink); }
.spine-list-no li::before { background: var(--glyph-muted); }

/* Glyphs ride the kicker line as a register mark, not a floating
   badge: [glyph] KICKER on one row, heading beneath. */
.tile-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.tile-head .card-glyph { width: 26px; height: 26px; border-radius: 7px; }
.tile-head .card-glyph::after { inset: 6px; }
.tile-head .tile-kick { margin-bottom: 0; }

.card-glyph {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 35%, var(--rule-strong));
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  color: var(--blue);
  position: relative;
  margin-bottom: 0.9rem;
}
.card-glyph::after {
  content: "";
  position: absolute;
  inset: 8px;
}
.card-glyph-list::after {
  background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 6px);
}
.card-glyph-chart::after {
  background:
    linear-gradient(currentColor, currentColor) 0% 100% / 22% 55% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 22% 90% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 22% 40% no-repeat;
}
.card-glyph-doc::after {
  background:
    linear-gradient(currentColor, currentColor) center top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 45% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 60% 2px no-repeat;
}

/* --- Page-corner DNA -------------------------------------------------------
   Four quantized pixel clusters at the document corners, the homepage
   field's language framing every page. Injected by site.js, painted
   behind section backgrounds (negative z), tinted by the site's --fx
   tokens. Each cluster is one element drawing its pixels as
   box-shadows on a 17px grid. */

main { position: relative; }
.page-corners {
  position: absolute;
  inset: 0;
  z-index: 1; /* above section backgrounds; decor lives in the gutters */
  pointer-events: none;
  overflow: hidden;
}
/* Each corner is the SAME two-layer cluster the page-hero carried at
   its top right (the built-ins hide under html.js so nothing doubles):
   a deep/mid layer and a light/faint layer breathing out of phase,
   drawn as box-shadow cells from the --fx tokens so each site tints
   its own. Mirroring per corner comes from the transform. */
.page-corners i {
  position: absolute;
  width: 16px;
  height: 16px;
}
.page-corners i::before,
.page-corners i::after {
  content: "";
  position: absolute;
  inset: 0;
}
.page-corners i::before {
  background: var(--fx-mid);
  box-shadow:
    0 17px var(--fx-deep),
    17px 17px var(--fx-mid),
    17px 34px var(--fx-deep),
    0 34px var(--fx-mid),
    34px 34px var(--fx-mid);
}
.page-corners i::after {
  box-shadow:
    17px 0 var(--fx-light),
    34px 0 var(--fx-faint),
    51px 0 var(--fx-light),
    68px 0 var(--fx-faint),
    34px 17px var(--fx-light),
    51px 17px var(--fx-faint),
    0 51px var(--fx-light),
    17px 51px var(--fx-light),
    34px 51px var(--fx-faint),
    0 68px var(--fx-faint),
    17px 68px var(--fx-light),
    0 85px var(--fx-faint);
}
.page-corners i:nth-child(1) { top: 0; left: 0; }
.page-corners i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.page-corners i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.page-corners i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); }
html.js .page-hero::before,
html.js .page-hero::after { display: none; }
@media (max-width: 40em) {
  .page-corners { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-corners i::before { animation: clusterBreathe 7s ease-in-out infinite; }
  .page-corners i::after { animation: clusterBreathe 7s ease-in-out -3.5s infinite; }
}

/* --- Frames, chips, rows --------------------------------------------------
   The core visual: the software that holds the document program. */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-sheet);
  color: var(--ink);
  overflow: hidden;
}
/* Matrix tables in sheet chrome must keep their own horizontal
   scroll: the sheet's overflow clip would otherwise crop the table. */
.matrix-wrap.sheet { overflow-x: auto; overflow-y: hidden; }

.chip,
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Three silhouettes for three jobs: status wears a capsule and a
     dot, tags sit on a quiet filled rect, link pills are bordered
     capsules with the arrow. No ticket edges anywhere. */
  padding: 0.42em 0.9em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  color: var(--approve-ink);
  background: var(--approve-soft);
  white-space: nowrap;
}
/* Hover: a gradient charges in from the ticket's leading edge, in the
   chip's own ink (currentColor), so every variant tints itself. */
.chip { position: relative; overflow: hidden; }
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, currentColor, transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.chip:hover::before { opacity: 0.14; }

.chip-info,
.stamp-navy {
  color: var(--info-ink);
  background: var(--info-soft);
  border-color: var(--info-line);
}
.chip-muted {
  color: var(--ink-2);
  background: var(--muted-soft);
  border-color: var(--muted-line);
}
/* Platform-tinted link pills: each platform's chip wears its own hue.
   Silhouette unchanged; the arrow and hover charge inherit the ink. */
.chip-fed { color: #175090; background: #EBF2FA; border-color: rgba(27, 95, 173, 0.4); }
.chip-iso { color: var(--iso-accent-deep); background: #E5F1EF; border-color: rgba(15, 118, 110, 0.4); }
.chip-infosec { color: #39439C; background: #ECEEFA; border-color: rgba(71, 83, 184, 0.42); }
/* Chips carry distinct jobs, and each job gets its own silhouette so
   the pills stop reading as one repeated ornament:
     status  (.chip-status)  a state that is true right now - wears a dot
     tag     (.chip-tag)     a taxonomy label - quiet, uniform hairline
     link    (a.chip)        goes somewhere - carries a persistent arrow
   Color variants (chip-info emphasis, chip-muted de-emphasis) layer on
   top. Never combine .chip-status with a.chip: both own ::after. */
.chip-status { gap: 0.55em; }
.chip-status::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  order: -1;
  flex: none;
}
.chip-tag {
  color: var(--ink-2);
  background: var(--paper-2);
  border-color: transparent;
  border-radius: 7px;
}
/* Toggletips: dotted-underline terms that open a small definition card
   on click or tap. Editorial spine treatment, not frame chrome; the
   page reads fully without ever opening one (no-JS keeps them shut). */
.def-wrap { position: relative; display: inline-block; }
button.def {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  border-bottom: 1px dotted var(--blue);
  border-radius: 0;
  cursor: pointer;
}
button.def[aria-expanded="true"],
button.def:hover { color: var(--blue); }
button.def:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.def-pop {
  max-width: calc(100vw - 2.4rem);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 6px);
  opacity: 0;
  visibility: hidden;
  width: min(19rem, 78vw);
  padding: 0.7rem 0.9rem;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  box-shadow: var(--shadow-sheet);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--ink-2);
  z-index: 30;
}
.def[aria-expanded="true"] + .def-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: no-preference) {
  /* The card eases in on open only; leaving the term or the card
     drops it at once, so nothing lingers over the copy. */
  .def[aria-expanded="true"] + .def-pop {
    transition: opacity 190ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

a.chip { text-decoration: none; cursor: pointer; }
a.chip::after {
  content: "\2192";
  font-size: 0.92em;
  opacity: 0.55;
  margin-left: 0.12em;
}
@media (prefers-reduced-motion: no-preference) {
  a.chip::after {
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease;
  }
  a.chip:hover::after { transform: translateX(3px); opacity: 0.9; }
}

.frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.62rem 0.95rem;
  background: var(--well);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.frame-body { padding: 0.35rem 0.95rem 0.9rem; }
/* Status chips inside frame bars carry a dot plus a long label; give
   the pair air so the dot never squeezes the text. */
.frame-bar .chip { padding: 0.36em 0.75em 0.36em 0.62em; }
.frame-bar .chip-status { gap: 0.5em; }

.h-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.84rem;
}
.h-row:last-child { border-bottom: none; }
.h-row .h-label { font-weight: 600; color: var(--ink); min-width: 0; flex: 1; }
/* Fixed metrics for the currents frames (Platforms): the scene slides
   whole rows instead of morphing chips, so every fact chip lands in a
   same-width pill — slide after slide, the row's right edge cannot
   move. (Fed/ISO chips morph px-to-px through the engine instead.) */
/* Size-lock, all three sites: any chip rendered inside an engine pane
   gets a floor width and centered text, so rotating content can never
   re-flow its row. The currents-scoped rule below predates this and
   also covers pre-engine static markup on the Platforms hero. */
.hero-stage .fl-pane .chip {
  min-width: 4.9rem;
  justify-content: center;
}
[data-fx="currents"] .frame-body .chip {
  min-width: 4.9rem;
  justify-content: center;
}

/* Fixed metrics: hero-frame row text is single-line, ellipsized like
   any real product list. Row height is therefore a constant — no
   width change (chip morphs, font swaps, resize) can re-wrap text or
   move the frame. */
.h-label .h-t {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-row .h-label small {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-prog { display: block; padding: 0.65rem 0 0.1rem; }
.h-prog .h-prog-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.45rem;
}
/* --- Instrument enclave (Fed hero + Platforms mini) -------------------------
   The program as one instrument: an arc dial carrying the step count,
   three owner-grade figures, the 14-family strip, and the log line.
   Fixed metrics: every text slot is single-line and width-pinned by
   the engine; the dial is pure stroke geometry, so no morph can ever
   move layout. */
.inst-band {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: 1.15rem 1.3rem 0.9rem;
}
.inst-dial { position: relative; width: 116px; height: 116px; flex: none; }
.inst-dial svg { transform: rotate(-90deg); display: block; }
.inst-num-wrap { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.inst-num {
  font: 800 1.6rem var(--display);
  color: var(--head, var(--navy));
  letter-spacing: -0.025em;
  display: block;
  line-height: 1;
}
.inst-num-wrap small {
  font: 600 0.52rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.2rem;
}
.inst-stats { display: grid; flex: 1; min-width: 0; }
.inst-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
}
.inst-stat:first-child { padding-top: 0.1rem; }
.inst-stat:last-child { border-bottom: none; }
.inst-stat small {
  font: 500 0.58rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: none;
}
.inst-stat b {
  font: 700 0.86rem var(--sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.inst-fam { display: flex; align-items: center; gap: 0.65rem; padding: 0 1.3rem 1rem; }
.inst-fam .fk {
  font: 500 0.56rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: none;
}
.inst-fam .segs { display: flex; gap: 2px; flex: 1; }
/* Family segments are requirement-weighted (--w = real count per
   NIST SP 800-171 rev. 2): the strip carries the map's truth inside
   the instrument. Hovering a segment names its family. */
.inst-fam .segs i {
  height: 6px;
  flex: var(--w, 1);
  border-radius: 2px;
  background: var(--paper-2);
  position: relative;
  transform-origin: 50% 100%;
}
.inst-fam .segs i.on { background: var(--navy); }
.inst-fam .segs i.now { background: var(--blue); }
/* A 6px-tall strip is a hostile hover target: every segment carries an
   invisible hit moat so the pointer engages without pixel-hunting. */
.inst-fam .segs i::before {
  content: "";
  position: absolute;
  inset: -9px -1px;
}
.inst-fam .segs i::after {
  content: attr(data-abbr);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, 2px);
  font: 600 0.55rem var(--mono);
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--navy-deep, var(--navy));
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.inst-fam .segs i:hover::after { opacity: 1; transform: translate(-50%, 0); }
/* Edge clamps: tooltips near either end of the strip align inward so
   nothing ever pokes past the frame. */
.inst-fam .segs i:nth-child(-n+2)::after { left: 0; transform: translate(0, 2px); }
.inst-fam .segs i:nth-child(-n+2):hover::after { transform: translate(0, 0); }
.inst-fam .segs i:nth-last-child(-n+3)::after { left: auto; right: 0; transform: translate(0, 2px); }
.inst-fam .segs i:nth-last-child(-n+3):hover::after { transform: translate(0, 0); }
/* Stat rows wash through a padded pseudo, never their own box: text,
   borders, and layout cannot move, and the wash gets breathing room
   the bare row does not have. The engine's flash reuses the same
   surface so hover and scene events share one geometry. */
.inst-stat { position: relative; z-index: 0; }
.inst-stat::before {
  content: "";
  position: absolute;
  inset: 2px -0.7rem;
  border-radius: 6px;
  z-index: -1;
}
.inst-stat:hover::before { background: var(--well); }
.inst-stat:hover b { color: var(--blue); }
.inst-stat.fl-flash { animation: none; }
.inst-dial:hover .inst-num { color: var(--blue); }

/* --- Tape enclave (ISO hero + Platforms mini) -------------------------------
   The module as a running register: compressed step rows around a
   fixed zoom slot. Geometry is constant by construction - rows are
   single-line, the zoom clamps its title to one line and its
   instruction to two - so the engine can rotate contents through the
   slots without anything moving. */
.tape-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font: 500 0.66rem var(--mono);
  color: var(--ink-2);
}
.tape-row .tn { width: 1.8em; flex: none; color: var(--glyph-muted); }
.tape-row .tt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-row .to { flex: none; width: 3.4em; text-align: right; color: var(--glyph-muted); }
.tape-row .ts { flex: none; letter-spacing: 0.08em; width: 5.6em; text-align: right; }
.tape-row.t-done .ts { color: var(--approve); }
/* Engine panes inside tape slots keep the row's own rhythm. */
.tape-row .fl-pane { gap: 0.7rem; }
.tape-zoom .fl-pane > * { width: 100%; }
.tape-zoom {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 3.5%, transparent);
}
.tape-zoom-in { width: 100%; padding: 0.75rem 1.1rem 0.8rem; }
.tape-zoom-in small {
  display: block;
  font: 600 0.58rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tape-zoom-in .zt {
  display: block;
  font: 700 0.95rem var(--sans);
  color: var(--head, var(--navy));
  letter-spacing: -0.01em;
  margin: 0.22rem 0 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tape-zoom-in p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  max-width: none;
}
.tape-zoom-in .ztags {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
}
.tape-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.1rem;
  background: var(--well);
  font: 500 0.6rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tape-foot .cyc { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Register strips (ISO hero, tape.js): the tape flows upward through a
   fixed lens. Each strip is a clipped viewport over a longer column;
   an advance is ONE transform per column and per lens face, committed
   in a single style pass, so nothing inside a strip ever reflows
   mid-flight. The second lens face is an absolute overlay carrying
   the incoming step; the first stays in flow and owns the height.
   Structure lives outside the media query; motion only adds the
   transitions. */
.tape-view { overflow: hidden; }
/* Soft crossing edges: rows dissolve through a small transparency band
   at each strip edge instead of guillotine-clipping mid-glyph. The
   band sits inside the rows' own padding, so resting text is clear of
   it. The separators the mask would eat (the edge rows' borders) move
   to unmasked container borders below - register only, the Platforms
   mini keeps its row-borne rules. */
.tape-reg .tape-view {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
}
.tape-reg .tape-zoom { border-top: 1px solid var(--rule); }
.tape-reg .tape-foot { border-top: 1px solid var(--rule); }
.zoom-face + .zoom-face { position: absolute; inset: 0; }
.zoom-face.zf-out { opacity: 0; }
.t-dip { opacity: 0 !important; }
.tape-still, .tape-still * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* The conveyor: strips and lens faces glide the same distance on the
     same clock, compositor-side. Persistent will-change keeps the
     layers warm so promotion never hitches an advance. */
  .tape-col, .zoom-face { will-change: transform; }
  .tape-col { transition: transform 620ms cubic-bezier(0.26, 0.9, 0.26, 1); }
  .zoom-face {
    transition:
      transform 620ms cubic-bezier(0.26, 0.9, 0.26, 1),
      opacity 340ms ease;
  }
  /* Landing payoffs: the filed step stamps green; tiny fixed-width
     labels morph through a dip. */
  .tape-reg .ts { transition: color 420ms ease, opacity 160ms ease; }
  .tape-reg .tape-phase { transition: opacity 160ms ease; }
}

@media (prefers-reduced-motion: no-preference) {
  .inst-arc {
    transition: stroke-dasharray 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
  }
  .inst-arc.fl-glow { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue) 55%, transparent)); }
  .inst-fam .segs i {
    transition:
      background-color 400ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .inst-fam .segs i:hover { transform: scaleY(1.6); }
  .inst-fam .segs i::after {
    transition:
      opacity 160ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .inst-fam .segs i.now { animation: famNow 3s ease-in-out infinite; }
  /* The instrument answers the hand: the frame lifts, the dial glows,
     the window dots tint in sequence. Quiet, single-purpose moves.
     Anything that moves on hover carries an invisible moat (::before,
     below) so the element can never lift out from under the pointer
     and jitter at its own edge. */
  .hero-stage > .hero-frame-main:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent),
      var(--shadow-sheet);
  }
  .inst-stat.fl-flash::before { animation: flFlash 850ms ease; }
  .inst-dial:hover .inst-arc {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue) 55%, transparent));
  }
  .inst-stat { transition: background-color 180ms ease; }
  .inst-stat b { transition: color 180ms ease; }
  .inst-num { transition: color 200ms ease; }
  .frame-dots i { transition: background-color 220ms ease; }
  .frame-dots i:nth-child(2) { transition-delay: 60ms; }
  .frame-dots i:nth-child(3) { transition-delay: 120ms; }
  .hero-frame-main .frame-bar:hover .frame-dots i { background: var(--blue); }
  .hero-float {
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms ease;
  }
  .hero-float:hover { transform: translateY(-2px); }
  .tape-zoom { position: relative; overflow: hidden; }
  .tape-zoom.fl-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--blue) 9%, transparent) 50%, transparent 70%);
  }
}
@keyframes famNow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes arcIn {
  from { stroke-dasharray: 0 999; }
}

/* --- Requirement map (map heroes): the standard drawn as its real
   shape - one square per requirement, one block per family or clause,
   sized by verified counts. Unfakeable by design. Every block is a
   link into the program/guide, so the hero doubles as the deepest
   internal navigation on the site. One entrance pass, no loop. ------- */
/* The map needs figure-ground against the pixel field: it sits on a
   solid plate (quiet paper, no frame chrome - this is the standard
   speaking, not the product), and its cells pack tight so each family
   reads as one slab, not confetti. */
.map-plate {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-sheet);
  padding: 1.7rem 1.9rem 1.5rem;
}
.req-map {
  --cell: var(--navy);
  --cell-hi: var(--blue);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: start;
  gap: 1.4rem 1.6rem;
}
.rm-fam {
  display: block;
  text-decoration: none;
  min-width: 6rem;
}
.rm-cells {
  display: grid;
  grid-template-columns: repeat(6, 15px);
  justify-content: start;
  gap: 2px;
  width: max-content;
}
.rm-cells i {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  background: var(--cell);
}
.rm-label {
  display: block;
  margin-top: 0.55rem;
  max-width: 8.5rem;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.5;
}
.rm-label b {
  display: block;
  font-weight: 700;
  color: var(--head, var(--navy));
}
.rm-foot {
  margin: 1.6rem 0 0;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
a.rm-fam:hover .rm-cells i { background: var(--cell-hi); }
a.rm-fam:hover .rm-label b { color: var(--cell-hi); }
a.rm-fam:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  /* One pass, in order, then still: tiles rise as the standard draws
     itself. Nothing loops behind the headline. */
  .rm-fam {
    animation: rmIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(80ms + var(--i, 0) * 55ms);
  }
  .rm-cells i { transition: background-color 200ms ease; }
}
@keyframes rmIn {
  from { opacity: 0; transform: translateY(7px); }
}
@media (max-width: 36em) {
  .rm-label { display: none; }
  .rm-cells { grid-template-columns: repeat(6, 10px); }
  .rm-cells i { width: 10px; height: 10px; border-radius: 2px; }
  .req-map { gap: 0.9rem 1rem; }
  .rm-fam { min-width: 0; }
}

/* --- Briefings (resource library): question pages in the site's own
   language. A briefing opens with a BLUF sheet (bottom line up front),
   reads in sectioned tiles and measured prose, and closes with official
   sources and the related-briefings rail. ---------------------------- */
.brief-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 1.05rem;
}
.brief-date {
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glyph-muted);
}
/* The opening summary is editorial, not a product window: a quiet
   spine-accented block. Frame chrome (bars, dots, sheets-as-windows)
   stays reserved for enclave/product visuals. */
.brief-key {
  max-width: 72ch;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--blue);
}
.brief-key .kicker { margin-bottom: 0.5rem; }
.brief-key p:last-child {
  margin: 0;
  max-width: 62ch;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.65;
}
.brief-copy { max-width: 70ch; }
.brief-copy p { color: var(--ink-2); margin: 0 0 0.95rem; }
.brief-copy p:last-child { margin-bottom: 0; }
.brief-copy strong { color: var(--ink); }
.brief-src {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.brief-src a { color: inherit; }
/* The briefings hub reads as a catalog, not a marketing section: a
   featured latest entry, then a register of index rows (date, topic,
   entry, arrow) that scales by addition, then the bench of entries
   still in research. */
.lib-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; }
.lib-feat {
  border-left: 3px solid var(--blue);
  padding: 0.45rem 0 0.45rem 1.6rem;
  max-width: 74ch;
}
.lib-feat h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.5rem;
}
.lib-feat h2 a { color: var(--navy); text-decoration: none; }
.lib-feat h2 a:hover { color: var(--blue); }
.lib-feat > p { color: var(--ink-2); max-width: 64ch; margin: 0 0 0.85rem; }
.lib-index { border-top: 1px solid var(--rule); }
.lib-row {
  display: grid;
  grid-template-columns: 6.2rem 9rem 1fr auto;
  grid-template-areas: "date topic main arrow";
  gap: 0.35rem 1.2rem;
  align-items: baseline;
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.lib-date, .lib-topic {
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lib-date { grid-area: date; color: var(--glyph-muted); }
.lib-topic { grid-area: topic; color: var(--blue); }
.lib-main { grid-area: main; min-width: 0; }
.lib-title { display: block; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.lib-sum { display: block; color: var(--ink-2); font-size: 0.86rem; line-height: 1.5; margin-top: 0.2rem; max-width: 60ch; }
.lib-row > .arrow { grid-area: arrow; align-self: center; color: var(--blue); }
a.lib-row:hover .lib-title { color: var(--blue); }
a.lib-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.lib-soon .lib-topic { color: var(--glyph-muted); }
.lib-soon .lib-title { color: var(--ink-2); font-weight: 600; }
.lib-soon .chip { grid-area: arrow; align-self: center; }

/* Cost anatomy: a proportion bar showing where the money actually goes,
   plus a legend. Segments are labelled, honest about being ranges, and
   built from tokens so each theme recolours it. */
.cost-bar {
  display: flex;
  height: 2.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cost-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 0.68rem var(--mono);
  letter-spacing: 0.02em;
  color: #fff;
  min-width: 0;
  padding: 0 0.4rem;
  white-space: nowrap;
  overflow: hidden;
}
.cost-seg.cs-1 { background: var(--blue); }
.cost-seg.cs-2 { background: color-mix(in srgb, var(--blue) 72%, var(--navy, #14385E)); }
.cost-seg.cs-3 { background: color-mix(in srgb, var(--blue) 46%, var(--paper-2)); color: var(--ink); }
.cost-seg.cs-4 { background: var(--paper-2); color: var(--ink-2); }
.cost-legend { display: grid; gap: 0.9rem; margin-top: 1.3rem; }
.cost-item { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem 0.85rem; align-items: baseline; }
.cost-key { width: 0.85rem; height: 0.85rem; border-radius: 3px; align-self: center; }
.cost-key.cs-1 { background: var(--blue); }
.cost-key.cs-2 { background: color-mix(in srgb, var(--blue) 72%, var(--navy, #14385E)); }
.cost-key.cs-3 { background: color-mix(in srgb, var(--blue) 46%, var(--paper-2)); }
.cost-key.cs-4 { background: var(--paper-2); border: 1px solid var(--rule); }
.cost-item h3 { margin: 0; font-size: 0.98rem; }
.cost-item .cost-range { font: 600 0.72rem var(--mono); color: var(--glyph-muted); letter-spacing: 0.04em; }
.cost-item p { grid-column: 2; margin: 0.2rem 0 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; max-width: 58ch; }

/* SPRS score scale: a labelled track from -203 to 110 with a marked
   conditional threshold and the perfect-score endpoint. */
.score-scale { margin-top: 0.4rem; }
.score-track {
  position: relative;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--blue) 12%, var(--paper-2)) 0%,
    color-mix(in srgb, var(--blue) 55%, var(--paper-2)) 78%,
    var(--blue) 100%);
  border: 1px solid var(--rule);
}
.score-mark {
  position: absolute;
  top: -0.35rem;
  bottom: -0.35rem;
  width: 2px;
  background: var(--head, var(--navy, #14385E));
}
.score-mark::after {
  content: attr(data-label);
  position: absolute;
  top: -1.45rem;
  left: 50%;
  transform: translateX(-50%);
  font: 700 0.6rem var(--mono);
  letter-spacing: 0.06em;
  color: var(--head, var(--navy, #14385E));
  white-space: nowrap;
}
.score-ends { display: flex; justify-content: space-between; margin-top: 0.6rem; font: 600 0.66rem var(--mono); color: var(--glyph-muted); letter-spacing: 0.06em; }
@media (max-width: 760px) {
  .lib-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "date topic arrow"
      "main main main";
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lib-row > .arrow { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  a.lib-row:hover > .arrow { transform: translateX(4px); }
}

/* --- Frame anatomy v2: the hero frames read as real product windows.
   Window dots, a nav rail of abstract glyphs, per-row status dots, an
   event log strip, and the PDCA cycle strip. All decor. -------------- */

.frame-dots { display: inline-flex; gap: 5px; flex: none; }
.frame-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--frame-dot);
}
.frame-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-stat {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-neutral);
  color: var(--dot-neutral);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.h-stat.is-ok { background: var(--approve); color: var(--approve); }
.h-stat.is-info { background: var(--blue); color: var(--blue); }
.h-stat.is-muted { background: var(--dot-muted); color: var(--dot-muted); }

.frame-log {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-top: 1px solid var(--rule);
  background: var(--log-well);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* The log line is size-locked: one line, ellipsized, so no event text
   can ever change the frame's height (JS-off included). */
.frame-log .log-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Notification badge: counts the verifications landing in the log,
   popping on each new event. */
.log-badge {
  flex: none;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--approve);
  color: #FFFFFF;
  font: 700 0.56rem var(--mono);
  letter-spacing: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .log-badge.fl-pop { animation: logPop 460ms cubic-bezier(0.34, 1.5, 0.64, 1); }
}
@keyframes logPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.pdca { display: inline-flex; gap: 4px; }
.pdca i {
  width: 17px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--muted-soft);
  border: 1px solid var(--muted-line);
  border-radius: 4px;
}
.pdca i.is-on {
  color: #FFFFFF;
  background: var(--blue);
  border-color: var(--blue);
}
.h-prog-tight .h-prog-top { margin-bottom: 0; }

/* --- Document panels (registers, records) --------------------------------- */

.doc {
  position: relative;
  padding: 1.6rem 1.7rem 1.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.doc-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--well);
  border-bottom: 1px solid var(--rule);
  margin: -1.6rem -1.7rem 1.15rem;
  padding: 0.68rem 1.1rem;
}
.doc-tag .doc-status { color: var(--approve); font-weight: 600; letter-spacing: 0.1em; }

.doc-title {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.doc-subtitle { color: var(--ink-2); margin-bottom: 1rem; }

.doc-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.28rem 1.2rem;
  font-size: 0.8rem;
  margin-bottom: 1.1rem;
}
.doc-meta dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.16em;
}
.doc-meta dd { font-weight: 500; }

.doc table { width: 100%; font-size: 0.78rem; margin-bottom: 1.1rem; }
.doc caption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  padding-bottom: 0.4rem;
}
.doc th {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.25rem 0.6rem 0.25rem 0;
}
.doc td {
  border-bottom: 1px solid var(--rule);
  padding: 0.34rem 0.6rem 0.34rem 0;
  vertical-align: top;
}

.doc-sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 0.4rem;
}
.doc-sign > div { border-top: 1px solid var(--rule-strong); padding-top: 0.35rem; }
.doc-sign .sig-role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
}
.doc-sign .sig-val { font-weight: 600; }

.doc .stamp { position: absolute; right: 1.1rem; bottom: 1.05rem; }
.doc-stamped { padding-bottom: 3.1rem; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  overflow: clip;
}
.hero > .wrap { position: relative; z-index: 1; }

/* WebGL rain canvas: fills the hero behind the content. When the
   effect is absent (no JS, reduced motion, no WebGL) this element is
   never created and the static CSS grid is the whole story. */
/* Deep-water band field: a dark section may host its own dim ambient
   field (data-fx="band"). The engine reads --fx tokens from the host
   element, so the band re-palettes to on-navy luminance here - no new
   hexes, and the hero fields are untouched. */
[data-fx="band"] {
  position: relative;
  overflow: hidden;
  --fx-deep: var(--on-navy-4);
  --fx-mid: var(--on-navy-line);
  --fx-light: var(--on-navy-line-2);
  --fx-faint: var(--navy-well);
}
[data-fx="band"] > .wrap { position: relative; z-index: 1; }

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 56em) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero .eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.35rem;
  max-width: none;
}
.eyebrow-note {
  font: 600 0.88rem var(--sans);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.hero h1 { margin-bottom: 0.9rem; }
.hero .hero-def {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 1.35rem;
  max-width: 36em;
}
.hero .hero-plain { margin-bottom: 2rem; max-width: 60ch; }
/* The audience line sits above the value line, quiet; <strong> inside
   a hero-def is the page's core claim and carries the ink. */
.hero .hero-for {
  margin: 0 0 0.55rem;
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 60ch;
}
.hero .hero-def strong { color: var(--navy); font-weight: 700; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-ctas .cta-note {
  flex-basis: 100%;
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-top: 0.2rem;
}

/* Hero stage: the program at work. */
.hero-stage {
  position: relative;
  /* Structurally locked: the stage takes its width from the grid
     column, never from its content. Frames fill it exactly. */
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding: 1.8rem 0.9rem 1.8rem 1.1rem;
}
.hero-frame-main { position: relative; z-index: 1; width: 100%; }

.hero-float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-sheet);
  padding: 0.6em 0.9em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.hero-float-req { top: -0.4rem; right: -0.9rem; }
.hero-float-ev { bottom: -0.5rem; left: -1.1rem; }

/* --- Hero stair (Platforms): the brand mark blown up into the family.
   Three frame-chrome cards step across the stage the way the cells
   step in the tile, mirrored the way the header hover mirrors them:
   Fed leads top-left, ISO holds the center, InfoSec lands bottom-right
   with the echo square beyond it, the next platform's reserved cell.
   The ISO card advances as a text morph on the shared engine beat; no
   register slides inside a card this small. -------------------------- */
.hero-stair {
  position: relative;
  display: grid;
  gap: 1.05rem;
}
.hero-stair .hero-door { width: min(88%, 24rem); }
.hero-stair .door-fed { justify-self: start; }
.hero-stair .door-iso { justify-self: center; }
.hero-stair .door-infosec { justify-self: end; }
.stair-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.95rem 0.78rem;
}
.stair-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}
.stair-step {
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--well);
}
.stair-step i {
  font: 700 0.92rem var(--mono);
  font-style: normal;
  color: var(--blue);
  letter-spacing: 0.04em;
}
.stair-main { display: grid; gap: 0.16rem; min-width: 0; }
.stair-main b {
  font-size: 0.85rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stair-main small {
  font: 500 0.6rem var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stair-main .stair-num { font-weight: 700; color: var(--blue); }
.stair-echo {
  position: absolute;
  right: -0.35rem;
  bottom: -1.5rem;
  width: 13px;
  height: 13px;
  border: 1px dashed var(--rule-strong);
  border-radius: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stair .hero-door { animation: rowIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-stair .door-iso { animation-delay: 150ms; }
  .hero-stair .door-infosec { animation-delay: 300ms; }
}

/* --- The picker (Platforms sec 01): the whole section is a page-wide
   triptych, one full-height third per platform, each in its own color
   world. The section head floats as a centered overlay across the top
   of all three panels; the picker's own dark backdrop keeps that head
   legible when the panels stack on small screens. Layers per panel: a
   deep brand gradient carrying a faint engineering grid, a rising
   halftone dot field, a soft glow pool behind the copy, and a large
   ghosted signature scene (dial / register / ascent). Each panel is
   one link led by that site's own brand tile; hovering a panel mirrors
   the stair exactly like hovering that site's header, and every hover
   move lives on children or paint, so the target never shifts under
   the pointer. ------------------------------------------------------ */
.section-picker { padding-block: 0; }
.picker {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  background: #0C2440;
}
.picker-head {
  grid-column: 1 / -1;
  z-index: 3;
  padding: clamp(3rem, 4.5vw, 4.2rem) 1.5rem clamp(2.2rem, 3.5vw, 3rem);
  text-align: center;
  pointer-events: none;
  /* The head wears a quiet gradient of the three worlds below it,
     lit from above and settling into the panels: depth, not a slab. */
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(100deg, #0E4A44 0%, #0F4746 16%, #16324E 38%, #122E4E 62%, #20306B 84%, #262E74 100%);
  box-shadow: inset 0 -22px 34px -28px rgba(0, 0, 0, 0.55);
}
.picker-head .kicker {
  justify-content: center;
  color: rgba(255, 255, 255, 0.66);
}
.picker-head .kicker::before {
  content: "";
  flex: 0 1 2.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.picker-head .kicker::after {
  flex-basis: 2.6rem;
  border-color: rgba(255, 255, 255, 0.28);
}
.picker-head h2 { color: #FFFFFF; }
.picker-head p {
  margin-top: 1rem;
  margin-inline: auto;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.02rem;
}
.pick {
  --pick-a: var(--navy);
  --pick-b: var(--navy-deep);
  --pick-glow: var(--blue);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  min-height: clamp(32rem, 74vh, 44rem);
  padding: clamp(1.7rem, 2.6vw, 2.6rem);
  padding-top: clamp(6rem, 12vh, 8.5rem);
  padding-bottom: clamp(5rem, 9vh, 7rem);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(165deg, var(--pick-a), var(--pick-b));
  background-size: 76px 76px, 76px 76px, 100% 100%;
  color: #FFFFFF;
  text-decoration: none;
}
.pick + .pick { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.pick-fed { --pick-a: #14385E; --pick-b: #0E2A48; --pick-glow: #1B5FAD; }
.pick-iso { --pick-a: var(--iso-navy); --pick-b: var(--iso-navy-deep); --pick-glow: var(--iso-accent); }
.pick-infosec { --pick-a: var(--infosec-navy); --pick-b: var(--infosec-navy-deep); --pick-glow: var(--infosec-accent); }
/* Glow: a soft pool of the platform's bright hue behind the copy. */
.pick::before {
  content: "";
  position: absolute;
  left: -18%;
  bottom: -22%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pick-glow) 52%, transparent), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}
/* Halftone: a dot field rising from the panel floor. */
.pick::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.17) 1.3px, transparent 1.6px);
  background-size: 12px 12px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 62%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 62%);
  opacity: 0.65;
  pointer-events: none;
}
/* The continent, mark II: one high-resolution silhouette mask filled
   with 15px cellular texture, so the landmass reads clearly and the
   motion rides on it as light. Each panel shows its own third of one
   continuous chart in its own color; the effects are painted overlays
   swept through the mask: Fed runs a radar sweep around its west, ISO
   circulates two slow arms, the InfoSec east pulses expanding rings.
   ISO and InfoSec keep small instrument icons above the chart. */
.pick-map {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: color-mix(in srgb, currentColor 24%, transparent);
  background-image:
    linear-gradient(to bottom, transparent 12%, var(--map-fade) 26%, var(--map-fade) 56%, transparent 72%),
    linear-gradient(to top, var(--map-fade) 0 8%, transparent 30%),
    linear-gradient(to bottom, var(--map-fade) 0 12%, transparent 34%),
    repeating-linear-gradient(0deg, var(--map-gap) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, var(--map-gap) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 10%, transparent) 0 23px, transparent 23px 61px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201440%20840%22%20preserveAspectRatio=%22xMidYMid%20slice%22%20fill=%22white%22%3E%3Crect%20x=%22360%22%20y=%220%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%22600%22%20y=%220%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%221230%22%20y=%220%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22345%22%20y=%2215%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22585%22%20y=%2215%22%20width=%22270%22%20height=%2215%22/%3E%3Crect%20x=%221215%22%20y=%2215%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22300%22%20y=%2230%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22570%22%20y=%2230%22%20width=%22300%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2230%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%2245%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%22555%22%20y=%2245%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2245%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2260%22%20width=%22690%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2260%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2275%22%20width=%22705%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2275%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%2290%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2290%22%20width=%22750%22%20height=%2215%22/%3E%3Crect%20x=%221215%22%20y=%2290%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22105%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22105%22%20width=%22765%22%20height=%2215%22/%3E%3Crect%20x=%221230%22%20y=%22105%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22120%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22120%22%20width=%22495%22%20height=%2215%22/%3E%3Crect%20x=%22825%22%20y=%22120%22%20width=%22225%22%20height=%2215%22/%3E%3Crect%20x=%221245%22%20y=%22120%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22135%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22135%22%20width=%22480%22%20height=%2215%22/%3E%3Crect%20x=%22825%22%20y=%22135%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%221260%22%20y=%22135%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%2215%22%20y=%22150%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22150%22%20width=%22480%22%20height=%2215%22/%3E%3Crect%20x=%22810%22%20y=%22150%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%2230%22%20y=%22165%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22165%22%20width=%22495%22%20height=%2215%22/%3E%3Crect%20x=%22795%22%20y=%22165%22%20width=%22360%22%20height=%2215%22/%3E%3Crect%20x=%2245%22%20y=%22180%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22180%22%20width=%22930%22%20height=%2215%22/%3E%3Crect%20x=%2245%22%20y=%22195%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22195%22%20width=%22930%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22210%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22210%22%20width=%22870%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22225%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%22120%22%20y=%22225%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22225%22%20width=%22855%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22240%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22255%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22270%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22285%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22300%22%20width=%22900%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22315%22%20width=%22900%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22330%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22345%22%20width=%22870%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22360%22%20width=%22855%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22375%22%20width=%22840%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22390%22%20width=%22810%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22405%22%20width=%22780%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22420%22%20width=%22765%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22435%22%20width=%22750%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22450%22%20width=%22420%22%20height=%2215%22/%3E%3Crect%20x=%22855%22%20y=%22450%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22300%22%20y=%22465%22%20width=%22390%22%20height=%2215%22/%3E%3Crect%20x=%22870%22%20y=%22465%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%22315%22%20y=%22480%22%20width=%22360%22%20height=%2215%22/%3E%3Crect%20x=%22885%22%20y=%22480%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%22330%22%20y=%22495%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%22900%22%20y=%22495%22%20width=%2275%22%20height=%2215%22/%3E%3Crect%20x=%22345%22%20y=%22510%22%20width=%22300%22%20height=%2215%22/%3E%3Crect%20x=%22915%22%20y=%22510%22%20width=%2275%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22525%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22420%22%20y=%22525%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22930%22%20y=%22525%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22540%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22435%22%20y=%22540%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22945%22%20y=%22540%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22555%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22555%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22960%22%20y=%22555%22%20width=%2230%22%20height=%2215%22/%3E%3Crect%20x=%22375%22%20y=%22570%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22570%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22390%22%20y=%22585%22%20width=%2230%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22585%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22465%22%20y=%22600%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22480%22%20y=%22615%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22495%22%20y=%22630%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22645%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22660%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22675%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22525%22%20y=%22690%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22540%22%20y=%22705%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22555%22%20y=%22720%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22570%22%20y=%22735%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22585%22%20y=%22750%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22600%22%20y=%22765%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22645%22%20y=%22780%22%20width=%22105%22%20height=%2215%22/%3E%3Crect%20x=%22660%22%20y=%22795%22%20width=%2290%22%20height=%2215%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201440%20840%22%20preserveAspectRatio=%22xMidYMid%20slice%22%20fill=%22white%22%3E%3Crect%20x=%22360%22%20y=%220%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%22600%22%20y=%220%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%221230%22%20y=%220%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22345%22%20y=%2215%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22585%22%20y=%2215%22%20width=%22270%22%20height=%2215%22/%3E%3Crect%20x=%221215%22%20y=%2215%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22300%22%20y=%2230%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22570%22%20y=%2230%22%20width=%22300%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2230%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%2245%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%22555%22%20y=%2245%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2245%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2260%22%20width=%22690%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2260%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2275%22%20width=%22705%22%20height=%2215%22/%3E%3Crect%20x=%221200%22%20y=%2275%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%2290%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%2290%22%20width=%22750%22%20height=%2215%22/%3E%3Crect%20x=%221215%22%20y=%2290%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22105%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22105%22%20width=%22765%22%20height=%2215%22/%3E%3Crect%20x=%221230%22%20y=%22105%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22120%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22120%22%20width=%22495%22%20height=%2215%22/%3E%3Crect%20x=%22825%22%20y=%22120%22%20width=%22225%22%20height=%2215%22/%3E%3Crect%20x=%221245%22%20y=%22120%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22135%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22135%22%20width=%22480%22%20height=%2215%22/%3E%3Crect%20x=%22825%22%20y=%22135%22%20width=%22240%22%20height=%2215%22/%3E%3Crect%20x=%221260%22%20y=%22135%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%2215%22%20y=%22150%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22150%22%20width=%22480%22%20height=%2215%22/%3E%3Crect%20x=%22810%22%20y=%22150%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%2230%22%20y=%22165%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22165%22%20width=%22495%22%20height=%2215%22/%3E%3Crect%20x=%22795%22%20y=%22165%22%20width=%22360%22%20height=%2215%22/%3E%3Crect%20x=%2245%22%20y=%22180%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22180%22%20width=%22930%22%20height=%2215%22/%3E%3Crect%20x=%2245%22%20y=%22195%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22195%22%20width=%22930%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22210%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22210%22%20width=%22870%22%20height=%2215%22/%3E%3Crect%20x=%220%22%20y=%22225%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%22120%22%20y=%22225%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22225%22%20width=%22855%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22240%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22255%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22270%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22285%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22300%22%20width=%22900%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22315%22%20width=%22900%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22330%22%20width=%22885%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22345%22%20width=%22870%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22360%22%20width=%22855%22%20height=%2215%22/%3E%3Crect%20x=%22240%22%20y=%22375%22%20width=%22840%22%20height=%2215%22/%3E%3Crect%20x=%22255%22%20y=%22390%22%20width=%22810%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22405%22%20width=%22780%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22420%22%20width=%22765%22%20height=%2215%22/%3E%3Crect%20x=%22270%22%20y=%22435%22%20width=%22750%22%20height=%2215%22/%3E%3Crect%20x=%22285%22%20y=%22450%22%20width=%22420%22%20height=%2215%22/%3E%3Crect%20x=%22855%22%20y=%22450%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22300%22%20y=%22465%22%20width=%22390%22%20height=%2215%22/%3E%3Crect%20x=%22870%22%20y=%22465%22%20width=%22120%22%20height=%2215%22/%3E%3Crect%20x=%22315%22%20y=%22480%22%20width=%22360%22%20height=%2215%22/%3E%3Crect%20x=%22885%22%20y=%22480%22%20width=%2290%22%20height=%2215%22/%3E%3Crect%20x=%22330%22%20y=%22495%22%20width=%22330%22%20height=%2215%22/%3E%3Crect%20x=%22900%22%20y=%22495%22%20width=%2275%22%20height=%2215%22/%3E%3Crect%20x=%22345%22%20y=%22510%22%20width=%22300%22%20height=%2215%22/%3E%3Crect%20x=%22915%22%20y=%22510%22%20width=%2275%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22525%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22420%22%20y=%22525%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22930%22%20y=%22525%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22540%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22435%22%20y=%22540%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22945%22%20y=%22540%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22360%22%20y=%22555%22%20width=%2260%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22555%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22960%22%20y=%22555%22%20width=%2230%22%20height=%2215%22/%3E%3Crect%20x=%22375%22%20y=%22570%22%20width=%2245%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22570%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22390%22%20y=%22585%22%20width=%2230%22%20height=%2215%22/%3E%3Crect%20x=%22450%22%20y=%22585%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22465%22%20y=%22600%22%20width=%22195%22%20height=%2215%22/%3E%3Crect%20x=%22480%22%20y=%22615%22%20width=%22180%22%20height=%2215%22/%3E%3Crect%20x=%22495%22%20y=%22630%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22645%22%20width=%22165%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22660%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22510%22%20y=%22675%22%20width=%22210%22%20height=%2215%22/%3E%3Crect%20x=%22525%22%20y=%22690%22%20width=%22150%22%20height=%2215%22/%3E%3Crect%20x=%22540%22%20y=%22705%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22555%22%20y=%22720%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22570%22%20y=%22735%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22585%22%20y=%22750%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22600%22%20y=%22765%22%20width=%22135%22%20height=%2215%22/%3E%3Crect%20x=%22645%22%20y=%22780%22%20width=%22105%22%20height=%2215%22/%3E%3Crect%20x=%22660%22%20y=%22795%22%20width=%2290%22%20height=%2215%22/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.pick-fed .pick-map { left: -100%; }
.pick-infosec .pick-map { left: -200%; }
.pick-fed .pick-map { color: #A9C9F0; --map-gap: rgba(10, 28, 52, 0.85); --map-fade: rgba(14, 42, 72, 0.7); }
.pick-iso .pick-map { color: #96D5C6; --map-gap: rgba(7, 38, 33, 0.85); --map-fade: rgba(9, 51, 46, 0.7); }
.pick-infosec .pick-map { color: #B9C1F7; --map-gap: rgba(28, 33, 78, 0.85); --map-fade: rgba(35, 42, 102, 0.7); }
/* Instruments over territory: Fed keeps a contained radar scope on
   its west (range rings, a turning arm, a center point), ISO runs a
   surveyor's light that glides region to region through the middle,
   and the InfoSec east carries a coastal beacon: a fixed source dot
   ringing outward. Painted light only; the mask clips all of it. */
.pick-fed .pick-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 1240px;
  height: 1240px;
  margin: -620px 0 0 -620px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 3px, transparent 5px),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.26) 0deg, rgba(255, 255, 255, 0.06) 22deg, transparent 55deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 56%, transparent 63%);
  mask-image: radial-gradient(circle, #000 0 56%, transparent 63%);
}
.pick-iso .pick-map::after {
  content: "";
  position: absolute;
  left: 23%;
  top: 42%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 20%, transparent 60%);
}
.pick-infosec .pick-map::before {
  content: "";
  position: absolute;
  left: 79%;
  top: 45%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.3);
}
.pick-infosec .pick-map::after {
  content: "";
  position: absolute;
  left: 79%;
  top: 45%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: radial-gradient(circle, transparent 24%, rgba(255, 255, 255, 0.3) 27%, transparent 31%);
  transform: scale(0.08);
  opacity: 0;
}
.pick-kick {
  position: relative;
  z-index: 1;
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #FFFFFF 62%, var(--pick-glow));
}
/* The panel's plaque: the site's own brand tile pinned to the top-left
   corner of its box, sized up from the header but the same drawing. */
.pick-logo {
  position: absolute;
  z-index: 1;
  top: clamp(1.4rem, 2vw, 2rem);
  left: clamp(1.7rem, 2.6vw, 2.6rem);
}
.pick-logo .brand-mark { display: block; width: 46px; height: 46px; }
.pick-fed .brand-mark { color: var(--blue); }
.pick-iso .brand-mark { color: var(--iso-accent); }
.pick-infosec .brand-mark { color: var(--infosec-accent); }
.pick h3 {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  letter-spacing: -0.015em;
  margin: 0.2rem 0 0.15rem;
}
.pick h3 b { font-weight: 800; }
.pick p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 34ch;
  min-height: 9.7em;
  margin: 0;
}
.pick-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.pick-tags span {
  font: 600 0.58rem var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.88);
  background: color-mix(in srgb, var(--pick-b) 78%, transparent);
  white-space: nowrap;
}
.pick-fed { --pick-tint: #8FBCEC; }
.pick-iso { --pick-tint: #83CCBD; }
.pick-infosec { --pick-tint: #AAB3F2; }
.pick-status {
  position: absolute;
  z-index: 1;
  right: clamp(1.7rem, 2.6vw, 2.6rem);
  bottom: clamp(1.5rem, 2.2vw, 2.2rem);
  color: var(--pick-tint, rgba(255, 255, 255, 0.85));
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.pick-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pick-go {
  margin-top: auto;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #FFFFFF;
}
.pick-note {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0.7rem;
  max-width: 44ch;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.52);
}
.pick:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .pick::before { transition: opacity 420ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
  .pick::after { transition: opacity 500ms ease, background-position 600ms cubic-bezier(0.22, 1, 0.36, 1); }
  .pick-go .arrow { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .pick:hover::before { opacity: 0.95; transform: scale(1.12); }
  .pick:hover::after { opacity: 0.42; background-position: 0 10px; }
  .pick:hover .pick-go .arrow { transform: translateX(4px); }
  /* Hovering anywhere on the panel plays the same stair mirror the
     site's own header plays: top and bottom cells swap, echo crosses. */
  .pick:hover .bm-c1 { transform: translateY(-27px); }
  .pick:hover .bm-c3 { transform: translateY(27px); }
  .pick:hover .bm-echo { transform: translateX(-48.5px); }
  /* Ambient scene life, one instrument per platform: Fed's radar sweep
     lights each contact as it passes, ISO's active plate rides the
     register top to bottom and carriage-returns, InfoSec's cloud cells
     shimmer while the dashed perimeter patrols. All of it is transform
     and opacity, and all of it sits behind the copy. */
  .pick-fed .pick-map::after { animation: map-scope 7s linear infinite; }
  .pick-iso .pick-map::after { animation: map-survey 20s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
  .pick-infosec .pick-map::after { animation: map-pulse 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
  /* Only the conic arm should turn, so the scope's rings and center
     hold still: the arm layer rotates via background spin on a
     symmetric disc. Rotating the whole box is fine because the ring
     layers are radially symmetric around the same center. */
  @keyframes map-scope { to { transform: rotate(360deg); } }
  @keyframes map-survey {
    0%, 8% { transform: translate(-150px, -120px); }
    20%, 28% { transform: translate(140px, -60px); }
    40%, 48% { transform: translate(30px, 165px); }
    60%, 68% { transform: translate(-190px, 90px); }
    80%, 88% { transform: translate(60px, -180px); }
    100% { transform: translate(-150px, -120px); }
  }
  @keyframes map-pulse {
    0% { transform: scale(0.08); opacity: 0; }
    12% { opacity: 1; }
    70%, 100% { transform: scale(1); opacity: 0; }
  }
}
@media (max-width: 56em) {
  .picker { grid-template-columns: 1fr; }
  .picker-head {
    position: static;
    padding: clamp(2.4rem, 8vw, 3.4rem) 1.4rem clamp(1.8rem, 6vw, 2.6rem);
  }
  .pick { min-height: 23rem; padding-top: 2.2rem; }
  .pick + .pick { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .pick-status { right: 1.4rem; bottom: 1.3rem; }
}

/* Hover moats: elements that translate on hover get an invisible
   ::before ring extending their hit area, so the 2px lift can never
   carry the edge past the pointer (the classic hover-jitter). Behind
   the element's own paint; hit-testing only. */
.hero-stage > .hero-frame-main { position: relative; }
.hero-stage > .hero-frame-main::before,
.hero-float::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
}

/* Hero doors (Platforms): the two product frames are real links. The
   frame stays decorative (aria-hidden); the anchor carries the label. */
.hero-door {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
}
.hero-door:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-door .sheet { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease; }
  .hero-door:hover .sheet {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--blue) 25%, transparent),
      var(--shadow-sheet);
  }
}

.snap-sample { max-width: 27rem; width: 100%; margin-inline: auto; }

@media (max-width: 56em) {
  .hero-stage { display: grid; gap: 1rem; padding: 0; }
  .hero-float { position: static; }
  .hero-satellites { display: flex; flex-wrap: wrap; gap: 0.8rem; }
}
@media (min-width: 56em) {
  .hero-satellites { display: contents; }
}
@media (max-width: 36em) {
  .hero-satellites { grid-template-columns: 1fr; }
}

/* Subpage intros carry the hero's DNA: the blueprint grid plus a quiet
   corner cluster of quantized cells (static echo of the fluid field). */
.page-hero {
  position: relative;
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  border-bottom: 1px solid var(--rule);
  overflow: clip;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 348px;
  height: 240px;
  pointer-events: none;
  background-repeat: no-repeat;
}
/* Two interleaved cell layers breathing out of phase, so the corner
   cluster feels alive without moving past its corner. */
.page-hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 348 240'%3E%3Cg%3E%3Crect x='330' y='0' width='16' height='16' fill='%235D8BC4'/%3E%3Crect x='330' y='17' width='16' height='16' fill='%231D56A2'/%3E%3Crect x='313' y='17' width='16' height='16' fill='%235D8BC4'/%3E%3Crect x='313' y='34' width='16' height='16' fill='%231D56A2'/%3E%3Crect x='330' y='34' width='16' height='16' fill='%235D8BC4'/%3E%3Crect x='296' y='34' width='16' height='16' fill='%235D8BC4'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 348 240'%3E%3Cg%3E%3Crect x='313' y='0' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='296' y='0' width='16' height='16' fill='%23D8E5F1'/%3E%3Crect x='279' y='0' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='262' y='0' width='16' height='16' fill='%23D8E5F1'/%3E%3Crect x='296' y='17' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='279' y='17' width='16' height='16' fill='%23D8E5F1'/%3E%3Crect x='330' y='51' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='313' y='51' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='296' y='51' width='16' height='16' fill='%23D8E5F1'/%3E%3Crect x='330' y='68' width='16' height='16' fill='%23D8E5F1'/%3E%3Crect x='313' y='68' width='16' height='16' fill='%23A3C2E2'/%3E%3Crect x='330' y='85' width='16' height='16' fill='%23D8E5F1'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before { animation: clusterBreathe 7s ease-in-out infinite; }
  .page-hero::after { animation: clusterBreathe 7s ease-in-out -3.5s infinite; }
}
@keyframes clusterBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (max-width: 56em) {
  .page-hero::before, .page-hero::after { display: none; }
}

/* --- Urgency band --------------------------------------------------------- */

.urgency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: 2.4rem;
}
@media (max-width: 56em) {
  .urgency-grid { grid-template-columns: 1fr; }
}
.urgency-item {
  background: var(--navy-well);
  border: 1px solid var(--on-navy-line-2);
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
}
.urgency-src {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-navy-3);
  border-bottom: 1px solid var(--on-navy-line-2);
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
}
.urgency-item .fig {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.1;
  display: block;
  margin-bottom: 0.45rem;
}
.urgency-item p { font-size: 0.98rem; }
.urgency-foot {
  margin-top: 2.2rem;
  font-size: 0.88rem;
  color: var(--on-navy-1);
  max-width: 65ch;
  border-top: 1px solid var(--on-navy-line);
  padding-top: 1.1rem;
}

.phase-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
@media (max-width: 56em) {
  .phase-strip { grid-template-columns: 1fr; }
}
.phase-strip { position: relative; }
.phase-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--on-navy-1);
  transform: scaleX(1);
  transform-origin: left center;
}
.phase-seg {
  border-top: 2px solid transparent;
  padding-top: 1rem;
}
@media (max-width: 56em) {
  .phase-strip::before { display: none; }
  .phase-seg { border-top-color: var(--on-navy-1); }
}
.phase-seg b {
  display: block;
  color: #FFFFFF;
  font-size: 0.98rem;
  margin: 0.55rem 0 0.2rem;
}
.phase-sub { display: block; font-size: 0.85rem; color: var(--on-navy-2); max-width: 32ch; }

/* --- Feature / value grids ------------------------------------------------ */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.grid-2-center { align-items: center; }
.grid-2-top { align-items: start; }
@media (max-width: 56em) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.tile {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.7rem 1.6rem;
}
.tile h3 { margin-bottom: 0.6rem; }
.tile .tile-kick {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 0.9rem;
}
.tile p { color: var(--ink-2); font-size: 0.98rem; }
.tile p + p { margin-top: 0.7rem; }

.tile-navy { background: var(--navy-well); border-color: var(--on-navy-line-2); }
.tile-navy h3 { color: #FFFFFF; }
.tile-navy .tile-kick { color: var(--on-navy-3); }
.tile-navy .checklist { color: var(--on-navy-2); font-size: 0.97rem; }
.tile-navy .checklist li::before {
  border-color: #7FB89A;
  background:
    center / 70% no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2 6.5 5 9l5-6" fill="none" stroke="%237FB89A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* --- Family shape: full chart and compact strip --------------------------- */

.fam-chart {
  display: grid;
  gap: 0.44rem;
  margin-top: 2rem;
  max-width: 44rem;
}
.fam-row {
  display: grid;
  grid-template-columns: 11.5rem 1fr 2rem;
  align-items: center;
  gap: 0.9rem;
}
@media (max-width: 40em) {
  .fam-row { grid-template-columns: 8.6rem 1fr 2rem; }
}
.fam-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.fam-bar-track { min-width: 0; display: block; }
.fam-bar {
  display: block;
  height: 13px;
  background: var(--navy);
  border-radius: 2px;
  min-width: 6px;
}
.fam-row:nth-child(even) .fam-bar { background: var(--blue); }
.fam-count {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
}
.fam-note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-2); }

/* --- Substance stat band (home) -------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 56em) {
  .stat-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36em) {
  .stat-band { grid-template-columns: 1fr; }
}
.stat {
  border-left: 2px solid var(--rule-strong);
  padding-left: 1.15rem;
  max-width: none;
}
.stat-kick {
  display: block;
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--head, var(--navy));
}
.stat p { font-size: 0.92rem; color: var(--ink-2); margin-top: 0.65rem; }

.cov-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.cov-row .chip { font-size: 0.7rem; padding: 0.5em 0.85em; }
.cov-foundation { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.cov-note { margin-top: 1.1rem; font-size: 0.95rem; color: var(--ink-2); max-width: 62ch; }

/* Coverage popover: a framework pill opens a small sheet showing what
   the framework holds. Works without motion (instant); motion adds a
   rise. Pills gain a focus/hover ring as the affordance. */
.chip[data-cov] { cursor: default; }
.chip[data-cov]:hover,
.chip[data-cov]:focus-visible {
  border-color: var(--rule-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

/* Coverage register (jumpstart-fed): framework chips with live
   popovers beside their program roles, in window chrome. */
.cov-reg-body { padding: 0.35rem 1.05rem 0.55rem; }
.cov-reg-row {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--rule);
}
.cov-reg-row:last-child { border-bottom: none; }
.cov-reg-row .chip { justify-self: start; }
.cov-reg-row p { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 36em) {
  .cov-reg-row { grid-template-columns: 1fr; gap: 0.3rem; }
}
.cov-pop {
  position: fixed;
  z-index: 60;
  width: max-content;
  /* Wide enough for the two-column family grid at its natural width;
     text-only panels stay narrow via their own ch cap. */
  max-width: min(30rem, calc(100vw - 16px));
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-sheet);
  padding: 0.9rem 1.05rem 1rem;
  opacity: 0;
  overflow: hidden; /* content clips cleanly while the box morphs */
}
.cov-pop.is-on { opacity: 1; transform: none; }
.cov-pop-k {
  display: block;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.25rem;
}
.cov-pop-t {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cov-pop p {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38ch;
}
.cov-pop-list {
  margin: 0.5rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.cov-fams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem 1.1rem;
  margin-top: 0.6rem;
}
.cov-fam {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: 0.72rem;
  color: var(--ink);
  white-space: nowrap;
  min-width: 0;
}
.cov-fam b {
  font: 600 0.62rem var(--mono);
  color: var(--blue);
  min-width: 1.9em;
}
.cov-fam i {
  font-style: normal;
  margin-left: auto;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cov-row .chip.is-open {
  border-color: var(--rule-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .cov-pop {
    transform: translateY(6px) scale(0.985);
    transform-origin: 50% 100%;
    transition: opacity 150ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Pill-to-pill: the same panel glides and resizes to the next anchor. */
  .cov-pop.is-move {
    transition:
      opacity 150ms ease,
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
      left 280ms cubic-bezier(0.3, 0.86, 0.28, 1),
      top 280ms cubic-bezier(0.3, 0.86, 0.28, 1),
      width 280ms cubic-bezier(0.3, 0.86, 0.28, 1),
      height 280ms cubic-bezier(0.3, 0.86, 0.28, 1);
  }
  .cov-row .chip[data-cov] {
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  /* Panel content cascades in: family rows and clause lines arrive in
     reading order. Fresh nodes per open, so the cascade replays. */
  .cov-pop .cov-fam,
  .cov-pop .cov-pop-list li {
    animation: covItemIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .cov-fam:nth-child(1) { animation-delay: 30ms; }
  .cov-fam:nth-child(2) { animation-delay: 48ms; }
  .cov-fam:nth-child(3) { animation-delay: 66ms; }
  .cov-fam:nth-child(4) { animation-delay: 84ms; }
  .cov-fam:nth-child(5) { animation-delay: 102ms; }
  .cov-fam:nth-child(6) { animation-delay: 120ms; }
  .cov-fam:nth-child(7) { animation-delay: 138ms; }
  .cov-fam:nth-child(8) { animation-delay: 156ms; }
  .cov-fam:nth-child(9) { animation-delay: 174ms; }
  .cov-fam:nth-child(10) { animation-delay: 192ms; }
  .cov-fam:nth-child(11) { animation-delay: 210ms; }
  .cov-fam:nth-child(12) { animation-delay: 228ms; }
  .cov-fam:nth-child(13) { animation-delay: 246ms; }
  .cov-fam:nth-child(14) { animation-delay: 264ms; }
  .cov-pop-list li:nth-child(1) { animation-delay: 40ms; }
  .cov-pop-list li:nth-child(2) { animation-delay: 85ms; }
  .cov-pop-list li:nth-child(3) { animation-delay: 130ms; }
  .cov-pop-list li:nth-child(4) { animation-delay: 175ms; }
  /* The pills themselves arrive as a small wave on reveal. Animation
     (not transition) so the stagger delays never touch the hover-ring
     transitions. */
  html.motion .cov-row .chip { opacity: 0; }
  html.motion .cov-row.revealed .chip {
    opacity: 1;
    animation: covPillIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.motion .cov-row.revealed .chip:nth-child(2) { animation-delay: 45ms; }
  html.motion .cov-row.revealed .chip:nth-child(3) { animation-delay: 90ms; }
  html.motion .cov-row.revealed .chip:nth-child(4) { animation-delay: 135ms; }
  html.motion .cov-row.revealed .chip:nth-child(5) { animation-delay: 180ms; }
  html.motion .cov-row.revealed .chip:nth-child(6) { animation-delay: 225ms; }
  html.motion .cov-row.revealed .chip:nth-child(7) { animation-delay: 270ms; }
}
@keyframes covItemIn {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: none; }
}
@keyframes covPillIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes spineFillIn {
  from { transform-origin: 50% 100%; transform: scaleY(0); }
  to { transform-origin: 50% 100%; transform: scaleY(1); }
}
@keyframes spineFillOut {
  from { transform-origin: 50% 0%; transform: scaleY(1); }
  to { transform-origin: 50% 0%; transform: scaleY(0); }
}
/* How-it-works stage ambience: the current program step's dot breathes,
   evidence chips respire out of phase, the readiness chip pulses. */
@media (prefers-reduced-motion: no-preference) {
  .stage-block .rail-node.is-now i { animation: nowRing 2.8s ease-in-out infinite; }
  .stage-block .chip-cloud .chip { animation: cloudBreath 5.2s ease-in-out infinite; }
  .stage-block .chip-cloud .chip:nth-child(3) { animation-delay: 1s; }
  .stage-block .chip-cloud .chip:nth-child(4) { animation-delay: 2s; }
  .stage-block .chip-cloud .chip:nth-child(5) { animation-delay: 3s; }
  .stage-block .chip-cloud .chip:nth-child(6) { animation-delay: 4s; }
  .ready-card .ready-chip { animation: nowRing 3.2s ease-in-out infinite; }
}
@keyframes nowRing {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--blue) 4%, transparent); }
}
@keyframes cloudBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (max-width: 34em) {
  .cov-fams { grid-template-columns: 1fr; }
}
/* --- Operating model: rail, steps, handoff -------------------------------- */

.path-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
/* One continuous rail across the whole row; drawn in a single smooth
   sweep when motion is allowed. */
.path-steps::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--navy);
  transform: scaleX(1);
  transform-origin: left center;
}
.path-steps li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  border-top: 2px solid transparent;
  padding-top: 1rem;
  max-width: none;
}
.path-steps-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 56em) {
  .path-steps, .path-steps-5 { grid-template-columns: 1fr 1fr; }
  .path-steps::before { display: none; }
  .path-steps li { border-top-color: var(--navy); }
}
@media (max-width: 36em) {
  .path-steps { grid-template-columns: 1fr; }
}
.path-steps li .step-chip { margin-top: auto; align-self: flex-start; }
.path-steps li::before {
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--blue);
  display: block;
  margin-bottom: 0.5rem;
}
.path-steps h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.path-steps p { font-size: 0.95rem; color: var(--ink-2); }
/* Step state labels: bare mono text, deliberately not pills. */
.step-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 0.42em 0.9em;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.step-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.step-chip-ok { color: var(--approve); }

.handoff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.8rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 3px solid var(--navy);
}
.handoff h3 { margin: 0.55rem 0 0.4rem; }
.handoff p { color: var(--ink-2); font-size: 0.98rem; }
.handoff .btn { flex: none; }

/* Drawn glyph set: 28-box stroke icons (1.8 weight, round caps) that
   ride the tile-head kicker line in place of the block glyph chips. */
.tile-ic { flex: none; display: block; stroke: var(--blue); }
/* Icon on the title line: registered to the first line of the h3,
   not floating in the kicker row. */
.h3-ic { display: flex; align-items: flex-start; gap: 0.6rem; }
.h3-ic .tile-ic { margin-top: 0.05em; }
/* Operating model as THE PATH: four stations on one continuous rail.
   The rail bleeds past the copy edges (deliberate: the program road
   exists before you and after you) and carries a direction chevron.
   The ol keeps the sequence semantics. */
.model-steps {
  --rail-y: 23px;
  --bleed: clamp(2.5rem, 8vw, 11rem);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem clamp(1.6rem, 3vw, 2.6rem);
}
.model-steps::before {
  content: "";
  position: absolute;
  top: var(--rail-y);
  left: calc(-1 * var(--bleed));
  right: calc(-1 * var(--bleed));
  height: 2px;
  background: linear-gradient(to right, transparent, var(--rule) 9%, var(--rule) 62%, var(--blue) 96%);
}
.model-steps::after {
  content: "";
  position: absolute;
  top: calc(var(--rail-y) - 4px);
  right: calc(-1 * var(--bleed) + 1px);
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  transform: rotate(45deg);
}
.model-steps li { max-width: none; position: relative; z-index: 1; }
.model-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
/* The station: the glyph rides the rail in a solid node so the line
   passes behind it, not through it. */
.model-steps .tile-ic {
  width: 46px;
  height: 46px;
  padding: 11px;
  box-sizing: border-box;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 50%;
}
.model-num {
  font: 600 0.82rem var(--mono);
  letter-spacing: 0.14em;
  color: var(--blue);
}
@media (max-width: 56em) {
  .model-steps { grid-template-columns: 1fr 1fr; }
  .model-steps::before, .model-steps::after { content: none; }
}
@media (max-width: 36em) {
  .model-steps { grid-template-columns: 1fr; }
}

/* --- How-it-works stage ribbons --------------------------------------------
   The four stages run as full-width alternating bands, each carrying
   its own artifact window (scope document, live step rail, evidence
   register, readiness card), plus a program-register excerpt. */

.stage-copy .stage-p { margin-top: 0.9rem; color: var(--ink-2); }
.stage-copy .checklist { margin-top: 1.2rem; }
/* Visual walks to the left column on wide screens; copy stays first
   in source order so narrow screens read copy-then-artifact. */
@media (min-width: 56.0625em) {
  .stage-flip > :last-child { order: -1; }
}
.win-pad { padding: 1.15rem 1.2rem 1.35rem; }
/* Program register: ledger rows that carry an owner kick, a step
   title, the step's plain instruction, and a status chip. */
.ledger-prog .ledger-row {
  grid-template-columns: 3rem minmax(0, 16rem) 1fr auto;
  align-items: center;
}
.ledger-prog .ledger-row p { max-width: none; }
.ledger-prog .chip { flex: none; }
@media (max-width: 56em) {
  .ledger-prog .ledger-row { grid-template-columns: 2.2rem 1fr; }
  .ledger-prog .ledger-row p, .ledger-prog .chip { grid-column: 2; justify-self: start; }
}
/* The register line under each stage: what that state leaves behind. */
.stage-leaves {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.stage-leaves b {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-right: 0.55em;
}
/* --- How-it-works stage visuals ------------------------------------------- */

/* Labels a stage visual so its pairing with the text is unmistakable. */
.visual-cap {
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.7rem;
  max-width: none;
}
/* Hairline separator between sibling stage blocks in one section. */
.stage-block {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.2rem, 4.5vw, 3.5rem);
}

@media (min-width: 56em) {
  .zig > div:first-child { order: 2; }
}

.rail-mini {
  position: relative;
  display: grid;
  gap: 1.15rem;
  max-width: 30rem;
  padding-left: 1.5rem;
}
.rail-mini::before {
  content: "";
  position: absolute;
  left: 5px; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: var(--rule-strong);
}
.rail-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.rail-node i {
  position: absolute;
  left: -1.5rem;
  top: 0.45rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule-strong);
}
.rail-node.is-done i { background: var(--approve); border-color: var(--approve); }
.rail-node.is-now i {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent);
}

/* Living sequence rail (initRailLife): a current runs down the list.
   The .rail-live class is added by JS, so without it the rail is the
   plain static diagram. */
.rail-node i { color: var(--blue); }
.rail-live .rail-node.is-past i { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 24%, var(--paper)); }
.rail-live .rail-node:not(.is-now):not(.is-past) { opacity: 0.7; }
.rail-live .rail-node.is-now { opacity: 1; }
/* Fixed-width pills on the living rail: labels swap as the walk moves,
   inside a constant box so nothing around them shifts. */
.rail-live .rail-node .chip {
  min-width: 6.6rem;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .rail-live .rail-node { transition: opacity 320ms ease; }
  .rail-live .rail-node i {
    transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
  }
  .rail-live .rail-node i.fl-pulse { animation: flPulse 750ms ease; }
  .rail-live .rail-node .chip {
    transition:
      opacity 140ms ease,
      background-color 240ms ease, color 240ms ease, border-color 240ms ease;
  }
  .rail-live .rail-node .chip.chip-fade { opacity: 0; }
  /* The sliding sequence capsule: the pill stays visible through the
     glide; only its LABEL fades out on departure and back on settle. */
  .rail-slide .chip .pill-label { transition: opacity 150ms ease; }
  .rail-slide .chip.chip-fade .pill-label { opacity: 0; }
}
.rail-node b { display: block; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--ink); }
.rail-node small { display: block; font: 500 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rail-node .chip { margin-left: auto; flex: none; }
.rail-node.is-next { opacity: 0.65; }

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.6rem;
  max-width: 26rem;
}
.chip-cloud .chip { font-size: 0.68rem; padding: 0.5em 0.85em; }
.cloud-hub {
  flex-basis: 100%;
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  font: 600 0.72rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--navy);
  border-radius: 6px;
  padding: 0.6em 0.9em;
  margin-bottom: 0.3rem;
}

.ready-card { max-width: 26rem; }
.ready-card .checklist { margin: 0.4rem 0 1.1rem; }
.ready-chip { font-size: 0.68rem; }

/* --- Checklists ----------------------------------------------------------- */

.checklist { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.checklist li { padding-left: 2.2rem; position: relative; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.32em;
  width: 0.95em; height: 0.95em;
  border: 1.5px solid var(--approve);
  border-radius: 3px;
  background:
    center / 70% no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2 6.5 5 9l5-6" fill="none" stroke="%2321714A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* --- CTA duo -------------------------------------------------------------- */

.cta-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
@media (max-width: 56em) {
  .cta-duo { grid-template-columns: 1fr; }
}
/* Three doors where the family shows all three platforms. */
.cta-trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 64em) {
  .cta-trio { grid-template-columns: 1fr; }
}

.cta-card {
  padding: 2.1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}
.cta-card h3 { font-size: 1.3rem; }
.cta-card p { color: var(--ink-2); }
.cta-card .btn { margin-top: auto; }

.badge-soon {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--approve);
  border: 1.5px solid var(--approve);
  border-radius: 4px;
  padding: 0.25em 0.6em;
}

/* --- Forms ---------------------------------------------------------------- */

.form-grid { display: grid; gap: 1.25rem; max-width: 34rem; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.65em 0.8em;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field textarea { min-height: 8.5rem; resize: vertical; }

.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { font-size: 0.88rem; color: var(--ink-2); }

/* --- Contact & early access ------------------------------------------------
   Forms live in product windows (frame bar + fields), beside a narrow
   register column explaining what happens next. */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 56em) {
  .contact-grid { grid-template-columns: 1fr; }
}

.form-win { overflow: hidden; }
.form-win .form-grid { padding: 1.7rem 1.8rem 2rem; max-width: none; }

.aside-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 1.1rem;
}
/* Register rows in a narrow column: collapse to the two-column form the
   full ledger uses on small screens. */
.ledger-col .ledger-row { grid-template-columns: 2.2rem 1fr; }
.ledger-col .ledger-row p { grid-column: 2; }
/* Hairlines end near the text they rule; grid ledgers exempt. */
.ledger.ledger-col:not(.grid-2) { max-width: 54rem; }
.ledger + .checklist { margin-top: 1.5rem; }

/* Selection-aware note: surfaces under a dropdown when the chosen option
   points somewhere better (the Platforms router). Hidden without JS. */
.route-note {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-top: 0.55rem;
  padding: 0.55rem 0.8rem;
  background: var(--well);
  border-left: 3px solid var(--blue);
  border-radius: 2px;
}

/* --- Custom dropdown -------------------------------------------------------
   site.js upgrades every .field select into a select-only combobox
   (APG pattern): button + listbox, arrow keys, type-ahead, and per-
   option hints and status chips. The native select stays in the form,
   hidden, holding the submitted value; without JS it simply remains
   the visible control. */

.dd { position: relative; }
.dd-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.65em 0.8em;
  cursor: pointer;
}
.dd-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}
.dd.is-open .dd-btn { border-color: var(--focus); }
.dd-car { flex: none; width: 12px; height: 12px; color: var(--ink-2); }
.dd-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow:
    0 2px 6px rgba(var(--shade), 0.08),
    0 22px 48px -16px rgba(var(--shade), 0.28);
  max-height: 27rem;
  overflow: auto;
  /* Custom scrollbar for lists taller than the popup: thin themed thumb
     on a transparent track (standard properties cover Chromium 121+,
     Edge, and Firefox; site.js also clamps the popup to the viewport). */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.dd-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.6rem 0.95rem;
  border-radius: 4px;
  cursor: pointer;
}
/* Leading-edge accent in the ticket-tag register: charged on the row
   the keyboard or pointer is on. */
.dd-opt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 1px;
  background: var(--blue);
  opacity: 0;
}
.dd-opt.is-active { background: var(--well); }
.dd-opt.is-active::before { opacity: 1; }
.dd-opt-text { min-width: 0; flex: 1; }
.dd-opt-text b { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.dd-opt-text small { display: block; font-size: 0.83rem; color: var(--ink-2); margin-top: 0.1rem; }
.dd-opt .chip { flex: none; }
.dd-tick { flex: none; width: 14px; height: 14px; color: var(--blue); opacity: 0; }
.dd-opt[aria-selected="true"] .dd-tick { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .dd-btn { transition: border-color 150ms ease, box-shadow 150ms ease; }
  .dd-car { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dd.is-open .dd-car { transform: rotate(180deg); }
  .dd-pop {
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
    transition:
      opacity 150ms ease,
      transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dd.is-open .dd-pop { opacity: 1; transform: none; }
  .dd-opt { transition: background-color 120ms ease; }
  .dd-opt::before { transition: opacity 120ms ease; }
  .dd-tick { transition: opacity 140ms ease; }
  /* Rows surface in a quick cascade on open; utility-fast, not showy. */
  .dd.is-open .dd-opt { animation: ddOptIn 220ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .dd.is-open .dd-opt:nth-child(2) { animation-delay: 22ms; }
  .dd.is-open .dd-opt:nth-child(3) { animation-delay: 44ms; }
  .dd.is-open .dd-opt:nth-child(4) { animation-delay: 66ms; }
  .dd.is-open .dd-opt:nth-child(5) { animation-delay: 88ms; }
  .dd.is-open .dd-opt:nth-child(6) { animation-delay: 110ms; }
  .dd.is-open .dd-opt:nth-child(n+7) { animation-delay: 132ms; }
  /* A route note plays the same surface when its option is chosen. */
  .route-note { animation: ddOptIn 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
}
@keyframes ddOptIn {
  from { opacity: 0; transform: translateY(-4px); }
}

/* --- Door windows -----------------------------------------------------------
   Family-site doors (Platforms pointing at Fed/ISO) presented as
   product windows: frame bar with the domain and status, body with
   the pitch, framework tags, and the door button. */
.door { overflow: hidden; display: flex; flex-direction: column; }
.door-body {
  padding: 1.2rem 1.25rem 1.4rem;
  display: grid;
  /* The pitch row absorbs the free height in equal-height door rows,
     so the door button stays pinned to the sill (the flex pin these
     bodies carried before they were grids). */
  grid-template-rows: auto auto 1fr auto;
  gap: 0.85rem;
  justify-items: start;
  align-content: start;
  flex: 1;
}
.door-body h3 { font-size: 1.3rem; margin: 0; }
.door-body p { color: var(--ink-2); font-size: 0.97rem; margin: 0; }
.door-body .mod-tags { margin-top: 0; }
.door-body .btn { margin-top: 0.25rem; }

/* "Is not" register: the checklist's negative twin - dashed empty
   boxes instead of green checks. */
.notlist { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.notlist li { padding-left: 1.9rem; position: relative; color: var(--ink-2); }
.notlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.95em;
  height: 0.95em;
  border: 1.5px dashed var(--neutral-line);
  border-radius: 3px;
}

/* --- CTA window ------------------------------------------------------------
   A closing call-to-action presented as a product window rather than
   another accent-bar card. */
.cta-win { overflow: hidden; }
.cta-win-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.8rem 2rem;
}
.cta-win-body h3 { margin-bottom: 0.4rem; }
.cta-win-body p { color: var(--ink-2); font-size: 0.98rem; max-width: 44ch; }
.cta-win-actions { display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap; }

/* --- Prose pages (privacy, terms) ----------------------------------------- */

.prose { max-width: 46rem; }
/* Legal/prose pages register to the site's left rail: the wrap keeps
   its width and the measure caps the children, not the column. */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 46rem; }
.prose h2 { font-size: 1.4rem; margin: 2.4rem 0 0.8rem; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.prose p, .prose li { color: var(--ink); }
.prose p + p { margin-top: 0.9rem; }
.prose ul { margin: 0.7rem 0 0.9rem; padding-left: 1.3rem; }
.prose .doc-updated {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 2rem;
}

/* --- Error pages ----------------------------------------------------------- */

.error-main {
  min-height: 62vh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* Full-page error hero: the site's living field with no box, a huge
   code numeral, and a route back in. */
.error-hero {
  display: grid;
  align-content: center;
  min-height: min(80vh, 48rem);
}
.error-hero > .wrap { position: relative; z-index: 1; }
.error-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--blue);
  margin: 0.7rem 0 0.5rem;
}
.error-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.8rem; color: var(--navy); }
.error-hero p { color: var(--ink-2); max-width: 52ch; margin-bottom: 1.7rem; }
.error-hero .error-actions { justify-content: flex-start; }
.error-hero .error-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  display: block;
  margin-top: 2.2rem;
}
.error-card { max-width: 30rem; padding: 2.6rem 2.4rem; text-align: center; }
.error-card .stamp { margin-bottom: 1.4rem; }
.error-card h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 0.7rem; }
.error-card p { color: var(--ink-2); margin-bottom: 1.6rem; margin-inline: auto; }
/* Error-page field: the glyph (a question mark on 404, a frown on 501)
   is drawn by the WebGL field itself — the cells assemble it in stroke
   order and dissolve it again (hero-rain.js, data-glyph). The static
   corner clusters step aside there: frozen cells over a moving field
   read as a bug. */
.error-hero .page-corners { display: none; }

.error-card .error-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  display: block;
  margin-top: 1.8rem;
}
.error-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: var(--on-navy-2);
  /* No top margin: the footer butts against the last section, so grid
     and band sections never leave a bare strip before the navy. */
  padding-block: clamp(2.8rem, 6vw, 4.2rem) 1.8rem;
  font-size: 0.95rem;
}
.footer-grid-3 { grid-template-columns: 1.5fr 1fr 1.25fr !important; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: 2.4rem;
}
@media (max-width: 56em) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36em) {
  .footer-grid { grid-template-columns: 1fr; }
}
.brand-name-footer { font-size: 1.25rem; color: #FFFFFF; display: inline-block; margin-bottom: 0.55rem; }
.brand-name-footer b { color: color-mix(in srgb, var(--blue) 55%, #FFFFFF); }
.footer-brand p { font-size: 0.9rem; max-width: 30ch; line-height: 1.6; }
.footer-family { margin-top: 0.7rem; color: var(--on-navy-3) !important; font-size: 0.82rem !important; }
.footer-family a { color: var(--on-navy-1); }
.footer-family a:hover { color: #FFFFFF; }
.footer-col h2 {
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-navy-4);
  margin: 0.3rem 0 1rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--on-navy-2); text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover { color: #FFFFFF; }
.footer-contact p { font-size: 0.9rem; margin-bottom: 1.1rem; line-height: 1.6; }
.site-footer .btn-paper { color: var(--navy); }
.site-footer .btn-paper:hover { color: var(--navy-deep); text-decoration: none; }

.cert-note {
  border: 1px solid var(--on-navy-line);
  border-left: 3px solid var(--on-navy-1);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: var(--on-navy-2) !important;
  max-width: none;
}
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--on-navy-line-3);
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--on-navy-3);
}
.footer-legal p { color: var(--on-navy-3) !important; max-width: none; }

/* --- Motion ----------------------------------------------------------------
   Enhancement only. Default state (no JS, or reduced motion) is the final,
   fully assembled state for every animated element. */

@media (prefers-reduced-motion: no-preference) {
  /* Hero choreography: frame rises, rows populate, satellite cards snap
     in with overshoot, connections draw. CSS-only, plays once. */
  .hero-frame-main {
    animation: stageMain 800ms cubic-bezier(0.22, 1, 0.36, 1) both 150ms;
  }
  .hero-frame-main .h-row,
  .hero-frame-main .h-prog {
    animation: rowIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-frame-main .h-row:nth-child(1) { animation-delay: 520ms; }
  .hero-frame-main .h-row:nth-child(2) { animation-delay: 650ms; }
  .hero-frame-main .h-row:nth-child(3) { animation-delay: 780ms; }
  .hero-frame-main .h-prog { animation-delay: 910ms; }
  .hero-frame-main .frame-log {
    animation: rowIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both 1040ms;
  }
  .hero-float-req { animation: cardIn 650ms cubic-bezier(0.34, 1.45, 0.64, 1) both 1200ms; }
  .hero-float-ev { animation: cardIn 650ms cubic-bezier(0.34, 1.45, 0.64, 1) both 1400ms; }

  /* Instrument enclave entrance: band rises, figures land one by one,
     the arc draws itself, the family strip and log follow. */
  .hero-frame-main .inst-band { animation: rowIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both 500ms; }
  .hero-frame-main .inst-stat:nth-child(1) { animation: rowIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both 680ms; }
  .hero-frame-main .inst-stat:nth-child(2) { animation: rowIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both 790ms; }
  .hero-frame-main .inst-stat:nth-child(3) { animation: rowIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both 900ms; }
  .hero-frame-main .inst-arc { animation: arcIn 1100ms cubic-bezier(0.22, 1, 0.36, 1) both 720ms; }
  .hero-frame-main .inst-fam { animation: rowIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both 980ms; }

  /* Tape enclave entrance: the register assembles top to bottom, the
     zoom card landing mid-sequence, the cycle footer last. (nth-of-type
     counts every div sibling, frame bar included, so indices start
     at 2; index 4 covers the mini tape's second row and is inert on
     the full tape, where div 4 is the zoom.) */
  .hero-frame-main .tape-row:nth-of-type(2) { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 520ms; }
  .hero-frame-main .tape-row:nth-of-type(3) { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 620ms; }
  .hero-frame-main .tape-zoom { animation: rowIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both 740ms; }
  .hero-frame-main .tape-row:nth-of-type(4) { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 900ms; }
  .hero-frame-main .tape-row:nth-of-type(5) { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 880ms; }
  .hero-frame-main .tape-row:nth-of-type(6) { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 980ms; }
  .hero-frame-main .tape-foot { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 1100ms; }
  /* ISO register strips (rows live inside clipped columns): history,
     lens, queue, foot arrive in reading order. Rows inside a column
     must NOT carry per-row entrance animations - recycling shifts
     their nth positions and would replay them - so the strip carries
     the entrance and its rows ride along. */
  .hero-frame-main .tape-view.tv-done { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 520ms; }
  .hero-frame-main .tape-view.tv-next { animation: rowIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both 900ms; }
  .hero-frame-main .tape-col .tape-row { animation: none; }

  /* Stacked family doors arrive one after the other. */
  .hero-stage > .hero-frame-main:nth-of-type(2) { animation-delay: 340ms; }

  .hero-copy > * { animation: heroCopy 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: 0ms; }
  .hero-copy > *:nth-child(2) { animation-delay: 70ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 140ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 210ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 280ms; }
}

@keyframes heroCopy {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* No scale on the frame entrance: the module frame's box must never
   change visual size, including during arrival. Rise and fade only. */
@keyframes stageMain {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
/* Scroll reveals: applied only when JS confirms motion is allowed
   (html.motion). Without that class, content is simply visible. */
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion [data-reveal].revealed { opacity: 1; transform: none; }

/* Family chart bars grow in when revealed; default full width. */
html.motion .fam-chart[data-reveal] .fam-bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion .fam-chart[data-reveal].revealed .fam-bar { transform: scaleX(1); }

/* Operating-model rail: one continuous constant-speed sweep across the
   whole row; each state chip surfaces as the line passes its column. */
html.motion .path-steps[data-reveal]::before {
  transform: scaleX(0);
  transition: transform 1300ms cubic-bezier(0.45, 0.05, 0.35, 0.95);
}
html.motion .path-steps[data-reveal] .step-chip {
  opacity: 0;
  transition: opacity 450ms ease;
}
html.motion .path-steps[data-reveal].revealed::before { transform: scaleX(1); transition-delay: 120ms; }
html.motion .path-steps[data-reveal].revealed .step-chip { opacity: 1; }
html.motion .path-steps[data-reveal].revealed li:nth-child(1) .step-chip { transition-delay: 300ms; }
html.motion .path-steps[data-reveal].revealed li:nth-child(2) .step-chip { transition-delay: 620ms; }
html.motion .path-steps[data-reveal].revealed li:nth-child(3) .step-chip { transition-delay: 940ms; }
html.motion .path-steps[data-reveal].revealed li:nth-child(4) .step-chip { transition-delay: 1260ms; }

/* Operating-model register: state chips surface in step order once the
   grid has revealed, keeping the old rail's sense of sequence. */
html.motion .model-steps[data-reveal] .step-chip {
  opacity: 0;
  transition: opacity 450ms ease;
}
html.motion .model-steps[data-reveal].revealed .step-chip { opacity: 1; }
html.motion .model-steps[data-reveal].revealed li:nth-child(1) .step-chip { transition-delay: 260ms; }
html.motion .model-steps[data-reveal].revealed li:nth-child(2) .step-chip { transition-delay: 480ms; }
html.motion .model-steps[data-reveal].revealed li:nth-child(3) .step-chip { transition-delay: 700ms; }
html.motion .model-steps[data-reveal].revealed li:nth-child(4) .step-chip { transition-delay: 920ms; }

/* Why-now: cards stagger, then the phase rail draws left to right with
   each status chip surfacing as its segment completes. */
html.motion .urgency-grid[data-reveal] .urgency-item:nth-child(2) { transition-delay: 130ms; }
html.motion .urgency-grid[data-reveal] .urgency-item:nth-child(3) { transition-delay: 260ms; }
html.motion .urgency-grid[data-reveal] .urgency-item {
  transition-property: opacity, transform;
  transition-duration: 600ms;
}
html.motion .phase-strip[data-reveal]::before {
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.45, 0.05, 0.35, 0.95);
}
html.motion .phase-strip[data-reveal] .chip {
  opacity: 0;
  transition: opacity 450ms ease;
}
html.motion .phase-strip[data-reveal].revealed::before { transform: scaleX(1); transition-delay: 100ms; }
html.motion .phase-strip[data-reveal].revealed .chip { opacity: 1; }
html.motion .phase-strip[data-reveal].revealed .phase-seg:nth-child(1) .chip { transition-delay: 260ms; }
html.motion .phase-strip[data-reveal].revealed .phase-seg:nth-child(2) .chip { transition-delay: 620ms; }
html.motion .phase-strip[data-reveal].revealed .phase-seg:nth-child(3) .chip { transition-delay: 980ms; }

/* Table rows inside revealed panels surface in sequence. */
html.motion [data-reveal] .doc tbody tr { opacity: 0; transition: opacity 400ms ease; }
html.motion [data-reveal].revealed .doc tbody tr { opacity: 1; }
html.motion [data-reveal].revealed .doc tbody tr:nth-child(1) { transition-delay: 150ms; }
html.motion [data-reveal].revealed .doc tbody tr:nth-child(2) { transition-delay: 280ms; }
html.motion [data-reveal].revealed .doc tbody tr:nth-child(3) { transition-delay: 410ms; }
html.motion [data-reveal].revealed .doc tbody tr:nth-child(4) { transition-delay: 540ms; }
html.motion [data-reveal].revealed .doc tbody tr:nth-child(n+5) { transition-delay: 670ms; }

/* --- Microinteractions (site-wide polish pass) ----------------------------
   Color and focus feedback runs for everyone; anything that moves is
   gated behind the motion preference. */

.field input, .field textarea, .field select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}
.nav-links a:not(.btn) { transition: color 150ms ease, border-bottom-color 150ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .chip::before {
    transform: translateX(-32%);
    transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chip:hover::before { transform: none; }
}

/* Card text responds to hover the standard way: headings warm toward
   the interactive blue. */
.tile h3, .cta-card h3, .handoff h3,
.tile-spine h3, .ledger-row h3 { transition: color 180ms ease; }
.tile:hover h3, .cta-card:hover h3, .handoff:hover h3,
.tile-spine:hover h3, .ledger-row:hover h3 { color: var(--blue); }
.tile-navy:hover h3 { color: var(--on-navy-1); }
/* Spine fill: the accent line charges from the bottom on enter and
   drains out the top on leave (classes from site.js). */
.tile-spine::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue);
  transform: scaleY(0);
}
.tile-spine.sp-in::before { animation: spineFillIn 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.tile-spine.sp-out::before { animation: spineFillOut 300ms cubic-bezier(0.5, 0, 0.6, 0.4) both; }
.ledger-row .ledger-num { transition: color 200ms ease; }
.card-glyph { transition: border-color 200ms ease, background-color 200ms ease; }
.tile:hover .card-glyph {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  /* Once revealed, cards hand their transition list over to hover
     behavior (the reveal rule outranks the card rules and would
     otherwise leave shadow and border snapping with no ease). */
  html.motion [data-reveal].revealed {
    transition:
      opacity 600ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 300ms ease, border-color 200ms ease;
  }

  /* State dot: pops in under hovered steps and phases, colored by the
     state that item claims (green achieved, blue in process, muted
     paused). A status light, not decoration. */
  .path-steps li::after, .phase-seg::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    margin-top: 0.9rem;
    opacity: 0;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.34, 1.5, 0.64, 1), opacity 180ms ease;
  }
  .path-steps li:has(.step-chip-ok)::after { background: var(--approve); }
  .phase-seg::after { background: #7FB89A; }
  .phase-seg:has(.chip-muted)::after { background: #6B7F94; }
  .phase-seg:has(.chip-info)::after { background: var(--on-navy-1); }
  .path-steps li:hover::after, .phase-seg:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .btn {
    transition:
      background-color 140ms ease, border-color 140ms ease, color 140ms ease,
      transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease;
  }
  /* Halftone wash: a translucent dot screen sweeps in on the sheen's
     diagonal and settles across the leading half of the button. */
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.38) 1px, transparent 1.35px);
    background-size: 6px 6px;
    -webkit-mask-image: linear-gradient(115deg, #000 32%, transparent 58%);
    mask-image: linear-gradient(115deg, #000 32%, transparent 58%);
    transform: translateX(-22%);
    transition:
      opacity 300ms ease,
      transform 430ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .btn-primary:hover::after { opacity: 0.5; transform: none; }
  .btn:hover { transform: scale(1.04); }
  .btn:active { transform: scale(0.97); transition-duration: 80ms; }
  .btn-primary:hover { box-shadow: 0 8px 20px -8px rgba(var(--shade), 0.45); }

  .tile, .cta-card, .sheet.doc, .handoff {
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 260ms ease, border-color 200ms ease;
  }
  /* Depth without motion: hovered cards deepen their shadow and border
     instead of moving (translating a card away from the cursor at its
     edge causes an enter/leave oscillation loop). The cta-close closer
     is a spine card, not a lift card; it stays still. */
  .tile:hover, .cta-card:hover, .handoff:hover:not(.cta-close) {
    box-shadow: 0 2px 4px rgba(var(--shade), 0.06), 0 22px 48px -18px rgba(var(--shade), 0.26);
    border-color: var(--rule-strong);
  }

  .urgency-item { transition: border-color 200ms ease; }
  .urgency-item:hover { border-color: #3E608A; }

  /* Product-page family chart: hovered family stays sharp and grows;
     the rest recede. Scale transforms, so nothing reflows. */
  .fam-row { transition: opacity 200ms ease; }
  .fam-chart:hover .fam-row { opacity: 0.4; }
  .fam-chart .fam-row:hover { opacity: 1; }
  .fam-row .fam-label,
  .fam-row .fam-count {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
  }
  .fam-row .fam-label { transform-origin: left center; }
  .fam-row .fam-count { transform-origin: right center; }
  .fam-row:hover .fam-label { transform: scale(1.06); color: var(--navy); }
  .fam-row:hover .fam-count { transform: scale(1.32); color: var(--blue); }
  .fam-row .fam-bar { transition: background-color 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; }
  .fam-row:hover .fam-bar { background: var(--blue); transform: scaleY(1.25); }
}

/* Living-frame events (frame-life.js): the engine gives animated
   elements a PERMANENT double-buffered structure at init.
   .fl-cell rows host a two-pane track that slides one pane left per
   rotation; .fl-x labels keep a hidden in-flow sizer (owns the width)
   plus two stacked faces that crossfade. Structure lives outside the
   media query so a preference flip mid-session cannot strand layout;
   motion only adds transitions. */
/* Clip only WHILE sliding: at rest the row must not clip, or status-dot
   halos and pulse rings get cut at the row edges. The sheet frame clips
   the resting hidden pane on its own. */
.fl-cell.fl-sliding { overflow: hidden; }
/* Track and panes are 100% of the cell viewport: while the cell's
   height is locked during a slide, hidden-buffer content can never
   influence visible geometry. At rest (auto heights) they resolve to
   natural content height. */
.fl-track { display: flex; width: 100%; height: 100%; }
/* Vertical variant: the tape slots slide upward - a register scrolls,
   it does not swipe. Track is two panes tall; the slide is -50%. */
.fl-track-y { flex-direction: column; height: 200%; }
.fl-track-y .fl-pane { flex: 0 0 50%; width: 100%; }
.fl-pane {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
/* The host clips its faces: during a width morph the text lives inside
   the easing pill instead of overhanging it. Box-shadow pulses are not
   clipped by an element's own overflow, so rings still render. */
.fl-x { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.fl-x-sizer { display: inline-flex; flex: none; visibility: hidden; }
.fl-x-size { white-space: nowrap; }
.fl-x-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 0;
}
.fl-x-face.fl-on { opacity: 1; }
/* Transitions only: toggling animation here would restart entrance
   keyframes (rowIn et al.) on every snap. */
.fl-still, .fl-still * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .hero-stage .chip {
    transition:
      width 260ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  /* EVERY engine-layered label eases its width morph - chips, the log
     line, stat values, family counts, satellite text - one rule, all
     three sites. An unlisted label snapping to its new width is the
     jagged stutter this line exists to prevent. */
  .hero-stage .fl-x { transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .fl-cell { transition: height 430ms cubic-bezier(0.3, 0.86, 0.28, 1); }
  .fl-track { transition: transform 430ms cubic-bezier(0.3, 0.86, 0.28, 1); }
  .fl-x-face {
    transition:
      opacity 180ms ease,
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Roll variant (the step counter): faces enter from below and exit
     upward, an odometer tick. */
  .fl-roll .fl-x-face { transform: translateY(0.55em); }
  .fl-roll .fl-x-face.fl-on { transform: translateY(0); }
  .fl-roll .fl-x-face.fl-out { transform: translateY(-0.55em); }
  .fl-pulse { animation: flPulse 750ms ease; }
  .fl-flash { animation: flFlash 850ms ease; border-radius: 4px; }
  /* forwards: the sweep must hold its offscreen end state until the
     class drops - reverting would park the gradient dead center. */
  .fl-shine::after { animation: flShine 700ms ease forwards; }
  .h-stat { transition: background-color 240ms ease, color 240ms ease; }
  .pdca i {
    transition:
      background-color 240ms ease, color 240ms ease,
      border-color 240ms ease;
  }
  .hero-frame-main {
    transition:
      box-shadow 500ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fl-live {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--blue) 30%, transparent),
      var(--shadow-sheet);
  }
}

@keyframes flPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes flFlash {
  0% { background-color: color-mix(in srgb, var(--blue) 10%, transparent); }
  100% { background-color: transparent; }
}
@keyframes flShine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Cross-document view transitions: same-origin navigations crossfade with
   a slight rise while the header persists in place. Browsers without
   support (and reduced-motion users) get plain instant navigation. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 160ms ease both; }
  ::view-transition-new(root) { animation: vt-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-out {
  to { opacity: 0; }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Print: reveal states must never hide content on paper. */
@media print {
  html.motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.motion .fam-chart[data-reveal] .fam-bar { transform: none !important; }
  html.motion .path-steps[data-reveal]::before,
  html.motion .phase-strip[data-reveal]::before { transform: none !important; }
  html.motion .path-steps[data-reveal] .step-chip,
  html.motion .model-steps[data-reveal] .step-chip,
  html.motion .phase-strip[data-reveal] .chip { opacity: 1 !important; }
  html.motion [data-reveal] .doc tbody tr { opacity: 1 !important; }
}

/* ===== Overhaul components: the approved systems (2026-07) =====
   q-register  - numbered, always-open FAQ rows in the ledger idiom;
                 replaces every 2x2 tile-spine FAQ.
   close-quiet - the utility-page closing line, third CTA variant. */
.q-register { border-top: 1px solid var(--rule-strong); }
.q-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.4rem 1.1rem;
  padding: 1.05rem 0.2rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.q-num {
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.12em;
  color: var(--blue);
  padding-top: 0.3rem;
}
.q-row h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.q-row p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 62ch;
}
@media (max-width: 40em) {
  .q-row { grid-template-columns: 1fr; }
  .q-row p { grid-column: 1; }
}

/* At-a-glance, relocated: not hero furniture but part of the first
   section's copy - a hairline fact strip in the reading flow. */
.facts-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.05rem 0.1rem;
  margin: 1.9rem 0 2.2rem;
}
.facts-strip .facts-kick { margin: 0; }
.fs-cell { display: grid; gap: 0.18rem; }
.fs-cell small {
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fs-cell b { font-size: 0.98rem; color: var(--navy); }
.fs-big b { font-size: 1.5rem; line-height: 1.05; }
.fs-cell + .fs-cell { border-left: 1px solid var(--rule); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 36em) {
  .fs-cell + .fs-cell { border-left: 0; padding-left: 0; }
}

/* Hero proofline: the facts-strip cells riding the hero copy's foot,
   one row under a hairline. */
.hero-proofline {
  display: flex;
  align-items: start;
  gap: 0 1.3rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.7rem;
  padding-top: 0.95rem;
}
.hero-proofline .fs-cell + .fs-cell { padding-left: 1.3rem; }
@media (max-width: 36em) {
  .hero-proofline { flex-wrap: wrap; gap: 0.8rem 1.3rem; }
}

.facts-kick {
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.4rem;
}
/* Door meta line: the domain kick with its status chip pinned to the
   row's far edge (family doors). */
.door-meta {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
}

/* S02 lifecycle instrument: a register of states on the left selects
   a detail pane on the right - one object, not stacked masses.
   Without JS every pane renders in flow. */
/* Fed hero: the frame is a working surface, not a tracker. The active
   step leads; progress lives as a small footer gauge. */
.work-now { padding: 1.05rem 1.25rem 0.95rem; }
.work-now .facts-kick { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.work-now h3 { margin: 0.55rem 0 0.35rem; font-size: 1.01rem; }
.work-now > p:not(.facts-kick) { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 0.75rem; }
.work-checks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.work-queue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--rule);
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
}
.work-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 650 0.62rem var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.work-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  flex: none;
}
.work-list li.is-done { color: var(--approve-ink); }
.work-list li.is-done::before { background: var(--approve); border-color: var(--approve); }
.wq-tag { font: 650 0.62rem var(--mono); letter-spacing: 0.07em; color: var(--ink-2); opacity: 0.75; }
.prog-row .fk {
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.prog-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.25rem 0.55rem;
  border-top: 1px solid var(--rule);
}
.prog-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}
.prog-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--blue);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.prog-count { font: 600 0.72rem var(--mono); letter-spacing: 0.06em; color: var(--ink-2); }
.prog-count b { font-size: 0.95rem; color: var(--navy); }
.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  padding: 0.15rem 1.25rem 0.85rem;
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stat-line b { color: var(--navy); font-weight: 650; }
.inst-compact { border-top: 1px solid var(--rule); }
.inst-compact .inst-dial svg { width: 60px; height: 60px; }
.inst-compact .inst-num { font-size: 1.02rem; }
.inst-compact .inst-num-wrap small { font-size: 0.55rem; }
.inst-compact .inst-stat b { font-size: 0.82rem; }
.inst-compact .inst-stat small { font-size: 0.58rem; }

.life-split {
  display: grid;
  grid-template-columns: minmax(240px, 27rem) 1fr;
  gap: 1.6rem clamp(2.2rem, 4vw, 3.8rem);
  align-items: start;
  margin-top: 2.6rem;
}
.life-reg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.life-reg li { border-bottom: 1px solid var(--rule); }
.life-reg li.split-brk { margin-top: 1.1rem; border-top: 1px solid var(--rule); }
.life-reg button {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 0.9rem 1rem 0.8rem;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  color: var(--navy);
  cursor: pointer;
}
.life-reg .ledger-num { font-size: 0.8rem; }
.life-reg b { font-weight: 600; font-size: 0.99rem; }
.life-reg .chip { margin-left: auto; flex: none; }
.life-reg li.is-on button {
  border-left-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}
.life-pane { padding-top: 0.4rem; }
.life-pane > p { font-size: 1.04rem; line-height: 1.7; color: var(--ink); max-width: 54ch; }
.life-pane h3 { margin: 0 0 0.9rem; }
.life-js .life-detail { display: grid; }
.life-js .life-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 220ms ease; }
.life-js .life-pane.is-on { opacity: 1; visibility: visible; }
@media (max-width: 56em) {
  .life-split { grid-template-columns: 1fr; }
}

/* S04: three stage cards on the navy band, connectors carrying the
   flow, the readiness stage lit as the terminal. */
.eng-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 clamp(0.9rem, 1.8vw, 1.6rem);
  align-items: stretch;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
.eng-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--on-navy-line);
  border-radius: 12px;
  padding: 1.9rem 1.8rem;
  display: grid;
  align-content: start;
}
/* The stage's verb, drawn into the card ground: quiet macro geometry
   bleeding off the edges, content floating above it. */
.eng-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--on-navy-line);
  opacity: 0.6;
  pointer-events: none;
}
.eng-card-end .eng-bg { stroke: var(--on-navy-3); opacity: 0.45; }
.eng-card ul { position: relative; z-index: 1; }
.eng-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.eng-card li { color: var(--on-navy-1); font-size: 0.95rem; line-height: 1.55; }
.eng-card li b {
  display: block;
  font: 600 0.76rem var(--mono);
  letter-spacing: 0.14em;
  color: var(--on-navy-3);
  margin-bottom: 0.3rem;
}
.eng-card li.flow-end { color: var(--on-navy-0); }
.eng-card li.flow-end b { color: var(--on-navy-0); }
.eng-card-end { background: rgba(255, 255, 255, 0.08); border-color: var(--on-navy-3); }
.eng-cards .flow-x { align-self: center; font-size: 1.25rem; color: var(--on-navy-3); line-height: 1; }
@media (max-width: 56em) {
  .eng-cards { grid-template-columns: 1fr; gap: 1rem 0; }
  .eng-cards .flow-x { transform: rotate(90deg); justify-self: center; margin: 0.2rem 0; }
}

/* Chromeless CTA close: the window without the window dressing. A
   left accent spine carries weight; no bars, no dots. */
.cta-close {
  border-left: 4px solid var(--blue);
  padding: 1.7rem 2.4rem 1.7rem 2rem;
}
/* Guard: the closer's spine survives any source-order reshuffle of the
   .handoff base rule. */
.handoff.cta-close { border-left: 4px solid var(--blue); }
.cta-close h3 .chip { margin-left: 0.6rem; vertical-align: middle; }
/* The inner window body must not stack its inset on the card's own. */
.cta-close .cta-win-body { padding: 0; }
.handoff > p { flex: 1 1 24rem; }

.close-quiet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.2rem 0.2rem;
  border-top: 1px solid var(--rule-strong);
}
.close-quiet p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }