/* Generated from Paper "ADG Landing-Page" export · 2026-05-19 */
:root {
  --c-adopt:#1F4FE0;
  --c-defend:#C7102D;
  --c-govern:#0E5C3F;
  --c-council:#C77A1A;
  --ground:#FAFAF7;
  --ink:#0A0A0A;
  --mute:#6B6B6B;
  --rule:#E5E2DA;
}

* { box-sizing: border-box; }
/* Page chrome - a soft cream that frames the centered 1440px canvas when the viewport is wider. */
html, body { margin: 0; padding: 0; background: #EFEDE6; }
.adg-landing {
  margin: 0 auto;
  max-width: 1440px;
  background: var(--ground);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

/* ==== Extracted style classes ==== */
.s-df730b {
  background-color: var(--ground);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-synthesis: none;
  height: fit-content;
  line-height: 16px;
  -moz-osx-font-smoothing: grayscale;
  overflow: clip;
  -webkit-font-smoothing: antialiased;
  width: 1440px;
}

.s-6ff2c5 {
  align-items: center;
  background-color: var(--ground);
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-block: 28px;
  padding-inline: 64px;
  width: 100%;
}

.s-2b5bc0 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 24px;
}

.s-65a75e {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
}

.s-a8c698 {
  align-items: center;
  background-color: var(--ink);
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.s-db8bcd {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
}

.s-84723e {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 22px;
}

.s-1c03d9 {
  background-color: var(--rule);
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 14px;
  width: 1px;
}

.s-bfa508 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-007837 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
}

.s-7e9805 {
  align-items: center;
  background-color: #160709;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  padding-block: 10px;
  padding-inline: 16px;
}

.s-473a7a {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-82f492 {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  line-height: 14px;
}

.s-fb4973 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-bottom: 120px;
  padding-left: 64px;
  padding-right: 64px;
  padding-top: 96px;
  width: 100%;
}

.s-fffdad {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  padding-bottom: 48px;
}

.s-dab4f9 {
  align-items: center;
  background-color: var(--ground);
  border-color: var(--rule);
  border-radius: 999px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: inline-flex;
  gap: 8px;
  padding-block: 6px;
  padding-inline: 12px;
}

.s-f917d7 {
  background-color: var(--c-adopt);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.s-6d811b {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-4faa15 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-bde36d {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 1180px;
}

.s-9ec9c8 {
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 128px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 108px;
  white-space: normal;
  text-align: left;
}

.s-2d9306 {
  align-items: flex-end;
  box-sizing: border-box;
  display: flex;
  gap: 80px;
  justify-content: space-between;
  padding-top: 56px;
}

.s-f35c4b {
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: -0.005em;
  line-height: 34px;
  max-width: 640px;
}

.s-5f19b3 {
  align-items: flex-end;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s-f6026a {
  box-sizing: border-box;
  display: flex;
  gap: 10px;
}

.s-db2ba5 {
  align-items: center;
  background-color: #160709;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  padding-block: 16px;
  padding-inline: 22px;
}

.s-c88c43 {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-569a3d {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.s-2ede97 {
  align-items: center;
  background-color: #160709;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  padding-block: 16px;
  padding-inline: 22px;
}

.s-993e4d {
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-41ab49 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  line-height: 16px;
}

.s-d24f62 {
  align-items: flex-end;
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  gap: 80px;
  margin-top: 80px;
  padding-top: 96px;
}

.s-f5d5b8 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-b79ce8 {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 72px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 64px;
}

.s-a9f469 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 14px;
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
}

.s-5448f5 {
  background-color: var(--rule);
  box-sizing: border-box;
  flex-shrink: 0;
  height: 80px;
  width: 1px;
}

.s-771e12 {
  background-color: var(--ground);
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 64px;
  width: 100%;
}

.s-2e46b4 {
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: space-between;
}

.s-9efd81 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-5df584 {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.s-213442 {
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  background-origin: border-box;
  border-color: #DC262666;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  box-shadow: #00000059 0px 8px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: clip;
  width: 100%;
}

.s-5ea2f5 {
  align-items: center;
  background-image: linear-gradient(in oklab 135deg, oklab(57.7% 0.191 0.099 / 35%) 0%, oklab(39.6% 0.120 0.058 / 25%) 50%, oklab(0% 0 0 / 40%) 100%);
  background-origin: border-box;
  border-bottom-color: #DC262666;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  padding-block: 18px;
  padding-inline: 24px;
}

.s-3b54b7 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s-f65ccf {
  box-sizing: border-box;
  color: #FCA5A5;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-7cd659 {
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 22px;
}

.s-b9ba36 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.s-085e93 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
}

.s-62af00 {
  background-color: #60A5FA40;
  border-color: #60A5FA;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}

.s-9a1501 {
  box-sizing: border-box;
  color: #FFFFFFB3;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 14px;
}

.s-f80f34 {
  background-color: #34D39940;
  border-color: #34D399;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}

.s-0cf3ad {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  padding-block: 32px;
  padding-inline: 24px;
  width: 100%;
}

.s-26dbbf {
  box-sizing: border-box;
  display: flex;
  flex-basis: 240px;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 8px;
}

.s-5a1ffc {
  box-sizing: border-box;
  display: inline-block;
  padding-bottom: 12px;
  padding-left: 4px;
  padding-right: 4px;
}

.s-711308 {
  box-sizing: border-box;
  color: #FFFFFF73;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-c50775 {
  background-color: var(--ink)8C;
  border-color: #60A5FA73;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 8px;
  padding-inline: 12px;
}

.s-5c138f {
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.s-e5dc05 {
  box-sizing: border-box;
  color: #FFFFFF99;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 9.5px;
  line-height: 12px;
}

.s-0f045a {
  background-color: var(--ink)8C;
  border-color: #F871718C;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 8px;
  padding-inline: 12px;
}

.s-3829d3 {
  background-color: var(--ink)8C;
  border-color: #34D3998C;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 8px;
  padding-inline: 12px;
}

.s-2ca69e {
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  min-width: 80px;
}

.s-dd98c0 {
  opacity: 0.35;
  flex-shrink: 0;
}

.s-b9d00b {
  box-sizing: border-box;
  display: flex;
  flex-basis: 220px;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 8px;
  padding-top: 40px;
}

.s-02a51b {
  box-sizing: border-box;
  color: #93C5FD;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
}

.s-3862db {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.s-cf4d5b {
  background-color: #60A5FA2E;
  border-color: #60A5FA;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 14px;
  padding-inline: 16px;
}

.s-88a997 {
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.s-1df6da {
  box-sizing: border-box;
  color: #FFFFFF99;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

.s-4354af {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 80px;
}

.s-aac507 {
  box-sizing: border-box;
  display: flex;
  flex-basis: 220px;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 8px;
}

.s-ab80de {
  box-sizing: border-box;
  color: #6EE7B7;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
}

.s-ba5893 {
  background-color: #34D3991A;
  border-color: #34D39959;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 8px;
  padding-inline: 12px;
}

.s-ed4114 {
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

.s-208ba1 {
  box-sizing: border-box;
  color: #FFFFFF80;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
}

/* === §11.2 Crosswalk · Glass morphism === */
.mc-xwalk-body {
  box-sizing: border-box;
  padding: 24px 28px 32px;
  width: 100%;
}
.mc-xwalk-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
}
.mc-xwalk-hint {
  color: rgba(255,255,255,0.55);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  margin-top: 18px;
  text-align: center;
  text-transform: uppercase;
}

/* Detail panel */
.mc-xwalk-detail {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid rgba(255,255,255,0.2);
  border-radius: 0 10px 10px 0;
  color: rgba(255,255,255,0.85);
  display: none;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  margin-top: 18px;
  padding: 16px 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mc-xwalk-detail.open { display: block; }
.mc-xwalk-detail.pillar-adopt  { border-left-color: #1F4FE0; }
.mc-xwalk-detail.pillar-defend { border-left-color: #C7102D; }
.mc-xwalk-detail.pillar-govern { border-left-color: #0E5C3F; }

.mc-xwalk-detail .detail-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.mc-xwalk-detail .detail-id {
  color: rgba(255,255,255,0.7);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.mc-xwalk-detail .detail-label {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}
.mc-xwalk-detail .detail-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.mc-xwalk-detail .detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-xwalk-detail .detail-tag {
  color: rgba(255,255,255,0.5);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin-right: 8px;
  padding-top: 4px;
  text-transform: uppercase;
  width: 90px;
}
.mc-xwalk-detail .chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10.5px;
  padding: 4px 10px;
}
.mc-xwalk-detail .chip-nist {
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.30);
  color: #BFDBFE;
}
.mc-xwalk-detail .chip-iso {
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.30);
  color: #A7F3D0;
}

/* === SVG layers === */

/* Column headers */
.mc-xwalk-svg .col-header {
  font-family: "Geist Mono", "Geist", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-xwalk-svg .col-header-mc   { fill: rgba(255,255,255,0.70); }
.mc-xwalk-svg .col-header-nist { fill: #93C5FD; }
.mc-xwalk-svg .col-header-iso  { fill: #6EE7B7; }

/* MC pills - glass */
.mc-xwalk-svg .mc-pill { cursor: pointer; outline: none; transition: opacity .18s ease; }
.mc-xwalk-svg .mc-pill .mc-rect {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  transition: fill .18s ease, stroke .18s ease;
}
.mc-xwalk-svg .mc-pill .mc-rect-inner {
  fill: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
  pointer-events: none;
}
.mc-xwalk-svg .mc-pill .mc-accent { pointer-events: none; opacity: 0.85; }
.mc-xwalk-svg .mc-pill:hover .mc-rect,
.mc-xwalk-svg .mc-pill:focus .mc-rect { stroke: rgba(255,255,255,0.35); }
.mc-xwalk-svg .mc-id {
  fill: #FFFFFF;
  font-family: "Geist Mono", "Geist", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  pointer-events: none;
}
.mc-xwalk-svg .mc-name {
  fill: rgba(255,255,255,0.70);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  pointer-events: none;
}
.mc-xwalk-svg.focused .mc-pill:not(.active) { opacity: 0.20; }
.mc-xwalk-svg .mc-pill.active .mc-rect { stroke-width: 1.6; }
.mc-xwalk-svg .mc-pill.active.p-adopt  .mc-rect { stroke: rgba(31,79,224,0.85);  fill: rgba(31,79,224,0.18); }
.mc-xwalk-svg .mc-pill.active.p-defend .mc-rect { stroke: rgba(199,16,45,0.85);  fill: rgba(199,16,45,0.18); }
.mc-xwalk-svg .mc-pill.active.p-govern .mc-rect { stroke: rgba(14,92,63,0.95);   fill: rgba(14,92,63,0.22);  }

/* Domain label cards - glass */
.mc-xwalk-svg .dom-label { transition: opacity .18s ease; }
.mc-xwalk-svg .dom-label .dom-rect {
  stroke-width: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease;
}
.mc-xwalk-svg .dom-nist .dom-rect {
  fill: rgba(96,165,250,0.06);
  stroke: rgba(96,165,250,0.28);
}
.mc-xwalk-svg .dom-iso .dom-rect {
  fill: rgba(52,211,153,0.06);
  stroke: rgba(52,211,153,0.28);
}
.mc-xwalk-svg .dom-name {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 700;
  pointer-events: none;
}
.mc-xwalk-svg .dom-desc {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 400;
  pointer-events: none;
}
.mc-xwalk-svg .dom-name-nist { fill: #E0EAFF; font-size: 12px; }
.mc-xwalk-svg .dom-desc-nist { fill: rgba(224,234,255,0.55); font-size: 9.5px; }
.mc-xwalk-svg .dom-name-iso  { fill: #D1FAE5; font-size: 10.5px; }
.mc-xwalk-svg .dom-desc-iso  { fill: rgba(209,250,229,0.55); font-size: 8.5px; }

.mc-xwalk-svg.focused .dom-label:not(.highlight) { opacity: 0.25; }
.mc-xwalk-svg .dom-nist.highlight .dom-rect { fill: rgba(96,165,250,0.18); stroke: #60A5FA; stroke-width: 1.6; }
.mc-xwalk-svg .dom-iso.highlight  .dom-rect { fill: rgba(52,211,153,0.18); stroke: #34D399; stroke-width: 1.6; }

/* Arcs */
.mc-xwalk-svg .arc {
  fill: none;
  pointer-events: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
  transition: opacity .18s ease, stroke-width .18s ease;
}
.mc-xwalk-svg.focused .arc { opacity: 0.04; }
.mc-xwalk-svg .arc.on { opacity: 1; stroke-width: 1.5; }
.mc-xwalk-svg .arc-nist.on { stroke: rgba(96,165,250,0.85); }
.mc-xwalk-svg .arc-iso.on  { stroke: rgba(52,211,153,0.85); }
/* === §11.2 Crosswalk · end === */


.s-6355b9 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 140px;
  padding-inline: 64px;
  width: 100%;
}

.s-091e5c {
  align-items: flex-end;
  box-sizing: border-box;
  display: flex;
  gap: 80px;
  justify-content: space-between;
}

/* Left-align section headers - pillars, coverage, audience, footer CTA.
   Advisory section (.s-010216) is intentionally NOT in this selector - preserved as-is. */
.s-6355b9 .s-091e5c,
.s-e679f2 .s-091e5c,
.s-f577f5 .s-091e5c,
.s-c2ea85 .s-091e5c {
  align-items: flex-start;
  flex-direction: column;
  gap: 28px;
}
.s-6355b9 .s-091e5c .s-b409a2,
.s-e679f2 .s-091e5c .s-5961af,
.s-f577f5 .s-091e5c .s-71a855,
.s-c2ea85 .s-091e5c .s-71a855 {
  height: auto;
  max-width: 640px;
  text-align: left;
}

/* Footer CTA: stack heading block + buttons vertically, left-aligned */
.s-c2ea85 .s-0d2669 {
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Hero: left-align headline cluster, lead paragraph, CTAs, and stat row */
.s-2d9306 {
  align-items: flex-start !important;
  flex-direction: column;
  gap: 32px !important;
  justify-content: flex-start !important;
}
.s-5f19b3 {
  align-items: flex-start !important;
}
.s-d24f62 {
  justify-content: flex-start;
}

.s-21a6de {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
}

.s-d52662 {
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 64px;
  white-space: normal;
  text-align: left;
}

.s-b409a2 {
  box-sizing: border-box;
  color: var(--mute);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  height: 166px;
  letter-spacing: -0.005em;
  line-height: 28px;
  max-width: 420px;
}

.s-d3e30b {
  border-top-color: var(--ink);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.s-b1527c {
  background-color: var(--ground);
  border-right-color: var(--rule);
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

.s-09ec29 {
  align-items: center;
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  padding-right: 32px;
  padding-top: 24px;
}

.s-f5383f {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 14px;
}

.s-26c6c1 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 16px;
}

.s-72670b {
  background-color: var(--c-adopt);
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.s-9beea7 {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 22px;
  text-transform: uppercase;
}

.s-d21ce6 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-bedc33 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  padding-right: 32px;
  padding-top: 40px;
}

.s-302f32 {
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 40px;
}

.s-c2fde5 {
  box-sizing: border-box;
  color: #1A1A1A;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  line-height: 30px;
}

.s-c979db {
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

.s-0ed0d5 {
  align-items: baseline;
  box-sizing: border-box;
  display: flex;
  gap: 14px;
}

.s-904af2 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  flex-shrink: 0;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 12px;
  width: 24px;
}

.s-5167f4 {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

.s-1612bf {
  align-items: center;
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-block: 24px;
  padding-inline: 32px;
}

.s-6e83bc {
  background-color: var(--c-defend);
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.s-c85813 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 40px;
  padding-inline: 32px;
}

.s-daf92e {
  background-color: var(--ground);
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

.s-a3016e {
  align-items: center;
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  padding-left: 32px;
  padding-top: 24px;
}

.s-afe15d {
  background-color: var(--c-govern);
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.s-6ad532 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  padding-left: 32px;
  padding-top: 40px;
}

.s-98e812 {
  align-items: center;
  border-bottom-color: var(--ink);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  gap: 48px;
  justify-content: space-between;
  padding-block: 32px;
  width: 100%;
}

.s-438530 {
  background-color: var(--c-council);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

.s-7c31a9 {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 28px;
}

.s-c8dbd2 {
  box-sizing: border-box;
  color: var(--mute);
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  max-width: 720px;
  text-align: right;
}

.s-e679f2 {
  background-color: var(--ink);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 140px;
  padding-inline: 64px;
  width: 100%;
}

.s-0d2015 {
  box-sizing: border-box;
  color: #555555;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-fa3913 {
  box-sizing: border-box;
  color: var(--ground);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 64px;
  white-space: normal;
  text-align: left;
}

.s-5961af {
  box-sizing: border-box;
  color: #1A1A1A;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 30px;
  max-width: 460px;
}

.s-b4da45 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.s-76faae {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.s-e9b0de {
  box-sizing: border-box;
  color: #555555;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-803e07 {
  box-sizing: border-box;
  color: #555555;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 16px;
  text-transform: uppercase;
}

.s-31f746 {
  background-color: #111111;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border-color: #2A2A2A;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.s-b8b76c {
  border-right-color: #2A2A2A;
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 12px;
  padding-block: 32px;
  padding-inline: 24px;
}

.s-77aad2 {
  box-sizing: border-box;
  color: #5A5A5A;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 12px;
}

.s-ec1c58 {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 28px;
}

.s-7eddb1 {
  box-sizing: border-box;
  color: #9A9A9A;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

.s-820436 {
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 12px;
  padding-block: 32px;
  padding-inline: 24px;
}

.s-62ab15 {
  border-right-color: #2A2A2A;
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 10px;
  padding: 24px;
}

.s-4cde6a {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 20px;
}

.s-8a9421 {
  background-color: var(--c-defend);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.s-4ce8fb {
  background-color: var(--c-council);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.s-579651 {
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 10px;
  padding: 24px;
}

.s-f9b085 {
  background-color: var(--c-govern);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.s-c92d38 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 32px;
  width: 100%;
}

.s-49b681 {
  box-sizing: border-box;
  display: flex;
  gap: 24px;
  width: 100%;
}

.s-a753a6 {
  background-color: #111111;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border-color: #2A2A2A;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 14px;
  padding: 32px;
}

.s-d01cb5 {
  box-sizing: border-box;
  color: #8A8A8A;
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 14px;
}

.s-700f68 {
  box-sizing: border-box;
  color: var(--ground);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 34px;
}

.s-acc7ce {
  box-sizing: border-box;
  color: #9A9A9A;
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.s-f577f5 {
  background-color: var(--ground);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 140px;
  padding-inline: 64px;
  width: 100%;
}

.s-71a855 {
  box-sizing: border-box;
  color: var(--mute);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 28px;
  max-width: 420px;
}

.s-abd68b {
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: var(--ink);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.s-a52ba9 {
  border-right-color: var(--rule);
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 24px;
  padding-bottom: 48px;
  padding-right: 32px;
  padding-top: 48px;
}

.s-5a68bf {
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 36px;
}

.s-8c82d6 {
  box-sizing: border-box;
  color: #1A1A1A;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 18px;
  line-height: 30px;
}

/* Highlighted persona CTA → the Skill Check. Reddish-black gradient (matches the
   section backdrops + framework button) so it reads as a distinct clickable button. */
.persona-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: #160709;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: var(--ground);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.persona-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(160, 20, 20, 0.5);
}

.s-09b7c9 {
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}

.s-a3c737 {
  box-sizing: border-box;
  color: var(--c-adopt);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 12px;
}

.s-24ec0f {
  border-right-color: var(--rule);
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 24px;
  padding-block: 48px;
  padding-inline: 32px;
}

.s-614bbe {
  box-sizing: border-box;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  gap: 24px;
  padding-bottom: 48px;
  padding-left: 32px;
  padding-top: 48px;
}

.s-010216 {
  background-color: var(--ground);
  border-top-color: var(--rule);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 140px;
  padding-inline: 64px;
  width: 100%;
}

.s-88f3ea {
  border-top-color: var(--ink);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Advisor list (rebuild) */
.adv-wrap {
  border-top: 1px solid var(--ink);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 32px;
  width: 100%;
}
.adv-eyebrow {
  color: var(--mute);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 14px;
  text-transform: uppercase;
}
.adv-eyebrow-2 { margin-top: 28px; }
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.adv-grid-more { margin-top: 12px; }
.adv-card {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: 16px 18px;
}
.adv-name {
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
}
.adv-title {
  color: var(--mute);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 14px;
}
.adv-org {
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  margin-top: auto;
}
.adv-more { margin-top: 8px; }
.adv-more-btn {
  cursor: pointer;
  color: var(--c-adopt);
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 14px;
  list-style: none;
  padding: 14px 16px;
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  user-select: none;
}
.adv-more-btn::-webkit-details-marker { display: none; }
.adv-more[open] .adv-more-btn { color: var(--mute); }

.s-b3e2b3 {
  align-items: center;
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-right-color: var(--rule);
  border-right-style: solid;
  border-right-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 25%;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 14px;
  padding-block: 24px;
  padding-inline: 28px;
}

.s-648045 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s-27abdf {
  box-sizing: border-box;
  color: var(--ink);
  display: inline-block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
}

.s-255c7c {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 12px;
}

.s-718ae4 {
  align-items: center;
  border-bottom-color: var(--rule);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  display: flex;
  flex-basis: 25%;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 14px;
  padding-block: 24px;
  padding-inline: 28px;
}

.s-15aede {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  gap: 14px;
  justify-content: flex-start;
  padding-block: 24px;
  padding-inline: 28px;
}

.s-890e19 {
  box-sizing: border-box;
  color: var(--c-adopt);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-229f21 {
  box-sizing: border-box;
  color: var(--mute);
  display: inline-block;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 14px;
  text-transform: uppercase;
}

.s-c2ea85 {
  background-color: var(--ink);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-bottom: 80px;
  padding-left: 64px;
  padding-right: 64px;
  padding-top: 160px;
  width: 100%;
}

.s-508d9c {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 980px;
}

.s-8ddd53 {
  box-sizing: border-box;
  color: var(--ground);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 88px;
  white-space: normal;
  text-align: left;
}

.s-ebcf2e {
  box-sizing: border-box;
  color: #9A9A9A;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 20px;
  line-height: 30px;
  max-width: 680px;
}

.s-0d2669 {
  align-items: flex-end;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-deff2c {
  align-items: center;
  background-color: #160709;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058) 0%, oklab(23.6% 0.069 0.033) 35%, oklab(15.2% 0.039 0.017) 65%, oklab(0% 0 0) 100%);
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  padding-block: 18px;
  padding-inline: 26px;
}

.s-425767 {
  align-items: center;
  border-color: var(--ground);
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  padding-block: 18px;
  padding-inline: 26px;
}


/* === Tegaki handwriting hero === */
/* The custom element loads from esm.sh on first paint. Reserve approximately
   the headline's visual height so the page doesn't layout-shift while the
   bundle downloads. Two lines of Caveat at ~128px ≈ 240px stack. */
.tegaki-headline {
  margin: 0;
  display: block;
  min-height: 240px;
}
.tegaki-headline tegaki-renderer {
  display: block;
  width: 100%;
}
.tegaki-headline noscript {
  /* Fallback only renders when JS is off - keep the headline visible then. */
  display: block;
  white-space: pre-wrap;
}
/* Pin the handwriting glyph color. tegaki paints the <canvas> using the element's
   *computed* CSS `color` (it reads getComputedStyle(el).color and uses it as
   ctx.strokeStyle); there is NO color/fill attribute on <tegaki-renderer>. Without
   an explicit, high-specificity value, a stale stylesheet, a browser extension, or
   Windows High-Contrast / forced-colors can resolve `color` to white and the strokes
   paint white-on-cream (invisible) - the "headline shows up white" report on Edge. */
.tegaki-headline,
.tegaki-headline tegaki-renderer { color: #0A0A0A !important; }
@media (forced-colors: active) {
  /* Canvas rasters can't adapt to forced colors; paint with the system text color
     so the headline stays visible in High-Contrast mode instead of going white. */
  .tegaki-headline,
  .tegaki-headline tegaki-renderer { color: CanvasText !important; }
}

/* === Brand cluster reveal (ADG + Adopt · Defend · Govern) ===
   Each letter of ADG fades up in its pillar color, then the three words
   below cascade out. Total ~1.25s, plays once. Pairs with the tegaki
   handwriting hero reveal so the top of the page reads as one orchestrated
   entrance. */
@keyframes brand-reveal-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brand-acronym { display: inline-flex; gap: 0; }
.brand-letter {
  display: inline-block;
  opacity: 0;
  animation: brand-reveal-up 0.45s cubic-bezier(.2,.7,.2,1) forwards;
  font-weight: 700;
}
.brand-letter--a { animation-delay: 0ms;   color: var(--c-adopt); }
.brand-letter--d { animation-delay: 150ms; color: var(--c-defend); }
.brand-letter--g { animation-delay: 300ms; color: var(--c-govern); }

.brand-tag .brand-word {
  display: inline-block;
  opacity: 0;
  animation: brand-reveal-up 0.45s cubic-bezier(.2,.7,.2,1) forwards;
}
.brand-tag .brand-word--adopt  { animation-delay: 500ms; }
.brand-tag .brand-dot:nth-of-type(2) { animation-delay: 575ms; }
.brand-tag .brand-word--defend { animation-delay: 650ms; }
.brand-tag .brand-dot:nth-of-type(4) { animation-delay: 725ms; }
.brand-tag .brand-word--govern { animation-delay: 800ms; }

@media (prefers-reduced-motion: reduce) {
  .brand-letter,
  .brand-tag .brand-word { opacity: 1; animation: none; }
}

/* Centered brand cluster in the top bar.
   The top bar uses flex justify-between for the logo (left) and CTA (right);
   the brand center sits absolute over the middle so it stays optically centered
   regardless of the side cluster widths. */
.brand-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none; /* lets clicks pass through to anything underneath; brand itself is non-interactive */
}
.brand-acronym--big {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand-acronym--big .brand-letter {
  padding: 0 2px;
}

/* ============================================================= */
/* GET INVOLVED · quick-access CTA band (dark standout strip)    */
/* ============================================================= */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 74px 64px;
  background-color: #0a0b0d;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058 / 0.5) 0%, oklab(23.6% 0.069 0.033 / 0.58) 40%, oklab(15.2% 0.039 0.017 / 0.66) 75%, oklab(0% 0 0 / 0.74) 100%), url('AUvQB.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--rule);
  font-family: 'Geist', sans-serif;
}
/* tri-pillar signature hairline */
.cta-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-adopt), var(--c-defend), var(--c-govern), var(--c-council));
}
.cta-band-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px; }
.cta-band-head { display: flex; flex-direction: column; gap: 12px; }
.cta-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.cta-title {
  margin: 0;
  font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; color: #fff;
}
.cta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cta-box {
  --cc: #ffffff;
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 22px; border-radius: 16px; text-decoration: none;
  background: rgba(8,10,14,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.cta-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cc); opacity: 0.9;
}
.cta-box:hover {
  transform: translateY(-4px);
  border-color: var(--cc);
  background: rgba(8,10,14,0.78);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 28px -6px var(--cc);
}
.cta-ico { font-size: 1.55rem; line-height: 1; margin-bottom: 18px; }
.cta-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cc); margin-bottom: 11px;
}
.cta-name {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: #fff;
  line-height: 1.28; margin-bottom: 22px;
}
.cta-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.78);
  transition: gap 0.22s ease, color 0.22s ease;
}
.cta-go i { font-style: normal; color: var(--cc); }
.cta-box:hover .cta-go { color: #fff; gap: 11px; }
.cta-box.adopt   { --cc: var(--c-adopt); }
.cta-box.defend  { --cc: var(--c-defend); }
.cta-box.govern  { --cc: var(--c-govern); }
.cta-box.council { --cc: var(--c-council); }
/* staggered fade-in on scroll into view (progressive enhancement - visible without JS) */
.cta-band.cta-anim .cta-box { opacity: 0; }
.cta-band.cta-anim.in .cta-box { animation: ctaFadeIn 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
.cta-band.cta-anim.in .cta-box:nth-child(1) { animation-delay: 0.04s; }
.cta-band.cta-anim.in .cta-box:nth-child(2) { animation-delay: 0.12s; }
.cta-band.cta-anim.in .cta-box:nth-child(3) { animation-delay: 0.20s; }
.cta-band.cta-anim.in .cta-box:nth-child(4) { animation-delay: 0.28s; }
@keyframes ctaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cta-band.cta-anim .cta-box { opacity: 1; }
  .cta-band.cta-anim.in .cta-box { animation: none; }
  .cta-box, .cta-go { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §03 Coverage - dark grid backdrop
   Matches the aesthetic of .cta-band: AUvQB.jpg grid, translucent glass cards,
   white headings, muted light body, accent pops.
   EVERY selector below is scoped to .s-e679f2 - no existing rule is modified.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Backdrop: same image as .cta-band - NO dark overlay so grid is clearly visible */
.s-e679f2 {
  background-color: #0a0b0d;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058 / 0.5) 0%, oklab(23.6% 0.069 0.033 / 0.58) 40%, oklab(15.2% 0.039 0.017 / 0.66) 75%, oklab(0% 0 0 / 0.74) 100%), url('AUvQB.jpg');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
  /* tri-pillar signature hairline at the top of this section */
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--c-adopt), var(--c-defend), var(--c-govern), var(--c-council)) 1;
}

/* 2. Section label: mono eyebrow, muted light - mirrors .cta-eyebrow */
.s-e679f2 .s-0d2015 {
  color: rgba(255,255,255,0.80);
}

/* 3. Big heading → pure white */
.s-e679f2 .s-fa3913 {
  color: #fff;
}

/* 4. Intro paragraph → light gray */
.s-e679f2 .s-5961af {
  color: rgba(255,255,255,0.72);
}

/* 5. Panel eyebrow labels → white (readable on dark grid) */
.s-e679f2 .s-e9b0de {
  color: #fff;
}

/* 6. Panel subtitles → readable light */
.s-e679f2 .s-803e07 {
  color: rgba(255,255,255,0.72);
}

/* 7. Pipeline row wrapper (.s-31f746) → solid dark panel */
.s-e679f2 .s-31f746 {
  background-color: rgba(8,10,14,0.60);
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* 8. Pipeline surface cells (.s-b8b76c - with right border, .s-820436 - last cell, no right border)
      → solid dark panels; right-border dividers softened */
.s-e679f2 .s-b8b76c {
  background: rgba(8,10,14,0.60);
  border-right-color: rgba(255,255,255,0.1);
  transition: background 0.22s ease;
}
.s-e679f2 .s-b8b76c:hover {
  background: rgba(8,10,14,0.78);
}
.s-e679f2 .s-820436 {
  background: rgba(8,10,14,0.60);
  transition: background 0.22s ease;
}
.s-e679f2 .s-820436:hover {
  background: rgba(8,10,14,0.78);
}

/* 9. Surface number tag → white (readable on solid dark card) */
.s-e679f2 .s-77aad2 {
  color: #fff;
  opacity: 0.90;
}

/* 10. Surface name → white */
.s-e679f2 .s-ec1c58 {
  color: #fff;
}

/* 11. Surface description → legible light */
.s-e679f2 .s-7eddb1 {
  color: rgba(255,255,255,0.80);
}

/* 12. Cross-cutting band cells (.s-62ab15 with right border, .s-579651 last)
       → solid dark panels; right-border dividers softened */
.s-e679f2 .s-62ab15 {
  background: rgba(8,10,14,0.60);
  border-color: rgba(255,255,255,0.1);
  border-style: solid;
  border-width: 1px;
  border-right-color: rgba(255,255,255,0.1);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.s-e679f2 .s-62ab15:hover {
  background: rgba(8,10,14,0.78);
}
.s-e679f2 .s-579651 {
  background: rgba(8,10,14,0.60);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.s-e679f2 .s-579651:hover {
  background: rgba(8,10,14,0.78);
}

/* 13. Cross-cutting row wrapper (.s-65a75e) - layout only, no bg change needed */

/* 14. Cross-cutting name → white */
.s-e679f2 .s-4cde6a {
  color: #fff;
}

/* 15. Colored dots - keep/brighten pillar colors so they pop on dark
       (scoped; base .s-f917d7 / .s-8a9421 / .s-4ce8fb / .s-f9b085 are NOT touched) */
.s-e679f2 .s-f917d7 {
  background-color: var(--c-adopt);
  box-shadow: 0 0 5px 1px var(--c-adopt);
}
.s-e679f2 .s-8a9421 {
  background-color: var(--c-defend);
  box-shadow: 0 0 5px 1px var(--c-defend);
}
.s-e679f2 .s-4ce8fb {
  background-color: var(--c-council);
  box-shadow: 0 0 5px 1px var(--c-council);
}
.s-e679f2 .s-f9b085 {
  background-color: var(--c-govern);
  box-shadow: 0 0 5px 1px var(--c-govern);
}

/* 16. Harm-class cards (.s-a753a6) → solid dark panels with hover lift */
.s-e679f2 .s-a753a6 {
  background: rgba(8,10,14,0.60);
  border-color: rgba(255,255,255,0.12);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.s-e679f2 .s-a753a6:hover {
  transform: translateY(-4px);
  background: rgba(8,10,14,0.78);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}

/* 17. Harm-class number ("H · 01") → white (readable on solid dark card) */
.s-e679f2 .s-d01cb5 {
  color: #fff;
}

/* 18. Harm-class title → white */
.s-e679f2 .s-700f68 {
  color: #fff;
}

/* 19. Harm-class description → legible light */
.s-e679f2 .s-acc7ce {
  color: rgba(255,255,255,0.80);
}

/* 20. Any internal dividers that may use --rule → softened white */
.s-e679f2 .s-76faae {
  border-color: rgba(255,255,255,0.10);
}

@media (prefers-reduced-motion: reduce) {
  .s-e679f2 .s-b8b76c,
  .s-e679f2 .s-820436,
  .s-e679f2 .s-62ab15,
  .s-e679f2 .s-579651,
  .s-e679f2 .s-a753a6 { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §06 Adopt the framework - dark grid backdrop
   Same AUvQB.jpg grid as .cta-band and §03. NO dark overlay - grid stays
   clearly visible. All content overrides are scoped under .s-c2ea85 so no
   shared base rule is modified.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Backdrop - identical to §03 / .cta-band treatment */
.s-c2ea85 {
  background-color: #0a0b0d;
  background-image: linear-gradient(in oklab 135deg, oklab(39.6% 0.120 0.058 / 0.5) 0%, oklab(23.6% 0.069 0.033 / 0.58) 40%, oklab(15.2% 0.039 0.017 / 0.66) 75%, oklab(0% 0 0 / 0.74) 100%), url('AUvQB.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* 2. Section label "§ 06 · Adopt the framework"
      .s-0d2015 is SHARED (also used in §03) - scoped here, never touched bare */
.s-c2ea85 .s-0d2015 {
  color: rgba(255,255,255,0.82);
}

/* 3. Large heading "Read it. Implement it. Help shape v2." → pure white
      .s-8ddd53 base is already var(--ground), which renders as white on dark;
      explicit override locks it against any future base-rule change */
.s-c2ea85 .s-8ddd53 {
  color: #fff;
}

/* 4. Body paragraph → bright white with subtle text-shadow for legibility
      directly over the grid texture */
.s-c2ea85 .s-ebcf2e {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* 5. PRIMARY button (.s-deff2c - "Read the Framework")
      On the dark grid, switch from blue fill to a bright white solid button
      with dark text so it pops clearly. */
.s-c2ea85 .s-deff2c {
  background-color: #fff;
  border-radius: 2px;
}

/* 5a. Primary button label (.s-c88c43): light text on the reddish-black button */
.s-c2ea85 .s-c88c43 {
  color: var(--ground);
}

/* 5b. Primary button arrow (.s-569a3d): light text on the reddish-black button */
.s-c2ea85 .s-569a3d {
  color: var(--ground);
}

/* 6. SECONDARY button (.s-425767 - "Download brief · PDF")
      Glass/outlined style: light border + white text, translucent background */
.s-c2ea85 .s-425767 {
  background-color: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.40);
  color: rgba(255,255,255,0.85);
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.s-c2ea85 .s-425767:hover {
  background-color: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.70);
}

/* Ensure any text children inside the secondary button inherit the light colour */
.s-c2ea85 .s-425767 * {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .s-c2ea85 .s-425767 { transition: none; }
}

/* ========================================================
   RESPONSIVE OVERRIDES — ADG Landing Page Improvements
   Added to make the Paper-exported landing usable on real
   devices while preserving *exact* desktop fidelity at
   viewport >= 1024px (and perfect at 1440px canvas).

   Strategy:
   - .adg-landing and root canvas become fluid
   - Paddings, gaps, and type scale down gracefully
   - Grids (stats, CTAs, pillars) reflow
   - Complex interactive viz (crosswalk) gets horizontal
     scroll affordance on phones rather than breaking
   - All rules are low-specificity or appended last so a
     future full Paper re-export + re-append of this block
     continues to work. No changes to generated .s- hashes.

   Desktop unchanged. Tablet 768-1023. Phone < 768.
   ======================================================== */

/* --------------------------------------------------------------
   FLUID HERO + SECTION HEADLINES (root cause of "skewed on Safari")
   The Paper export hard-codes the hero <h1> .s-9ec9c8 at 128px with
   line-height 108px and NO mobile rule, so on a phone the word
   "governance" is forced into ~262px and wraps one letter per line
   (The / gov / ern / ance). The tegaki canvas paints from the
   *computed* font-size, and its plain-text/noscript fallback inherits
   the same .s-9ec9c8 rule, so clamping this one selector fixes the
   canvas hero AND the fallback. Apply at all widths (clamp keeps the
   1024px+ value pinned at 128px so desktop is byte-identical).
   -------------------------------------------------------------- */
.s-9ec9c8 {
  font-size: clamp(34px, 11vw, 128px);
  line-height: 1.05;
  overflow-wrap: break-word; /* last-resort guard; clamp should prevent wrapping */
}
/* tegaki reserves a fixed 240px void (two ~128px lines). Once the type
   is fluid the reserved height must scale with it or a giant gap opens
   above the lead paragraph on phones. */
.tegaki-headline {
  min-height: clamp(120px, 28vw, 240px);
}

@media (max-width: 1024px) {
  /* Outer canvas: stop being a rigid 1440px slab */
  .adg-landing {
    max-width: 100%;
    box-shadow: none; /* remove the thin frame shadow on smaller viewports */
  }
  .s-df730b {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Top header bar — allow breathing room and light wrapping */
  .s-6ff2c5 {
    padding-inline: 24px;
    padding-block: 18px;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* Hero description + CTA cluster */
  .s-f35c4b {
    font-size: 14px;
    line-height: 20px;
  }

  /* Stats row (12 / 09 / 04 / 03) — allow wrapping, keep readable */
  .s-d24f62 {
    gap: 12px;
    flex-wrap: wrap;
  }
  .s-f5d5b8 {
    min-width: 138px;
  }
  .s-b79ce8 {
    font-size: 28px;
    line-height: 30px;
  }

  /* Crosswalk section header text can tighten */
  .s-5df584 {
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  /* Four "Get involved" cards — 2-up grid on tablets/phones */
  .cta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cta-box {
    padding: 20px 16px 16px;
  }
  .cta-ico {
    font-size: 1.35rem;
    margin-bottom: 12px;
  }
  .cta-name {
    font-size: 14px;
    line-height: 19px;
  }

  /* Harm-class row (.s-49b681): 4 equal flex children become unusable
     slivers on tablet. Step down to a 2-up wrapped grid before the full
     single-column stack at <=768px. */
  .s-49b681 {
    flex-wrap: wrap;
  }
  .s-a753a6 {
    flex-basis: calc(50% - 12px);
  }
}

@media (max-width: 768px) {
  /* Main content sections get tighter side padding */
  .s-6355b9,
  .s-771e12 {
    padding-inline: 20px;
    padding-block: 60px;
    gap: 48px;
  }

  /* Hero content wrapper: kept 64px side padding (128px total) on phones,
     leaving only ~262px of content width and compounding the headline
     overflow. Mirror the treatment already applied to .s-6355b9/.s-771e12. */
  .s-fb4973 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 48px;
    padding-bottom: 64px;
  }

  /* Major content section wrappers (Coverage, personas, Advisory Board,
     footer CTA) also kept 64px side + 140-160px vertical padding on phones.
     Tighten so content isn't crushed into a ~262px column. */
  .s-e679f2,
  .s-f577f5,
  .s-010216,
  .s-c2ea85 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Oversized dark-section headlines with no mobile rule:
     §06 footer "Read it. Implement it." (96px) and §03 Coverage
     "Every place an AI can fail." (64px). Same failure mode as the hero. */
  .s-8ddd53 {
    font-size: clamp(34px, 9vw, 96px);
    line-height: 1.05;
  }
  .s-fa3913 {
    font-size: 42px;
    line-height: 46px;
  }

  /* Secondary headings: pillar card titles (36px), persona titles (32px),
     harm-class titles (28px). Tight negative tracking + narrow mobile
     columns cause awkward wraps/clipping; step the sizes down. */
  .s-302f32 {
    font-size: 26px;
    line-height: 30px;
  }
  .s-5a68bf {
    font-size: 24px;
    line-height: 28px;
  }
  .s-700f68 {
    font-size: 22px;
    line-height: 27px;
  }

  /* Harm-class row stacks to a single column — four equal flex children
     are unreadable slivers at phone widths. */
  .s-49b681 {
    flex-direction: column;
  }
  .s-a753a6 {
    flex-basis: auto;
  }

  /* Header brand cluster: it is position:absolute over the header centre,
     but the header flex-wraps on small screens so the logo/CTA can wrap to
     a second line while the brand stays pinned — risking overlap. Take it
     out of absolute flow so it joins the wrapped header below logo + CTA. */
  .s-6ff2c5 {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .brand-center {
    position: static;
    transform: none;
    order: 3;
    flex-basis: 100%;
    align-items: center;
    margin-top: 8px;
  }
  .brand-acronym--big {
    font-size: 22px;
  }

  /* Header "Access the Framework" pill: 14px text + 10px*2 padding is
     ~34px tall, under the 44px tap-target guideline. Bump vertical padding. */
  .s-7e9805 {
    padding-block: 13px;
  }

  /* Vertical separators between the four hero stats look wrong once the
     row wraps on mobile — hide them and let the stat blocks stand alone */
  .s-5448f5 {
    display: none;
  }

  /* The three pillars (Adopt / Defend / Govern) stack vertically */
  .s-d3e30b {
    flex-direction: column;
    border-top: none;
  }
  .s-b1527c {
    border-right: none !important;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
  }
  .s-b1527c:last-child {
    border-bottom: none;
  }

  /* Section intro text blocks */
  .s-b409a2,
  .s-21a6de {
    max-width: 100%;
    height: auto;
  }
  .s-d52662 {
    font-size: 42px;
    line-height: 46px;
  }

  /* Crosswalk: let the SVG be horizontally scrollable on phones
     so the interactive pills remain clickable and legible.
     The JS-rendered viz is dense; scrolling is acceptable affordance. */
  .s-213442,
  .mc-xwalk-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--rule);
    padding: 8px;
    margin: 0 -4px;
  }
  .mc-xwalk-svg {
    min-width: 620px;   /* keeps the 900px viewBox readable */
    width: 100%;
    height: auto;
    display: block;
  }
  .mc-xwalk-hint {
    font-size: 12px;
    padding: 6px 0 0;
  }

  /* Make the "Access" CTAs in header a bit more compact */
  .s-473a7a,
  .s-c88c43 {
    font-size: 12px;
    padding-inline: 14px;
  }

  /* Tighter version badge + tagline row */
  .s-fffdad {
    gap: 8px;
  }
}

@media (max-width: 520px) {
  /* Phone portrait: everything single column where it makes sense */
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cta-box {
    padding: 18px 14px 14px;
  }

  /* Hero stat numbers get one more size down */
  .s-b79ce8 {
    font-size: 24px;
    line-height: 26px;
  }
  .s-a9f469 {
    font-size: 11px;
    line-height: 15px;
  }

  /* Even tighter section padding on tiny screens */
  .s-6355b9 {
    padding-inline: 16px;
    padding-block: 48px;
  }

  /* Hero + major section wrappers reach the 16px floor on the smallest
     phones. (padding-block stays at the 60px set in the 768 block.) */
  .s-fb4973,
  .s-e679f2,
  .s-f577f5,
  .s-010216,
  .s-c2ea85 {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Crosswalk hint becomes more prominent */
  .mc-xwalk-hint {
    font-size: 11px;
    white-space: normal;
  }

  /* Brand wordmark in header can shrink slightly */
  .brand-word {
    font-size: 11px;
  }
}

/* Extra safety: never let any generated canvas element create
   uncontrollable horizontal overflow on the body */
@media (max-width: 768px) {
  .s-df730b,
  .s-6ff2c5,
  .s-fb4973,
  .s-771e12,
  .s-6355b9 {
    overflow-x: hidden;
  }
}

/* One more reduced-motion guard for new interactive bits */
@media (prefers-reduced-motion: reduce) {
  .cta-box { transition: none; }
  .s-213442 { transition: none; }
}

/* ============================================================
   STANDARDIZED + ENLARGED SECTION EYEBROWS (§ N · Title)
   Problem: All § section labels were 11–13px mono uppercase
   (various classes: .s-bfa508, .s-0d2015, .s-9efd81) making
   them nearly unreadable on the 1440px canvas.

   Fix: Single standardized treatment at 15px across the entire
   landing page. Legible, consistent, still refined.

   - Light sections use .s-bfa508 and scoped parents
   - Dark backdrop sections (§03, §06) use .s-0d2015
   - Crosswalk header uses .s-9efd81

   This is additive override so future Paper re-exports can
   re-append this block without conflict.
   ============================================================ */

/* Light sections: § 02, § 04, § 05 (and any future similar) */
.s-6355b9 .s-bfa508,
.s-f577f5 .s-bfa508,
.s-010216 .s-bfa508,
.s-21a6de .s-bfa508 {
  font-size: 15px !important;
  letter-spacing: 0.135em !important;
  line-height: 18px !important;
  font-weight: 600;
  color: #2a2a2a;
  margin-bottom: 6px;
}

/* Dark backdrop sections: § 03 and § 06 */
.s-e679f2 .s-0d2015,
.s-c2ea85 .s-0d2015 {
  font-size: 15px !important;
  letter-spacing: 0.135em !important;
  line-height: 18px !important;
  font-weight: 600;
}

/* Crosswalk section header label */
.s-771e12 .s-9efd81 {
  font-size: 15px !important;
  letter-spacing: 0.135em !important;
  font-weight: 600;
}

/* Also lift the Advisory Board eyebrows for consistency
   (they are part of the same "section label" family) */
.adv-eyebrow {
  font-size: 14px;
  letter-spacing: 0.16em;
}

/* Mobile scaling for the new larger section eyebrows */
@media (max-width: 768px) {
  .s-6355b9 .s-bfa508,
  .s-f577f5 .s-bfa508,
  .s-010216 .s-bfa508,
  .s-21a6de .s-bfa508,
  .s-e679f2 .s-0d2015,
  .s-c2ea85 .s-0d2015,
  .s-771e12 .s-9efd81 {
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
  }
}

/* ============================================================
   NEW: AI ADVISORY BOARD — "The Collective"
   More aesthetic, collaborative, and human representation.
   Inspired by premium network / collective visualizations.
   Shows many advisors visibly without any dropdown.
   ============================================================ */

.advisor-showcase {
  margin-top: 48px;
  padding: 32px 36px;
  background: #f8f6f0;
  border-radius: 16px;
  border: 1px solid #e8e4d9;
}

.advisor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.advisor-header .label {
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.advisor-header .count {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* Leadership row — slightly more prominent */
.advisor-leadership {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

/* Chair sits on top of the rest of the board, featured and centered */
.advisor-chair {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}
.advisor-card.leadership.chair {
  max-width: 360px;
  width: 100%;
}
.advisor-card.leadership.chair .photo {
  width: 124px;
  height: 124px;
}
/* Remaining leadership (after the chair) centered as a 2-up */
.advisor-leadership.two {
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
}

.advisor-card.leadership {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 24px;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.advisor-card.leadership:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.08);
  border-color: #d4d0c6;
}

.advisor-card .photo {
  width: 92px;
  height: 92px;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid #f4f1e9;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.advisor-card.leadership .photo {
  width: 108px;
  height: 108px;
  border-width: 4px;
}

.advisor-card .name {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 3px;
}

.advisor-card .title {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12.5px;
  color: #3a3a3a;
  line-height: 1.35;
  margin-bottom: 4px;
}

.advisor-card .org {
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-council);
}

/* Main collaborators grid — beautiful, generous, everyone visible */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 20px;
}

.advisor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.advisor-card .photo {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #f4f1e9;
  margin-bottom: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.advisor-card:hover .photo {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
}

.advisor-card .name {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 1px;
}

.advisor-card .title {
  font-size: 11px;
  color: #444;
  line-height: 1.3;
  margin-bottom: 1px;
}

.advisor-card .org {
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.01em;
  color: #6b6b6b;
}

/* Responsive */
@media (max-width: 1024px) {
  .advisor-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
  }
  .advisor-leadership {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .advisor-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 14px;
  }
  .advisor-leadership {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .advisor-leadership.two {
    grid-template-columns: 1fr;
  }
  .advisor-card .photo {
    width: 64px;
    height: 64px;
  }
  .advisor-card.leadership .photo {
    width: 82px;
    height: 82px;
  }
}

@media (max-width: 520px) {
  .advisor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   MOBILE SECTION-STACK FIXES (home.html / shared landing.html)
   These sections kept flex-direction:row on phones, forcing
   multi-column card rows and "heading | description" pairs into
   slivers that clipped past the viewport inside overflow-x:hidden.
   All rules below are additive and live ONLY inside @media
   (max-width: 768px / 480px); desktop (>=1024px) is untouched.
   Future Paper re-exports can re-append safely (no .s- base rules
   are modified here).
   ============================================================ */
@media (max-width: 768px) {

  /* ---- SECTION A: §03 Coverage surface grids --------------------
     The pipeline row (5 cards) and the cross-cutting row (4 cards)
     are .s-31f746 flex containers whose children (.s-b8b76c /
     .s-820436 and .s-62ab15 / .s-579651) run side-by-side and clip
     off the right edge. Stack them so every card is full-width and
     fully visible. Drop the vertical right-borders (they become
     stranded mid-row when stacked) and use a bottom rule instead so
     the cards stay visually separated. */
  .s-e679f2 .s-31f746 {
    flex-direction: column;
  }
  .s-e679f2 .s-31f746 > .s-b8b76c,
  .s-e679f2 .s-31f746 > .s-820436,
  .s-e679f2 .s-31f746 > .s-62ab15,
  .s-e679f2 .s-31f746 > .s-579651 {
    width: 100%;
    flex-basis: auto;
    border-right: none;
  }
  /* Re-add a separating bottom rule between stacked pipeline cards
     (all but the last). .s-820436 is always the last pipeline cell. */
  .s-e679f2 .s-31f746 > .s-b8b76c {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* ---- SECTION B: Mediation layer / AI Governance Council -------
     .s-98e812 is a space-between row with the heading cluster on the
     left and the description (.s-c8dbd2, text-align:right) crammed
     into a narrow right column. Stack to a column, description
     full-width and left-aligned. .s-007837 (the dot+eyebrow+title
     cluster) also stacks so the title isn't squeezed beside the dot. */
  .s-98e812 {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .s-98e812 > .s-c8dbd2 {
    max-width: 100%;
    text-align: left;
  }
  .s-007837 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ---- SECTION C: Personas (A·Learner / B·Practitioner / C·Exec) -
     .s-abd68b is a 3-column flex row whose 2nd/3rd persona columns
     (.s-24ec0f, .s-614bbe) overflow off-screen. Stack to a column so
     each persona card is full-width; drop the vertical right-borders
     and use a bottom rule between stacked cards. The eyebrow row
     (.s-76faae: label + tag, space-between) is allowed to wrap so the
     "A · Learner" / "Free · Self-paced" pair doesn't collide. */
  .s-abd68b {
    flex-direction: column;
  }
  .s-abd68b > .s-a52ba9,
  .s-abd68b > .s-24ec0f,
  .s-abd68b > .s-614bbe {
    width: 100%;
    flex-basis: auto;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-left: 0;
    padding-right: 0;
  }
  .s-abd68b > .s-614bbe {
    border-bottom: none;
  }
  /* Eyebrow row inside each persona: wrap label + tag cleanly */
  .s-abd68b .s-76faae {
    flex-wrap: wrap;
    gap: 6px 16px;
  }

  /* ---- SECTION D: §05 AI Advisory Board heading|description -----
     .s-010216 .s-091e5c is intentionally excluded from the global
     left-align stack rule, so it stays a flex-end space-between row
     and the description (.s-71a855) is squeezed into a ~90px column
     reading one word per line. Stack it like the other section
     headers: column, description full-width and left-aligned. */
  .s-010216 .s-091e5c {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .s-010216 .s-091e5c .s-71a855 {
    max-width: 100%;
    text-align: left;
  }

  /* ---- SECTION E: §02 pillar header rows alignment --------------
     Once .s-d3e30b stacks (handled earlier at <=768), each pillar
     cell is full-width and its header row keeps justify-content:
     space-between, stranding the right label ("Build · Operate",
     "Break · Protect", "Authorize · Oversee") far from the pillar
     name with a big gap. Pull the label back beside the name and let
     it wrap under cleanly on the narrowest phones. Rows: .s-09ec29
     (Adopt) / .s-1612bf (Defend) / .s-a3016e (Govern). */
  .s-09ec29,
  .s-1612bf,
  .s-a3016e {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 16px;
  }
}

@media (max-width: 480px) {
  /* Tightest phones: drop the §03 surface-card side padding a touch
     so the stacked cards reach a comfortable text width, and tighten
     the persona eyebrow gap. */
  .s-e679f2 .s-31f746 > .s-b8b76c,
  .s-e679f2 .s-31f746 > .s-820436,
  .s-e679f2 .s-31f746 > .s-62ab15,
  .s-e679f2 .s-31f746 > .s-579651 {
    padding-inline: 20px;
  }
  /* Hero CTA pair ("Access the Framework" + "Download Whitepaper") is a nowrap
     flex row (~330px) that overran the 320px floor. Let the second button wrap
     below when it can't fit, so the cluster never exceeds the viewport. */
  .s-f6026a {
    flex-wrap: wrap;
  }
}

/* ============================================================
   MOBILE HERO FALLBACK + FULL-PAGE PHONE PASS
   (home.html — shared /styles.css; landing.html-safe)

   Context: on phone engines (matchMedia('(max-width:768px),
   (pointer:coarse)')) the home.html module script short-circuits
   the tegaki canvas reveal and paints the PLAIN styled headline
   immediately — h1.innerHTML becomes the two-line text, so the
   <h1 class="s-9ec9c8 tegaki-headline"> renders as static Geist
   sans-serif. These rules make that fallback crisp, kill the
   canvas-reserved void, lift sub-44px tap targets, and tame the
   heavy reveal/hover transforms that jank on real iOS Safari.

   EVERYTHING here lives inside @media (max-width:…) — desktop
   (>=1024px) is byte-identical. No base .s- rule is modified, so
   landing.html (which shares this file) is unaffected at desktop
   and only inherits the same benign mobile polish.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- HERO: static sans-serif fallback (canvas skipped on phones) ----
     The phone path swaps the <h1> innerHTML to plain text synchronously,
     so there is no async canvas to reserve space for. Drop the reserved
     void (base .tegaki-headline min-height: clamp(120px,28vw,240px),
     ~2543) to 0 so the headline hugs its real text height with zero gap
     above the lead paragraph (.s-2d9306) and zero layout shift. */
  .tegaki-headline {
    min-height: 0;
  }
  /* Belt-and-suspenders: if the 4s watchdog ever leaves a stray
     <tegaki-renderer> in the DOM (module eval raced past the gate), hide
     it so a half-painted canvas can never overlap the plain text. The
     normal phone path removes these via innerHTML swap; this only fires
     on the watchdog edge case. */
  .tegaki-headline tegaki-renderer {
    display: none !important;
  }
  /* Sans-serif polish for the plain headline. .s-9ec9c8 is already
     Geist/system-ui 600 + fluid clamp(34px,11vw,128px)/line-height 1.05
     and pinned black (#0A0A0A) via .tegaki-headline ~2096 — keep those.
     Loosen the very tight -0.045em tracking so large glyphs don't touch
     on small screens, and guarantee the long word "governance" never
     forces horizontal scroll at 320px. Re-assert the sans family in case
     a stray serif leaks from the (now-hidden) renderer's inherited font. */
  .s-9ec9c8 {
    font-family: "Geist", system-ui, sans-serif;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    max-width: 100%;
  }

  /* ---- TAP TARGETS (>=44px) ----
     Header "Access the Framework" pill rendered ~40px tall even after the
     earlier padding-block:13px bump (~2714). Make it a centered flex pill
     at the 44px guideline. */
  .s-7e9805 {
    min-height: 44px;
    padding-block: 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  /* Persona "Take the skill check →" / "Benchmark…" CTAs rendered ~42px
     tall. persona-cta is already inline-flex + centered; just raise the
     min-height so the tap area clears 44px. */
  .persona-cta {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ---- TAME JANKY REVEAL / HOVER TRANSFORMS ON PHONES ----
     The brand-cluster (ADG + Adopt·Defend·Govern) staggered fade-up and
     the various translateY hover lifts are extra GPU/transform work that
     contributes to the unstable top-of-page feel on real iOS Safari and
     do nothing useful on touch (no hover). Show the brand instantly and
     drop the lift transforms; hover devices >768px keep the full motion.
     prefers-reduced-motion is handled separately below for ALL widths. */
  .brand-letter,
  .brand-tag .brand-word,
  .brand-tag .brand-dot {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .cta-band.cta-anim .cta-box,
  .cta-band.cta-anim.in .cta-box {
    opacity: 1 !important;
    animation: none !important;
  }
  /* Neutralize translateY/scale hover lifts that fire on tap-hold and jank
     on momentum scroll. Transitions stay cheap; only the transform is cut. */
  .cta-box:hover,
  .persona-cta:hover,
  .advisor-card.leadership:hover,
  .advisor-card:hover .photo {
    transform: none;
  }
}

/* ---- Reduced-motion: deterministic static hero entrance at ALL widths.
   The CSS reveal/hover transforms are already tamed for cta-band,
   coverage, mediation and advisors elsewhere; fold the brand cluster in
   so a motion-sensitive user (including on desktop) never sees the
   staggered fade-up. The JS gate also serves the plain headline to
   reduced-motion users, so the whole hero is static for them. */
@media (prefers-reduced-motion: reduce) {
  .brand-letter,
  .brand-tag .brand-word,
  .brand-tag .brand-dot {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .persona-cta { transition: none; }
  .persona-cta:hover,
  .advisor-card.leadership:hover,
  .advisor-card:hover .photo { transform: none; }
}

/* ============================================================
   MOBILE REDESIGN — "Editorial cards on an 8pt rhythm"
   (home.html / shared landing.html · phones only)

   A genuine, premium phone redesign — not the desktop layout
   crammed into a column. Synthesis of two directions:
     · Editorial Column   → spacing / whitespace / type scale
     · Quiet Dashboard    → card grouping + 3px accent left-rails

   ONE system imposed on every section:
     · 8pt spacing scale (4 micro / 8 / 12 / 16 / 24 / 32 / 48 / 56)
     · ONE section rhythm: 56px top+bottom · 20px sides
       (48 / 16 on the smallest phones) — replaces the old
       48 / 60 / 140 / 160 mix.
     · Content compartmentalized into soft cards: 1px border,
       faint surface, 12–14px radius, 20px inner padding,
       16px stack gap, one 3px pillar-color accent each.
     · Fluid type: eyebrow 12–13px mono · H2 clamp() loosened
       tracking · card title ~19px · body 16px min · meta 13px.
     · Accents (Adopt #1F4FE0 / Defend #C7102D / Govern #0E5C3F)
       only as rails / dots / labels. The red-gradient CTA stays
       the single strongest colour moment.
     · Touch targets >= 44px; the crosswalk SVG stays the only
       intentional side-scroller, now with a clear peek + hint.

   EVERYTHING lives inside @media (max-width: 768 / 600 / 400).
   No base / desktop .s- rule is modified, so desktop (>=1024px)
   and tablet (769–1023px) stay byte-identical and the shared
   landing.html never regresses. The HTML + tegaki gate JS are
   untouched (CSS-only).  Layered AFTER all earlier overrides so
   it wins where it intentionally re-styles them.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 8pt tokens, mobile-scoped on the root canvas ---------- */
  .s-df730b {
    --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 56px;
    --card-pad: 20px;
    --card-radius: 14px;
    --card-gap: 16px;
    --surface: rgba(255,255,255,0.55);
    --surface-dark: #14171C;
    --rule-dark: rgba(255,255,255,0.10);
  }

  /* ===========================================================
     UNIFIED SECTION RHYTHM — every top-level section gets the
     same 56px vertical / 20px side padding. Overrides the older
     48/60 values set above; the 400px block tightens to 48/16.
     =========================================================== */
  .s-fb4973,                 /* hero            */
  .s-771e12,                 /* crosswalk       */
  .s-6355b9,                 /* §02 pillars     */
  .s-e679f2,                 /* §03 coverage    */
  .s-f577f5,                 /* §04 personas    */
  .s-010216,                 /* §05 advisory    */
  .s-c2ea85 {                /* §06 footer CTA  */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  /* Calm the inter-block gaps inside the section flex columns
     (base used 80px) down to the 32px rhythm token. */
  .s-6355b9,
  .s-771e12 { gap: 32px; }
  .s-e679f2 { gap: 40px; }   /* dark coverage: a touch more air between its two groups */
  .s-c2ea85 { gap: 32px; }

  /* ===========================================================
     1 · HEADER — calm centered editorial masthead.
     The brand cluster already drops to its own row (order:3)
     above; finish the look: center everything on a single 24px
     rhythm and cap the "Access" pill so it reads as a button,
     not a full-bleed banner.
     =========================================================== */
  .s-6ff2c5 {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 20px;
  }
  .s-2b5bc0 { order: 1; }                 /* logo first  */
  .brand-center {                          /* brand cluster centred */
    order: 2;
    margin-top: 0;
    flex-basis: auto;
  }
  .s-007837 {                              /* CTA wrapper centred */
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .s-7e9805 {
    max-width: 280px;
    width: auto;
    justify-content: center;
    border-radius: 10px;
  }
  .brand-acronym--big { letter-spacing: 0; }

  /* ===========================================================
     2 · HERO — confident, airy, full-width stacked CTAs +
     a clean 2x2 stat grid.
     =========================================================== */
  /* Headline tracking already loosened to -0.02em above; nudge
     the lead up to a comfortable editorial size. */
  .s-f35c4b {
    font-size: 17px;
    line-height: 26px;
    max-width: 100%;
  }
  .s-bde36d { max-width: 100%; }
  /* lead + CTA cluster: stack, left-aligned, generous top gap */
  .s-2d9306 {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-top: 32px;
  }
  .s-5f19b3 {
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }
  /* CTA pair → full-width stack, premium 10px radius, 48px tall */
  .s-f6026a {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
  }
  .s-db2ba5,
  .s-2ede97 {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 10px;
    padding-block: 14px;
  }
  /* Stat row → tidy 2x2 grid on the 24px rhythm, hairline kept,
     the 80/96px desktop margins dropped to 32px tokens. */
  .s-d24f62 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
    margin-top: 32px;
    padding-top: 32px;
  }
  .s-f5d5b8 { min-width: 0; gap: 8px; }
  .s-b79ce8 {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.02em;
  }
  .s-a9f469 { font-size: 12px; line-height: 16px; }

  /* ===========================================================
     3 · CROSSWALK — keep the ONLY side-scroller, give it a real
     framed panel + an explicit right-edge peek + a hint pill.
     (The base 768 block already sets overflow-x:auto + border;
     here we elevate the frame and promote the hint.)
     =========================================================== */
  .s-2e46b4 { gap: 8px; }
  .s-213442 {
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 16px;
    margin: 0;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .mc-xwalk-hint {
    display: inline-block;
    font-family: "Geist Mono", system-ui, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--mute);
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 8px;
  }

  /* ===========================================================
     4 · §02 PILLARS — each pillar is a clean accent-LEFT-RAIL
     card. THE "GUNKY" FIX: the right label ("Build · Operate")
     stops stranding across a justified gap — the header row
     becomes a column so the small muted label sits directly
     UNDER the name block.
     =========================================================== */
  .s-d3e30b {
    flex-direction: column;
    border-top: none;
    gap: 16px;
  }
  .s-b1527c,
  .s-daf92e {
    border: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;  /* override earlier bottom-rule-only treatment */
    border-radius: 14px;
    padding: 20px;
    background: rgba(255,255,255,0.55);
    box-shadow: inset 3px 0 0 var(--c-govern);          /* default rail (Govern); per-card below */
  }
  .s-b1527c:last-child { border-bottom: 1px solid var(--rule) !important; }
  /* per-pillar accent rail (matched to the header-row class inside) */
  .s-b1527c:nth-of-type(1) { box-shadow: inset 3px 0 0 var(--c-adopt); }
  .s-b1527c:nth-of-type(2) { box-shadow: inset 3px 0 0 var(--c-defend); }
  /* the 3rd pillar uses .s-daf92e → keeps the Govern default rail */

  /* Header row: stack name-block over the muted micro-label,
     no justified gap. Overrides the earlier flex-wrap rule. */
  .s-09ec29,
  .s-1612bf,
  .s-a3016e {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding-right: 0;
    padding-top: 0;        /* the card padding already provides the inset */
    border-bottom: none;   /* divider replaced by the body's own top rule */
  }
  /* shrink the right label to a tidy muted mono micro-line */
  .s-09ec29 .s-d21ce6,
  .s-1612bf .s-d21ce6,
  .s-a3016e .s-d21ce6 {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  /* pillar body: drop the desktop 32px right padding inside the card */
  .s-bedc33 {
    padding-right: 0;
    padding-top: 16px;
    padding-bottom: 0;
    gap: 16px;
  }
  .s-302f32 { font-size: 22px; line-height: 28px; }
  .s-c2fde5 { font-size: 16px; line-height: 24px; }
  .s-c979db { gap: 12px; }
  .s-0ed0d5 { gap: 12px; }
  .s-5167f4 { font-size: 16px; line-height: 22px; }

  /* Mediation layer / AI Governance Council → distinct full-width
     note card (was a justified rule-bounded row). The earlier
     768 block already stacks it; here we give it card chrome. */
  .s-98e812 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-radius: 14px;
    padding: 20px;
    background: #F4F1E9;
  }
  .s-98e812 > .s-c8dbd2 {
    max-width: 100%;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
  }

  /* ===========================================================
     5 · §03 COVERAGE (dark) — the densest block gets the MOST
     air. Dissolve the single bordered gradient slab into
     discrete lifted dark cards with accent rails. The earlier
     768 block stacks .s-31f746 to a column + drops right borders;
     here we promote each child to its own opaque card.
     =========================================================== */
  /* Container loses its slab look — becomes a transparent stack */
  .s-e679f2 .s-31f746 {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    flex-direction: column;
    gap: 16px;
  }
  /* Each pipeline / cross-cutting card → opaque lifted dark card */
  .s-e679f2 .s-31f746 > .s-b8b76c,
  .s-e679f2 .s-31f746 > .s-820436,
  .s-e679f2 .s-31f746 > .s-62ab15,
  .s-e679f2 .s-31f746 > .s-579651 {
    background: #14171C !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px;
    padding: 20px;
  }
  /* accent rails: pipeline group = Defend red, cross-cutting = Govern green */
  .s-e679f2 .s-31f746 > .s-b8b76c,
  .s-e679f2 .s-31f746 > .s-820436 {
    box-shadow: inset 3px 0 0 var(--c-defend);
  }
  .s-e679f2 .s-31f746 > .s-62ab15,
  .s-e679f2 .s-31f746 > .s-579651 {
    box-shadow: inset 3px 0 0 var(--c-govern);
  }
  /* lift dark-card type to readable sizes */
  .s-ec1c58 { font-size: 19px; line-height: 26px; }
  .s-7eddb1 { font-size: 15px; line-height: 22px; }
  /* group headers stack eyebrow over tag, left-aligned */
  .s-b4da45 > .s-76faae,
  .s-c92d38 > .s-76faae {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* harm-class cards → same dark card spec + Defend rail
     (they already stack at <=768 via .s-49b681) */
  .s-a753a6 {
    background: #14171C !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px;
    padding: 20px;
    gap: 12px;
    box-shadow: inset 3px 0 0 var(--c-defend);
  }
  .s-49b681 { gap: 16px; }
  .s-700f68 { font-size: 20px; line-height: 26px; }
  .s-acc7ce { font-size: 15px; line-height: 22px; }

  /* ===========================================================
     6 · §04 PERSONAS — three premium accent-rail cards
     (Learner blue / Practitioner red / Executive green) with a
     full-width 48px CTA. The earlier 768 block stacks them with
     a bottom rule; here we promote them to full cards.
     =========================================================== */
  .s-abd68b { flex-direction: column; gap: 16px; }
  .s-abd68b > .s-a52ba9,
  .s-abd68b > .s-24ec0f,
  .s-abd68b > .s-614bbe {
    border: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    border-radius: 14px;
    padding: 20px !important;
    gap: 16px;
    background: rgba(255,255,255,0.55);
  }
  .s-abd68b > .s-614bbe { border-bottom: 1px solid var(--rule) !important; }
  .s-abd68b > .s-a52ba9 { box-shadow: inset 3px 0 0 var(--c-adopt); }
  .s-abd68b > .s-24ec0f { box-shadow: inset 3px 0 0 var(--c-defend); }
  .s-abd68b > .s-614bbe { box-shadow: inset 3px 0 0 var(--c-govern); }
  /* eyebrow row already wraps; size the title + body up */
  .s-5a68bf { font-size: 22px; line-height: 28px; }
  .s-8c82d6 { font-size: 16px; line-height: 24px; }
  .s-09b7c9 { gap: 12px; }
  /* persona CTA → full-width 48px button, the per-card action moment */
  .persona-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 10px;
    margin-top: 8px;
  }

  /* ===========================================================
     7 · §05 ADVISORY — credible compact roster. Showcase frame
     on the section rhythm; header stacks; leadership 1-up. The
     2-col collaborator grid is finished in the 600px block.
     =========================================================== */
  .s-010216 .advisor-showcase {
    margin-top: 24px;
    padding: 24px 20px;
    border-radius: 16px;
  }
  .advisor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ===========================================================
     8 · §06 FOOTER CTA (dark) — strong, calm close. Full-width
     stacked buttons; the outlined secondary gets a real border.
     This is the page's final + loudest colour beat.
     =========================================================== */
  .s-091e5c {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .s-ebcf2e { font-size: 17px; line-height: 26px; max-width: 100%; }
  .s-0d2669 {
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .s-c2ea85 .s-deff2c,
  .s-c2ea85 .s-425767 {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 10px;
    padding-block: 14px;
    box-sizing: border-box;
  }
}

/* ---- 600px: compact 2-col advisory directory ---------------- */
@media (max-width: 600px) {
  .advisor-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }
  .advisor-card .photo {
    width: 64px;
    height: 64px;
  }
  .advisor-card .name { font-size: 14px; }
  .advisor-card .title {
    font-size: 12px;
    line-height: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .advisor-card .org { font-size: 11px; }
  /* no hover scale on touch */
  .advisor-card:hover .photo { transform: none; }
  /* chair + leadership stay emphasized full-width */
  .advisor-leadership,
  .advisor-leadership.two { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- 400px floor: tighten the rhythm to 48 / 16 ------------- */
@media (max-width: 400px) {
  .s-fb4973,
  .s-771e12,
  .s-6355b9,
  .s-e679f2,
  .s-f577f5,
  .s-010216,
  .s-c2ea85 {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* card inner padding eases to 16px on the smallest phones */
  .s-b1527c,
  .s-daf92e,
  .s-98e812,
  .s-e679f2 .s-31f746 > .s-b8b76c,
  .s-e679f2 .s-31f746 > .s-820436,
  .s-e679f2 .s-31f746 > .s-62ab15,
  .s-e679f2 .s-31f746 > .s-579651,
  .s-a753a6,
  .s-abd68b > .s-a52ba9,
  .s-abd68b > .s-24ec0f,
  .s-abd68b > .s-614bbe {
    padding: 16px !important;
  }
  /* keep the stat grid comfortable; nudge the big numerals down */
  .s-b79ce8 { font-size: 34px; line-height: 38px; }
}