/* ---- preview.css ---- */
:root {
  --navy: #06104e;
  --orange: #ff6b1a;
  --paper: #f6f1e7;
  --ink: #121c48;
  --muted: #53596d;
  --line: #d5d2c9;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.6 Arial,
    Helvetica,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.06;
}
h2 {
  font-size: clamp(36px, 3.7vw, 55px);
}
h3 {
  font-size: 20px;
  line-height: 1.3;
}
em {
  font-weight: 400;
}
p {
  color: var(--muted);
}
.eyebrow {
  display: block;
  font:
    11px/1.6 "Courier New",
    monospace;
  letter-spacing: 1.4px;
  font-weight: 700;
  margin-bottom: 23px;
}
.section {
  padding: 86px max(6vw, 24px);
}
.skip {
  position: fixed;
  top: -70px;
  background: white;
  padding: 12px;
  z-index: 20;
}
.skip:focus {
  top: 0;
}
header {
  height: 84px;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: var(--paper);
  border-bottom: 1px solid #ffffff24;
}
.brand {
  display: flex;
  align-items: center;
  font-size: 27px;
  letter-spacing: -1.3px;
  font-weight: 700;
}
.brand > span {
  color: var(--orange);
}
.brand svg {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  stroke: #f6f1e7;
  fill: var(--orange);
  stroke-width: 1;
}
.brand small {
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1px;
  margin-left: 20px;
  color: #c4c8df;
}
nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13px;
}
nav .nav-cta {
  border: 1px solid #ffffff60;
  padding: 9px 18px;
}
.hero {
  padding: 30px 6vw 0;
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.hero-top .eyebrow {
  color: #c6cbe2;
  margin: 0;
}
.status {
  font:
    11px "Courier New",
    monospace;
  white-space: nowrap;
}
.status i,
.orange-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  margin-right: 8px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 60px 0 45px;
}
.hero h1 {
  font-size: clamp(56px, 6.8vw, 101px);
}
.hero h1 em {
  color: var(--orange);
}
.intro {
  font-size: 18px;
  line-height: 1.65;
  color: #d4d6e4;
  max-width: 410px;
  margin-top: 25px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  font-weight: 700;
  padding: 15px 20px;
  min-height: 48px;
}
.primary {
  background: var(--orange);
  color: var(--navy);
}
.primary:hover {
  background: #ff8b4e;
}
.text-link {
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 5px;
}
.text-link:hover {
  text-decoration: underline;
}
.play-icon {
  font-size: 23px;
  vertical-align: middle;
  margin-right: 8px;
}
.qualification {
  font:
    11px/1.7 "Courier New",
    monospace;
  color: #b8bfd9;
  margin-top: 24px;
}
.graph svg {
  width: 100%;
  height: auto;
  display: block;
}
.connections path {
  stroke: #677098;
  stroke-width: 1.4;
  fill: none;
}
.connections .highlight {
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: 600;
  animation: draw 3s ease both;
}
.edge-label text {
  fill: #bdc4df;
  font:
    11px "Courier New",
    monospace;
}
.node rect {
  fill: #101b59;
  stroke: #59648c;
}
.node text {
  text-anchor: middle;
  fill: #bfc5df;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 1px;
}
.node .node-name {
  font:
    12px Arial,
    sans-serif;
  letter-spacing: 0;
  fill: var(--paper);
}
.owner-halo {
  fill: #ff6b1a14;
  stroke: #ff6b1a70;
}
.source rect {
  fill: var(--paper);
}
.source text {
  fill: var(--navy);
  font:
    9px "Courier New",
    monospace;
}
.source text:last-child {
  font:
    10px Arial,
    sans-serif;
}
figcaption {
  font-size: 12px;
  border-top: 1px solid #ffffff26;
  padding-top: 16px;
  margin: 8px 25px 0;
}
figcaption small {
  display: block;
  color: #b8bfd9;
  font:
    10px "Courier New",
    monospace;
  margin: 6px 0 0 14px;
}
.hero-bottom {
  border-top: 1px solid #ffffff26;
  padding: 19px 0;
  display: flex;
  gap: 35px;
  color: #c6cbe2;
  font:
    11px "Courier New",
    monospace;
}
.hero-bottom a {
  margin-left: auto;
  color: var(--paper);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 34px;
}
.section-heading > p {
  font-size: 14px;
  max-width: 320px;
}
.cinema {
  background: var(--navy);
  border: 1px solid #d9d4ca;
  padding: 12px;
  box-shadow: 0 20px 55px #06104e0d;
}
.cinema video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  background: var(--paper);
}
.film-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 16px 0 24px;
  font:
    10px/1.6 "Courier New",
    monospace;
  letter-spacing: 0.6px;
}
.film-meta b {
  color: var(--orange);
  padding: 0 10px;
}
.chapters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chapters button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 17px 15px;
  color: var(--ink);
  font-size: 13px;
  border-right: 1px solid var(--line);
}
.chapters button:last-child {
  border: 0;
}
.chapters button:hover {
  background: #e9e3d8;
}
.chapters span {
  font:
    11px "Courier New",
    monospace;
  margin-right: 18px;
  color: var(--muted);
}
.chapters i {
  float: right;
  font-style: normal;
}
#video-status {
  font-size: 12px;
}
.path {
  background: #eae5da;
  text-align: center;
}
.path h2 em {
  color: #646878;
}
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: left;
  margin: 44px 0 25px;
}
.steps li {
  padding: 0 23px;
  border-left: 1px solid #c5c2ba;
}
.steps li:first-child {
  padding-left: 0;
  border: 0;
}
.steps li > span {
  font:
    12px "Courier New",
    monospace;
  color: #5b6072;
  display: block;
  margin-bottom: 22px;
}
.steps h3 {
  font-size: 17px;
  margin-bottom: 10px;
}
.steps p {
  font-size: 13px;
  max-width: 170px;
}
.path-note {
  font-size: 12px;
  margin-top: 36px;
}
.roles {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10vw;
  background: #fffdf8;
}
.role-buttons {
  margin-top: 30px;
}
.role-buttons button {
  border: 0;
  border-bottom: 1px solid var(--line);
  display: block;
  background: transparent;
  padding: 15px 0;
  width: 100%;
  text-align: left;
  color: var(--muted);
  font-size: 14px;
}
.role-buttons button span {
  float: right;
}
.role-buttons button[aria-pressed="true"] {
  color: var(--navy);
  font-weight: bold;
  border-bottom: 2px solid var(--orange);
}
.role-detail {
  background: var(--navy);
  color: var(--paper);
  padding: 42px;
}
.role-detail .eyebrow {
  color: #ffc19a;
}
.role-detail h3 {
  font:
    38px/1.12 Georgia,
    serif;
  letter-spacing: -1px;
}
.role-detail > p {
  color: #ccd1e2;
  font-size: 14px;
  margin: 24px 0;
}
.record-strip {
  border-top: 1px solid #ffffff35;
  border-bottom: 1px solid #ffffff35;
  padding: 16px 0;
  margin-bottom: 25px;
}
.record-strip span {
  display: block;
  font:
    10px/1.8 "Courier New",
    monospace;
  color: #b8bfd9;
}
.record-strip span:last-child {
  font:
    13px/1.8 Arial,
    sans-serif;
  color: var(--paper);
}
.role-detail small {
  display: block;
  font:
    10px/1.6 "Courier New",
    monospace;
  color: #b8bfd9;
  margin-top: 22px;
}
.proof-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof-columns article {
  padding: 32px 45px 35px 0;
}
.proof-columns article + article {
  border-left: 1px solid var(--line);
  padding-left: 45px;
  padding-right: 0;
}
.pill {
  font:
    10px "Courier New",
    monospace;
  letter-spacing: 0.7px;
  border: 1px solid var(--navy);
  padding: 7px 10px;
  display: inline-block;
  background: var(--navy);
  color: var(--paper);
  margin-bottom: 23px;
}
.pill.outline {
  background: transparent;
  color: var(--navy);
}
.proof-columns h3 {
  font:
    27px Georgia,
    serif;
  margin-bottom: 15px;
}
.proof-columns p {
  font-size: 14px;
  margin-bottom: 22px;
  max-width: 450px;
}
.governance-link {
  display: flex;
  justify-content: space-between;
  padding-top: 21px;
  font-size: 13px;
}
.partnership {
  background: var(--navy);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
}
.partner-intro .eyebrow {
  color: #ffc19a;
}
.partner-intro h2 {
  font-size: clamp(45px, 5vw, 72px);
}
.partner-intro > p {
  color: #c6cbe2;
  margin: 25px 0;
  max-width: 350px;
  font-size: 15px;
}
.partner-intro small {
  display: block;
  color: #b8bfd9;
  font:
    10px/1.6 "Courier New",
    monospace;
  margin-top: 16px;
}
.ladder {
  padding: 0;
  margin: 0 0 40px;
  list-style: none;
}
.ladder li {
  display: flex;
  gap: 22px;
  margin-bottom: 22px;
}
.ladder li > span {
  font:
    12px "Courier New",
    monospace;
  color: var(--orange);
  padding-top: 4px;
}
.ladder h3 {
  font-size: 16px;
}
.ladder p {
  font-size: 13px;
  color: #c6cbe2;
  margin-top: 6px;
}
.faq h3 {
  font:
    27px Georgia,
    serif;
  margin-bottom: 15px;
}
details {
  border-top: 1px solid #ffffff35;
}
details:last-child {
  border-bottom: 1px solid #ffffff35;
}
summary {
  cursor: pointer;
  padding: 15px 24px 15px 0;
  font-size: 13px;
  position: relative;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--orange);
  font-size: 18px;
  top: 9px;
}
details[open] summary:after {
  content: "−";
}
details p {
  font-size: 13px;
  color: #c6cbe2;
  padding-bottom: 18px;
}
.updates {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
}
.updates > div > p {
  margin-top: 18px;
  font-size: 14px;
}
.update-list article {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 25px;
  border-top: 1px solid var(--line);
  padding: 23px 0;
}
.update-list time {
  font:
    10px "Courier New",
    monospace;
  padding-top: 5px;
}
.update-list h3 {
  font-size: 17px;
}
.update-list p {
  font-size: 13px;
  margin-top: 7px;
}
.update-list span {
  font:
    9px "Courier New",
    monospace;
  display: block;
  margin-top: 14px;
  color: #555d76;
}
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding: 35px 6vw;
}
footer p {
  font-size: 12px;
}
footer > a:not(.brand) {
  font-size: 13px;
  margin-left: auto;
}
footer small {
  flex-basis: 100%;
  font:
    10px "Courier New",
    monospace;
  color: var(--muted);
}
@keyframes draw {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (min-width: 1600px) {
  .hero,
  .section,
  header,
  footer {
    padding-left: max(6vw, calc((100vw - 1400px) / 2));
    padding-right: max(6vw, calc((100vw - 1400px) / 2));
  }
}
@media (max-width: 1000px) {
  .brand small {
    display: none;
  }
  .hero-grid {
    gap: 0;
  }
  .hero h1 {
    font-size: 68px;
  }
  .actions {
    gap: 16px;
  }
  .graph {
    margin-right: -25px;
  }
  .roles,
  .partnership {
    gap: 40px;
  }
  .role-detail {
    padding: 28px;
  }
  .steps li {
    padding: 0 13px;
  }
  .steps h3 {
    font-size: 15px;
  }
}
@media (max-width: 700px) {
  header {
    height: 72px;
    padding: 0 22px;
  }
  .brand {
    font-size: 23px;
  }
  .brand svg {
    width: 27px;
    margin-right: 7px;
  }
  nav > a:not(.nav-cta) {
    display: none;
  }
  nav .nav-cta {
    font-size: 12px;
    padding: 8px 12px;
  }
  .hero {
    padding: 25px 24px 0;
  }
  .hero-top {
    display: block;
  }
  .hero-top .eyebrow {
    font-size: 9px;
  }
  .status {
    display: block;
    margin-top: 13px;
    font-size: 10px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 35px 0 25px;
  }
  .hero h1 {
    font-size: 63px;
  }
  .intro {
    font-size: 16px;
    margin-top: 21px;
  }
  .actions {
    gap: 20px;
    margin-top: 26px;
  }
  .button {
    font-size: 12px;
    padding: 13px 16px;
  }
  .qualification {
    margin-top: 19px;
  }
  .graph {
    margin: 30px -10px 0;
  }
  .graph figcaption {
    font-size: 10px;
    margin: 0 10px;
    padding-top: 12px;
  }
  .hero-bottom {
    gap: 10px;
    flex-wrap: wrap;
    font-size: 9px;
  }
  .hero-bottom span {
    flex-basis: 100%;
  }
  .hero-bottom a {
    margin: 0;
  }
  .section {
    padding: 52px 24px;
  }
  .section-heading {
    display: block;
    margin-bottom: 25px;
  }
  .section-heading > p {
    margin-top: 18px;
    font-size: 13px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 18px;
  }
  h2 {
    font-size: 38px;
  }
  .cinema {
    padding: 5px;
  }
  .film-meta {
    display: block;
    font-size: 9px;
  }
  .film-meta a {
    display: block;
    margin-top: 10px;
  }
  .chapters {
    grid-template-columns: 1fr 1fr;
  }
  .chapters button {
    padding: 14px 10px;
    font-size: 12px;
    min-height: 48px;
  }
  .chapters button:nth-child(2) {
    border-right: 0;
  }
  .chapters button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .chapters span {
    margin-right: 9px;
  }
  .path {
    text-align: left;
  }
  .steps {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }
  .steps li,
  .steps li:first-child {
    position: relative;
    padding: 15px 0 15px 37px;
    border: 0;
    border-top: 1px solid #c5c2ba;
  }
  .steps li > span {
    position: absolute;
    left: 0;
    top: 20px;
    margin: 0;
  }
  .steps h3 {
    font-size: 17px;
    margin-bottom: 4px;
  }
  .steps p {
    max-width: none;
  }
  .path-note {
    margin-top: 15px;
  }
  .roles,
  .partnership,
  .updates {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .role-buttons {
    margin-top: 20px;
  }
  .role-detail h3 {
    font-size: 32px;
  }
  .role-detail {
    padding: 27px;
  }
  .proof-columns {
    grid-template-columns: 1fr;
  }
  .proof-columns article,
  .proof-columns article + article {
    padding: 28px 0;
    border-left: 0;
  }
  .proof-columns article + article {
    border-top: 1px solid var(--line);
  }
  .pill {
    font-size: 9px;
  }
  .governance-link {
    font-size: 12px;
    gap: 12px;
  }
  .partner-intro h2 {
    font-size: 51px;
  }
  .partner-right {
    margin-top: 14px;
  }
  .updates h2 {
    font-size: 36px;
  }
  .update-list article {
    grid-template-columns: 85px 1fr;
    gap: 12px;
  }
  footer {
    padding: 30px 24px;
    gap: 22px;
  }
  footer > a:not(.brand) {
    margin: 0;
    flex-basis: 100%;
  }
  footer p {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==== 2026-09-28 overhaul additions ==================================================== */
/* type: a display serif, a clean sans for reading, a mono for labels */
body {
  font-family: Inter, Arial, Helvetica, sans-serif;
}
h1,
h2,
.proof-columns h3,
.role-detail h3 {
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  letter-spacing: -0.03em;
}
.eyebrow,
.status,
.edge-label text,
.pill,
.film-meta,
.qualification,
.hero-bottom,
.role-detail small,
.update-list time,
.update-list span {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
}
/* labels: larger and higher contrast than the first preview (WCAG AA) */
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.2px;
  color: #3a4063;
}
.hero-top .eyebrow,
.status {
  font-size: 12px;
  color: #d9dcec;
}
.qualification,
.hero-bottom {
  color: #cfd4ea;
  font-size: 12.5px;
}
p {
  color: #474d63;
}

/* hero: the drawing assembles itself once (the reduced-motion rule above shows it whole) */
.graph .node rect,
.graph .node text,
.graph .edge-label text,
.graph .source {
  opacity: 0;
  animation: fadein 0.8s ease forwards;
}
.graph .node rect,
.graph .node text {
  animation-delay: 0.2s;
}
.graph .edge-label text {
  animation-delay: 1.4s;
}
.graph .source {
  animation-delay: 2.6s;
}
.connections path:not(.highlight) {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: drawline 1.6s ease 0.5s forwards;
}
.owner-halo {
  transform-origin: 300px 182px;
  animation: halo 3.2s ease-in-out 3s infinite;
}
@keyframes fadein {
  to {
    opacity: 1;
  }
}
@keyframes drawline {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes halo {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* meaning, not only metrics */
.meaning {
  background: var(--paper);
}
.meaning h2 em {
  color: var(--navy);
  opacity: 0.72;
}
.meaning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}
.meaning-grid article {
  background: #fffdf8;
  border: 1px solid var(--line);
  padding: 34px 38px 30px;
}
.meaning-grid .meaning-rel {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
.meaning-k {
  display: block;
  font: 600 12px/1.6 "IBM Plex Mono", monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.meaning-grid h3 {
  font: 400 30px/1.15 Newsreader, Georgia, serif;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.meaning-grid p {
  font-size: 16px;
}
.meaning-grid blockquote {
  margin: 0;
  font: italic 400 22px/1.4 Newsreader, Georgia, serif;
  color: #ffd9c2;
}
.meaning-grid small {
  display: block;
  margin-top: 18px;
  font: 500 12px "IBM Plex Mono", monospace;
  color: #6b7087;
}
.meaning-grid .meaning-rel small {
  color: #b8bfd9;
}

/* the desks: a real frame from each desk's film */
.role-shot {
  grid-column: 1 / -1;
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--navy);
  padding: 12px;
  box-shadow: 0 20px 55px #06104e14;
}
.role-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  background: var(--paper);
}
.role-shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px 2px;
  font: 500 12px "IBM Plex Mono", monospace;
  color: #cfd4ea;
}
.role-shot figcaption span:first-child {
  color: var(--orange);
}

/* the proof, with its numbers */
.proof-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.proof-list li {
  padding: 26px 22px 24px 0;
  border-right: 1px solid var(--line);
}
.proof-list li + li {
  padding-left: 22px;
}
.proof-list li:last-child {
  border-right: 0;
}
.proof-list b {
  display: block;
  font: 400 40px/1 Newsreader, Georgia, serif;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.proof-list h4 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.proof-list p {
  font-size: 13.5px;
  line-height: 1.55;
}
.proof-note {
  margin-top: 22px;
  font: 500 12px/1.6 "IBM Plex Mono", monospace;
  color: #5c6178;
}

@media (max-width: 1000px) {
  .proof-list {
    grid-template-columns: 1fr 1fr;
  }
  .proof-list li,
  .proof-list li + li {
    padding: 22px 18px 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .meaning-grid {
    grid-template-columns: 1fr;
  }
  .meaning-grid article {
    padding: 26px 24px;
  }
  .meaning-grid h3 {
    font-size: 25px;
  }
  .proof-list {
    grid-template-columns: 1fr;
  }
  .role-shot figcaption {
    flex-direction: column;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .graph .node rect,
  .graph .node text,
  .graph .edge-label text,
  .graph .source {
    opacity: 1;
  }
  .connections path {
    stroke-dashoffset: 0;
  }
}

/* ==== 2026-09-28 pass 3: type-led hero, one product moment, larger reading text ========== */
/* reading sizes: nothing a buyer must read is under 15px */
body {
  font-size: 17px;
}
.steps p,
.proof-list p,
.role-detail > p,
.ladder p,
.faq p,
.update-list p,
.section-heading > p,
.path-note {
  font-size: 16px;
  line-height: 1.6;
}
.role-buttons button {
  font-size: 16px;
}

/* hero: type only */
.hero-grid {
  grid-template-columns: 1fr;
  padding: 72px 0 64px;
}
.hero h1 {
  font-size: clamp(64px, 9.4vw, 152px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero .intro {
  font-size: 21px;
  max-width: 620px;
  margin-top: 34px;
}
.hero-copy {
  max-width: 1200px;
}

/* the one product moment */
.moment {
  background: linear-gradient(var(--navy) 0 38%, var(--paper) 38% 100%);
  padding: 0 max(6vw, 24px) 40px;
}
.moment-shot {
  max-width: 1180px;
  margin: 0 auto;
  background: #fffdf8;
  border: 1px solid #e3ddd0;
  box-shadow: 0 40px 90px #06104e33;
  padding: 18px 18px 0;
}
.moment-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.moment-shot figcaption {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 4px 18px;
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid #ece6da;
}
.tag {
  flex: none;
  font: 600 11.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border-left: 4px solid var(--orange);
  padding: 5px 10px;
}

/* the path as one connected line */
.steps {
  position: relative;
  counter-reset: none;
}
.steps li {
  position: relative;
  padding-top: 34px !important;
  border-left: 0 !important;
}
.steps li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background: #c9c3b6;
}
.steps li:first-child::before {
  left: 8px;
}
.steps li:last-child::before {
  right: auto;
  width: 8px;
}
.steps li::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--paper);
}
.steps li:last-child::after {
  background: var(--orange);
}
.steps li > span {
  display: none !important;
}
.steps h3 {
  font: 400 26px/1.15 Newsreader, Georgia, serif !important;
  letter-spacing: -0.01em;
  margin: 10px 0 8px;
}

/* the desks: image beside the question */
.roles {
  grid-template-columns: 0.8fr 1.6fr;
  gap: 5vw;
  align-items: start;
}
.role-right {
  display: grid;
  gap: 18px;
}
.role-right .role-shot {
  margin: 0;
}

/* the proof: numbers first, plain units under them */
.proof-list .unit {
  display: block;
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--orange);
  margin: -6px 0 14px;
}
.proof-list b {
  font-size: 56px !important;
}
.proof-list h4 {
  font-size: 17px !important;
}
.boundary {
  margin-top: 40px;
  padding: 30px 34px;
  border: 1px solid var(--navy);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
}
.boundary .pill {
  margin: 0;
}
.boundary p {
  margin: 0;
}
.evidence h2 em {
  color: var(--navy);
  opacity: 0.6;
}

/* the log: compact */
.update-list article {
  padding: 18px 0 !important;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: 64px;
  }
  .hero .intro {
    font-size: 18px;
  }
  .moment {
    background: linear-gradient(var(--navy) 0 20%, var(--paper) 20% 100%);
  }
  .moment-shot {
    padding: 8px 8px 0;
  }
  .moment-shot figcaption {
    flex-direction: column;
    gap: 8px;
  }
  .roles {
    grid-template-columns: 1fr;
  }
  .steps li {
    padding-top: 0 !important;
    padding-left: 34px !important;
  }
  .steps li::before {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .steps li:first-child::before {
    left: 7px;
    top: 10px;
  }
  .steps li:last-child::before {
    width: 2px;
    height: 10px;
  }
  .steps li::after {
    top: 6px;
  }
  .boundary {
    grid-template-columns: 1fr;
  }
}

.proof-list li:first-child b {
  font-size: 44px !important;
  white-space: nowrap;
}

/* ---- options.css ---- */
/* Draft options on one page. A (no body class) is the editorial navy page; B and C restyle only the header and
   hero; every section below the hero is shared and identical. */
.hero-net,
.hero-shot {
  display: none;
}

/* ==== B · Paper, product-forward: light throughout, the real drawing beside the headline ==== */
.opt-b header {
  background: var(--paper);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.opt-b header nav a {
  color: var(--navy);
}
.opt-b header .nav-cta {
  border-color: var(--navy);
}
.opt-b .brand small {
  color: #5c6178;
}
.opt-b .hero {
  background: var(--paper);
  color: var(--navy);
}
.opt-b .hero-top .eyebrow,
.opt-b .status {
  color: #3a4063;
}
.opt-b .hero-grid {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 4.5vw;
  align-items: center;
  padding: 58px 0 60px;
}
.opt-b .hero h1 {
  font-size: clamp(56px, 6.2vw, 102px);
  color: var(--navy);
}
.opt-b .hero .intro {
  color: #474d63;
  font-size: 19px;
}
.opt-b .hero .text-link,
.opt-b .hero-bottom a {
  color: var(--navy);
}
.opt-b .qualification,
.opt-b .hero-bottom {
  color: #5c6178;
}
.opt-b .hero-bottom {
  border-top-color: var(--line);
}
.opt-b .hero-shot {
  display: block;
  margin: 0;
  background: #fffdf8;
  border: 1px solid #e3ddd0;
  box-shadow: 0 44px 90px #06104e2e;
  padding: 14px 14px 0;
}
.opt-b .hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.opt-b .hero-shot figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 2px 14px;
  font-size: 14px;
  color: #5c6178;
  border-top: 1px solid #ece6da;
}
.opt-b .moment {
  display: none;
}

/* ==== C · Immersive dark: a full-screen navy hero over a relationship network that draws itself ==== */
.opt-c .hero {
  position: relative;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}
.opt-c .hero-net {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.opt-c .hero-net svg {
  width: 100%;
  height: 100%;
  display: block;
}
.opt-c .hero > *:not(.hero-net) {
  position: relative;
  z-index: 1;
}
.opt-c .hero-grid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.opt-c .hero-copy {
  margin: 0 auto;
  max-width: 1180px;
  padding: 30px 40px;
  background: radial-gradient(closest-side, #06104ef2 55%, #06104e00);
}
.opt-c .hero h1 {
  font-size: clamp(72px, 10.6vw, 172px);
}
.opt-c .hero .intro {
  margin-left: auto;
  margin-right: auto;
}
.opt-c .actions {
  justify-content: center;
}
.opt-c .moment {
  background: linear-gradient(var(--navy) 0 30%, var(--paper) 30% 100%);
}
.net-line {
  stroke: #33407f;
  stroke-width: 1.2;
  fill: none;
  animation: drawline 2.6s ease forwards;
}
.net-line.hot {
  stroke: #ff6b1a;
  stroke-width: 1.8;
  opacity: 0.85;
}
.net-node {
  fill: #2a3676;
  opacity: 0;
  animation: fadein 0.9s ease forwards;
}
.net-node.hot {
  fill: #ff6b1a;
}
.net-node.pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    fadein 0.9s ease forwards,
    halo 3.6s ease-in-out 4s infinite;
}

@media (max-width: 1000px) {
  .opt-b .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 700px) {
  .opt-c .hero h1 {
    font-size: 60px;
  }
  .opt-c .hero-copy {
    padding: 20px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .net-line {
    stroke-dashoffset: 0 !important;
  }
  .net-node {
    opacity: 1;
  }
}

/* ---- c2.css ---- */
/* Draft C2: immersive dark hero with a designed network, the gates as the centrepiece, the video pack on request. */

/* ---- hero: headline on the left, the network weighted to the right ---- */
.c2 .hero {
  position: relative;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  background: #050c3d;
}
.c2 .hero-net {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.c2 .hero-net::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #050c3d 0 30%, #050c3dcc 44%, #050c3d00 66%);
}
.c2 .hero-net svg {
  width: 100%;
  height: 100%;
  display: block;
}
.c2 .hero > *:not(.hero-net) {
  position: relative;
  z-index: 1;
}
.c2 .hero-grid {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px 0 50px;
}
.c2 .hero-copy {
  max-width: 820px;
}
.c2 .hero h1 {
  font-size: clamp(64px, 7.8vw, 132px);
}
.c2 .hero .intro {
  font-size: 21px;
  max-width: 600px;
  color: #dfe2f1;
}

/* the network's motion */
.c2 .far circle {
  fill: #6f7fd6;
  opacity: 0;
  animation: c2-twinkle 0.9s ease forwards;
}
@keyframes c2-twinkle {
  to {
    opacity: 0.35;
  }
}
.c2 .e {
  fill: none;
  animation: drawline 1.3s ease forwards;
}
.c2 .e.in {
  stroke: #5667c4;
  stroke-width: 1.1;
  stroke-opacity: 0.6;
}
.c2 .e.bridge {
  stroke: #7d8be0;
  stroke-width: 1;
  stroke-opacity: 0.35;
}
.c2 .e.hot {
  stroke: #ff6b1a;
  stroke-width: 2.4;
  stroke-opacity: 1;
  animation-duration: 0.6s;
}
.c2 .n {
  fill: #c7cffb;
  opacity: 0;
  animation: c2-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.c2 .n.hot {
  animation:
    c2-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    c2-light 0.5s ease forwards;
}
@keyframes c2-settle {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
  25% {
    opacity: 0.9;
  }
  to {
    opacity: 0.95;
    transform: none;
  }
}
@keyframes c2-light {
  to {
    fill: #ff6b1a;
  }
}
.c2 .source-mark {
  opacity: 0;
  animation: fadein 0.8s ease forwards;
}
.c2 .source-mark line {
  stroke: #ff6b1a;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}
.c2 .source-mark rect {
  fill: #f6f1e7;
}
.c2 .source-mark text {
  font: 600 13px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  fill: #06104e;
}

/* ---- the gates ---- */
.gates {
  background: var(--navy);
  color: var(--paper);
}
.gates .eyebrow {
  color: #ffc19a;
}
.gates h2 em {
  color: #ffd9c2;
}
.gates > p {
  color: #cfd4ea;
  max-width: 720px;
  margin-top: 18px;
  font-size: 18px;
}
.gate-line {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}
.gate-line::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  right: 11px;
  height: 2px;
  background: #2a3677;
}
.gate-line::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  height: 2px;
  width: 0;
  background: var(--orange);
  transition: width 2.4s cubic-bezier(0.3, 0.6, 0.2, 1);
}
.gates.in .gate-line::after {
  width: calc(100% - 22px);
}
.gate-line li {
  position: relative;
  padding: 44px 22px 0 0;
}
.gate-line li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #050c3d;
  border: 2px solid #56619d;
  transition:
    background 0.4s ease,
    border-color 0.4s ease;
  transition-delay: var(--d);
}
.gates.in .gate-line li::before {
  background: var(--orange);
  border-color: var(--orange);
}
.gate-line .num {
  display: block;
  font: 400 44px/1 Newsreader, Georgia, serif;
  letter-spacing: -0.02em;
  color: #fff;
}
.gate-line .unit {
  display: block;
  font: 600 11.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 8px 0 18px;
}
.gate-line h3 {
  font: 400 23px/1.2 Newsreader, Georgia, serif;
  margin-bottom: 8px;
  color: #fff;
}
.gate-line p {
  color: #c3c9e3;
  font-size: 15px;
  line-height: 1.55;
}
.trace-note {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid #2a3677;
  display: flex;
  gap: 26px;
  align-items: baseline;
  flex-wrap: wrap;
}
.trace-note b {
  font: 400 26px Newsreader, Georgia, serif;
  color: #fff;
}
.trace-note span {
  color: #cfd4ea;
  font-size: 16px;
}
.trace-note span i {
  font-style: normal;
  color: var(--orange);
  margin: 0 8px;
}

/* ---- the video pack ---- */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.pack-grid article {
  background: #fffdf8;
  border: 1px solid var(--line);
  padding: 30px 30px 26px;
  position: relative;
  overflow: hidden;
}
.pack-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--navy);
}
.pack-grid article:first-child::before {
  background: var(--orange);
}
.pack-grid .len {
  font: 600 12px "IBM Plex Mono", monospace;
  color: var(--orange);
  letter-spacing: 0.5px;
}
.pack-grid h3 {
  font: 400 28px/1.15 Newsreader, Georgia, serif;
  margin: 12px 0 10px;
}
.pack-grid p {
  font-size: 16px;
}
.pack-cta {
  margin-top: 30px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.pack-cta small {
  color: #5c6178;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .gate-line {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }
  .gate-line::before,
  .gate-line::after {
    display: none;
  }
  .pack-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .c2 .hero h1 {
    font-size: 60px;
  }
  .c2 .hero-net::after {
    background: linear-gradient(180deg, #050c3d00 0 30%, #050c3dd9 60%);
  }
  .gate-line {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2 .far circle {
    opacity: 0.35;
  }
  .c2 .n {
    opacity: 0.95;
    transform: none;
  }
  .c2 .n.hot {
    fill: #ff6b1a;
  }
  .c2 .e {
    stroke-dashoffset: 0 !important;
  }
  .c2 .source-mark {
    opacity: 1;
  }
  .gate-line::after {
    width: calc(100% - 22px);
  }
  .gate-line li::before {
    background: var(--orange);
    border-color: var(--orange);
  }
}


/* the journey across the hero network */
.c2 .journey .trail {
  fill: none;
  stroke: #ff6b1a;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.c2 .journey .stop {
  fill: #ff6b1a;
  opacity: 0;
}
.c2 .journey .ring {
  fill: none;
  stroke: #ff6b1a;
  stroke-width: 2;
  opacity: 0;
}
.c2 .journey .traveler {
  fill: #ffe6d6;
  opacity: 0;
}
.c2 .journey .found {
  font: italic 400 36px Newsreader, Georgia, serif;
  fill: #ff8a47;
  opacity: 0;
}

/* gates in words: the benefit leads, the gate names it, the number is a quiet proof line */
.gate-line .num {
  font-size: 34px;
  line-height: 1.08;
  min-height: 74px;
}
.gate-line .unit {
  margin: 12px 0 12px;
}
.gate-line .proof {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #2a3677;
  font: 500 12px/1.5 "IBM Plex Mono", monospace;
  color: #9ea8d6;
}

/* what a design partner gets */
.gets {
  margin: 30px 0 30px;
  padding: 24px 0 4px;
  border-top: 1px solid #2a3677;
}
.gets h3 {
  font: 400 26px Newsreader, Georgia, serif;
  color: #fff;
  margin-bottom: 14px;
}
.gets ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gets li {
  color: #cfd4ea;
  font-size: 16px;
  line-height: 1.55;
  padding: 9px 0 9px 22px;
  position: relative;
}
.gets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.gets b {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 700px) {
  .gate-line .num {
    min-height: 0;
  }
}

/* what you get: three outputs over one book */
.outputs {
  background: #fffdf8;
}
.outputs h2 em {
  color: var(--navy);
  opacity: 0.62;
}
.out-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--line);
}
.out-grid article {
  padding: 34px 34px 30px 0;
}
.out-grid article + article {
  padding-left: 34px;
  border-left: 1px solid var(--line);
}
.out-grid svg {
  width: 120px;
  height: 80px;
  display: block;
  margin-bottom: 22px;
}
.out-grid h3 {
  font: 400 30px/1.15 Newsreader, Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 12px;
}
.out-grid p {
  font-size: 16px;
  line-height: 1.6;
}
.out-grid .proof {
  display: block;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font: 500 12px/1.5 "IBM Plex Mono", monospace;
  color: #6b7087;
}
.gl-e line {
  stroke: #9aa3cf;
  stroke-width: 2;
}
.gl-n circle {
  fill: var(--navy);
}
.gl-n .hot,
.gl-hot {
  fill: var(--orange);
}
.gl-f {
  fill: #f1ece1;
  stroke: var(--navy);
  stroke-width: 2;
}
.gl-s {
  fill: var(--navy);
}
.gl-b,
.gl-b2 rect {
  fill: #c9c3b6;
}
@media (max-width: 1000px) {
  .out-grid {
    grid-template-columns: 1fr;
  }
  .out-grid article,
  .out-grid article + article {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* business capabilities: four groups, words only */
.caps {
  background: var(--paper);
}
.caps h2 em {
  color: var(--navy);
  opacity: 0.62;
}
.caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border-top: 2px solid var(--navy);
}
.caps-grid > div {
  padding: 26px 26px 10px 0;
}
.caps-grid > div + div {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.caps-grid h3 {
  font: 600 12.5px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.caps-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.caps-grid li {
  font: 400 19px/1.3 Newsreader, Georgia, serif;
  color: var(--navy);
  padding: 11px 0;
  border-bottom: 1px solid #e3ddd0;
}
.caps-grid li:last-child {
  border-bottom: 0;
}
.caps-note {
  margin-top: 26px;
  font: 500 12.5px/1.6 "IBM Plex Mono", monospace;
  color: #5c6178;
}
@media (max-width: 1000px) {
  .caps-grid {
    grid-template-columns: 1fr 1fr;
  }
  .caps-grid > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 700px) {
  .caps-grid {
    grid-template-columns: 1fr;
  }
  .caps-grid > div,
  .caps-grid > div + div {
    padding: 22px 0 6px;
    border-left: 0;
  }
}

/* capabilities led by the so-what: six cards, the outcome large, the capabilities underneath */
.caps .caps-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  border-top: 0;
}
.caps .caps-grid article {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  padding: 26px 28px 22px;
}
.caps .caps-grid article:nth-child(1),
.caps .caps-grid article:nth-child(4) {
  border-top-color: var(--orange);
}
.caps-k {
  display: block;
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.caps .caps-grid h3 {
  font: 400 25px/1.2 Newsreader, Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-transform: none;
  margin-bottom: 16px;
}
.caps .caps-grid li {
  font: 400 15px/1.45 Inter, Arial, sans-serif;
  color: #474d63;
  padding: 8px 0 8px 16px;
  border-bottom: 0;
  border-top: 1px solid #ece6da;
  position: relative;
}
.caps .caps-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aa3cf;
}
.caps-close {
  margin-top: 34px;
  padding: 26px 30px;
  background: var(--navy);
  color: #fff;
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
}
.caps-close b {
  font: italic 400 30px Newsreader, Georgia, serif;
  color: #ffb98f;
}
.caps-close span {
  font-size: 17px;
  color: #dfe2f1;
}
@media (max-width: 1000px) {
  .caps .caps-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .caps .caps-grid {
    grid-template-columns: 1fr;
  }
  .caps .caps-grid article,
  .caps .caps-grid > div + div {
    padding: 22px 20px;
  }
}

/* so-what pass 2: outcome lines on the outputs, the direct path in three beats */
.out-grid .so {
  font: italic 400 21px/1.3 Newsreader, Georgia, serif;
  color: var(--navy);
  margin: -2px 0 12px;
}
.beats {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--navy);
}
.beats li {
  padding: 24px 28px 8px 0;
}
.beats li + li {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.beats li:last-child .beat-k {
  color: var(--orange);
}
.beat-k {
  display: block;
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3a4063;
  margin-bottom: 12px;
}
.beats p {
  font: 400 21px/1.35 Newsreader, Georgia, serif;
  color: var(--navy);
}
.beats-bridge {
  margin-top: 46px;
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c6178;
}
.beats-bridge + .meaning-grid {
  margin-top: 16px;
}
@media (max-width: 700px) {
  .beats {
    grid-template-columns: 1fr;
  }
  .beats li,
  .beats li + li {
    padding: 20px 0 6px;
    border-left: 0;
  }
}

/* the rule band under the direct-path beats */
.rule-band {
  margin-top: 40px;
  background: var(--navy);
  color: #fff;
  padding: 28px 34px 26px;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 10px 40px;
  align-items: start;
}
.rule-band p {
  color: #cfd4ea;
  font-size: 17px;
  line-height: 1.55;
  grid-row: span 2;
}
.rule-band blockquote {
  margin: 0;
  font: italic 400 25px/1.35 Newsreader, Georgia, serif;
  color: #ffd9c2;
}
.rule-band small {
  font: 500 12px "IBM Plex Mono", monospace;
  color: #b8bfd9;
}
@media (max-width: 700px) {
  .rule-band {
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }
  .rule-band p {
    grid-row: auto;
  }
  .rule-band blockquote {
    font-size: 21px;
  }
}

/* ---- c3.css ---- */
/* Draft C3: one assistant answer, redrawn, plus the prospect-review changes. */

/* ---- one question, one candidate group ---- */
.answer {
  background: #fffdf8;
}
.answer h2 em {
  color: var(--navy);
  opacity: 0.62;
}
.answer-wrap {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 34px;
  margin-top: 40px;
  align-items: start;
}
.answer-frame {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px #06104e17;
  padding: 18px 18px 10px;
}
.answer-q {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 4px 4px 14px;
  border-bottom: 1px solid #ece6da;
  margin-bottom: 8px;
}
.answer-q b {
  font: 600 11.5px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  color: var(--orange);
  flex: none;
}
.answer-q span {
  font: italic 400 19px/1.35 Newsreader, Georgia, serif;
  color: var(--navy);
}
.answer-graph svg {
  width: 100%;
  height: auto;
  display: block;
}
.answer-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 10px 4px 6px;
  font: 500 12px "IBM Plex Mono", monospace;
  color: #5c6178;
}
.answer-legend i {
  display: inline-block;
  width: 22px;
  height: 3px;
  vertical-align: middle;
  margin-right: 8px;
  background: #b9b2a3;
}
.answer-legend .lg-b {
  background: #5a4fcf;
}
.answer-legend .lg-g {
  background: var(--orange);
}
.answer-side {
  display: grid;
  gap: 14px;
}
.answer-side .fig {
  border-top: 2px solid var(--navy);
  padding-top: 12px;
}
.answer-side .fig b {
  display: block;
  font: 400 34px/1.1 Newsreader, Georgia, serif;
  color: var(--navy);
}
.answer-side .fig span {
  font-size: 15px;
  color: #474d63;
}
.answer-side .fig.hot {
  border-top-color: var(--orange);
}
.answer-side .decide {
  font: italic 400 22px/1.3 Newsreader, Georgia, serif;
  color: var(--navy);
  padding-top: 8px;
}
.answer-side small {
  font: 500 12px/1.55 "IBM Plex Mono", monospace;
  color: #6b7087;
}

/* the drawing's cards and lines */
.answer-graph .gc rect {
  fill: #f6f1e7;
  stroke: #cfc8b9;
  stroke-width: 1.5;
}
.answer-graph .gc text {
  text-anchor: middle;
  font-family: Inter, Arial, sans-serif;
}
.answer-graph .gc .t1 {
  font-size: 16px;
  font-weight: 600;
  fill: var(--navy);
}
.answer-graph .gc .t2 {
  font-size: 13px;
  fill: #6b7087;
}
.answer-graph .gc.loan rect {
  fill: #eeecff;
  stroke: #8f86e0;
}
.answer-graph .gc.loan .t2,
.answer-graph .gc.borrower .t2 {
  fill: #4b40b8;
}
.answer-graph .gc.borrower rect {
  fill: #eeecff;
  stroke: #8f86e0;
}
.answer-graph .gc.guarantor rect {
  fill: #fff0e6;
  stroke: var(--orange);
  stroke-width: 2;
}
.answer-graph .gc.guarantor .t2 {
  fill: #c24e0e;
}
.answer-graph .ge line {
  stroke: #b9b2a3;
  stroke-width: 1.6;
}
.answer-graph .ge text {
  font: 600 13px "IBM Plex Mono", monospace;
  fill: #5c6178;
}
.answer-graph .gb {
  stroke: #5a4fcf;
  stroke-width: 2.2;
}
.answer-graph .gg {
  stroke: var(--orange);
  stroke-width: 3;
}

/* the reveal, stage by stage, once the section is in view */
.answer-graph .st1,
.answer-graph .st2,
.answer-graph .st3,
.answer-graph .st4,
.answer-graph .st5 {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.answer-graph .ge line,
.answer-graph .gg {
  transition: stroke-dashoffset 1s ease;
}
.answer.in .answer-graph .st1 { opacity: 1; transition-delay: 0.1s; }
.answer.in .answer-graph .st2 { opacity: 1; transition-delay: 0.8s; }
.answer.in .answer-graph .st3 { opacity: 1; transition-delay: 1.6s; }
.answer.in .answer-graph .st3 line { stroke-dashoffset: 0 !important; transition-delay: 1.6s; }
.answer.in .answer-graph .st4 { opacity: 1; transition-delay: 2.6s; }
.answer.in .answer-graph .st4 line { stroke-dashoffset: 0 !important; transition-delay: 2.6s; }
.answer.in .answer-graph .st5 { opacity: 1; stroke-dashoffset: 0 !important; transition-delay: 3.8s; }
.answer-side > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.answer.in .answer-side > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 2s; }
.answer.in .answer-side > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 3s; }
.answer.in .answer-side > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 4.2s; }
.answer.in .answer-side > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 4.8s; }
.answer.in .answer-side > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 5.2s; }

/* the slim "three ways in" band */
.ways {
  display: flex;
  gap: 0;
  margin: 34px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ways span {
  flex: 1;
  padding: 16px 18px 16px 0;
  font: 400 19px/1.3 Newsreader, Georgia, serif;
  color: var(--navy);
}
.ways span + span {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.ways span b {
  display: block;
  font: 600 11.5px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  color: var(--orange);
  margin-bottom: 4px;
}

/* the first conversation: invitation and button first, details after */
.first-step {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid #2a3677;
  color: #cfd4ea;
  font-size: 16px;
  line-height: 1.55;
}
.first-step b {
  color: #fff;
}

@media (max-width: 1000px) {
  .answer-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .answer-frame {
    padding: 10px 8px 6px;
    overflow-x: auto;
  }
  .answer-graph svg {
    min-width: 680px;
  }
  .ways {
    flex-direction: column;
  }
  .ways span + span {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (prefers-reduced-motion: reduce) {
  .answer-graph .st1,
  .answer-graph .st2,
  .answer-graph .st3,
  .answer-graph .st4,
  .answer-graph .st5,
  .answer-side > * {
    opacity: 1;
    transform: none;
  }
  .answer-graph line {
    stroke-dashoffset: 0 !important;
  }
}

/* C4: the one sentence beside the film, for visitors who will not watch */
.film-lede {
  font: italic 400 22px/1.4 Newsreader, Georgia, serif;
  color: var(--navy);
  max-width: 760px;
  margin: 18px 0 24px;
}

/* ---- c4.css ---- */
/* Draft C4 finishing. */

/* the film: a large, clear invitation over a simple poster */
.cinema {
  position: relative;
}
.play-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px 18px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: 600 18px Inter, Arial, sans-serif;
  box-shadow: 0 18px 50px #05092e80;
  cursor: pointer;
}
.play-cta:hover {
  background: #ff7f36;
}
.play-cta .tri {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}
.play-cta .tri::before {
  content: "";
  border-left: 14px solid var(--orange);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.play-cta[hidden] {
  display: none;
}

/* capabilities: the headings stay, the lists fold */
.caps.folded .caps-grid ul {
  display: none;
}
.caps.folded .caps-grid h3 {
  margin-bottom: 0;
}
.caps-more {
  margin-top: 22px;
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 12px 20px;
  font: 600 15px Inter, Arial, sans-serif;
  cursor: pointer;
}
.caps-more:hover {
  background: var(--navy);
  color: #fff;
}

@media (max-width: 700px) {
  .play-cta {
    font-size: 15px;
    padding: 12px 18px 12px 12px;
    gap: 10px;
  }
  .play-cta .tri {
    width: 32px;
    height: 32px;
  }
}

/* one borrower, followed: four steps in words */
.story {
  background: #fffdf8;
}
.story h2 em {
  color: var(--navy);
  opacity: 0.62;
}
.story-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.story-steps::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--orange));
}
.story-steps li {
  position: relative;
  padding: 36px 26px 0 0;
}
.story-steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 5px #fffdf8;
}
.story-steps li:last-child::before {
  background: var(--orange);
}
.story-k {
  display: block;
  font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.story-steps h3 {
  font: 400 26px/1.15 Newsreader, Georgia, serif;
  color: var(--navy);
  margin-bottom: 10px;
}
.story-steps p {
  font-size: 16px;
  line-height: 1.6;
}

/* the evaluation, outlined (in the partnership) */
.outline {
  margin: 26px 0 0;
  padding: 22px 0 6px;
  border-top: 1px solid #2a3677;
}
.outline h3 {
  font: 400 26px Newsreader, Georgia, serif;
  color: #fff;
  margin-bottom: 12px;
}
.outline ol {
  margin: 0;
  padding-left: 22px;
  color: #cfd4ea;
}
.outline li {
  padding: 6px 0;
  font-size: 16px;
  line-height: 1.55;
}
.outline li::marker {
  color: var(--orange);
  font-weight: 700;
}
.outline b {
  color: #fff;
}
.outline small {
  display: block;
  margin-top: 10px;
  color: #b8bfd9;
  font-size: 14px;
}
@media (max-width: 1000px) {
  .story-steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
  }
  .story-steps::before {
    display: none;
  }
}
@media (max-width: 700px) {
  .story-steps {
    grid-template-columns: 1fr;
  }
}

/* 2026-09-28: the partnership details side by side, under the invitation and the short answers */
.partnership .partner-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 70px;
}
.partnership .partner-row .outline,
.partnership .partner-row .gets {
  margin: 0;
}
@media (max-width: 1000px) {
  .partnership .partner-row {
    grid-template-columns: 1fr;
  }
}
/* the capabilities button: orange like the other calls to action; navy while open */
.caps-more {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.caps-more:hover {
  background: #ff7f36;
  border-color: #ff7f36;
  color: #fff;
}
.caps-more[aria-expanded="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.gates .proof-note {
  color: #9ea8d6;
  margin-top: 26px;
}
.partnership {
  row-gap: 56px;
}

/* a thin orange rule between the two navy sections (gates, then the first conversation) */
.partnership {
  position: relative;
}
.partnership::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(6vw, 24px);
  right: max(6vw, 24px);
  height: 1px;
  background: var(--orange);
  opacity: 0.7;
}
.gates .proof-note {
  font: 500 13px/1.6 "IBM Plex Mono", monospace;
}

/* the separator: thicker, and edge to edge */
.partnership::before {
  left: 0;
  right: 0;
  height: 4px;
  opacity: 1;
}

/* the separator, twice as thick */
.partnership::before {
  height: 8px;
}
/* the progress log: an orange band with white lettering; the footer stays tan */
.updates {
  background: var(--orange);
  color: #fff;
}
.updates .eyebrow,
.updates h2,
.updates p,
.updates h3,
.updates time,
.updates .update-list span {
  color: #fff !important;
}
.updates > div > p {
  opacity: 0.92;
}
.updates .update-list article {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* the header mark: the governed-graph glyph, light on navy */
.brand svg.brand-graph {
  width: 48px;
  height: 32px;
  margin-right: 12px;
  fill: none;
  stroke: none;
}
.brand-graph .bg-e line {
  stroke: #9aa3cf;
  stroke-width: 4;
}
.brand-graph .bg-n circle {
  fill: #f6f1e7;
  stroke: none;
}
.brand-graph .bg-n .hot {
  fill: var(--orange);
}

/* the footer mark: the original glyph colours on tan */
footer .brand {
  display: inline-flex;
  align-items: center;
}
footer .brand-graph .bg-e line {
  stroke: #9aa3cf;
}
footer .brand-graph .bg-n circle {
  fill: var(--navy);
}
footer .brand-graph .bg-n .hot {
  fill: var(--orange);
}

/* ---- c5.css ---- */
/* 2026-09-30, C5: the AI-first sections (from the approved example C) */
.ai-pillars { background: #fffdf8; }
  .ai-pillars h2 em, .ai-trace h2 em { color: var(--navy); opacity: .62; }
  .ai-lede { font-size: 19px; line-height: 1.6; max-width: 760px; margin-top: 18px; color: #474d63; }
  .pillar-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
  .pillar-row article { padding: 34px 32px 32px; }
  .pillar-row article + article { border-left: 1px solid var(--line); }
  .pillar-row .ic { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 24px; }
  .pillar-row .ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pillar-row h3 { font: 400 26px/1.2 Newsreader, Georgia, serif; color: var(--navy); margin-bottom: 12px; }
  .pillar-row p { font-size: 16px; line-height: 1.6; }
  .ai-trace { background: var(--navy); color: #fff; }
  .ai-trace .eyebrow { color: #ffc19a; }
  .ai-trace h2 { color: #fff; }
  .ai-trace h2 em { color: #ffd9c2; opacity: 1; }
  .ask-box { margin-top: 36px; background: #0d1a66; border: 1px solid #2a3677; border-radius: 14px; padding: 24px 28px; }
  .ask-box b { font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: 1px; color: var(--orange); }
  .ask-box p { font: italic 400 24px/1.4 Newsreader, Georgia, serif; color: #fff; margin-top: 8px; }
  .steps-ai { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
  .steps-ai li { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid #2a3677; }
  .steps-ai .k { font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: #9ea8d6; }
  .steps-ai h3 { font: 400 25px/1.25 Newsreader, Georgia, serif; color: #fff; }
  .steps-ai p { color: #c3c9e3; font-size: 16px; margin-top: 6px; }
  .steps-ai li.stop .k { color: var(--orange); }
  .trace-foot { margin-top: 26px; font: 500 13px 'IBM Plex Mono', monospace; color: #9ea8d6; }
  @media (max-width: 900px) { .pillar-row { grid-template-columns: 1fr; } .pillar-row article + article { border-left: 0; border-top: 1px solid var(--line); } .steps-ai li { grid-template-columns: 1fr; gap: 6px; } }

/* ---- c6.css ---- */
/* 2026-09-30, C6: the two-tab trace (a business, a household) */
.trace-tabs { margin-top: 30px; }
.trace-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.trace-tabs label { display: inline-block; margin-right: 10px; padding: 10px 18px; border: 1px solid #2a3677; border-radius: 999px; font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .5px; text-transform: uppercase; color: #9ea8d6; cursor: pointer; }
.trace-tabs input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
#tr-biz:checked + label, #tr-hh:checked + label { background: var(--orange); border-color: var(--orange); color: #fff; }
.trace-pane { display: none; }
#tr-biz:checked ~ #pane-biz, #tr-hh:checked ~ #pane-hh { display: block; }
.trace-pane .ask-box { margin-top: 24px; }

/* the header on tablets and phones: nothing wraps, the logo keeps its space, links hide before they would crowd */
.brand { flex-shrink: 0; white-space: nowrap; margin-right: 28px; }
nav a { white-space: nowrap; }
@media (max-width: 1100px) { nav { gap: 22px; } }
@media (max-width: 760px) {
  nav > a:not(.nav-cta) { display: none; }
  header { height: 72px; padding: 0 22px; }
}
@media (max-width: 380px) {
  header { padding: 0 14px; }
  .brand { font-size: 19px; margin-right: 10px; }
  .brand svg { width: 22px; height: 22px; margin-right: 5px; }
  nav .nav-cta { font-size: 11.5px; padding: 8px 9px; }
}

/* small print stays readable: nothing under 12px */
.update-list time, .update-list span, footer small, .partnership small { font-size: 12px; }

/* phones: the headline, the intro and the button share the first screen */
@media (max-width: 480px) {
  .c2 .hero { min-height: 0; }
  .hero-top .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .status { font-size: 11px; margin-top: 8px; }
  .c2 .hero-grid { padding: 22px 0 28px; }
  .c2 .hero h1 { font-size: 44px; line-height: 1.02; }
  .c2 .hero .intro { font-size: 16px; line-height: 1.55; margin-top: 16px; }
  .actions { margin-top: 20px; }
}
@media (max-width: 480px) and (max-height: 700px) {
  .c2 .hero h1 { font-size: 40px; }
  .c2 .hero .intro { font-size: 15px; }
}
@media (max-width: 480px) and (max-height: 600px) {
  .c2 .hero-grid { padding: 14px 0 20px; }
  .c2 .hero h1 { font-size: 36px; }
  .c2 .hero .intro { margin-top: 12px; }
  .actions { margin-top: 14px; }
}
@media (max-width: 340px) {
  header { padding: 0 12px; }
  .brand { font-size: 18px; margin-right: 14px; }
  nav .nav-cta { font-size: 11px; padding: 8px 8px; }
}

/* touch screens: every link and control is at least 44px tall to the finger */
@media (pointer: coarse) {
  nav a, .text-link, .hero-bottom a, footer > a:not(.brand), .trace-tabs label { min-height: 44px; display: inline-flex; align-items: center; }
}