/* ================================================================
   Shared stylesheet for the static pages under public/.
   303 Overwatch A.S.B.L: portal and training pages.

   These pages are plain HTML served alongside the single page app, so they
   cannot import src/styles/global.css. This file is the one place their
   chrome lives: change it here and every static page changes together.
   The token values are copied from global.css and must be kept in step
   with it.

   Deliberately NO prefers-color-scheme block. The application is a light
   site with no dark mode, so a static page that flips to dark on a dark
   system looks like a different property, which is exactly what it must
   not do.
   ================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-300-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-300-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #ffffff;
  --gray-900: #171717;
  --gray-600: #525252;
  --gray-500: #737373;
  --gray-400: #a3a3a3;
  --gray-300: #d4d4d4;
  --gray-200: #e5e5e5;
  --gray-100: #f5f5f5;
  --gray-50: #fafafa;

  --blue: #00a8e8;
  --blue-light: #00bfff;
  --blue-text: #006fa8;
  --blue-text-hover: #005a87;
  --on-blue: var(--gray-900);
  --blue-glow: rgba(0, 168, 232, 0.2);

  --bg-primary: var(--white);
  --bg-secondary: var(--gray-50);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border-color: var(--gray-200);
  --border-subtle: var(--gray-100);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --content-max: 1200px;
  --content-pad: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* The reading column for document pages. Header and footer stay at
     --content-max; the document body uses this and every child fills it. */
  --reading-max: 920px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* No scroll-behavior: smooth here either. See the note in src/styles/global.css:
   smooth scrolling was measured to cancel itself on the app and break every
   in-page anchor. The static pages share the app's tokens and behaviour, and a
   page that scrolls differently from the rest of the site reads as a different
   site. scroll-padding-top keeps an anchor clear of the 72px fixed header. */
html { scroll-padding-top: 88px; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: clip;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 72px; /* clears the fixed header */
}

/* Same width as .container, the header and the app content, per the owner's
   ruling: a narrower reading column made every static page look misaligned
   against the chrome around it. */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); }
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); }

/* The course pages put .wrap on <main> itself, a structure pinned by
   tests/unit/course-content.test.mjs. They get their vertical rhythm here
   rather than from a hero block. */
main.wrap { padding-top: 56px; padding-bottom: 80px; }
main.wrap > h1 { margin-bottom: 14px; }
main.wrap > p.lead { font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 24px; }
main.wrap > h2 {
  font-size: 1.25rem; color: var(--text-primary);
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--border-subtle);
}
main.wrap > h2:first-of-type { border-top: none; padding-top: 0; }
main.wrap ul { margin: 0 0 14px 20px; }
main.wrap li { color: var(--text-secondary); font-size: 0.94rem; margin-bottom: 6px; }
main.wrap .note { font-size: 0.85rem; color: var(--text-muted); }
main.wrap .enroll-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; min-height: 48px; margin: 8px 0 4px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--on-blue) !important; background: var(--blue);
  border-radius: 8px; text-decoration: none !important; transition: all 0.2s var(--ease);
}
main.wrap .enroll-btn:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: 0 4px 16px var(--blue-glow); }
main.wrap .enroll-btn--soon {
  background: var(--bg-secondary); color: var(--text-muted) !important;
  border: 1px solid var(--border-color); cursor: default;
}
main.wrap .enroll-btn--soon:hover { background: var(--bg-secondary); transform: none; box-shadow: none; }

.srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------- header, mirrors Header.module.css ---------------- */

.header {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  z-index: 2000;
}
.header .container {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.logo img { max-height: 48px; width: auto; height: auto; transition: opacity 0.2s var(--ease); }
.logo img:hover { opacity: 0.7; }

.tagline {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--gray-500); text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 4px;
}
.tagline b { font-weight: 700; color: var(--text-primary); }

.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav li { display: flex; }
.nav a {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  color: var(--gray-500); padding: 8px 16px; border-radius: 6px;
  transition: all 0.2s var(--ease); text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a.active { color: var(--text-primary); background: var(--gray-100); }
.nav a.cta, .nav a.coe {
  color: var(--on-blue); background: var(--blue);
  margin-left: 8px; box-shadow: 0 2px 8px var(--blue-glow);
}
.nav a.cta:hover, .nav a.coe:hover {
  color: var(--on-blue); background: var(--blue-light);
  box-shadow: 0 4px 14px var(--blue-glow); transform: translateY(-1px);
}

/* The drawer is a checkbox: the Content-Security-Policy allows no inline
   script on a static page, and one toggle does not justify a bundle. */
.navToggle { display: none; }
.navToggleLabel {
  display: none; background: none; border: none; color: var(--text-primary);
  font-size: 24px; cursor: pointer; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; line-height: 1;
}

@media (max-width: 1365px) { .tagline { display: none; } }

@media (max-width: 1024px) {
  .navToggleLabel { display: flex; }
  .nav ul {
    position: fixed; top: 0; right: -100%;
    width: 100%; max-width: 300px; height: 100vh; height: 100dvh;
    overflow-y: auto; visibility: hidden;
    background: var(--white); border-left: 1px solid var(--border-color);
    flex-direction: column; align-items: stretch;
    padding: 100px 24px 32px; gap: 4px;
    transition: all 0.3s var(--ease);
  }
  .navToggle:checked ~ .nav ul { right: 0; visibility: visible; }
  .nav a { padding: 14px 16px; font-size: 1rem; }
  .nav a.cta, .nav a.coe { margin-left: 0; text-align: center; }
}

/* ---------------- typography ----------------
   No max-width on any text element. The container is the measure; every
   child fills it. Capping text inside an already-constrained box is what
   produces early wrapping and a ragged column of empty space beside it. */

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 20px;
  /* pretty, never balance. Balance splits a two-line title into two equal
     short lines, which reads as premature wrapping with a huge right gutter.
     The first line fills the measure; pretty only prevents a lone last word. */
  text-wrap: pretty; overflow-wrap: normal; hyphens: none;
}
h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px;
  text-wrap: balance; overflow-wrap: normal; hyphens: none;
}
h3 {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px; text-wrap: balance; overflow-wrap: normal; hyphens: none;
}
p { color: var(--text-secondary); font-size: 0.96rem; margin-bottom: 14px; text-wrap: pretty; }
p strong, li strong { color: var(--text-primary); font-weight: 600; }
a { color: var(--blue-text); font-weight: 500; text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--blue-text-hover); text-decoration: underline; }

.eyebrow, .sectionNum {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text);
  margin-bottom: 12px;
}

.lead { font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; }

ul.plain { list-style: none; margin: 0 0 18px; }
ul.plain li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  color: var(--text-secondary); font-size: 0.94rem; line-height: 1.65;
}
ul.plain li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

/* ---------------- layout blocks ---------------- */

.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--border-color); }
section.block { padding: 60px 0; border-bottom: 1px solid var(--border-color); scroll-margin-top: 84px; }
section.block:last-of-type { border-bottom: none; }

.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.toc a {
  font-size: 0.83rem; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; padding: 7px 14px;
  border: 1px solid var(--border-color); border-radius: 999px;
  transition: all 0.2s var(--ease);
}
.toc a:hover { border-color: var(--blue); color: var(--blue-text); text-decoration: none; }

.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; list-style: none; }
.facts li, .facts span {
  display: inline-block; padding: 6px 12px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: 999px;
}
.facts strong { color: var(--text-primary); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-top: 28px; }
.step { padding: 22px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }
.stepLabel {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-text);
  margin-bottom: 10px;
}
.step p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 0; }

.callout {
  padding: 20px 22px; background: var(--bg-secondary);
  border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.tableWrap { overflow-x: auto; margin: 20px 0 8px; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem; color: var(--text-secondary); vertical-align: top;
}
th { color: var(--text-primary); font-weight: 600; border-bottom-width: 2px; }
td.fn { font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-text); white-space: nowrap; }

/* Downloadable files. A row states what the document is and what it costs to
   open it, because a link that turns out to be a 300 KB PDF on a phone tether
   is a small betrayal. */
.files { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--border-color); }
.files li { border-bottom: 1px solid var(--border-subtle); }
.files a {
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  padding: 14px 4px; text-decoration: none; color: var(--text-primary);
  font-weight: 500; transition: background 0.15s var(--ease);
}
.files a:hover { background: var(--bg-secondary); text-decoration: none; }
.files a:hover .fileName { color: var(--blue-text); }
.fileNum {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--blue-text); min-width: 2.2rem;
}
.fileName { font-size: 0.95rem; flex: 1 1 16rem; }
.fileMeta {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 400; white-space: nowrap;
}

/* ---------------- practitioner perspective ----------------
   A named person with a real vantage point, not an anonymous testimonial.
   The byline carries the role and the event so a reader can weigh it. */
.fromTheLine {
  padding: 30px 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--blue);
  border-radius: 0 10px 10px 0;
  margin-top: 26px;
}
.byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.bylineName { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.bylineRole { font-size: 0.9rem; color: var(--text-secondary); }
.bylineWhen {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-text);
  padding: 3px 9px; border: 1px solid var(--border-color);
  border-radius: 999px; background: var(--bg-primary); white-space: nowrap;
}
.pullQuote {
  font-size: 1.12rem; line-height: 1.6; color: var(--text-primary);
  font-weight: 500; text-wrap: pretty; margin: 20px 0 6px;
  padding-left: 18px; border-left: 3px solid var(--blue);
}
/* Four separate compact cards, each led by a numbered circle. Replaces the
   blue mono kicker line, which the owner ruled out, and shrinks the widgets. */
.hardTarget {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin: 0 0 8px;
}
.hardTarget > div {
  position: relative;
  padding: 18px 18px 16px 58px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-primary);
}
.ptNum {
  position: absolute; left: 16px; top: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: var(--on-blue);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
}
.hardTarget h3 {
  font-size: 0.98rem; margin: 0 0 8px; line-height: 1.35;
}
.hardTarget p { font-size: 0.9rem; line-height: 1.65; margin: 0; }
@media (max-width: 720px) { .hardTarget { grid-template-columns: 1fr; } }
.hardTarget > div { }
.hardTarget h3 { font-size: 1rem; margin-bottom: 6px; }
.hardTarget p { font-size: 0.9rem; line-height: 1.65; margin-bottom: 0; }
@media (max-width: 860px) {
  .hardTarget { grid-template-columns: 1fr; }
  .fromTheLine { padding: 22px; }
}

.timeline { list-style: none; margin: 28px 0 0; padding-left: 24px; border-left: 1px solid var(--border-color); }
.timeline li { position: relative; padding-bottom: 28px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -29px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-primary); border: 2px solid var(--blue);
}
.timeline li.done::before { background: var(--blue); }
.tlDate {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-text);
  margin-bottom: 6px;
}
.timeline p { margin-bottom: 0; font-size: 0.92rem; }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-top: 26px; }
.option {
  padding: 26px; background: var(--bg-primary);
  border: 1px solid var(--border-color); border-left: 2px solid var(--blue);
  border-radius: 0 8px 8px 0; display: flex; flex-direction: column;
}
.option h3 { font-size: 1.15rem; margin-bottom: 6px; }
.optionPrice { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 2px; }
.optionMember { font-size: 0.82rem; font-weight: 600; color: var(--blue-text); margin-bottom: 16px; }
.option ul.plain { flex: 1; margin-bottom: 20px; }
.option ul.plain li { font-size: 0.88rem; }

/* ---------------- buttons ---------------- */

.btn, .btnGhost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; min-height: 48px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  border-radius: 8px; text-decoration: none !important;
  transition: all 0.2s var(--ease); cursor: pointer;
}
.btn { color: var(--on-blue) !important; background: var(--blue); border: none; }
.btn:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: 0 4px 16px var(--blue-glow); }
.btnGhost { color: var(--text-primary) !important; background: transparent; border: 1px solid var(--gray-300); }
.btnGhost:hover { border-color: var(--blue); color: var(--blue-text) !important; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------------- footer, mirrors Footer.module.css ---------------- */

.siteFooter { background: var(--white); padding: 48px 0 32px; border-top: 1px solid var(--border-color); }
.footerGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 24px; }
.logoCol { display: flex; justify-content: center; }
.logoCol img { max-width: 120px; height: auto; opacity: 0.9; transition: opacity 0.2s var(--ease); }
.logoCol img:hover { opacity: 1; }
.socialCol { display: flex; gap: 8px; justify-content: center; align-items: center; }
.socialIcon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent;
  border: 1px solid var(--border-color); border-radius: 8px;
  transition: all 0.2s var(--ease);
}
.socialIcon:hover { border-color: var(--gray-400); background: var(--gray-50); }
.socialIcon img { width: 18px; height: 18px; filter: brightness(0); opacity: 0.4; transition: opacity 0.2s var(--ease); }
.socialIcon:hover img { opacity: 0.8; }
.rightCol { text-align: center; }
.rightCol p {
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--text-muted); margin: 0;
}
.legalRow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 20px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.legalRow a { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; padding: 10px 4px; font-weight: 400; }
.legalRow a:hover { color: var(--blue-text); text-decoration: underline; }
.colophon { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); text-align: center; }
.colophon p { font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); margin: 0 auto 8px; }

@media (max-width: 768px) {
  .footerGrid { grid-template-columns: 1fr; gap: 24px; }
  .socialCol { flex-wrap: wrap; }
}

/* ---------------- global states ---------------- */

*:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: var(--on-blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  .hero { padding: 48px 0 40px; }
  section.block { padding: 44px 0; }
  .actions .btn, .actions .btnGhost { width: 100%; }
}


/* ------------------------------------------------------------------ *
 * Section folds: the collapsed-heading structure the app uses, for the
 * static pages. A closed page reads as a table of contents; the summary
 * says what is inside so no click is a gamble.
 * ------------------------------------------------------------------ */

details.fold { border-bottom: 1px solid var(--border-color); }
details.fold:first-of-type { border-top: 1px solid var(--border-color); }

details.fold > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  max-width: var(--content-max); margin: 0 auto;
  padding: 48px var(--content-pad);
  cursor: pointer; list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.foldText { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 30rem; }
.foldTitle {
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.2;
  color: var(--text-primary); text-wrap: balance;
}
details.fold > summary:hover .foldTitle { color: var(--blue-text); }
.foldHint { font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }

.foldAff { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; }
details.fold > summary:hover .foldAff { color: var(--blue-text); }
.chev { width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform 0.2s var(--ease); }
details.fold[open] .chev { transform: rotate(45deg); }

.foldBody { border-top: 1px solid var(--border-subtle); padding: 8px 0 40px; }
.foldBody .block { padding: 24px 0 0; border-top: none; }

@media (max-width: 560px) {
  details.fold > summary { padding: 30px var(--content-pad); }
  .foldAff { display: none; }
}

/* ------------------------------------------------------------------ *
 * The HaaS process: seven steps, clickable. Selecting a step reveals its
 * explanation below the strip. Pure CSS radio state, so it works under the
 * hash-pinned CSP with no script and no new attack surface.
 * ------------------------------------------------------------------ */

.pdiag { margin: 0 0 22px; }
.pdiag > input { position: absolute; opacity: 0; pointer-events: none; }

/*
 * The frame, per the METEORSTORM reference figures: a titled white panel,
 * one colored band per phase wearing a pill header that straddles its top
 * border and an italic definition line, coded step boxes inside, and two
 * vertical rails stating the reading direction. Light theme only, like the
 * rest of this sheet, so the band colors are literals.
 */
.mdFrame {
  position: relative; background: var(--bg-primary);
  border: 1px solid var(--border-color); border-radius: 14px;
  padding: 24px 58px 24px 58px; margin: 0 0 16px;
}
.mdTitle {
  margin: 0 0 22px; text-align: center;
  font-size: 1.08rem; font-weight: 700; color: var(--text-primary);
}
/* The honest status line under the figure title: all serve, not all answer. */
.mdNote {
  max-width: 62ch; margin: 0 auto 24px; text-align: center;
  font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary);
}
.mdRail {
  position: absolute; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text-muted);
}
.mdRailL { left: 20px; }
.mdRailL::after { content: ' \2193'; }
.mdRailR { right: 20px; }
.mdRailR::before { content: '\2191 '; }

.mdBand {
  /* --bc band color, --bt band tint, --bp pill fill. Set per band; every
     descendant border and accent resolves against them. */
  border: 1.5px solid var(--bc); background: var(--bt);
  border-radius: 12px; padding: 0 16px 16px;
}
.mdBand + .mdBand { margin-top: 20px; }
/*
 * One colour per band, and the order of the bands is the order of the work.
 * Control plane violet, reference magenta, then the three original bands,
 * then delivery green because it is the only one that leaves the building.
 */
.bandCtrl  { --bc: #7c3aed; --bt: #f5f3ff; --bp: #6d28d9; }
.bandRef   { --bc: #be185d; --bt: #fdf2f8; --bp: #9d174d; }
.bandPrep  { --bc: #d97706; --bt: #fffbeb; --bp: #b45309; }
.bandBuild { --bc: #7c2d12; --bt: #fff7ed; --bp: #7c2d12; }
.bandExec  { --bc: #0f766e; --bt: #f0fdfa; --bp: #0f766e; }
.bandProve { --bc: #1d4ed8; --bt: #eff6ff; --bp: #1e40af; }
.bandShip  { --bc: #15803d; --bt: #f0fdf4; --bp: #166534; }

.mdPill {
  display: inline-block; margin: -13px 0 6px 6px; padding: 5px 16px;
  border-radius: 999px; background: var(--bp); color: #fff;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.mdDef {
  margin: 2px 4px 12px; font-size: 0.85rem; line-height: 1.55;
  color: var(--text-secondary); text-wrap: pretty;
}

.mdRow { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }

/*
 * The reference band holds thirteen agents, which is not a multiple of any
 * column count, so flex leaves the last one alone on its row stretched to full
 * width and the band reads as broken. Grid keeps every box one column wide, so
 * an odd last row is short rather than distorted.
 */
.bandRef .mdRow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.bandRef .mdRow li { flex: none; }
.mdRow li { display: flex; flex: 1 1 11rem; min-width: 0; }
.mdRow label, .mdRow .mdBox {
  flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; border: 1.5px solid var(--bc); border-radius: 10px;
  background: var(--bg-primary); transition: all 0.15s var(--ease);
}
.mdRow label:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.mdRow .mdBox { cursor: default; }
.mdRow .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-primary); border: 1.5px solid var(--bc); color: var(--bc);
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  transition: all 0.15s var(--ease);
}
.mdRow .stepName { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.mdRow .agentName {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--text-primary); white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Overlays. The SAME figure, read three ways: what happens and who
 * decides (process), what software is running (SBOM), and where AI is
 * used at all (AIBOM). Three views rather than three diagrams, because an
 * organization needs to see that the bill of materials describes THIS
 * process, not a separate document about it. Radio state, no script, so
 * nothing is added to the hash pinned CSP.
 * ------------------------------------------------------------------ */

.ovlBar {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0 0 18px;
}
.ovlBar label {
  cursor: pointer; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-secondary);
  transition: all 0.15s var(--ease);
}
.ovlBar label:hover { border-color: var(--blue); color: var(--blue-text); }
#ov1:checked ~ .ovlBar label[for="ov1"],
#ov2:checked ~ .ovlBar label[for="ov2"],
#ov3:checked ~ .ovlBar label[for="ov3"] {
  background: var(--gray-900); border-color: var(--gray-900); color: #fff;
}
#ov1:focus-visible ~ .ovlBar label[for="ov1"],
#ov2:focus-visible ~ .ovlBar label[for="ov2"],
#ov3:focus-visible ~ .ovlBar label[for="ov3"] {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* One chip under each step name, carrying whichever view is selected. */
.ovlChip {
  display: none; flex-basis: 100%; margin: 6px 0 0 38px;
  align-items: center; gap: 7px;
  font-size: 0.73rem; line-height: 1.45; color: var(--text-secondary);
  text-wrap: pretty;
}
.ovlChip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--dot, var(--gray-400));
}
.chipHuman { --dot: #475569; }
.chipAi    { --dot: #7c3aed; }
.chipAuto  { --dot: #0f766e; }
.chipSbom, .chipAibom { font-family: var(--font-mono); font-size: 0.68rem; }
.chipSbom  { --dot: #b45309; }
.chipAibom { --dot: #7c3aed; }
.chipNone  { --dot: var(--gray-300); font-style: italic; }

#ov1:checked ~ .mdFrame .chipProc,
#ov2:checked ~ .mdFrame .chipSbom,
#ov3:checked ~ .mdFrame .chipAibom { display: flex; }

/* Band definition lines swap with the view, so a band always describes
   what the reader is actually looking at. */
.mdDef { display: none; }
#ov1:checked ~ .mdFrame .defProc,
#ov2:checked ~ .mdFrame .defSbom,
#ov3:checked ~ .mdFrame .defAibom { display: block; }

/* The step box grows to hold its chip rather than clipping it. */
.mdRow label, .mdRow .mdBox { flex-wrap: wrap; align-items: center; }
.mdRow .stepName { white-space: normal; }

/* A selected step is filled with its band colour, so the chip has to lift
   off that fill rather than off white. */
#ps1:checked ~ .mdFrame label[for="ps1"] .ovlChip,
#ps2:checked ~ .mdFrame label[for="ps2"] .ovlChip,
#ps3:checked ~ .mdFrame label[for="ps3"] .ovlChip,
#ps4:checked ~ .mdFrame label[for="ps4"] .ovlChip,
#ps5:checked ~ .mdFrame label[for="ps5"] .ovlChip,
#ps6:checked ~ .mdFrame label[for="ps6"] .ovlChip,
#ps7:checked ~ .mdFrame label[for="ps7"] .ovlChip { color: rgba(255,255,255,0.92); }
#ps1:checked ~ .mdFrame label[for="ps1"] .ovlChip::before,
#ps2:checked ~ .mdFrame label[for="ps2"] .ovlChip::before,
#ps3:checked ~ .mdFrame label[for="ps3"] .ovlChip::before,
#ps4:checked ~ .mdFrame label[for="ps4"] .ovlChip::before,
#ps5:checked ~ .mdFrame label[for="ps5"] .ovlChip::before,
#ps6:checked ~ .mdFrame label[for="ps6"] .ovlChip::before,
#ps7:checked ~ .mdFrame label[for="ps7"] .ovlChip::before { background: #fff; }

/* The legend, which is what makes the dots mean anything. */
.ovlKey {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  margin: 16px 0 0; padding: 14px 16px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem; color: var(--text-secondary);
}
.ovlKey span { display: inline-flex; align-items: center; gap: 8px; }
.ovlKey span::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--gray-400));
}
#ov1:checked ~ .mdFrame .keyProc,
#ov2:checked ~ .mdFrame .keySbom,
#ov3:checked ~ .mdFrame .keyAibom { display: flex; }
.ovlKey { display: none; }

@media (max-width: 720px) {
  .ovlChip { margin-left: 0; }
}

/* The selected step and its panel. One rule pair per step: CSS state, no JS. */
.pdesc {
  display: none; margin: 0; padding: 16px 20px;
  border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0;
  background: var(--bg-secondary);
  font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); text-wrap: pretty;
}
.pdesc strong { color: var(--text-primary); }

/* The selected step fills with its band's color; the circle inverts. The
   variables resolve at the label, inside whichever band it sits in. */
#ps1:checked ~ .mdFrame label[for="ps1"], #ps2:checked ~ .mdFrame label[for="ps2"],
#ps3:checked ~ .mdFrame label[for="ps3"], #ps4:checked ~ .mdFrame label[for="ps4"],
#ps5:checked ~ .mdFrame label[for="ps5"], #ps6:checked ~ .mdFrame label[for="ps6"],
#ps7:checked ~ .mdFrame label[for="ps7"] {
  background: var(--bc); border-color: var(--bc);
}
#ps1:checked ~ .mdFrame label[for="ps1"] .stepName, #ps2:checked ~ .mdFrame label[for="ps2"] .stepName,
#ps3:checked ~ .mdFrame label[for="ps3"] .stepName, #ps4:checked ~ .mdFrame label[for="ps4"] .stepName,
#ps5:checked ~ .mdFrame label[for="ps5"] .stepName, #ps6:checked ~ .mdFrame label[for="ps6"] .stepName,
#ps7:checked ~ .mdFrame label[for="ps7"] .stepName { color: #fff; }
#ps1:checked ~ .mdFrame label[for="ps1"] .num, #ps2:checked ~ .mdFrame label[for="ps2"] .num,
#ps3:checked ~ .mdFrame label[for="ps3"] .num, #ps4:checked ~ .mdFrame label[for="ps4"] .num,
#ps5:checked ~ .mdFrame label[for="ps5"] .num, #ps6:checked ~ .mdFrame label[for="ps6"] .num,
#ps7:checked ~ .mdFrame label[for="ps7"] .num {
  background: #fff; border-color: #fff; color: var(--bc);
}
#ps1:checked ~ #pd1, #ps2:checked ~ #pd2, #ps3:checked ~ #pd3, #ps4:checked ~ #pd4,
#ps5:checked ~ #pd5, #ps6:checked ~ #pd6, #ps7:checked ~ #pd7 { display: block; }

#ps1:focus-visible ~ .mdFrame label[for="ps1"], #ps2:focus-visible ~ .mdFrame label[for="ps2"],
#ps3:focus-visible ~ .mdFrame label[for="ps3"], #ps4:focus-visible ~ .mdFrame label[for="ps4"],
#ps5:focus-visible ~ .mdFrame label[for="ps5"], #ps6:focus-visible ~ .mdFrame label[for="ps6"],
#ps7:focus-visible ~ .mdFrame label[for="ps7"] { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 720px) {
  .mdFrame { padding: 20px 18px; }
  .mdRail { display: none; }
  .mdRow li { flex-basis: 100%; }
  .mdRow .stepName { white-space: normal; }
}


/* ------------------------------------------------------------------ *
 * Who we are: a scroll-snap image carousel and the byline. Pure CSS.
 * ------------------------------------------------------------------ */

.carShell { margin: 32px 0 24px; }
.carousel {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* The buttons are the control; a scrollbar under a controlled track reads
     as two competing affordances. Touch and wheel scrolling still work. */
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.carousel figure {
  /* Two full frames per view on desktop, one with a peek of the next on
     mobile, so it is always visible that more images exist. */
  flex: 0 0 calc(50% - 8px); scroll-snap-align: start; margin: 0;
}
@media (max-width: 860px) {
  .carousel figure { flex: 0 0 88%; }
}

.carNav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 14px;
}
.carBtn {
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-primary); font-size: 1rem;
  transition: all 0.15s var(--ease);
}
.carBtn:hover { border-color: var(--blue); color: var(--blue-text); }
.carBtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.carCount {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--text-muted); min-width: 3.5em; text-align: center;
}
.carousel img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.carousel figcaption {
  margin-top: 8px; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted);
}

.byline {
  padding: 16px 20px; background: var(--bg-secondary);
  border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0;
  margin: 0 0 8px;
}
.bylineName { font-size: 0.98rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.bylineRoles { display: grid; grid-template-columns: 5.5rem 1fr; gap: 6px 16px; margin: 0; }
.bylineRoles dt {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-text); padding-top: 0.2em;
}
.bylineRoles dd { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 560px) { .bylineRoles { grid-template-columns: 1fr; gap: 2px 0; } }


/* ------------------------------------------------------------------ *
 * The Pentagon of Pain: five nodes on the shape, hidden-radio state,
 * description panel beside it. Same visual language as the process
 * diagram: numbered circles, separate widgets, no script.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * The Pentagon of Pain, in "Thinking".
 *
 * Five points on a pentagon, one selected at a time. Everything is radio
 * state and CSS: no script, so nothing is added to the hash pinned CSP.
 *
 * The motion is doing a job rather than decorating. The ring rotates slowly
 * to say the transformation is continuous; the pentagon edges flow to say
 * the five points feed each other; the selected spoke lights to say which
 * point the panel is describing. Every one of those is switched off under
 * prefers-reduced-motion, where the same information is carried by colour
 * and weight alone.
 * ------------------------------------------------------------------ */

.pop {
  display: grid; grid-template-columns: 360px 1fr; gap: 32px;
  align-items: center; margin: 4px 0 8px;
}
.pop > input { position: absolute; opacity: 0; pointer-events: none; }

.popStage { position: relative; width: 360px; height: 340px; }
.popShape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* The slow outer ring: continuous, never finished. */
.popRing {
  fill: none; stroke: var(--gray-200); stroke-width: 0.6;
  stroke-dasharray: 2 4; transform-origin: 50px 52px;
  animation: popSpin 90s linear infinite;
}
@keyframes popSpin { to { transform: rotate(360deg); } }

/* The pentagon itself, with the dash flowing between the points. */
.popEdge {
  fill: none; stroke: var(--gray-300); stroke-width: 1.4;
  stroke-dasharray: 5 5; animation: popFlow 3.2s linear infinite;
}
@keyframes popFlow { to { stroke-dashoffset: -20; } }

/* Spokes from the centre. Dim until their point is selected. */
.popSpoke {
  stroke: var(--gray-200); stroke-width: 0.8; opacity: 0.55;
  transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease),
              stroke-width 0.25s var(--ease);
}
.popHub { fill: var(--gray-300); transition: fill 0.3s var(--ease); }

.popNode {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
}
.popNode .num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-primary); border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700;
  transition: all 0.25s var(--ease);
}
.popNode:hover .num { border-color: var(--blue); transform: scale(1.06); }
.popName {
  font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; transition: color 0.25s var(--ease);
}

/* Vertices of the polygon (50,4 96,38 78,92 22,92 4,38) in stage space. */
.popN1 { left: 50%; top: 8%; }
.popN2 { left: 92%; top: 39%; }
.popN3 { left: 76%; top: 90%; }
.popN4 { left: 24%; top: 90%; }
.popN5 { left: 8%; top: 39%; }

/* --- the selected point ------------------------------------------- */

#pp1:checked ~ .popStage .popN1 .num, #pp2:checked ~ .popStage .popN2 .num,
#pp3:checked ~ .popStage .popN3 .num, #pp4:checked ~ .popStage .popN4 .num,
#pp5:checked ~ .popStage .popN5 .num {
  background: var(--blue); border-color: var(--blue); color: var(--on-blue);
  transform: scale(1.18);
  box-shadow: 0 0 0 6px var(--blue-glow);
}
#pp1:checked ~ .popStage .popN1 .num::after, #pp2:checked ~ .popStage .popN2 .num::after,
#pp3:checked ~ .popStage .popN3 .num::after, #pp4:checked ~ .popStage .popN4 .num::after,
#pp5:checked ~ .popStage .popN5 .num::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--blue); animation: popPulse 2.4s ease-out infinite;
}
@keyframes popPulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
#pp1:checked ~ .popStage .popN1 .popName, #pp2:checked ~ .popStage .popN2 .popName,
#pp3:checked ~ .popStage .popN3 .popName, #pp4:checked ~ .popStage .popN4 .popName,
#pp5:checked ~ .popStage .popN5 .popName { color: var(--blue-text); font-weight: 700; }

#pp1:checked ~ .popStage .popS1, #pp2:checked ~ .popStage .popS2,
#pp3:checked ~ .popStage .popS3, #pp4:checked ~ .popStage .popS4,
#pp5:checked ~ .popStage .popS5 {
  stroke: var(--blue); stroke-width: 1.6; opacity: 1;
}
.pop > input:checked ~ .popStage .popHub { fill: var(--blue); }

#pp1:focus-visible ~ .popStage .popN1, #pp2:focus-visible ~ .popStage .popN2,
#pp3:focus-visible ~ .popStage .popN3, #pp4:focus-visible ~ .popStage .popN4,
#pp5:focus-visible ~ .popStage .popN5 { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }

/* --- the panel ----------------------------------------------------- */

.popPanel .pdesc { display: none; }
#pp1:checked ~ .popPanel #pw1, #pp2:checked ~ .popPanel #pw2,
#pp3:checked ~ .popPanel #pw3, #pp4:checked ~ .popPanel #pw4,
#pp5:checked ~ .popPanel #pw5 { display: block; animation: popIn 0.35s var(--ease); }
@keyframes popIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.popOrd {
  display: block; font-family: var(--font-mono); font-size: 1.5rem;
  font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 10px;
}
.popTitle {
  display: block; font-size: 1.05rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 10px;
}
.popQuote {
  display: block; margin: 0 0 12px; padding: 0 0 0 14px;
  border-left: 3px solid var(--blue);
  font-style: italic; font-size: 0.95rem; line-height: 1.6;
  color: var(--blue-text);
}
.popBody { font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); }

/*
 * One image per point, under the words rather than over them. The quote is
 * the argument and the picture is the illustration, so the reader meets them
 * in that order. A fixed 16 by 9 box with a cover crop keeps the panel the
 * same height whatever shape the file turns out to be, which stops the
 * pentagon jumping as the reader moves between points.
 */
.popImg {
  display: block; width: 100%; margin: 16px 0 6px;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-secondary);
}
.popCap {
  display: block; font-size: 0.72rem; color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Motion is never the only carrier of meaning, and it is optional. */
@media (prefers-reduced-motion: reduce) {
  .popRing, .popEdge { animation: none; }
  .popEdge { stroke-dasharray: none; }
  .popNode .num::after { animation: none; opacity: 0; }
  #pp1:checked ~ .popPanel #pw1, #pp2:checked ~ .popPanel #pw2,
  #pp3:checked ~ .popPanel #pw3, #pp4:checked ~ .popPanel #pw4,
  #pp5:checked ~ .popPanel #pw5 { animation: none; }
}

@media (max-width: 820px) {
  .pop { grid-template-columns: 1fr; }
  .popStage { margin: 0 auto; }
}

/* ------------------------------------------------------------------ *
 * Who we are: the record in numbers, and the credential line.
 * ------------------------------------------------------------------ */

.statRow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  list-style: none; margin: 20px 0 16px; padding: 0;
}
.statRow li {
  padding: 16px 18px; border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-primary);
}
.statNum {
  display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--blue-text); margin-bottom: 4px;
}
.statLabel { font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); display: block; }
@media (max-width: 860px) { .statRow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .statRow { grid-template-columns: 1fr; } }

.credLine {
  font-size: 0.85rem; line-height: 1.7; color: var(--text-muted);
  margin: 0 0 20px;
}


/* Nested folds inside a parent fold: visibly children, not siblings.
   The owner's ruling of 26 August 2026: DOM nesting alone read as a flat list
   of same-weight rows. Children are indented under the parent behind a
   vertical guide line, at subordinate scale, and the guide turns blue while a
   child is open so the reader always sees which branch they are inside. */
details.fold.sub {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--content-pad);
  border-bottom: none;
}
details.fold.sub > summary,
details.fold.sub > .foldBody {
  margin-left: 10px;
  padding-left: 28px;
  border-left: 2px solid var(--gray-300);
}
details.fold.sub > summary { padding-top: 20px; padding-bottom: 20px; max-width: none; border-top: none; }
details.fold.sub:first-of-type > summary { padding-top: 4px; }
details.fold.sub[open] > summary,
details.fold.sub[open] > .foldBody { border-left-color: var(--blue); }
details.fold.sub .foldTitle { font-size: clamp(1.02rem, 1.8vw, 1.25rem); }
details.fold.sub .foldHint { font-size: 0.875rem; }
details.fold.sub .foldBody { padding-bottom: 24px; }
details.fold.sub .foldBody .wrap { padding-left: 0; padding-right: 0; }
details.fold.sub:first-of-type { border-top: none; }


/* Partner and contributor cards inside Who we are. */
.orgRow { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; }
.orgCard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-primary); text-decoration: none;
  color: var(--text-primary); font-weight: 600; font-size: 0.92rem;
  transition: border-color 0.15s var(--ease);
}
.orgCard:hover { border-color: var(--blue); }
.orgCard img { height: 36px; width: auto; display: block; }

/* ---------------------------------------------------------------------------
   Guide cards, the H3 "The process" sub-fold.

   Three ordered stages, each linking to a page GENERATED from the markdown in
   the H3 repository. The number is a real <ol> counter's job in spirit but is
   written out as a span, because the ordinal has to sit beside the title in the
   card rather than outside it in the marker position.

   The whole card is the link. A card with a link only in the corner makes the
   reader hunt for the hit area, and on a phone that corner is the hardest part
   of the card to reach.
   --------------------------------------------------------------------------- */
.guideList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.guideCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--gray-300);
  border-radius: 6px;
  background: var(--bg-primary);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              transform 0.2s var(--ease);
}

.guideCard:hover,
.guideCard:focus-visible {
  border-left-color: var(--blue);
  background: var(--bg-secondary);
  transform: translateX(2px);
}

.guideNum {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-text);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.guideCard:hover .guideNum,
.guideCard:focus-visible .guideNum {
  border-color: var(--blue);
}

.guideText { display: block; }

.guideTitle {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.guideBody {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.guideNote {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.guideGo {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-text);
}

.guideCard:hover .guideGo,
.guideCard:focus-visible .guideGo { color: var(--blue-text-hover); }

@media (max-width: 560px) {
  .guideCard { padding: 16px; gap: 14px; }
  .guideNum { width: 28px; height: 28px; font-size: 13px; }
  .guideTitle { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .guideCard { transition: none; }
  .guideCard:hover, .guideCard:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ *
 * The guide reader, on /h3/setup.html and its two siblings.
 *
 * The guide is a PDF and the page presents it in the browser's own reader.
 * An iframe, not object or embed: object-src stays 'none' in the CSP and only
 * frame-src was opened to 'self'. There is no script here and there cannot be,
 * so the download is a plain link with the download attribute, and the reader
 * is whatever the visitor's browser already ships.
 *
 * aspect-ratio rather than a fixed height, so a page shaped like A4 stays
 * shaped like A4 as the column narrows.
 * ------------------------------------------------------------------ */

main.wrap .sub {
  font-size: 1.02rem; line-height: 1.6; color: var(--text-secondary);
  margin: 0 0 22px; max-width: 62ch;
}

.pdfGet {
  display: inline-block; padding: 9px 18px; margin-right: 12px;
  border-radius: 8px; background: var(--blue); color: var(--on-blue);
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  transition: background 0.15s var(--ease);
}
.pdfGet:hover, .pdfGet:focus-visible { background: var(--blue-text); }
.pdfMeta { font-size: 0.82rem; color: var(--text-muted); }

.pdfReader {
  margin: 6px 0 10px; border: 1px solid var(--border-color);
  border-radius: 10px; overflow: hidden; background: var(--bg-secondary);
}
.pdfReader iframe {
  display: block; width: 100%; aspect-ratio: 1 / 1.24; border: 0;
}

/* Only worth reading when the frame above failed, so it stays quiet. */
.pdfFallback { margin: 0 0 30px; }

.pdfWeb { border-top: 1px solid var(--border-color); padding-top: 16px; }
.pdfWeb > summary {
  cursor: pointer; font-size: 0.9rem; font-weight: 600;
  color: var(--blue-text); padding: 6px 0;
}
.pdfWeb > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pdfWebBody { padding-top: 10px; }

/* A phone renders an embedded PDF badly whatever we do here, so the reader
   gives way to the download and the web rendering carries the guide. */
@media (max-width: 700px) {
  .pdfReader { display: none; }
  .pdfFallback { margin-bottom: 18px; }
  .pdfWeb > summary { color: var(--text-primary); }
}

/* Guide figures: the screen captures in the generated guide pages. Written
   by docs/guides/build-html.py as <figure class="guideFig">, and the same
   picture and caption the PDF carries, so a reader comparing the two sees
   one document. Bordered because a screenshot of a white UI on a white page
   has no edge without one. */
.guideFig {
  margin: 22px 0;
}
.guideFig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.guideFig figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-600);
}

/* The exercise lifecycle on the portal: four phases from planning to the
   evidence you keep. Not the three adoption guides below it, which are how an
   organization gets to the point of running one. Deliberately quieter than
   .guideCard: these are not links, and a block that looks pressable and is not
   is worse than a plain one. Counter-numbered so the order is unmistakable
   without the numbers being their own display element. */
.lifeList {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: life;
}
.lifeList > li {
  counter-increment: life;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
}
.lifeList > li::before {
  content: counter(life);
  grid-row: 1 / span 4;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-text);
  background: var(--bg-secondary);
  border-radius: 7px;
  padding: 8px 11px;
  align-self: start;
}
.lifePhase {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}
.lifeWhen {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.lifeBody {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 4px;
  max-width: 68ch;
}
.lifeOut {
  font-size: 13px;
  line-height: 1.5;
  color: var(--blue-text);
  margin-top: 6px;
}
@media (max-width: 620px) {
  .lifeList > li {
    grid-template-columns: 1fr;
  }
  .lifeList > li::before {
    grid-row: auto;
    justify-self: start;
  }
}

/* Tables in the generated guide pages. The markdown source has carried them
   for a long time; until the builders learned to render one they printed as
   a run of pipes and dashes. */
.guideTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
}
.guideTable th,
.guideTable td {
  border: 1px solid var(--gray-300);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.guideTable thead th {
  background: var(--bg-secondary, #fafafa);
  font-weight: 600;
}