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

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

.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); }
.band-navy .kicker { color: var(--on-navy-3); }
.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; }
.btn-primary:hover { background-color: var(--navy-deep); color: #FFFFFF; }

.btn-outline { border-color: var(--navy); color: var(--navy); background-color: transparent; }
.btn-outline:hover { 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-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 {
  background-image: linear-gradient(var(--navy), var(--navy));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
}
.btn-outline:hover { 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-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(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.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-name {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name b { font-weight: 800; color: var(--navy); }

.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) {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):hover { color: var(--navy); border-bottom-color: var(--rule-strong); }

[data-active="product"] .nav-product,
[data-active="how"] .nav-how,
[data-active="compare"] .nav-compare,
[data-active="pricing"] .nav-pricing,
[data-active="security"] .nav-security,
[data-active="snapshot"] .nav-snapshot,
[data-active="approach"] .nav-approach,
[data-active="about"] .nav-about,
[data-active="modules"] .nav-modules {
  color: var(--navy);
  border-bottom-color: var(--navy) !important;
  font-weight: 600;
}

.soon-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--approve);
  vertical-align: super;
  margin-left: 5px;
}
@media (prefers-reduced-motion: no-preference) {
  .soon-dot { animation: softPulse 2.6s ease-in-out infinite; }
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* 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-card { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.mod-first { box-shadow: inset 0 3px 0 var(--blue), var(--shadow-sheet); }
.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 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; }

/* 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-grid::after {
  background:
    linear-gradient(currentColor, currentColor) left top / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) right top / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 42% 42% no-repeat;
}
.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;
}

.chip,
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.32em 0.68em 0.32em 0.58em;
  /* Ticket-tag register, not SaaS capsule: near-square corners and a
     heavier leading edge. */
  border-radius: 2px;
  border: 1px solid var(--approve-line);
  border-left-width: 3px;
  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-ic { width: 11px; height: 11px; flex: none; }
.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);
}

.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; }

.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: 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;
}
.h-bar {
  display: block; /* span: without this the 6px height is ignored and the bar vanishes */
  height: 6px;
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}
.h-bar b {
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--navy);
  border-radius: 3px;
}
/* Progress sheen: a highlight sweeps the fill when the bar advances. */
.h-bar b::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
}

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

.frame-shell { display: flex; align-items: stretch; }
.frame-shell .frame-body { flex: 1; min-width: 0; }
.frame-rail {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 0.72rem;
  border-right: 1px solid var(--rule);
  background: var(--rail-well);
}
.frame-rail i {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid currentColor;
  color: var(--glyph-muted);
  opacity: 0.8;
  position: relative;
}
.frame-rail i::after {
  content: "";
  position: absolute;
  inset: 3.5px;
}
/* Abstract glyphs: grid, list, chart, document. */
.frame-rail i:nth-child(1)::after {
  background:
    linear-gradient(currentColor, currentColor) left top / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) right top / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 42% 42% no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 42% 42% no-repeat;
}
.frame-rail i:nth-child(2)::after {
  background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 4.2px);
}
.frame-rail i:nth-child(3)::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;
}
.frame-rail i:nth-child(4)::after {
  background:
    linear-gradient(currentColor, currentColor) center top / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center 46% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 60% 1.5px no-repeat;
}
.frame-rail i.is-on {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  opacity: 1;
}

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

@media (max-width: 36em) {
  .frame-rail { display: none; }
}

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

.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; }

.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-3) !important; max-width: none; }

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

/* Quiet tiles: hand-drawn dashed frame whose dashes crawl slowly
   clockwise around the card (motion permitting). */
.tile-quiet {
  border-color: transparent;
  border-radius: 4px;
  background-color: var(--sheet);
  background-image:
    repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--rule-strong) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--rule-strong) 0 6px, transparent 6px 12px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .tile-quiet { animation: antsCrawl 1.1s linear infinite; }
}
@keyframes antsCrawl {
  to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}

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

/* Interactive coverage strip: hover or focus a family segment and it
   expands to reveal the family name and its share of the 110. */
.fam-strip {
  display: flex;
  gap: 2px;
  height: 46px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 1.8rem;
  contain: layout;
}
.fam-strip [data-fam] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: var(--n);
  flex-basis: 4px;
  min-width: 0;
  background: var(--navy);
  overflow: hidden;
  cursor: default;
  outline-offset: -2px;
}
/* Weight ramp: the palette carries the data. Heaviest family reads
   deepest navy, lightest family reads brand blue, in count order. */
.fam-strip [data-fam]:nth-child(1) { background: color-mix(in srgb, var(--navy-deep) 100%, var(--blue)); }
.fam-strip [data-fam]:nth-child(2) { background: color-mix(in srgb, var(--navy-deep) 88%, var(--blue)); }
.fam-strip [data-fam]:nth-child(3) { background: color-mix(in srgb, var(--navy-deep) 76%, var(--blue)); }
.fam-strip [data-fam]:nth-child(4) { background: color-mix(in srgb, var(--navy-deep) 66%, var(--blue)); }
.fam-strip [data-fam]:nth-child(5) { background: color-mix(in srgb, var(--navy-deep) 57%, var(--blue)); }
.fam-strip [data-fam]:nth-child(6) { background: color-mix(in srgb, var(--navy-deep) 49%, var(--blue)); }
.fam-strip [data-fam]:nth-child(7) { background: color-mix(in srgb, var(--navy-deep) 41%, var(--blue)); }
.fam-strip [data-fam]:nth-child(8) { background: color-mix(in srgb, var(--navy-deep) 34%, var(--blue)); }
.fam-strip [data-fam]:nth-child(9) { background: color-mix(in srgb, var(--navy-deep) 27%, var(--blue)); }
.fam-strip [data-fam]:nth-child(10) { background: color-mix(in srgb, var(--navy-deep) 21%, var(--blue)); }
.fam-strip [data-fam]:nth-child(11) { background: color-mix(in srgb, var(--navy-deep) 15%, var(--blue)); }
.fam-strip [data-fam]:nth-child(12) { background: color-mix(in srgb, var(--navy-deep) 10%, var(--blue)); }
.fam-strip [data-fam]:nth-child(13) { background: color-mix(in srgb, var(--navy-deep) 5%, var(--blue)); }
.fam-strip [data-fam]:nth-child(14) { background: var(--blue); }
/* Resting label: wide families carry their code and count (data-abbr
   is only set where it fits); the hover reveal takes over from there. */
.fam-strip [data-fam]::before {
  content: attr(data-abbr);
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.06em;
  color: #FFFFFF;
  opacity: 0.85;
  white-space: nowrap;
}
.fam-strip [data-fam]:hover::before,
.fam-strip [data-fam]:focus-visible::before { opacity: 0; }
.fam-strip [data-fam]::after {
  content: attr(data-fam);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.05em;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
}
.fam-strip [data-fam]:hover,
.fam-strip [data-fam]:focus-visible { flex-grow: 60; }
.fam-strip [data-fam]:hover::after,
.fam-strip [data-fam]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Expansion is immediate; collapse waits a beat, so skimming across
     the strip never thrashes half-finished transitions. */
  .fam-strip [data-fam] {
    transition: flex-grow 480ms cubic-bezier(0.3, 0.85, 0.25, 1) 90ms;
  }
  .fam-strip [data-fam]:hover,
  .fam-strip [data-fam]:focus-visible { transition-delay: 0ms; }
  .fam-strip [data-fam]::after { transition: opacity 200ms ease 140ms; }
}

/* --- 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;
  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::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-block;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}
.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; }

/* --- 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;
  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; }
}
.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: 1.9rem; 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>');
}

/* --- Compare cards -------------------------------------------------------- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 56em) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-col { padding: 1.7rem 1.6rem; }
.compare-col.sheet { border-top: 3px solid var(--navy); }
.compare-col h3 { margin-bottom: 0.2rem; }
.compare-col .compare-sub { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 1.2rem; }
.compare-col h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.3rem 0 0.5rem;
}
.compare-col ul { padding-left: 1.1rem; font-size: 0.95rem; color: var(--ink-2); }
.compare-col li + li { margin-top: 0.35rem; }
.compare-featured { outline: 1.5px solid var(--navy); outline-offset: -1.5px; }

/* --- 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; }
}
.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; }
.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;
  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; gap: 0.8rem; flex-wrap: wrap; }

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

.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(--navy);
  margin: 0.7rem 0 0.5rem;
}
.error-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.8rem; }
.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: var(--on-navy-1); }
.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-frame-main .h-bar b {
    transform-origin: left center;
    animation: barGrow 700ms cubic-bezier(0.22, 1, 0.36, 1) both 1050ms;
  }
  .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; }

  .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 barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@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; }

/* 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; }
}
.footer-links a { transition: color 150ms ease; }

/* Card text responds to hover the standard way: headings warm toward
   the interactive blue. */
.tile h3, .cta-card h3, .compare-col h3, .handoff h3,
.tile-spine h3, .ledger-row h3 { transition: color 180ms ease; }
.tile:hover h3, .cta-card:hover h3, .compare-col: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, .compare-col, .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). */
  .tile:hover, .cta-card:hover, .compare-col:hover, .handoff:hover {
    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%; }
.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;
  }
  .hero-stage .h-bar b { transition: width 520ms 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; }
  .fl-shine::after { animation: flShine 700ms ease; }
  .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; }
  .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 .phase-strip[data-reveal] .chip { opacity: 1 !important; }
  html.motion [data-reveal] .doc tbody tr { opacity: 1 !important; }
}