/* ==========================================================================
   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;
  --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(16, 42, 74, 0.06), 0 18px 44px -18px rgba(16, 42, 74, 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;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  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(--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(--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: #E9EFF6;
}
.band-navy h2, .band-navy h3 { color: #FFFFFF; }
.band-navy p { color: #C6D5E4; }
.band-navy .kicker { color: #8FA9C2; }
.band-navy .kicker::after { border-color: #335170; }
.band-navy a { color: #BCD4EC; }
.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: #0F766E; }
.btn-primary.btn-iso:hover { background-color: #0C5F55; }

.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: rgba(247, 249, 251, 0.92);
  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; }
}

/* --- 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;
  border-radius: 5px;
  border: 1px solid #BFDECB;
  color: #1E6B45;
  background: var(--approve-soft);
  white-space: nowrap;
}
.chip-info,
.stamp-navy {
  color: #174F86;
  background: #E6EFF8;
  border-color: #C2D8EC;
}
.chip-muted {
  color: var(--ink-2);
  background: #EEF2F6;
  border-color: #D5DEE7;
}

.frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.62rem 0.95rem;
  background: #F2F6FA;
  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: #CBD7E2;
}
.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: #F7FAFC;
}
.frame-rail i {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid currentColor;
  color: #A9BACB;
  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: #C3D0DD;
  color: #C3D0DD;
  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: #9DAEC0; color: #9DAEC0; }

.frame-log {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-top: 1px solid var(--rule);
  background: #FAFCFE;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.log-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--approve);
  color: var(--approve);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}

.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: #EEF2F6;
  border: 1px solid #D5DEE7;
  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: #F2F6FA;
  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, rgba(20, 56, 94, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 56, 94, 0.045) 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. */
.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;
  max-width: 28rem;
  margin-inline: auto;
  padding: 1.8rem 0.9rem 1.8rem 1.1rem;
}
.hero-frame-main { position: relative; z-index: 1; }

.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, rgba(20, 56, 94, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 56, 94, 0.045) 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: #12324F;
  border: 1px solid #2C4A69;
  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: #8FA9C2;
  border-bottom: 1px solid #29486A;
  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: #8FA9C2 !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: #BCD4EC;
  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: #BCD4EC; }
}
.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: #C6D5E4; 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: #12324F; border-color: #2C4A69; }
.tile-navy h3 { color: #FFFFFF; }
.tile-navy .tile-kick { color: #8FA9C2; }
.tile-navy .checklist { color: #C6D5E4; 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: 38px;
  border-radius: 6px;
  overflow: hidden;
  max-width: 44rem;
  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;
}
.fam-strip [data-fam]:nth-child(even) { background: var(--blue); }
.fam-strip [data-fam]::after {
  content: attr(data-fam);
  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(--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; }
/* --- 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 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; }
@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-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); }

/* --- 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-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: #C6D5E4;
  /* 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: #BCD4EC; }
.footer-brand p { font-size: 0.9rem; max-width: 30ch; line-height: 1.6; }
.footer-family { margin-top: 0.7rem; color: #8FA9C2 !important; font-size: 0.82rem !important; }
.footer-family a { color: #BCD4EC; }
.footer-family a:hover { color: #FFFFFF; }
.footer-col h2 {
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7E9CBC;
  margin: 0.3rem 0 1rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: #C6D5E4; 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 #335170;
  border-left: 3px solid #BCD4EC;
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: #C6D5E4 !important;
  max-width: none;
}
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid #22405F;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: #8FA9C2;
}
.footer-legal p { color: #8FA9C2 !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; }
}
@keyframes stageMain {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  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; }
.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 { transition: color 180ms ease; }
.tile:hover h3, .cta-card:hover h3, .compare-col:hover h3, .handoff:hover h3 { color: var(--blue); }
.tile-navy:hover h3 { color: #BCD4EC; }

@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: #BCD4EC; }
  .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;
  }
  .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(14, 42, 72, 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(16, 42, 74, 0.06), 0 22px 48px -18px rgba(16, 42, 74, 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, the rest recede. */
  .fam-row { transition: opacity 200ms ease; }
  .fam-chart:hover .fam-row { opacity: 0.4; }
  .fam-chart .fam-row:hover { opacity: 1; }
}

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