:root {
  --ink: #101217;
  --navy: #003049;
  --graphite: #2B2D42;
  --frost: #EDF2F4;
  --slate: #8D99AE;
  --slate-text: #555C68;
  --crimson: #C1121F;
  --coral: #F4747C;
  --white: #FFFFFF;
  --muted: rgba(43, 45, 66, .76);
  --line: rgba(43, 45, 66, .23);
  --line-soft: rgba(141, 153, 174, .22);
  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
  --pad: clamp(1.25rem, 4vw, 3.75rem);
  --section: clamp(5.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.2, .75, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 76px; }

.shell {
  width: min(calc(100% - (2 * var(--pad))), var(--max));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 9999;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--frost);
  transform: translateY(-160%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  min-height: 70px;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid rgba(43, 45, 66, .09);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
}
.nav-logo { display: flex; align-items: center; padding: 8px 4px; margin: -8px -4px; }
.nav-logo-img { width: auto; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  position: relative;
  padding: .7rem 0;
  color: var(--graphite);
  font-size: .82rem;
  font-weight: 500;
}
.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .42rem;
  left: 0;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links .nav-cta {
  margin: 0;
  padding: .48rem 1.2rem;
  background: var(--crimson);
  color: var(--frost);
  font-weight: 600;
}
.nav-links .nav-cta::after { display: none; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform 180ms var(--ease), opacity 180ms var(--ease), background-color 180ms var(--ease);
}

.eyebrow,
.section-code,
.micro-label,
.row-index,
.field-label,
.access-status {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow,
.section-code,
.row-index { color: var(--crimson); }

.framework-hero {
  position: relative;
  min-height: 760px;
  padding-top: 70px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--frost);
}
.hero-shell {
  min-height: 690px;
  padding-block: clamp(7rem, 13vw, 10rem) 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.document-code {
  position: absolute;
  top: 112px;
  right: max(1.2rem, calc((100vw - var(--max)) / 2));
  color: var(--slate);
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.framework-hero .eyebrow { margin-bottom: 1.3rem; }
.framework-hero h1 {
  max-width: 1120px;
  margin-bottom: 2rem;
  font-size: clamp(4rem, 8.2vw, 7.4rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .9;
}
.hero-lead {
  max-width: 960px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  line-height: 1.58;
}
.hero-meta {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.hero-meta div { padding: 1.1rem 1.4rem 0 0; }
.hero-meta div + div { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.hero-meta dt {
  margin-bottom: .25rem;
  color: var(--graphite);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-meta dd { margin: 0; color: var(--slate-text); font-size: .72rem; }

.dossier-section {
  padding-block: var(--section);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.dossier-section.frost { background: var(--frost); }
.section-head {
  display: grid;
  grid-template-columns: minmax(350px, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: end;
}
.section-code { margin-bottom: 1.25rem; }
.section-head h2 {
  margin-bottom: 0;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.04;
}
.section-copy { max-width: 820px; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.15rem); }
.section-copy p { margin-bottom: 1.35rem; }
.section-copy p:last-child { margin-bottom: 0; }

.statement-row {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 3.4rem) 0;
  display: grid;
  grid-template-columns: minmax(160px, .38fr) minmax(0, 1.62fr);
  gap: clamp(2rem, 7vw, 7rem);
  border-top: 1px solid var(--ink);
}
.statement-row .micro-label { color: var(--crimson); }
.statement-row blockquote {
  max-width: 960px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.1vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.stage-list,
.output-list,
.condition-list {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--ink);
}
.stage-row,
.output-row,
.condition-row {
  display: grid;
  grid-template-columns: 72px minmax(245px, .72fr) minmax(0, 1.28fr);
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.stage-row h3,
.output-row h3,
.condition-row h3 {
  margin: 0;
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.3;
}
.stage-row p,
.output-row p,
.condition-row p { max-width: 760px; margin: 0; color: var(--muted); }
.stage-output {
  display: block;
  margin-top: .65rem;
  color: var(--graphite);
  font-size: .78rem;
  line-height: 1.5;
}
.stage-output strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signature-band {
  padding-block: var(--section);
  border-bottom: 1px solid rgba(141, 153, 174, .22);
  background: var(--navy);
  color: var(--frost);
}
.signature-band .section-code { color: var(--coral); }
.signature-band .section-head h2 { color: var(--frost); }
.signature-band .section-copy { color: rgba(237, 242, 244, .76); }
.signature-criteria {
  margin-top: clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(237, 242, 244, .35);
  border-bottom: 1px solid rgba(237, 242, 244, .22);
}
.signature-item { min-height: 230px; padding: 1.8rem 1.8rem 1.8rem 0; }
.signature-item + .signature-item { padding-left: 1.8rem; border-left: 1px solid rgba(237, 242, 244, .22); }
.signature-item .row-index { display: block; margin-bottom: 3.5rem; color: var(--coral); }
.signature-item h3 { margin-bottom: .7rem; font-size: 1.08rem; }
.signature-item p { margin: 0; color: rgba(237, 242, 244, .72); font-size: .92rem; }
.signature-statement {
  max-width: 980px;
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.45rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.requirements-grid,
.boundary-grid {
  margin-top: clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.requirements-column,
.boundary-column { padding: 2rem 3rem 2.4rem 0; }
.requirements-column + .requirements-column,
.boundary-column + .boundary-column { padding-left: 3rem; border-left: 1px solid var(--line); }
.requirements-column h3,
.boundary-column h3 { margin-bottom: 2rem; font-size: 1.15rem; }
.requirements-column dl,
.boundary-column dl { margin: 0; }
.requirement,
.boundary-entry {
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: minmax(110px, .34fr) minmax(0, 1.66fr);
  gap: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.requirement dt,
.boundary-entry dt {
  color: var(--graphite);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
}
.requirement dd,
.boundary-entry dd { margin: 0; color: var(--muted); font-size: .87rem; }

.trace-flow {
  margin-top: clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
.trace-node {
  position: relative;
  min-height: 150px;
  padding: 1.35rem 1.35rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trace-node::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 50%;
  z-index: 2;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: var(--frost);
  color: var(--crimson);
  font-size: .9rem;
  transform: translateY(-50%);
}
.trace-node:nth-child(4n)::after,
.trace-node:last-child::after { display: none; }
.trace-node .micro-label { display: block; margin-bottom: 2.3rem; color: var(--slate-text); }
.trace-node h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.control-register {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.control-item { padding: 1.5rem 1.5rem 0 0; }
.control-item + .control-item { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.control-item h3 { margin-bottom: .7rem; font-size: .92rem; }
.control-item p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }

.case-link {
  margin-top: clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 90px minmax(260px, .78fr) minmax(0, 1.22fr) 42px;
  gap: 2rem;
  align-items: start;
  padding: 2.2rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.case-link .case-index {
  color: var(--slate-text);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  transition: color 180ms var(--ease);
}
.case-link h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.2; }
.case-link p { margin: 0; color: var(--muted); }
.case-link .case-arrow {
  color: var(--crimson);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 180ms var(--ease);
}
.case-link:hover .case-index { color: var(--crimson); }
.case-link:hover .case-arrow { transform: translateX(5px); }

.technical-note-copy {
  max-width: 820px;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}
.technical-note-copy > p { margin: 0; }
.technical-note-action {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.technical-download {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  justify-self: end;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
}
.technical-download .arrow { color: var(--crimson); font-size: 1.05rem; }

.access-section {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--graphite);
  color: var(--frost);
}
.access-grid {
  display: grid;
  grid-template-columns: minmax(350px, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: end;
}
.access-section .section-code { color: var(--coral); }
.access-section h2 {
  margin-bottom: 0;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.04;
}
.access-copy { max-width: 780px; color: rgba(237, 242, 244, .72); font-size: 1.05rem; }
.access-list {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid rgba(237, 242, 244, .4);
}
.access-link {
  display: grid;
  grid-template-columns: 70px minmax(230px, .7fr) minmax(0, 1.3fr) 38px;
  gap: 2rem;
  align-items: start;
  padding: 1.7rem 0;
  border-bottom: 1px solid rgba(237, 242, 244, .18);
}
.access-link .row-index { color: rgba(237, 242, 244, .52); transition: color 180ms var(--ease); }
.access-link h3 { margin: 0; font-size: 1.05rem; }
.access-link p { margin: 0; color: rgba(237, 242, 244, .68); font-size: .88rem; }
.access-link .case-arrow { color: var(--coral); transition: transform 180ms var(--ease); }
.access-link:hover .row-index { color: var(--coral); }
.access-link:hover .case-arrow { transform: translateX(5px); }
.access-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.button {
  min-height: 47px;
  padding: .8rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(237, 242, 244, .6);
  color: var(--frost);
  font-size: .83rem;
  font-weight: 600;
  line-height: 1;
}
.button-primary { border-color: var(--crimson); background: var(--crimson); }
.button .arrow { transition: transform 180ms var(--ease); }
.button:hover .arrow { transform: translateX(4px); }

.footer {
  padding: 2.8rem 0 2rem;
  border-top: 1px solid rgba(141, 153, 174, .12);
  background: var(--ink);
  color: rgba(237, 242, 244, .62);
}
.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-col { display: flex; flex-direction: column; gap: .38rem; }
.footer-col-title {
  margin-bottom: .35rem;
  color: rgba(237, 242, 244, .55);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-col a { padding: .32rem 0; font-size: .74rem; }
.footer-col a:hover { color: var(--frost); }
.footer-bottom {
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid rgba(141, 153, 174, .12);
}
.footer-mark { color: rgba(237, 242, 244, .75); font-family: var(--font-display); font-size: .82rem; }
.footer-tagline { font-size: .7rem; }

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 440ms var(--ease), transform 440ms var(--ease);
}

@media (max-width: 1060px) {
  .site-nav { padding-inline: 1.5rem; }
  .nav-links { gap: 1.25rem; }
  .stage-row,
  .output-row,
  .condition-row { grid-template-columns: 60px minmax(220px, .65fr) minmax(0, 1.35fr); gap: 1.4rem; }
}

@media (max-width: 900px) {
  .site-nav { min-height: 64px; padding: .7rem 1.5rem; backdrop-filter: none; }
  .nav-links { display: none; }
  .nav-links.open {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    background: rgba(43, 45, 66, .99);
  }
  .nav-links.open a { padding: .7rem 1rem; color: var(--frost); font-size: 1.05rem; }
  .nav-links.open a::after { display: none; }
  .nav-links.open .nav-cta { margin-top: .5rem; padding: .7rem 1.5rem; text-align: center; }
  .menu-toggle { position: relative; z-index: 10000; display: block; }
  .menu-toggle[aria-expanded="true"] { position: fixed; top: .65rem; right: 1.1rem; }
  .menu-toggle[aria-expanded="true"] span { background: var(--frost); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
  .framework-hero { min-height: 680px; padding-top: 64px; }
  .hero-shell { min-height: 616px; }
  .section-head,
  .access-grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .statement-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .signature-criteria { grid-template-columns: 1fr; }
  .signature-item { min-height: 0; padding: 1.7rem 0; }
  .signature-item + .signature-item { padding-left: 0; border-top: 1px solid rgba(237, 242, 244, .22); border-left: 0; }
  .signature-item .row-index { margin-bottom: 1rem; }
  .control-register { grid-template-columns: 1fr 1fr; }
  .control-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .control-item:nth-child(n+3) { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .case-link,
  .access-link { grid-template-columns: 60px minmax(210px, .8fr) minmax(0, 1.2fr) 32px; gap: 1.2rem; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

@media (max-width: 680px) {
  :root { --section: 4.75rem; }
  .document-code { display: none; }
  .hero-shell { padding-block: 6rem 3rem; }
  .framework-hero h1 { font-size: clamp(3.35rem, 16.5vw, 5rem); }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta div { padding: 1rem 0; }
  .hero-meta div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .stage-row,
  .output-row,
  .condition-row { grid-template-columns: 38px 1fr; gap: 1rem; }
  .stage-row > div:last-child,
  .output-row > div:last-child,
  .condition-row > div:last-child { grid-column: 2; }
  .requirements-grid,
  .boundary-grid { grid-template-columns: 1fr; }
  .requirements-column,
  .boundary-column { padding: 2rem 0; }
  .requirements-column + .requirements-column,
  .boundary-column + .boundary-column { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .requirement,
  .boundary-entry { grid-template-columns: 1fr; gap: .35rem; }
  .trace-flow { grid-template-columns: 1fr 1fr; }
  .trace-node { min-height: 118px; }
  .trace-node .micro-label { margin-bottom: 1.35rem; }
  .trace-node:nth-child(4n)::after { display: grid; }
  .trace-node:nth-child(2n)::after { display: none; }
  .control-register { grid-template-columns: 1fr; }
  .control-item,
  .control-item + .control-item { padding: 1.35rem 0; border-top: 1px solid var(--line); border-left: 0; }
  .case-link,
  .access-link { grid-template-columns: 38px 1fr 26px; gap: 1rem; }
  .case-link p,
  .access-link p { grid-column: 2 / 4; }
  .case-link .case-arrow,
  .access-link .case-arrow { grid-column: 3; grid-row: 1; }
  .technical-note-action { justify-content: flex-start; }
  .technical-download { justify-self: auto; }
  .access-actions { flex-direction: column; }
  .button { width: 100%; }
  .footer-nav { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 420px) {
  .trace-flow { grid-template-columns: 1fr; }
  .trace-node { min-height: 104px; }
  .trace-node::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}