/* Unity Impact Partners - design system
   Palette and type reconciled to the approved brand: navy #1B2A4A, teal #2A7E82,
   gold accent #C9A84C, white, accessible supporting neutrals. One sans family. */

:root {
  --navy: #1B2A4A;
  --navy-deep: #142038;
  --teal: #2A7E82;
  --teal-deep: #22666A;
  --gold: #C9A84C;
  --gold-soft: #E4D3A2;
  --white: #FFFFFF;
  --ink: #1C2430;
  --ink-soft: #4A5568;
  --line: #DCE2EA;
  --mist: #F4F6F9;
  --sand: #FBF9F4;

  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --maxw: 1180px;
  --narrow: 44rem;
  --radius: 2px;
  --shadow: 0 1px 2px rgba(27, 42, 74, .06), 0 8px 24px rgba(27, 42, 74, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-wrap: break-word;
}

h1, h2, h3 { color: var(--navy); line-height: 1.22; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.15rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: calc(var(--narrow) + 48px); }
.prose { max-width: calc(var(--narrow) + 48px); }
.prose p, .lede, .statement { max-width: 68ch; }

.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  transform: translateY(-300%);
  background: var(--navy); color: var(--white); padding: 12px 20px; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--white); }

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 74px; flex-wrap: wrap; }

.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px 0; }
.wordmark-mark {
  /* The approved Unity Impact Partners seal, from BRAND_ASSETS/uip/ (canonical, 2026-10-04).
     Replaces the three-color gradient bar flagged in the 2026-10-06 website review. */
  /* 2026-10-09, owner: seal 3x larger (34px -> 102px). */
  width: 102px; height: 102px; flex: none; border-radius: 50%;
  background: url("../img/uip_seal.png") center/contain no-repeat;
}
.wordmark-text {
  /* 2026-10-09, owner: wordmark text 2x larger (.9rem -> 1.8rem). */
  font-size: 1.8rem; font-weight: bold; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy);
}

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; background: var(--navy); margin: 3px 0; }

.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.primary-nav li { margin: 0; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 7px;
  font-size: .655rem; letter-spacing: .05em; color: var(--navy);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.primary-nav a:hover { border-bottom-color: var(--teal); }
.primary-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.primary-nav .nav-cta a { border-bottom: 0; margin-left: 6px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 13px 26px;
  font-size: .92rem; font-weight: bold; letter-spacing: .02em;
  text-decoration: none; border-radius: var(--radius); border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-sm { min-height: 44px; padding: 10px 14px; font-size: .70rem; letter-spacing: .03em; }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }

.link-arrow { font-weight: bold; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; color: var(--teal-deep); }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--sand); border-bottom: 1px solid var(--line); }
.hero--zeus { background: var(--mist); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  padding: clamp(36px, 4.2vw, 64px) 24px;
}
.eyebrow {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: bold; margin-bottom: 1.1em;
}
.hero-capture { margin-bottom: .35em; }
.hero-sub { font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; }
.hero-lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--ink-soft); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 1.8em; }
/* secondary row under the primary buttons: tighter, lighter, same wrap behavior */
.hero-actions--sub { margin-top: .9em; gap: 12px 22px; font-size: .95rem; }

.media-field {
  aspect-ratio: 3 / 2; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.media-field svg { width: 100%; height: 100%; display: block; }
.media-field--navy { background: linear-gradient(150deg, #263B60 0%, #1B2A4A 100%); color: var(--gold-soft); }
.media-field--teal { background: linear-gradient(150deg, #E7F0F0 0%, #CFE1E1 100%); color: var(--teal-deep); }
.media-field--gold { background: linear-gradient(150deg, #FAF4E6 0%, #EFE2C2 100%); color: #8A6F25; }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(34px, 4vw, 58px) 0; }
.section--tint { background: var(--mist); }
.page-head { background: var(--sand); border-bottom: 1px solid var(--line); padding: clamp(32px, 3.6vw, 52px) 0; }
.section-title { text-align: center; margin-bottom: 1.2em; }
.section-title--left { text-align: left; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }
.narrow-lede { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; }
.page-head .lede { margin-bottom: 0; }
.statement { font-size: 1.06rem; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child, .prose > :first-child { margin-top: 0; }
.actions { margin-top: 2em; }

.pillars-line {
  text-align: center; font-weight: bold; color: var(--teal-deep);
  letter-spacing: .04em; font-size: 1.02rem; margin-bottom: 2.2em;
}
.pillars-line--left { text-align: left; }

.statement--capstone { font-size: 1.35rem; font-weight: bold; color: var(--navy); }

/* ---------------------------------------------------------------- grids + cards */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column;
}
.section--tint .card { box-shadow: var(--shadow); }
.card h2 { font-size: 1.3rem; }
.card h3 { margin-bottom: .5em; }
.card > p:last-child { margin-bottom: 0; }
.card-action { margin-top: auto; padding-top: .6em; margin-bottom: 0; }

.card-field { height: 116px; border-radius: var(--radius); margin: -28px -28px 22px; }
.card-field--navy { background: linear-gradient(150deg, #263B60 0%, #1B2A4A 100%); }
.card-field--teal { background: linear-gradient(150deg, #E7F0F0 0%, #9FC3C4 100%); }
.card-field--gold { background: linear-gradient(150deg, #FAF4E6 0%, #DFC989 100%); }

/* Partner logo frames. The field is the existing .card-field tile; the logo sits
   centred inside it and both the mark and the business name are links. */
.card-field--logo { display: flex; align-items: center; justify-content: center; padding: 14px; }
.card-field--logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.card-logo { max-height: 84px; max-width: 82%; width: auto; height: auto; display: block; }
.card-lockup { color: #fff; text-align: center; line-height: 1.15; }
.card-lockup b { display: block; font-size: 1.22rem; letter-spacing: .07em; text-transform: uppercase; }
.card-lockup span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .82; margin-top: .35em; }
.card-partner h2 a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--gold); }
.card-partner h2 a:hover, .card-partner h2 a:focus { color: var(--teal-deep); }

.card-dest { color: var(--teal-deep); font-weight: bold; }
.card-path h3 { font-size: 1.12rem; }
.card-problem h2 { font-size: 1.22rem; border-bottom: 2px solid var(--gold); padding-bottom: .45em; }
.card-partner h2 { font-size: 1.22rem; }

.kv { margin-bottom: 1em; }
.kv p { margin-bottom: .2em; }
.kv-label {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: bold;
}

.phase-num { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: bold; margin-bottom: .4em; }
.phase-focus { color: var(--ink-soft); font-style: normal; margin-bottom: 1.2em; }

.values-grid .value { border-left: 3px solid var(--teal); padding-left: 18px; }
.values-grid .value h3 { margin-bottom: .35em; }
.values-grid .value p { margin-bottom: 0; color: var(--ink-soft); }

.status {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: bold;
  padding: 5px 11px; border-radius: var(--radius); margin-bottom: 1em;
}
.status--active { background: #E3EEEE; color: var(--teal-deep); border: 1px solid #BCD7D8; }
.status--published { background: #EFE7CE; color: #6F5916; border: 1px solid #DCC98F; }
.status--dev { background: #E9ECF2; color: #3B4A66; border: 1px solid #C8D0DE; }

.card-pub--wide { grid-column: 1 / -1; }

.steps { list-style: none; padding: 0; margin: 0 0 2em; border-top: 1px solid var(--line); }
.step { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); margin: 0; }
.step h3 { margin-bottom: .3em; }
.step p:last-child { margin-bottom: 0; }
.step-num { font-weight: bold; color: var(--gold); font-size: 1.1rem; min-width: 2.4rem; margin: 0; }
.step-journey {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: bold;
  color: var(--teal-deep); min-width: 6.6rem; margin: .28em 0 0;
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--gold);
}
.linklist { list-style: none; padding: 0; }
.linklist li { padding-left: 0; }
.linklist--plain li { position: relative; padding-left: 20px; }
.linklist--plain li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--teal); }

.awaiting {
  border-left: 3px solid var(--gold); background: var(--sand);
  padding: 16px 20px; color: var(--ink-soft); font-size: .95rem;
}

.founder-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.founder-name { font-weight: bold; color: var(--navy); margin: 1.1em 0 .1em; font-size: 1.15rem; }
.founder-role { color: var(--ink-soft); font-size: .95rem; }

.cta-band { background: var(--navy); color: var(--white); padding: clamp(44px, 5vw, 72px) 0; text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { margin-bottom: 0; }

.contact-grid .card { text-align: left; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-deep); color: #D7DDE7; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; }
.footer-name { font-weight: bold; color: var(--white); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3em; }
.footer-tag { color: var(--gold); font-weight: bold; }
.footer-h { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--white); margin-bottom: 1em; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .5em; font-size: .94rem; }
.footer-list a { color: #D7DDE7; text-decoration: none; border-bottom: 1px solid rgba(215, 221, 231, .3); }
.footer-list a:hover { color: var(--white); border-bottom-color: var(--gold); }
.footer-pending li { color: #97A2B4; }
.footer-base { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 40px; padding-top: 22px; }
.footer-base p { margin: 0; font-size: .86rem; color: #97A2B4; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .primary-nav a { font-size: .68rem; padding: 6px 7px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    flex-basis: 100%; margin-left: 0; display: none;
    border-top: 1px solid var(--line); padding: 10px 0 18px;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { border-bottom: 1px solid var(--line); padding: 12px 2px; font-size: .8rem; }
  .primary-nav .nav-cta a { margin: 14px 0 0; border-bottom: 2px solid transparent; }
  .primary-nav .nav-cta .btn { width: 100%; }

  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .founder-grid { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .hero-grid { padding-left: 18px; padding-right: 18px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .card { padding: 22px; }
  .card-field { margin: -22px -22px 18px; }
  .step { flex-direction: column; gap: 6px; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { width: 100%; }
  .card-pub--wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.eyebrow--center { text-align: center; margin-bottom: .6em; }


/* ---- 2026-09-23 accessibility fix (NOUS) ----
   .step-num rendered brand gold #C9A84C on the near-white band (#F4F6F9) at a
   contrast ratio of 2.11:1 - below WCAG AA. Brand gold stays correct as a rule,
   border and accent color; as TEXT on a light band it needs darkening. #846E32
   is the same hue at 66% luminance: 4.56:1 on the band, 4.93:1 on white. */
.step-num { color: #846E32; }

/* --- photography (Implementation Brief v4.1: still, authentic, calm) --- */
.media-photo{margin:0;border-radius:10px;overflow:hidden;background:var(--navy-deep);}
.media-photo img{display:block;width:100%;height:auto;}
.hero-media .media-photo{box-shadow:0 18px 40px rgba(20,32,56,.18);}
.card-pillar .media-photo{margin:-20px -20px 16px;border-radius:10px 10px 0 0;}
.card-pillar .media-photo img{aspect-ratio:3/2;object-fit:cover;}
.section .media-photo{margin:0 0 22px;max-width:760px;}
@media(max-width:700px){.card-pillar .media-photo img{aspect-ratio:16/9;}}
/* book covers keep their own proportions - never crop a cover */
.media-photo--cover{background:transparent;}
/* max-width added 2026-10-06: `width:auto` with only a max-HEIGHT cap let a landscape
   cover exceed its container, overflowing the page by 30px at 390px. Pre-existing. */
.media-photo--cover img{aspect-ratio:auto;object-fit:contain;max-height:260px;margin:0 auto;width:auto;max-width:100%;}


/* ── ZEUS page, 2026-10-09 (owner) ─────────────────────────────────────────────
   The architecture diagram used to be a flat 1600x900 JPG: the logo and all of the
   information baked into one raster. Its type sat at ~11px on that canvas, so at any real
   column width it rendered unreadable, and the right-hand third of the frame was empty.
   The logo is now its own asset and everything it said is live markup at a readable size. */

.zeus-mark { display:block; width:100%; max-width:420px; height:auto; margin-left:auto;
             border-radius:10px; box-shadow:0 18px 40px rgba(20,32,56,.18); }

.zeus-arch { background:var(--navy); color:var(--white); }
.zeus-arch-eyebrow {
  margin:0 0 8px; color:var(--gold); font-size:.82rem; font-weight:bold;
  letter-spacing:.16em; text-transform:uppercase;
}
.zeus-arch-title {
  margin:0 0 6px; color:var(--white); font-size:clamp(1.45rem,2.6vw,2.1rem);
  line-height:1.25; max-width:34ch;
}
.zeus-arch-title::after {
  content:""; display:block; width:100%; max-width:760px; height:3px;
  background:var(--gold); margin:18px 0 0;
}

.zeus-steps {
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.zeus-step {
  display:flex; align-items:center; gap:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,76,.45); border-left:5px solid var(--gold);
  border-radius:10px; padding:22px 24px;
}
.zeus-step-num {
  flex:none; width:52px; height:52px; border-radius:50%;
  border:2px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; font-weight:bold;
}
.zeus-step-body { display:block; }
.zeus-step-name {
  display:block; font-size:1.3rem; font-weight:bold; letter-spacing:.04em;
  text-transform:uppercase; color:var(--white);
}
.zeus-step-sub { display:block; margin-top:4px; font-size:1.02rem; color:var(--gold-soft); }

.zeus-trust {
  margin:30px 0 0; padding:22px 26px;
  border:1px solid rgba(201,168,76,.45); border-left:5px solid var(--gold); border-radius:10px;
  background:rgba(255,255,255,.04);
}
.zeus-trust-head {
  margin:0 0 16px; color:var(--gold); font-size:.95rem; font-weight:bold;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
}
.zeus-trust-row {
  display:grid; grid-template-columns:minmax(210px,260px) 1fr; gap:14px 26px;
  align-items:baseline; padding:11px 0; border-top:1px solid rgba(201,168,76,.28);
}
.zeus-trust-label {
  margin:0; color:var(--gold); font-size:.88rem; font-weight:bold;
  letter-spacing:.09em; text-transform:uppercase;
}
.zeus-trust-items { margin:0; color:var(--white); font-size:1.04rem; line-height:1.55; }

@media (max-width: 900px) {
  .zeus-steps { grid-template-columns:1fr; }
  .zeus-mark { margin:0 auto; }
  .zeus-trust-row { grid-template-columns:1fr; gap:4px; }
}

/* -- Card component (Implementation Directive v1.4, section 6) -----------------
   Engagement and offer cards share one reusable component. The grid sets equal
   column widths; grid-item stretch gives equal card heights within a row; .card
   is a vertical flex column, so the CTA row pins to the card floor through
   .card-action { margin-top:auto } and lands on one line across paired cards
   regardless of how much copy sits above it. No fixed card heights and no
   spacer elements - content determines each row's height. */
.card-engage .kv:first-of-type { margin-top: .5em; }
.card-engage .card-action { padding-top: 1.2em; }

/* The concluding ZEUS pathway spans the full row so the grid never ends on an
   empty column. */
.card-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .card-wide { grid-column: auto; } }

/* ── Partner frames, 2026-10-09 (owner): each company's own branding + its principal ── */
.partner-field {
  display:flex; align-items:center; justify-content:center;
  height:auto; min-height:150px; padding:22px 20px; margin:-28px -28px 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.partner-field a { display:flex; align-items:center; gap:16px; text-decoration:none; }
.partner-seal { width:76px; height:76px; flex:none; border-radius:50%; }

/* UIP: the approved navy ground with the canonical seal. */
.partner-field--uip { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* Qrypto Federal: its own colourway so the two frames are visibly different companies.
   Still a typographic lockup - QF has no approved logo file and a mark is never invented. */
.partner-field--qf  { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--teal-deep) 100%); }

.partner-person { margin-top:auto; padding-top:18px; text-align:center; }
.partner-portrait {
  display:block; width:132px; height:132px; margin:0 auto 12px;
  border-radius:50%; object-fit:cover; border:3px solid var(--gold);
}
.partner-portrait--pending {
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--ink-soft);
  border-style:dashed; font-size:.82rem; line-height:1.25; text-align:center;
}
.partner-person-name {
  margin:0; font-size:1.12rem; font-weight:bold; color:var(--navy); letter-spacing:.01em;
}
.partner-person-role { margin:3px 0 0; font-size:.92rem; color:var(--ink-soft); }


/* -- 2026-10-19, directive v1.1 implementation ------------------------------------
   Two utilities only. Nothing above this line was changed.
   .gap-note  marks a place where the directive calls for copy or validated content
              that has not been supplied. It is deliberately visible so Yvonne sees
              the gap on review rather than discovering it after release.
   .steps-plain is the numbered enrollment sequence on enroll.html.            */
.gap-note {
  border-left: 4px solid var(--gold);
  background: var(--sand);
  padding: 14px 18px;
  margin: 0 0 1.05em;
  font-size: .94rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.gap-note b { color: var(--navy); }

.steps-plain { padding-left: 1.3em; max-width: 68ch; }
.steps-plain li { margin-bottom: .7em; }

/* ------------------------------------------------------ governance documents
   Added 2026-10-20 with the approved Privacy Notice, Terms of Use, Accessibility
   Statement and ZEUS Access and Use Agreement pages. Every rule is scoped to
   .page-governance, so the existing pages are untouched. */
.page-governance .doc-meta { font-weight: bold; color: var(--teal-deep); margin-bottom: .45em; }
.page-governance .doc-record { list-style: none; padding: 0; margin: 0; color: var(--ink-soft); font-size: .9rem; }
.page-governance .doc-record li { margin-bottom: .15em; }
.page-governance .prose h2 { margin-top: 2.1em; }
.page-governance .prose h3 { margin-top: 1.5em; }
.page-governance .prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; font-size: .95rem; }
.page-governance .prose caption { text-align: left; font-weight: bold; color: var(--navy); padding-bottom: .5em; }
.page-governance .prose th,
.page-governance .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.page-governance .prose th { background: var(--mist); color: var(--navy); }
.page-governance .tbd-chip {
  display: inline-block; background: var(--sand); border: 1px dashed var(--gold);
  color: #7A6220; padding: 1px 8px; font-weight: bold; font-size: .92rem;
}

/* -- 2026-10-20, 19 October 2026 review: ZEUS(TM) Capability Pathways ---------------
   Display requirement: the five cards in the order given, a three-card first row and a
   two-card second row, the two cards centred, all cards visually consistent. A
   six-column track with every card spanning two columns gives 3 + 2 from a single grid
   container, so all five cards keep one width; cards four and five start at columns 2
   and 4, which centres them. Nothing above this line was changed. The collapse
   breakpoints are the ones .grid-3 already uses (900px to two columns, 640px to one),
   and they are declared after the base rule so they win on source order.           */
.grid--pathways { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--pathways > * { grid-column: span 2; }
.grid--pathways > :nth-child(4) { grid-column: 2 / span 2; }
.grid--pathways > :nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
  .grid--pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--pathways > *,
  .grid--pathways > :nth-child(4),
  .grid--pathways > :nth-child(5) { grid-column: auto; }
}

@media (max-width: 640px) {
  .grid--pathways { grid-template-columns: 1fr; }
}



/* -- 2026-10-20, 19 October review implementation ---------------------------------
   Five utilities. Nothing above this line was changed.
   .status--soon   the NONINTERACTIVE "Coming Soon" availability label the review
                   requires for an approved publication that is not yet released.
                   It is a label, not a button, and carries no link.
   .cta-static     approved CTA wording the review supplies with no destination. It
                   renders as text, never as a link, so nothing points at nothing.
   .chip-tbd       the visible marker beside it naming what is still owed. Deliberately
                   loud so the owner sees the gap on review, not after release.
   .form-interest  the dedicated Age of Stewardship interest-list form. No submission
                   handler exists yet, so its submit is disabled and the live route is
                   the mailto in the adjacent .gap-note.                             */
.status--soon { background: var(--sand); color: #6F5916; border: 1px solid #DCC98F; }

.cta-static { font-weight: bold; color: var(--ink-soft); }

.chip-tbd {
  display: inline-block;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: bold;
  padding: 4px 9px; border-radius: var(--radius);
  background: #FBEAEA; color: #8A2B2B; border: 1px solid #E3B6B6;
  margin-left: .45em;
}

.form-interest { max-width: 30rem; }
.form-interest .form-row { margin-bottom: 1.05em; }
.form-interest label {
  display: block; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: bold; color: var(--navy); margin-bottom: .35em;
}
.form-interest input[type="text"],
.form-interest input[type="email"],
.form-interest select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.form-interest .form-row--check { display: flex; align-items: flex-start; gap: 10px; }
.form-interest .form-row--check label {
  text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--ink); margin: 0;
}
.form-interest .form-row--check input { margin-top: .3em; }
.form-interest .form-optional {
  text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--ink-soft);
}
.form-interest button[disabled] { opacity: .55; cursor: not-allowed; }

/* zeus_comingsoon_demo css */
.btn-soon{opacity:0.30;pointer-events:none;cursor:default;filter:grayscale(40%);}
/* Demo ZEUS: one standard everywhere - teal box, WHITE text, uppercase to match the nav row (Yvonne 2026-10-21) */
.btn-demo{background:#0e7490;border-color:#0e7490;color:#fff;text-transform:uppercase;letter-spacing:.08em;}
.btn-demo:hover{background:#0c5f78;border-color:#0c5f78;color:#fff;}
/* beat .primary-nav a {color:navy} so the nav instance keeps white text like the body one */
.primary-nav .nav-cta a.btn-demo{color:#fff;}
.primary-nav .nav-cta a.btn-demo:hover{color:#fff;border-bottom:0;}
.btn-soon + .btn-demo, .btn + .btn-demo{margin-left:.5rem;}