/* ISARR site stylesheet / v1.1 / 1 Oct 2026
   Built from the agreed designs: Website Hero 6a, Website Pages 9a/9b, Website Sections 10a. */

/* Self-hosted IBM Plex, per Part C plan section 1. No Google Fonts anywhere. */
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* Moved out of an inline style= attribute so style-src can stay free of 'unsafe-inline'. */
.base-img.desaturate img { filter: saturate(0.6); object-position: 40% 30%; }

.staging-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--signal); color: var(--white); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 8px 12px; }

/* Honeypot field: visually hidden, not display:none, so simple bot heuristics that
   skip display:none fields still fall for it. Real users never see or reach it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.noscript-contact { padding: 24px; border: 1px solid var(--rule); }

:root {
  --midnight: #0F1E2E;
  --night: #05080C;
  --paper: #F4F2ED;
  --white: #FFFFFF;
  --signal: #CB4D0E;
  --ink: #0F1E2E;
  --ink-2: #2A3947;
  --ink-3: #4A5560;
  --ink-4: #6B7580;
  --rule: #D3D5D4;
  --rule-soft: rgba(15, 30, 46, 0.15);
  --on-dark: #F4F2ED;
  --on-dark-2: #C9CED3;
  --on-dark-3: #AEB6BE;
  --on-dark-4: #8C96A0;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --side: 56px;
  --indent: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 300; text-wrap: pretty; }
p { text-wrap: pretty; }
a { color: var(--ink); }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.stop { color: var(--signal); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink); padding: 12px 16px; z-index: 20; }
.skip:focus { left: 16px; top: 16px; }

/* Shared pieces */
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.on-dark .eyebrow { color: var(--on-dark-3); }
.rule-short { width: 40px; height: 1px; background: var(--on-dark-4); }
.arrow::after { content: '→'; margin-left: 14px; }
.btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.btn-paper { background: var(--paper); color: var(--midnight); }
.btn-paper:hover { background: var(--white); color: var(--midnight); }
.btn-midnight { background: var(--midnight); color: var(--paper); }
.btn-midnight:hover { background: var(--night); color: var(--paper); }
.btn-outline { border-color: var(--paper); color: var(--paper); }
.btn-outline:hover { color: var(--paper); background: rgba(244, 242, 237, 0.08); }
.btns { display: flex; flex-wrap: wrap; gap: 16px; }
.link { font-size: 15px; font-weight: 500; text-decoration: none; display: inline-flex; gap: 10px; white-space: nowrap; }
.link::after { content: '→'; }
.on-dark .link { color: var(--on-dark); }

/* Header */
.site-header { position: relative; z-index: 5; padding: 36px var(--side); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--on-dark); }
.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.brand img { width: 132px; }
.brand .bar { width: 1.5px; height: 36px; background: var(--signal); }
.brand .tagline { font-size: 13px; line-height: 1.35; color: #D5D9DD; white-space: nowrap; }
.nav { display: flex; gap: 44px; }
.nav a { font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-decoration: none; color: var(--on-dark); padding-bottom: 6px; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark-4); }
.nav a[aria-current="page"] { border-bottom-color: var(--signal); }
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { width: 24px; height: 1.5px; background: var(--on-dark); }

/* Hero (6a) */
.hero { position: relative; background: var(--night); color: var(--on-dark); overflow: hidden; width: 100%; min-height: clamp(680px, 56.25vw, 960px); display: flex; flex-direction: column; }
.hero > .site-header, .hero > .hero-copy, .hero > .hero-foot { position: relative; z-index: 2; }
.hero-photo { position: absolute; top: 0; bottom: 0; left: 22%; right: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,0.4) 30%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,0.4) 30%, #000 45%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,8,12,0.94) 0%, rgba(5,8,12,0.82) 30%, rgba(5,8,12,0.25) 58%, rgba(5,8,12,0) 76%), linear-gradient(180deg, rgba(5,8,12,0.85) 0%, rgba(5,8,12,0.4) 12%, rgba(5,8,12,0) 24%, rgba(5,8,12,0) 76%, rgba(5,8,12,0.5) 88%, rgba(5,8,12,0.85) 100%); }
.hero-note { position: absolute; display: flex; align-items: center; pointer-events: none; }
.hero-note::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark); margin-left: -3px; }
.hero-note span { display: flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--on-dark); white-space: nowrap; }
.hero-note span::before { content: ''; width: 64px; height: 1px; background: rgba(244, 242, 237, 0.7); margin-right: 10px; }
.hero-copy { margin: 0 var(--side); padding-top: clamp(32px, 5.5vw, 80px); max-width: 700px; display: flex; flex-direction: column; gap: 26px; }
.hero-copy .eyebrow { color: var(--on-dark-3); margin-top: -6px; }
.hero-copy h1 { font-size: clamp(44px, 4.9vw, 70px); line-height: 1.05; letter-spacing: -0.02em; max-width: 640px; }
.hero-copy .body { font-size: 20px; line-height: 1.5; color: var(--on-dark-2); max-width: 500px; }
.hero-copy .btns { margin-top: 10px; }
.hero-foot { margin: auto var(--side) 0; padding: 48px 0 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-family: var(--mono); font-size: 12px; color: var(--on-dark-3); }
.hero-foot .cap { display: flex; flex-direction: column; gap: 14px; }
.hero-foot .coords { letter-spacing: 0.08em; }

/* Page head (9a) */
.page-head { background: var(--midnight); color: var(--on-dark); padding-bottom: 72px; }
.page-head .grid { padding: 80px var(--side) 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; align-items: end; }
.page-head .title { display: flex; flex-direction: column; gap: 26px; }
.page-head .eyebrow { color: var(--on-dark-3); margin-top: -6px; }
.page-head h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.02em; max-width: 780px; }
.page-head .intro { font-size: 18px; line-height: 1.55; color: var(--on-dark-2); }

/* Sections (10a) */
.section { padding: 96px var(--side) 88px; display: flex; flex-direction: column; gap: 48px; }
.section.dark { background: var(--midnight); color: var(--on-dark); padding: 88px var(--side); }
.section.white { background: var(--white); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; align-items: end; }
.sec-head .t { display: flex; flex-direction: column; gap: 18px; }
.sec-head h2, .h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; max-width: 800px; }
.sec-head p { font-size: 17px; line-height: 1.6; color: var(--ink-3); }
.dark .sec-head p { color: var(--on-dark-2); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { padding: 32px 32px 40px 0; margin-right: 32px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 14px; }
.steps > .step:last-child { border-right: 0; margin-right: 0; }
.steps.rows .step:nth-child(3) { border-right: 0; margin-right: 0; }
.steps.rows .step:nth-child(n+4) { border-top: 1px solid var(--rule-soft); }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--signal); }
.step h3 { font-size: 24px; font-weight: 400; line-height: 1.25; }
.step p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
.cap { border-top: 1px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.cap .top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.cap h3 { font-size: 30px; font-weight: 400; }
.cap .kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }
.cap p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 600px; }
.cap .mods { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.8; color: var(--ink-3); text-transform: uppercase; }
.rows-table { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; border-top: 1px solid var(--ink); padding-top: 40px; }
.rows-table .lead { display: flex; flex-direction: column; gap: 16px; }
.rows-table .lead p { font-size: 17px; line-height: 1.6; color: var(--ink-3); }
.rows-table ul { list-style: none; margin: 0; padding: 0; }
.rows-table li { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); font-size: 17px; }
.big-stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; align-items: center; }
.big-stat .num { font-size: clamp(80px, 10vw, 150px); font-weight: 300; line-height: 0.9; letter-spacing: -0.04em; }
.big-stat .txt { display: flex; flex-direction: column; gap: 16px; }
.big-stat .txt p:first-child { font-size: 24px; font-weight: 300; line-height: 1.4; color: #E6E3DC; }
.big-stat .txt p + p { font-size: 15px; color: var(--on-dark-3); }
.aside-band { border-top: 1px solid rgba(15, 30, 46, 0.2); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.aside-band .t { display: flex; flex-direction: column; gap: 8px; }
.aside-band p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 760px; }

/* Insights (9a) */
.filter-bar { padding: 28px var(--side); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; border: 1px solid var(--midnight); color: var(--midnight); }
.filters a:hover { color: var(--midnight); background: var(--white); }
.filters a[aria-current="true"] { background: var(--midnight); color: var(--paper); }
.filter-bar .sort { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-3); }
.featured { margin: 56px var(--side) 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); text-decoration: none; color: var(--on-dark); }
.featured:hover { color: var(--on-dark); }
.featured .img { height: 500px; overflow: hidden; background: var(--night); }
.featured .img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.featured .panel { background: var(--midnight); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.featured .panel .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--on-dark-3); }
.featured .panel h2 { font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; }
.featured .panel p { font-size: 17px; line-height: 1.55; color: var(--on-dark-2); }
.featured .panel .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.featured .panel .read { font-size: 16px; font-weight: 500; }
.featured .panel .read::after { content: '→'; margin-left: 12px; }
.featured .panel .src { font-family: var(--mono); font-size: 11px; color: var(--on-dark-4); }
.featured:hover h2 { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.cards { padding: 64px var(--side) 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; }
.cards.tight { padding: 0; }
.card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--ink); }
.card:hover { color: var(--ink); }
.card:hover .title { color: var(--signal); }
.card .img { position: relative; height: 240px; overflow: hidden; background: var(--midnight); }
.card .img img { width: 100%; height: 100%; object-fit: cover; }
.card .img .mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card .img .mark img { width: 56px; height: auto; opacity: 0.9; }
.tag { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; padding: 7px 10px; background: var(--midnight); color: var(--paper); }
.tag.update { background: var(--paper); color: var(--midnight); }
.card .meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-3); }
.card .title { font-size: 24px; font-weight: 400; line-height: 1.25; }
.card .dek { font-size: 16px; line-height: 1.55; color: var(--ink-3); }
.subscribe { margin: 0 var(--side) 88px; border-top: 1px solid var(--ink); padding-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 80px; }
.subscribe .t { display: flex; flex-direction: column; gap: 14px; }
.subscribe .t p { font-size: 32px; font-weight: 300; line-height: 1.2; max-width: 560px; }
.subscribe form { display: flex; flex-direction: column; gap: 12px; }
.subscribe .row { display: flex; }
.subscribe input { flex: 1; min-width: 0; border: 1px solid var(--ink); border-right: 0; padding: 0 20px; min-height: 56px; font: inherit; font-size: 16px; background: transparent; color: var(--ink); }
.subscribe input::placeholder { color: var(--ink-4); }
.subscribe button { font: inherit; font-size: 16px; font-weight: 500; padding: 0 28px; min-height: 56px; border: 0; background: var(--midnight); color: var(--paper); cursor: pointer; }
.subscribe button::after { content: '→'; margin-left: 14px; }
.subscribe small { font-size: 13px; color: var(--ink-3); }

/* Article (9b) */
.article-head { background: var(--midnight); color: var(--on-dark); padding-bottom: 64px; }
.article-head .inner { padding: 64px var(--side) 0 calc(var(--side) + 200px); max-width: calc(860px + var(--side) + 200px); display: flex; flex-direction: column; gap: 24px; }
.article-head .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--on-dark-3); }
.article-head h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.article-head .dek { font-size: 20px; line-height: 1.5; color: var(--on-dark-2); max-width: 720px; }
.article-head .by { font-size: 14px; color: var(--on-dark-3); }
.article-img { height: 460px; overflow: hidden; background: var(--night); }
.article-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.article-cap { padding: 12px var(--side) 0 var(--indent); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.kun { margin: 56px var(--side) 0 var(--indent); max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid rgba(15, 30, 46, 0.2); }
.kun > div { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.kun > div:first-child { padding-left: 0; }
.kun > div:last-child { padding-right: 0; }
.kun > div + div { border-left: 1px solid rgba(15, 30, 46, 0.2); }
.kun .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-3); }
.kun .k.next { color: var(--signal); }
.kun p { font-size: 17px; line-height: 1.55; }
.kun .uncertain p { font-weight: 600; }
.article-body { padding: 64px var(--side) 96px var(--indent); display: flex; flex-direction: column; gap: 28px; }
.para { display: grid; grid-template-columns: minmax(0, 680px) 300px; gap: 0 64px; align-items: start; }
.para .txt { display: flex; flex-direction: column; gap: 14px; }
.para h2 { font-size: 26px; font-weight: 400; line-height: 1.25; margin-top: 20px; }
.para p { font-size: 19px; line-height: 1.7; }
.evidence { border-top: 1px solid var(--signal); padding-top: 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.evidence .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-3); }
.evidence .ev { font-size: 14px; line-height: 1.5; }
.evidence .src { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.article-cta { margin: 0 var(--side); border-top: 1px solid var(--ink); padding: 40px 0 80px 200px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.article-cta p { font-size: 28px; font-weight: 300; line-height: 1.25; max-width: 620px; }

/* CTA band and footer */
.cta-band { background: var(--midnight); color: var(--on-dark); padding: 72px var(--side); display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-band p { font-size: clamp(28px, 2.6vw, 36px); font-weight: 300; line-height: 1.2; max-width: 760px; }
.site-footer { background: var(--midnight); color: var(--on-dark-3); padding: 48px var(--side); border-top: 1px solid rgba(244, 242, 237, 0.12); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; font-size: 13px; flex-wrap: wrap; }
.site-footer .left { display: flex; gap: 72px; align-items: flex-end; flex-wrap: wrap; }
.site-footer .id { display: flex; flex-direction: column; gap: 18px; }
.site-footer .id img { width: 104px; }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer .reg { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--on-dark-4); }
.site-footer nav { display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; }
.site-footer nav a { color: var(--on-dark-3); text-decoration: none; }
.site-footer nav a:hover { color: var(--on-dark); }

/* Responsive */
@media (max-width: 1200px) {
  :root { --indent: 56px; }
  .hero-note { display: none; }
  .article-head .inner { padding-left: var(--side); }
  .article-cta { padding-left: 0; }
  .sec-head, .subscribe, .big-stat { grid-template-columns: 1fr; gap: 32px; }
  .page-head .grid { grid-template-columns: 1fr; gap: 24px; }
  .para { grid-template-columns: minmax(0, 1fr) 260px; gap: 0 40px; }
  .nav { gap: 28px; }
}
@media (max-width: 960px) {
  .menu { display: block; }
  .site-header > .nav { display: none; }
  .menu[open] .nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--midnight); padding: 8px var(--side) 24px; }
  .menu .nav a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid rgba(244, 242, 237, 0.15); padding: 0; }
  .site-header { position: relative; }
  .steps, .steps.four, .caps, .cards, .featured, .rows-table { grid-template-columns: 1fr; }
  .step { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .steps.rows .step:nth-child(n+4) { border-top: 0; }
  .featured .img { height: 320px; }
  .para { grid-template-columns: 1fr; gap: 16px; }
  .kun { grid-template-columns: 1fr; }
  .kun > div, .kun > div:first-child, .kun > div:last-child { padding: 20px 0; }
  .kun > div + div { border-left: 0; border-top: 1px solid rgba(15, 30, 46, 0.2); }
  .aside-band, .cta-band, .article-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --side: 20px; }
  .site-header { padding: 20px var(--side); }
  .brand { gap: 12px; }
  .brand img { width: 96px; }
  .brand .bar { height: 30px; }
  .brand .tagline { font-size: 11px; }
  .hero { min-height: 0; }
  .hero-photo { position: relative; order: 1; left: 0; height: 300px; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 35%); mask-image: linear-gradient(0deg, transparent 0%, #000 35%); }
  .hero-shade { display: none; }
  .hero > .site-header { order: 0; }
  .hero > .hero-copy { order: 2; margin: 0; padding: 8px var(--side) 32px; }
  .hero-copy .body { font-size: 17px; }
  .hero > .hero-foot { order: 3; margin: 0; padding: 0 var(--side) 28px; flex-direction: column; align-items: flex-start; }
  .btns .btn { width: 100%; justify-content: center; }
  .section, .section.dark { padding: 56px var(--side); }
  .page-head .grid { padding-top: 40px; }
  .article-img { height: 240px; }
  .para p { font-size: 17px; }
  .featured .panel { padding: 28px; }
  .subscribe .row { flex-direction: column; gap: 10px; }
  .subscribe input { border-right: 1px solid var(--ink); }
}

@media (max-width: 400px) {
  .brand .tagline, .brand .bar { display: none; }
}

/* Diagrams and product images · v1.2 */
.figure { display: flex; flex-direction: column; gap: 12px; }
.figure .fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.figure .ftitle { font-size: 17px; font-weight: 500; }
.figure .flabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); white-space: nowrap; }
.figure .shot { border: 1px solid var(--rule); background: var(--white); width: 100%; }
.figure figcaption { font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 760px; }
.dark .figure figcaption, .dark .figure .flabel { color: var(--on-dark-3); }
.shots-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: center; }

/* Layer stack */
.stack { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0 32px; align-items: stretch; }
.stack .layers { display: flex; flex-direction: column; gap: 6px; }
.stack .layer { display: grid; grid-template-columns: 56px 280px minmax(0, 1fr); align-items: center; min-height: 64px; padding: 0 24px; background: var(--white); border: 1px solid var(--rule); }
.stack .layer.dark { background: var(--midnight); color: var(--on-dark); border-color: var(--midnight); }
.stack .layer .n { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.stack .layer .t { font-size: 17px; font-weight: 500; }
.stack .layer .d { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.stack .layer.dark .d { color: var(--on-dark-2); }
.stack .out { border-left: 2px solid var(--signal); padding: 8px 0 8px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.stack .out span { font-size: 18px; font-weight: 300; }

/* Provenance ladder */
.ladder { border-top: 1px solid var(--ink); }
.ladder .r { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.ladder .r .t { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; }
.ladder .r .t::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; background: var(--sw, var(--ink)); }
.ladder .r .d { font-size: 16px; color: var(--ink-2); }

/* Research vs judgement */
.bars { display: flex; flex-direction: column; gap: 28px; }
.bars .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--on-dark-3); margin-bottom: 10px; display: block; }
.bars .bar { display: flex; min-height: 64px; }
.bars .bar span { display: flex; align-items: center; padding: 0 20px; font-size: 15px; line-height: 1.3; }
.bars .res { background: #4A5560; color: var(--on-dark); }
.bars .base { background: var(--paper); color: var(--midnight); }
/* The judgement segments (Oct 2026 tidy-up): a soft tint of the same orange
   with a solid orange left edge, instead of a solid orange fill. Both colours
   are built from var(--signal), so there is no new colour here. padding-left
   is 16px rather than the 20px of its siblings precisely so border + padding
   still add up to the 20px each segment contributed before: with
   flex-basis: 0, every segment's base size is its own padding + border, so
   the 78/22 and 16/84 splits divide the bar exactly as they did (verified:
   segment widths unchanged to the pixel at 390/768/1024/1440). The .bars
   markup exists only on cortex.html. Selector is .bars .bar span.jud, not
   .bars .jud: padding has to out-specify .bars .bar span above. */
.bars .bar span.jud { background: color-mix(in srgb, var(--signal) 28%, transparent); color: var(--paper); border-left: 4px solid var(--signal); padding-left: 16px; }
.bars .note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--on-dark-4); }

/* Two capabilities bridge */
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); align-items: stretch; }
.bridge .box { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.bridge .box.cx { background: var(--midnight); color: var(--on-dark); }
.bridge .box.op { background: var(--white); border: 1px solid var(--midnight); }
.bridge .box .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
.bridge .box.cx .k { color: var(--on-dark-3); }
.bridge .box .t { font-size: 32px; font-weight: 300; }
.bridge .box ul { list-style: none; margin: 0; padding: 0; }
.bridge .box li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15.5px; }
.bridge .box.cx li { border-top-color: rgba(244, 242, 237, 0.2); }
.bridge .link-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; text-align: center; }
.bridge .link-mid .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.bridge .link-mid .ln { width: 100%; border-top: 2px dashed var(--signal); }
.bridge .link-mid .d { font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* Operating picture hub */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); gap: 0; align-items: center; }
.hub .ins, .hub .outs { display: flex; flex-direction: column; gap: 8px; }
.hub .in { display: flex; align-items: center; }
.hub .in span { flex: 1; display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--white); border: 1px solid var(--midnight); font-size: 15px; }
.hub .in span em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); align-self: center; }
.hub .in::after { content: ''; width: 32px; border-top: 2px solid var(--signal); }
.hub .in.opt span { border-style: dashed; border-color: var(--ink-4); }
.hub .in.opt::after { border-top-style: dashed; }
.hub .core { background: var(--midnight); color: var(--on-dark); padding: 36px 32px; display: flex; flex-direction: column; gap: 4px; }
.hub .core .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--on-dark-3); margin-bottom: 8px; }
.hub .core span:not(.k) { font-size: 22px; font-weight: 300; padding: 10px 0; border-top: 1px solid rgba(244, 242, 237, 0.2); }
.hub .out { display: flex; align-items: center; font-size: 22px; font-weight: 300; }
.hub .out::before { content: ''; width: 32px; border-top: 2px solid var(--signal); margin-right: 16px; }

/* Advice chain */
.chain { display: flex; flex-direction: column; gap: 22px; }
.chain .stages, .chain .line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chain .stages div { display: flex; flex-direction: column; gap: 6px; padding-right: 16px; }
.chain .stages .n { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.chain .stages .t { font-size: 20px; font-weight: 500; }
.chain .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 10px; display: block; }
.chain .line div { display: flex; align-items: center; }
.chain .line div::before { content: ''; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: var(--midnight); }
.chain .line div::after { content: ''; flex: 1; height: 3px; background: var(--midnight); }
.chain .line div:last-child::after { background: transparent; }
.chain .line.off div::before { background: transparent; border: 2px solid var(--ink-4); box-sizing: border-box; }
.chain .line.off div::after { height: 0; border-top: 2px dashed var(--ink-4); background: none; }
.chain .line.off div:nth-child(2) { opacity: 0.6; } .chain .line.off div:nth-child(3) { opacity: 0.35; } .chain .line.off div:nth-child(4) { opacity: 0.18; } .chain .line.off div:nth-child(5) { opacity: 0.08; }

@media (max-width: 960px) {
  .stack, .bridge, .hub, .media-split, .shots-2 { grid-template-columns: 1fr; gap: 20px; }
  .stack .layer { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 18px; gap: 4px 0; }
  .stack .layer .d { grid-column: 2; }
  .stack .out { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 2px solid var(--signal); padding: 14px 0 0; }
  .ladder .r { grid-template-columns: 1fr; gap: 4px; }
  .bridge .link-mid { flex-direction: row; padding: 8px 0; }
  .bridge .link-mid .ln { width: 48px; }
  .hub .in::after, .hub .out::before { display: none; }
  .chain .stages .t { font-size: 15px; }
}

@media (max-width: 960px) { blockquote[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 16px !important; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 15px; line-height: 1.3; padding: 10px 16px; border: 1px solid var(--midnight); }
.chip.solid { background: var(--midnight); color: var(--paper); }
.dark .chip { border-color: rgba(244, 242, 237, 0.5); }
.stack.compact .layer { grid-template-columns: 56px minmax(0, 1fr); min-height: 52px; }
@media (max-width: 960px) { .stack.compact .layer { grid-template-columns: 40px minmax(0, 1fr); } }

.proof-band { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: center; }
.proof-band .stat { display: flex; flex-direction: column; gap: 10px; }
.proof-band .stat strong { font-size: clamp(56px, 6vw, 88px); font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; }
.proof-band .stat span { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.proof-band blockquote { border-left: 2px solid var(--signal); padding-left: 32px; display: flex; flex-direction: column; gap: 16px; }
.proof-band blockquote p { font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.35; }
.proof-band blockquote footer { font-size: 14px; color: var(--ink-3); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.story ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.story li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 0; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.story li .n { font-family: var(--mono); font-size: 12px; color: var(--signal); grid-row: span 2; padding-top: 4px; }
.story li strong { font-size: 20px; font-weight: 500; }
.story li span:last-child { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.change-table { border-top: 1px solid var(--ink); }
.change-table .r { display: grid; grid-template-columns: minmax(0, 1.6fr) 70px 70px 210px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.change-table .r.head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); padding: 10px 0; }
.change-table .t strong { display: block; font-size: 17px; font-weight: 500; }
.change-table .t span { font-size: 14px; color: var(--ink-3); }
.change-table .v { font-family: var(--mono); font-size: 16px; text-align: right; }
.change-table .v.now { font-weight: 500; }
.change-table .k { justify-self: start; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; padding: 5px 9px; border: 1px solid var(--midnight); white-space: nowrap; }
.change-table .k.mat { background: var(--midnight); color: var(--paper); }
.change-table .k.chk { border-style: dashed; }
.change-table .k.band { border-color: var(--ink-4); color: var(--ink-3); }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.roles .role { border-top: 2px solid var(--midnight); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.roles .role h3 { font-size: 20px; font-weight: 500; }
.roles .role p { font-size: 18px; font-weight: 300; line-height: 1.45; }
@media (max-width: 960px) {
  .proof-band, .story { grid-template-columns: 1fr; gap: 28px; }
  .roles { grid-template-columns: 1fr 1fr; }
  .change-table .r { grid-template-columns: minmax(0, 1fr) 48px 48px; }
  .change-table .k { grid-column: 1 / -1; }
  .change-table .r.head span:last-child { display: none; }
}
@media (max-width: 640px) { .roles { grid-template-columns: 1fr; } }

/* v3 home + CORTEX data */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.offer { background: var(--white); border-top: 2px solid var(--midnight); padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.offer h3 { font-size: clamp(30px, 3vw, 40px); font-weight: 300; letter-spacing: -0.01em; }
.offer p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 600px; }
.users { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.users li { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; }
.offer .link { margin-top: auto; padding-top: 8px; }
.proof-line { font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.35; max-width: 1050px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 12px; }
.logo-row span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; line-height: 1.4; white-space: nowrap; padding: 16px 20px; border: 1px dashed var(--ink-4); color: var(--ink-3); }
.wk-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(244,242,237,0.3); }
.wk-strip div { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.wk-strip strong { font-size: clamp(40px, 4.5vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.wk-strip span { font-size: 15px; line-height: 1.45; color: var(--on-dark-2); }
.wk-bar { display: flex; height: 14px; gap: 2px; }
.wk-key { display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--on-dark-2); }
.wk-key i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; box-sizing: border-box; }
.method2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.k-card { background: var(--white); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.k-card .top, .e-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.k-card h3, .e-card h3 { font-size: 24px; font-weight: 500; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; padding: 5px 9px; white-space: nowrap; }
.k-track { position: relative; height: 120px; }
.k-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--rule); padding-top: 16px; }
.k-steps div { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.k-steps b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--signal); }
.e-card { background: var(--midnight); color: var(--on-dark); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.e-card .facts div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(244,242,237,0.15); font-size: 16px; }
.eps { display: flex; flex-direction: column; gap: 10px; }
.ep { display: grid; grid-template-columns: 140px minmax(0, 1fr) 90px; align-items: center; gap: 12px; font-size: 16px; }
.ep .b { position: relative; height: 20px; }
.ep .b i { position: absolute; right: 0; top: 0; bottom: 0; }
.ep .d { font-family: var(--mono); font-size: 14px; text-align: right; }
@media (max-width: 960px) {
  .offers, .method2 { grid-template-columns: 1fr; }
  .wk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-steps { grid-template-columns: 1fr; }
  .ep { grid-template-columns: 100px minmax(0, 1fr) 64px; }
}

/* Product icons */
.ico { width: 16px; height: 16px; display: inline-block; vertical-align: -2px; margin-right: 9px; }
.nav a .ico { opacity: 0.95; }
.offer .ohead { display: flex; align-items: center; gap: 16px; }
.offer .ohead img { width: 40px; height: 40px; }
.bridge .box .t img { width: 32px; height: 32px; margin-right: 12px; vertical-align: -5px; }

.ohead { display: flex; align-items: center; gap: 14px; }
.ohead .hl { width: 1.5px; height: 30px; background: var(--signal); flex-shrink: 0; }
.ohead h3 { line-height: 1; }

.week { background: var(--midnight); color: var(--paper); border-top: 1px solid rgba(244,242,237,0.12); }
.week-in { max-width: var(--max, 1328px); margin: 0 auto; padding: 56px var(--gutter, 56px) 48px; display: flex; flex-direction: column; gap: 28px; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.week .eyebrow { color: #AEB6BE; }
.week .asof { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: #8C96A0; }
.week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(244,242,237,0.25); }
.week .wk { padding: 24px 32px 0 0; display: flex; flex-direction: column; gap: 10px; }
.week .wk + .wk { padding-left: 32px; border-left: 1px solid rgba(244,242,237,0.15); }
.week .wk strong { font-size: clamp(48px, 5vw, 72px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.week .wk span { font-size: 16px; line-height: 1.5; color: #C9CED3; max-width: 320px; }
.week-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: #AEB6BE; }
.week .link { color: var(--paper); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.prod { display: flex; flex-direction: column; background: #FFFFFF; color: var(--ink); text-decoration: none; border-top: 1px solid var(--ink); }
.prod:hover .pt { color: var(--signal); }
.pimg { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #05080C; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcap { position: absolute; left: 16px; bottom: 12px; right: 16px; font-family: var(--mono); font-size: 10.5px; color: #E6E3DC; }
.pbody { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pt { font-size: 32px; font-weight: 400; transition: color .15s; }
.pd { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.pfor { font-size: 14px; color: var(--ink-3); margin-top: auto; padding-top: 8px; }
.pair-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pair-link .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--signal); writing-mode: vertical-rl; transform: rotate(180deg); }
.pair-link .ln { width: 1px; height: 80px; border-left: 2px dashed var(--signal); }
.proof-home { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: center; }
.ph-stat { display: flex; flex-direction: column; gap: 10px; }
.ph-stat strong { font-size: clamp(56px, 6vw, 88px); font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; }
.ph-stat span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.proof-home blockquote { margin: 0; border-left: 2px solid var(--signal); padding-left: 32px; display: flex; flex-direction: column; gap: 14px; }
.proof-home blockquote p { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.35; }
.proof-home blockquote footer { font-size: 14px; color: var(--ink-3); }
.logo-block { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 960px) {
  .week-grid { grid-template-columns: 1fr; }
  .week .wk, .week .wk + .wk { padding: 20px 0; border-left: 0; border-bottom: 1px solid rgba(244,242,237,0.15); }
  .pair { grid-template-columns: 1fr; gap: 0; }
  .pair-link { flex-direction: row; padding: 16px 0; }
  .pair-link .k { writing-mode: horizontal-tb; transform: none; }
  .pair-link .ln { width: 80px; height: 1px; border-left: 0; border-top: 2px dashed var(--signal); }
  .proof-home { grid-template-columns: 1fr; gap: 28px; }
}

/* CORTEX this week: one component, two sizes */
.wk-date, .sec-head p.wk-date { font-size: 12px; letter-spacing: 0.1em; color: var(--on-dark-2); }
.wk-disc { font-size: 15px; line-height: 1.55; color: var(--on-dark-2); max-width: 900px; }
.section.dark.wk-compact { padding-top: 64px; padding-bottom: 56px; gap: 32px; border-top: 1px solid rgba(244,242,237,0.12); }
.wk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.wk-strip.wk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.wk-compact .link { color: var(--paper); }
@media (max-width: 760px) { .wk-strip.wk-3 { grid-template-columns: 1fr; } }

.quotes-3 { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.quotes-3 blockquote { margin: 0; border-top: 1px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.quotes-3 p { margin: 0; font-size: 19px; font-weight: 300; line-height: 1.5; }
.quotes-3 footer { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-3); }
.quotes-3 footer .mono { font-size: 10.5px; letter-spacing: 0.14em; color: var(--signal); }
.sector-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sector-row span { font-size: 16px; padding: 9px 16px; border: 1px solid var(--midnight); white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 960px) { .quotes-3 { grid-template-columns: 1fr; gap: 28px; } }

.pimg.shot { background: #FFFFFF; border-bottom: 1px solid var(--rule-soft); }
.pimg.shot img { object-fit: cover; object-position: top left; }
.ptag { position: absolute; right: 12px; top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; padding: 4px 8px; background: var(--midnight); color: var(--paper); }
.pfact { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.pfact + .pfor { margin-top: 0; padding-top: 0; }

/* Home: two capabilities (option C) */

.opt .section { padding-top: 72px; padding-bottom: 72px; }
.cap2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.cap { display: flex; flex-direction: column; gap: 14px; }
.cap .pt { font-size: 32px; font-weight: 400; }
.cap .pd { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 520px; }
.cap .pfor { font-size: 14px; color: var(--ink-3); margin-top: 0; }
.cap .link { margin-top: 4px; }
.cap .vis { margin-top: 18px; }
.cap .pd { min-height: 3em; }
/* A: framed window */
.win { border: 1px solid var(--midnight); background: #FFFFFF; }
.win-bar { background: var(--midnight); color: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.win-bar .nm { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.win-bar .nm i { width: 1.5px; height: 16px; background: var(--signal); display: block; }
.win-bar .dm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: #AEB6BE; }
.win img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
/* B: callouts */
.co-img { position: relative; background: #FFFFFF; border-top: 2px solid var(--midnight); }
.co-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.pin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #FFFFFF; font-family: var(--mono); font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(203,77,14,0.18); }
.co-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.co-list li { display: grid; grid-template-columns: 34px 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; line-height: 1.45; }
.co-list li b { font-family: var(--mono); font-weight: 400; color: var(--signal); font-size: 12px; padding-top: 2px; }
.dm-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); }
/* C: views */
.views { display: flex; flex-direction: column; gap: 10px; }
.views .main { background: #FFFFFF; border: 1px solid var(--rule-soft); }
.views .main img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.tabs button { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 12px; cursor: pointer; color: var(--ink-3); min-height: 44px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
.views .cap-line { font-size: 14px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; }
.views .cap-line .dm-tag { white-space: nowrap; flex-shrink: 0; }
.bridge { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.bridge i { width: 120px; border-top: 2px dashed var(--signal); display: block; }
@media (max-width: 900px) { .cap2 { grid-template-columns: 1fr; gap: 56px; } }


.quotes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 72px; }
.quotes3 figure { margin: 0; border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.quotes3 blockquote { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.5; text-wrap: pretty; }
.quotes3 figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-3); }
.quotes3 .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.trusted { margin-top: 72px; display: flex; flex-direction: column; gap: 16px; }
.trusted .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trusted .chips span { font-size: 14px; padding: 10px 14px; border: 1px solid var(--ink); }
.card .sub { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 900px) { .quotes3 { grid-template-columns: 1fr; gap: 28px; } }

.roles .role .uses { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.6; color: var(--ink-3); border-top: 1px solid var(--rule-soft); padding-top: 12px; margin-top: auto; }
.roles .role { min-height: 100%; }
.inuse { display: flex; flex-direction: column; gap: 32px; }
.ptabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); }
.ptabs button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 18px 24px 18px 0; font-size: 20px; font-weight: 500; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ptabs button span { font-size: 15px; font-weight: 400; }
.ptabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
.ptabs button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.ppanel .plead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 760px; margin: 0 0 24px; }
.ppanel .change-table + div { margin-top: 16px; }
.see { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-top: 72px; }
.see .q { margin: 0; border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.see .q blockquote { margin: 0; font-size: 22px; font-weight: 300; line-height: 1.45; }
.see .q figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-3); }
.see .q .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.cta-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.cta-split .cta-main { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.cta-split .cta-aside { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(244,242,237,0.25); padding-left: 32px; }
.cta-split .cta-aside p { font-size: 16px; line-height: 1.55; color: #C9CED3; }
.cta-split .cta-aside .eyebrow { color: #AEB6BE; }
.cta-split .on-dark-link { color: var(--paper); }
@media (max-width: 900px) { .see, .cta-split, .ptabs { grid-template-columns: 1fr; gap: 28px; } .cta-split .cta-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,242,237,0.25); padding-top: 24px; } }

.views.wide .main img { aspect-ratio: 16 / 9; }
.views.wide .tabs button { font-size: 16px; padding: 12px 18px 12px 0; margin-right: 18px; }
.d5 { display: flex; flex-direction: column; gap: 28px; }
.d5-labels, .d5-row { display: grid; grid-template-columns: 200px repeat(5, minmax(0, 1fr)); align-items: center; }
.d5-labels span { display: flex; flex-direction: column; gap: 6px; font-size: clamp(13px, 1.45vw, 20px); font-weight: 500; min-width: 0; overflow-wrap: anywhere; padding-right: 8px; }
.d5-labels b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--signal); }
.d5-row .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
.d5-row.on .lbl { color: var(--ink); }
.d5-row .line { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.d5-row .line i { display: flex; align-items: center; height: 20px; position: relative; }
.d5-row .line i::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.d5-row .line i::after { content: ""; flex: 1; }
.d5-row.on .line i::before { background: var(--midnight); }
.d5-row.on .line i::after { height: 3px; background: var(--midnight); }
.d5-row.off .line i::before { border: 2px solid var(--ink-4); }
.d5-row.off .line i::after { border-top: 2px dashed var(--ink-4); }
.d5-row .line i:last-child::after { flex: 0; }
.d5 .note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
@media (max-width: 760px) {
  .d5-labels, .d5-row { grid-template-columns: 90px repeat(5, minmax(0, 1fr)); }
  .d5-labels span { font-size: 12px; }
}

@media (max-width: 1100px) { .d5-labels, .d5-row { grid-template-columns: 120px repeat(5, minmax(0, 1fr)); } }

/* modules grid (operations) */
.mod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--ink); }
.mod-grid .mod { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 30px; border-bottom: 1px solid var(--rule-soft); }
.mod-grid .mod .n { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.mod-grid .mod h3 { font-size: 19px; font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.mod-grid .mod p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1000px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mod-grid { grid-template-columns: 1fr; } }

.mod-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .mod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mod-grid { grid-template-columns: 1fr; } }

/* module diagrams (operations) */
.review-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); border-top: 1px dashed var(--signal); padding-top: 10px; }
.life { display: flex; flex-direction: column; gap: 0; }
.life-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--midnight); }
.lc { background: var(--white); padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.lc + .lc { border-left: 1px solid var(--midnight); }
.lc.dark { background: var(--midnight); color: var(--paper); }
.lc .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.lc .t { font-size: 28px; font-weight: 300; }
.lc ul { list-style: none; margin: 4px 0 0; padding: 0; }
.lc li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 16px; line-height: 1.4; }
.lc.dark li { border-top-color: rgba(244,242,237,0.2); }
.lc li b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--ink-3); padding-top: 3px; }
.lc.dark li b { color: #AEB6BE; }
.lc:not(:last-child)::after { content: "▸"; position: absolute; right: -10px; top: 30px; color: var(--signal); font-size: 18px; line-height: 1; z-index: 1; background: var(--paper); padding: 0 1px; }
.lc .loop { margin-top: auto; font-size: 14px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.lc .loop::before { content: "↻"; color: var(--signal); font-size: 18px; }
.life-base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 16px 28px; background: var(--paper); border: 1px solid var(--midnight); border-top: 0; font-size: 16px; }
.life-base .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
.life-base b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-right: 10px; }
.mmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px 40px; align-items: stretch; }
.mcore { grid-column: 2; grid-row: 1 / span 2; background: var(--midnight); color: var(--paper); padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.mcore .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: #AEB6BE; }
.mcore .t { font-size: 28px; font-weight: 300; line-height: 1.15; }
.mcore .d { font-size: 15px; line-height: 1.5; color: #C9CED3; }
.mg { background: var(--white); border-top: 2px solid var(--midnight); padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.mg .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.mg ul { list-style: none; margin: 0; padding: 0; }
.mg li { padding: 8px 0; border-top: 1px solid var(--rule-soft); font-size: 16px; line-height: 1.4; }
.mg.tl { grid-column: 1; grid-row: 1; } .mg.bl { grid-column: 1; grid-row: 2; }
.mg.tr { grid-column: 3; grid-row: 1; } .mg.br { grid-column: 3; grid-row: 2; }
.mg.tl::after, .mg.bl::after { content: ""; position: absolute; right: -40px; top: 50%; width: 40px; border-top: 2px solid var(--signal); }
.mg.tr::after, .mg.br::after { content: ""; position: absolute; left: -40px; top: 50%; width: 40px; border-top: 2px solid var(--signal); }
@media (max-width: 900px) {
  .life-cols { grid-template-columns: 1fr; }
  .lc + .lc { border-left: 0; border-top: 1px solid var(--midnight); }
  .lc:not(:last-child)::after { display: none; }
  .mmap { grid-template-columns: 1fr; }
  .mcore, .mg.tl, .mg.bl, .mg.tr, .mg.br { grid-column: 1; grid-row: auto; }
  .mg::after { display: none; }
}

.mmap { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr); }
.mg li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.mg li strong { font-size: 16px; font-weight: 500; line-height: 1.35; }
.mg li span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* portfolio thresholds (operations) */
.thr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.thr-txt { display: flex; flex-direction: column; gap: 18px; }
.thr-txt h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; text-wrap: pretty; }
.thr-txt p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.thr-txt .thr-note { font-size: 15px; color: var(--ink-3); border-left: 2px solid var(--signal); padding-left: 14px; }
.thr-who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.thr-who span { font-size: 14px; padding: 9px 13px; border: 1px solid var(--ink); white-space: nowrap; flex-shrink: 0; }
.thr-fig { margin: 0; background: var(--white); border: 1px solid var(--rule-soft); padding: 24px 28px; display: flex; flex-direction: column; }
.thr-head, .thr-fig figcaption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); }
.thr-head { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.thr-fig figcaption { padding-top: 14px; }
.thr-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 100px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.thr-row .loc { font-size: 15px; }
.thr-row .bar { position: relative; height: 8px; background: #E4E2DC; }
.thr-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #8C96A0; }
.thr-row .bar em { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--midnight); }
.thr-row .st { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); text-align: right; }
.thr-row.breach .bar i { background: #B8323F; } .thr-row.breach .st { color: #B8323F; font-weight: 500; }
/* "Approaching": the amber risk pair, NOT signal orange (operations v7 pack,
   fragments/02-portfolio-threshold-colours.css). Signal orange is the brand's
   call-to-action colour and is never used for a risk or range state -- it read
   as a third severity next to the red "Breached" row. #D1A93A is the bar fill;
   the label needs the darker #8F6B00 to stay legible as 10.5px mono on the
   figure's white panel -- measured, #D1A93A is 2.22:1 there and #8F6B00 is
   4.92:1 (the orange it replaces was 4.56:1, so the label gets no worse). The
   marker em keeps --midnight, as it does on every other row: it draws the
   threshold, not the state. */
.thr-row.near .bar i { background: #D1A93A; } .thr-row.near .st { color: #8F6B00; }
@media (max-width: 900px) { .thr { grid-template-columns: 1fr; gap: 32px; } .thr-row { grid-template-columns: minmax(0, 1fr) 90px; } .thr-row .bar { grid-column: 1 / -1; grid-row: 2; } }

/* insights v2 */
.wk-lead { padding: 56px var(--side) 0; display: flex; flex-direction: column; gap: 16px; }
.wk-lead .featured { margin: 0; }
.wk-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(244,242,237,0.25); }
.wk-mini span { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; font-size: 13px; color: var(--on-dark-2); }
.wk-mini strong { font-size: 36px; font-weight: 300; line-height: 1; color: var(--paper); }
.wk-lead-foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--ink-3); }
.filter-bar { margin-top: 48px; flex-direction: column; align-items: stretch; gap: 14px; border-top: 1px solid var(--rule-soft); }
.frow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.flab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); width: 64px; flex-shrink: 0; }
.filters button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.filters.sm button { font-size: 11px; min-height: 40px; border-color: var(--ink-4); }
.filters button:hover { background: var(--white); }
.filters button[aria-pressed="true"] { background: var(--midnight); color: var(--paper); border-color: var(--midnight); }
.filters button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.card[hidden] { display: none; }
.no-results { padding: 0 var(--side) 48px; font-size: 17px; color: var(--ink-2); }
.no-results .link { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; margin-left: 8px; }
/* The one-line holding message while no article is published (insights.html). */
.no-articles { padding-top: 56px; padding-bottom: 56px; }
.more-row { padding: 0 var(--side) 88px; display: flex; justify-content: center; }
.more-row[hidden] { display: none; }
.btn-outline-ink { border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; padding: 16px 28px; cursor: pointer; }
.btn-outline-ink:hover { background: var(--white); }
.li-follow { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 6px; }
.li-follow::after { content: ' →'; }
.li-note { font-size: 15px; color: var(--ink-3); }
@media (max-width: 900px) { .flab { width: 100%; } }

/* about */
.gaps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.gap { padding: 24px 24px 28px 0; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--rule-soft); margin-right: 24px; }
.gap:last-child { border-right: 0; margin-right: 0; }
.gap .n { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.gap p { font-size: 18px; font-weight: 300; line-height: 1.45; text-wrap: pretty; }
.gaps-close { font-size: 19px; line-height: 1.55; max-width: 900px; border-left: 2px solid var(--signal); padding-left: 20px; }
.build2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.bcard { background: var(--white); padding: 36px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); border-top: 2px solid var(--midnight); }
.bcard:hover { color: var(--ink); } .bcard:hover .go { color: var(--signal); }
.bcard .pname { display: flex; align-items: center; gap: 14px; font-size: 32px; font-weight: 500; }
.bcard .pname.light { font-weight: 400; }
.bcard .pname i { width: 2px; height: 28px; background: var(--signal); display: block; }
.bcard p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.bcard .go { font-size: 15px; font-weight: 500; margin-top: 8px; } .bcard .go::after { content: ' →'; }
.sector-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sector-list span, .sector-list a { font-size: 16px; padding: 12px 16px; border: 1px solid var(--ink); color: var(--ink); }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.person { display: flex; flex-direction: column; gap: 8px; }
.person .ph { aspect-ratio: 4 / 5; background: #E4E2DC; border: 1px dashed var(--ink-4); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.person .ph span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
.person .nm { font-size: 19px; font-weight: 500; }
.person .rl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--signal); text-transform: uppercase; }
.person p { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.base { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.base-img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.base-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.base-txt { display: flex; flex-direction: column; gap: 16px; }
.base-txt h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1.15; }
.base-txt p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.base-txt address { font-style: normal; font-size: 17px; line-height: 1.6; }
.base-txt .reg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
@media (max-width: 1000px) { .gaps { grid-template-columns: 1fr 1fr; } .gap { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule-soft); } .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .build2, .base { grid-template-columns: 1fr; } .gaps { grid-template-columns: 1fr; } }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.cform, .fsent { display: flex; flex-direction: column; gap: 22px; }
.cform label, .cform fieldset { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cform label > span, .cform legend { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: 8px; }
/* The "optional" marker. ".cform label > span em" is the Role field's; the
   contact v6 brochure fieldset puts the same marker in a legend instead of a
   label span (Oct 2026), so the selector gains the legend case rather than
   the file gaining a second copy of the same three declarations. Both sit
   inside the mono/11px/uppercase rule above, so both render the same. */
.cform label > span em, .cform legend .opt { font-style: normal; color: var(--ink-4); margin-left: 6px; }
.cform input[type=text], .cform input[type=email], .cform textarea { font: inherit; font-size: 17px; color: var(--ink); background: var(--white); border: 1px solid var(--ink-4); padding: 14px 16px; min-height: 52px; box-sizing: border-box; width: 100%; }
.cform textarea { resize: vertical; line-height: 1.5; }
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--midnight); }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { flex-direction: row; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick span { font-size: 15px; padding: 11px 16px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; border: 1px solid var(--ink); white-space: nowrap; }
.pick input:checked + span { background: var(--midnight); color: var(--paper); }
.pick input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.fsubmit { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fsubmit small { font-size: 13px; color: var(--ink-3); }
.btn-ink { background: var(--midnight); color: var(--paper); border: 0; font: inherit; font-size: 16px; font-weight: 500; padding: 18px 28px; cursor: pointer; }
.btn-ink.arrow::after { content: ' →'; margin-left: 6px; }
.ferr { font-size: 15px; color: #B8323F; }
.fsent { background: var(--white); padding: 48px; border-top: 2px solid var(--midnight); }
.fsent h2 { font-size: 44px; font-weight: 300; }
.fsent p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.cside { display: flex; flex-direction: column; gap: 40px; }
.csteps ol { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.csteps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; line-height: 1.5; }
.csteps li b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--signal); padding-top: 3px; }
.cdirect { display: flex; flex-direction: column; gap: 10px; }
.cdirect a { font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-soft); padding-bottom: 10px; }
.cdirect a:hover { color: var(--signal); }
.cdirect a.li::after { content: ' →'; }
/* "Or contact us directly" with icons (contact v6 pack item 4, Oct 2026,
   _handoff/.../assets/isarr-contact-v6.css). The pack's five rules as it
   ships them, with its two literals replaced by the variables that hold the
   same values: #0F1E2E is var(--midnight) and #CB4D0E is var(--signal). The
   rules above still do the typography, the colour and the rule under each
   link, so an icon link looks exactly like the old text one did; align-items
   centres the 22px icon box on the text's line box (measured: icon centre
   within 0.5px of the text centre at 1440, 1280, 1024 and 390). The last two
   rules move the arrow off the anchor and onto the text, so it follows the
   words rather than sitting at the end of a flex row.
   .cisq is this file's own, not the pack's: the orange square in the Book a
   call calendar is a fill attribute in the fragment, and is painted here
   instead so the brand orange is only ever written once. */
.cdirect a.cico { display: flex; align-items: center; gap: 12px; }
.cdirect a.cico .ci { width: 22px; height: 22px; flex: none; color: var(--midnight); }
.cdirect a.cico .ci .cisq { fill: var(--signal); }
.cdirect a.cico:hover .ci { color: var(--signal); }
.cdirect a.li.cico::after { content: none; }
.cdirect a.li.cico span::after { content: ' →'; }
@media (max-width: 900px) { .contact, .frow2 { grid-template-columns: 1fr; gap: 40px; } .frow2 { gap: 22px; } .fsent { padding: 32px; } }

[hidden] { display: none !important; }
.base-txt .visit { border-left: 2px solid var(--signal); padding-left: 14px; color: var(--ink); }

.cform .pick label > span { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; padding: 11px 18px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; border: 1px solid var(--ink); white-space: nowrap; background: transparent; }
.cform .pick label > span:hover { background: var(--white); }
.cform .pick input:checked + span { background: var(--midnight); color: var(--paper); border-color: var(--midnight); }

/* article v2 */
.art-back { font-size: 14px; color: var(--on-dark-2); text-decoration: none; align-self: flex-start; }
.art-back::before { content: '← '; } .art-back:hover { color: var(--paper); }
.art-figs { margin: 40px var(--side) 0 var(--indent); max-width: 980px; background: var(--midnight); color: var(--paper); padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.art-figs-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: #AEB6BE; }
.art-figs-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(244,242,237,0.25); }
.art-figs-row div { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.art-figs-row strong { font-size: 44px; font-weight: 300; line-height: 1; }
.art-figs-row span { font-size: 14px; color: #C9CED3; }
.art-figs .link { color: var(--paper); font-size: 15px; }
.art-toc { margin: 40px var(--side) 0 var(--indent); max-width: 680px; border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.art-toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.art-toc a { color: var(--ink); }
.case-facts { margin: 40px var(--side) 0 var(--indent); max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-soft); }
.case-facts div { padding: 20px 24px 22px 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.case-facts .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); }
.art-quote { margin: 0 var(--side) 72px var(--indent); max-width: 900px; border-left: 2px solid var(--signal); padding-left: 32px; display: flex; flex-direction: column; gap: 14px; }
.art-quote blockquote { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 300; line-height: 1.4; }
.art-quote span { font-size: 14px; color: var(--ink-3); }
.art-end { margin: 0 var(--side) 0 var(--indent); max-width: 1044px; display: flex; flex-direction: column; gap: 28px; padding-bottom: 72px; }
.art-sources { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.art-sources p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.art-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--rule-soft); padding-top: 20px; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-tags a { font-size: 14px; padding: 9px 13px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; white-space: nowrap; }
.art-tags a:hover { background: var(--white); }
.art-share { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.art-share a, .art-share button { font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-soft); }
.art-share a:hover, .art-share button:hover { color: var(--signal); }
.art-related { padding: 64px var(--side) 72px; background: var(--white); display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 900px) { .art-figs-row, .case-facts { grid-template-columns: 1fr; } .art-figs, .art-toc, .case-facts, .art-quote, .art-end { margin-left: var(--side); } }

/* sectors */
.sec-jump { padding: 32px var(--side) 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sec-jump a { font-size: 14px; padding: 9px 13px; border: 1px solid rgba(244,242,237,0.4); color: var(--paper); text-decoration: none; white-space: nowrap; }
.sec-jump a:hover { background: rgba(244,242,237,0.1); }
.sec-block { scroll-margin-top: 24px; }
.sb { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.sb-l { display: flex; flex-direction: column; gap: 14px; }
.sb-n { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.sb-l h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
.sb-sub { font-size: 15px; color: var(--ink-3); }
.sb-p { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-p span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; padding: 5px 9px; background: var(--midnight); color: var(--paper); white-space: nowrap; }
.sb-img { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sb-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sb-img figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sb-r { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.sb-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.sb-row .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); padding-top: 4px; }
.sb-row p { font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.sb-row p.fw { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.8; color: var(--ink-2); }
.sb-proof { padding: 24px 0 24px 24px; border-left: 2px solid var(--signal); margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.sb-proof blockquote { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.45; }
.sb-proof .who { font-size: 14px; color: var(--ink-3); }
.sb-stat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sb-stat strong { font-size: 44px; font-weight: 300; line-height: 1; }
.sb-stat span { font-size: 15px; color: var(--ink-2); }
.sb-links { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 24px; }
.tw { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(15,30,46,0.04) 6px 12px); padding: 6px 10px; border: 1px dashed var(--ink-4); display: inline-block; }
@media (max-width: 900px) { .sb { grid-template-columns: 1fr; gap: 28px; } .sb-row { grid-template-columns: 1fr; gap: 6px; } }
.sb-req { gap: 8px; } .sb-req .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); } .sb-req span:not(.k) { font-size: 18px; font-weight: 300; }

/* utility pages */
.nf { background: var(--midnight); color: var(--paper); min-height: 78vh; display: flex; flex-direction: column; }
.nf-body { padding: 96px var(--side) 120px; display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.nf-code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; color: var(--signal); }
.nf-body h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.nf-body p { font-size: 19px; color: #C9CED3; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nf-links a { font-size: 15px; padding: 11px 16px; border: 1px solid rgba(244,242,237,0.45); color: var(--paper); text-decoration: none; }
.nf-links a:hover { background: rgba(244,242,237,0.1); }
.legal { max-width: 820px; display: flex; flex-direction: column; }
.legal-upd { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 24px; }
.lsec { border-top: 1px solid var(--rule-soft); padding: 28px 0; display: flex; flex-direction: column; gap: 14px; }
.lsec h2 { font-size: 24px; font-weight: 400; display: flex; gap: 18px; align-items: baseline; }
.lsec h2 span { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.lsec p, .lsec li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.lsec ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.lsec a { color: var(--ink); }
/* Definition list in privacy.html section 02 (privacy v6 pack, Oct 2026):
   the master text defines four terms as dt/dd pairs, which is the first
   dl on the site. Without this it falls back to UA defaults -- 16px black
   text and a 40px indent -- next to .lsec p's 17px/1.65 ink-2, which reads
   as a different document. Same type as the paragraphs around it; the term
   carries the weight instead of a bullet. */
.ldefs { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ldefs dt { font-size: 17px; line-height: 1.65; font-weight: 500; }
.ldefs dd { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.credits { border-top: 1px solid var(--ink); }
.cr { display: grid; grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.cr.head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); padding: 12px 0; }
.cr img { width: 96px; height: 64px; object-fit: cover; display: block; }
.cr-t, .cr-s { display: flex; flex-direction: column; gap: 4px; }
.cr-t strong { font-size: 16px; font-weight: 500; }
.cr-t span, .cr-s span { font-size: 14px; color: var(--ink-3); }
.cr-s span:first-child { color: var(--ink); }
.cr-s .mono { font-family: var(--mono); font-size: 12px; }
.credits-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.credits-notes div { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ink); padding-top: 18px; }
.credits-notes p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) { .cr { grid-template-columns: 72px minmax(0, 1fr); } .cr img { width: 72px; height: 48px; } .cr-s { grid-column: 2; } .cr.head { display: none; } .credits-notes { grid-template-columns: 1fr; } }

/* schema v1 */
.cform select { font: inherit; font-size: 16px; width: 100%; min-height: 48px; padding: 10px 40px 10px 14px; border: 1px solid var(--ink-4); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F1E2E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); appearance: none; border-radius: 0; }
.cform select:focus { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--midnight); }
.card .ctop { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: -8px; }
.card .ctop i, .art-class .emg { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; padding: 3px 7px; border: 1px dashed var(--midnight); color: var(--ink); }
.art-class { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.art-class .tp { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--paper); text-decoration: none; padding: 5px 9px; border: 1px solid rgba(244,242,237,0.5); }
.art-class .tp:hover { background: rgba(244,242,237,0.1); color: var(--paper); }
.art-class .emg { color: var(--paper); border-color: rgba(244,242,237,0.6); text-decoration: none; }
.art-tags .tt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; padding: 10px 13px; background: var(--midnight); color: var(--paper); white-space: nowrap; }
.art-help { border-top: 2px solid var(--midnight); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.ah-list { display: flex; flex-direction: column; }
.ah { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.ah-n { font-size: 20px; font-weight: 400; }
.ah-p { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.emg-row { border-top: 0; }
.emg-link { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 14px; border: 1px dashed var(--midnight); }
.emg-link span { font-weight: 400; font-size: 14px; color: var(--ink-3); }
.emg-link::after { content: '→'; }
.emg-link:hover { background: var(--white); color: var(--ink); }
.tp-back { text-decoration: none; }
.tp-back::before { content: '← '; }
.tp-other { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-other a { font-size: 14px; padding: 8px 12px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; white-space: nowrap; }
.tp-other a.emg { border-style: dashed; border-color: var(--midnight); }
.tp-other a[aria-current="page"] { background: var(--midnight); color: var(--paper); border-color: var(--midnight); }
.sb-rel { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.sb-rel .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); padding-bottom: 8px; }
.sb-rel a { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule-soft); color: var(--ink); text-decoration: none; font-size: 16px; }
.sb-rel a em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); min-width: 96px; }
.sb-rel a:hover { color: var(--ink); text-decoration: underline; }
.sector-list a { text-decoration: none; }
.sb-stat strong, .proof-band .stat strong, .ph-stat strong { font-size: clamp(40px, 4.2vw, 64px); }
@media (max-width: 640px) { .ah { grid-template-columns: 1fr; gap: 6px; } }

/* tagging v1.1 */
.search { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.search input { font: inherit; font-size: 16px; flex: 1; min-height: 44px; padding: 10px 14px; border: 1px solid var(--ink-4); background: var(--white); color: var(--ink); border-radius: 0; }
.search input:focus { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--midnight); }
.search .mono { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); white-space: nowrap; }
.art-tags .tl { font-size: 14px; padding: 9px 13px; border: 1px solid var(--ink); color: var(--ink); white-space: nowrap; }
.art-class .tp { cursor: default; }
.art-help p { font-size: 18px; line-height: 1.55; max-width: 760px; margin: 0; }

.cform fieldset legend { float: left; width: 100%; white-space: nowrap; margin-bottom: 10px; }
.cform fieldset legend + * { clear: both; }

/* Home · What we offer: one graphic per product (Oct 2026 pack, _handoff/Home/
   isarr-cap-fig.css, appended verbatim). Also reused by the CORTEX layers
   figure (.cap-fig.lay-fig, see the cortex v6 block below). */
.cap-fig { margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cap-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; box-sizing: border-box; background: var(--paper); border-top: 1px solid var(--rule-soft); }
.cap-fig figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #4A5560; }

/* CORTEX v6 (Oct 2026 pack, _handoff/.../assets/isarr-cortex-v6.css). Kept in
   this one stylesheet rather than a page stylesheet: the build serves a single
   isarr.css to every page (see base.html.j2) and there is no per-page CSS
   mechanism, so a second file would be a new pipeline concept for ~25 rules.
   All of these are scoped to cortex-only hooks (#this-week, .lay-*,
   .bro*, .cta-btns, .btn-ghost). (.see-q was one of them; it went with the
   evidence area the v7 pack folded into the quotes band -- see the v7 block
   at the end of this file.) */
/* Six figures in one row above 960px. Below that the shared
   @media (max-width: 960px) rule further up this file already takes
   .wk-strip to two columns, which is exactly what the pack asks for, so
   nothing extra is needed for the narrow case -- verified in a real browser
   at 1280px (6 across, one row) and 900px (2 columns). */
@media (min-width: 961px) { #this-week .wk-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* .lay-fig/.lay-notes: the v7 pack's figure geometry replaces v6's.
   max-width 1040 -> 1200 and centred (margin: auto), with the figure's own
   full-width rule above it and the caption centred; the notes are centred to
   the same 1200px underneath. padding on the image is 0, not v6's 24px top,
   AND the background is white: .cap-fig img paints var(--paper) behind its
   padding, and that cream strip above the diagram is what the pack's README
   says to remove -- "set the image background to white and remove the top
   padding". The pack's own CSS does only the first half and keeps 24px of
   top padding (harmless once the background is white, but it is then 24px of
   white above a white-backed diagram); this brief asks for both, so both are
   here and the Playwright checks assert padding-top 0, a white computed
   background and a white top pixel row in the served file.
   !important on aspect-ratio and padding only because they override
   .cap-fig img, which every other figure on the site wants. */
.lay-fig { max-width: 1200px; margin: 48px auto 0; border-top: 1px solid var(--rule-soft); }
.lay-fig figcaption { text-align: center; }
.lay-fig img { aspect-ratio: auto !important; padding: 0 !important; }
#layers .lay-fig img { background: #FFFFFF; }
#layers .lay-notes { max-width: 1200px; margin-left: auto; margin-right: auto; }
.lay-notes { max-width: 880px; margin-top: 28px; display: grid; gap: 10px; }
.lay-notes p { margin: 0; font-size: 17px; line-height: 1.5; color: #2A3947; }
.lay-notes .lay-lead { font-size: 22px; font-weight: 300; line-height: 1.35; color: var(--midnight); border-left: 2px solid #CB4D0E; padding-left: 18px; margin-bottom: 10px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.bro-btn { display: flex; flex-direction: column; gap: 12px; }
.btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(244, 242, 237, .6); font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; cursor: pointer; }
.btn-ghost:hover, .btn-ghost[aria-expanded=true] { border-color: var(--paper); background: rgba(244, 242, 237, .08); }
.cta-band p.bro-meta { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #AEB6BE; max-width: none; line-height: 1.4; }
.bro { margin-top: 24px; max-width: 560px; }
.bro-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bro-form { display: grid; gap: 14px; padding: 24px; border: 1px solid rgba(244, 242, 237, .2); }
.bro-form label { display: grid; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #AEB6BE; }
.bro-form input:not([type=checkbox]) { font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; padding: 10px 12px; background: transparent; border: 1px solid rgba(244, 242, 237, .35); color: var(--paper); }
.bro-form input:focus { outline: 2px solid #CB4D0E; outline-offset: 1px; }
.bro-form .chk { display: flex; gap: 10px; align-items: flex-start; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--paper); }
.bro-form button { justify-self: start; }
.cta-band .bro p.bro-note, .cta-band .bro p.bro-priv { margin: 0; max-width: none; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #AEB6BE; }
.cta-band .bro p.bro-done { margin: 0; max-width: none; padding: 20px 24px; border: 1px solid rgba(244, 242, 237, .2); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--paper); }
.cta-band .bro button { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; }
.bro-priv a { color: var(--paper); }
/* Not in the pack: the send-failure line. The pack's script only ever showed
   the thank-you message; this form really posts, so it needs somewhere honest
   to say it did not send. Same type scale as .bro-note, in the error red
   already used by the contact form's .ferr. */
.cta-band .bro p.bro-err { margin: 0; max-width: none; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #F0A0A8; }

/* CORTEX brochure: no-JS fallback line (Oct 2026) */
.cta-band p.bro-noscript{margin:0;max-width:none;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0;color:#AEB6BE;}
.bro-noscript a{color:var(--paper);}

/* ---------------------------------------------------------------------------
   CORTEX page tidy-up (Oct 2026). Four layout items, all scoped to hooks that
   exist only on cortex.html or to a modifier class (.proof-cx,
   .cta-split-bro) because .proof-band and .cta-split are shared with
   index.html / about.html / operations.html. .cta-split-bro is on
   operations.html too as of the operations v6 pack -- both bands that carry
   the brochure form want the same layout.
   --------------------------------------------------------------------------- */

/* 1. REMOVED (CORTEX v7 pack, Oct 2026): .lay-grid, which put the #layers
   diagram and notes side by side above 960px. The v7 pack supersedes that
   layout with a centred figure at max 1200px and the notes centred under it at
   every width, so the wrapper div is gone from the template and both of its
   CSS blocks (the flex column and the >=960px two-column grid) are gone with
   it. .lay-grid existed only on cortex.html -- grepped across src/templates,
   src/assets and scripts before removing: the only matches were the one
   wrapper, these rules and the comments describing them. What stays is
   .lay-fig/.lay-notes themselves, re-pointed at the v7 geometry further up
   this file, where the notes keep their lead-note treatment unchanged.

   3. "3 of the top 5" never splits across lines. The phrase also carries
     in the template, so it stays whole even with no CSS; the wider
   stat column gives it room at the top of the clamp (64px, reached at
   viewports >= 1524px, where the phrase measures ~348px).
   Shared with about.html as of Oct 2026 (brief 7): that page's .proof-band
   split in exactly the same place at exactly the same widths, so it takes
   this modifier rather than getting a second rule of its own. The class is
   still named for the page it was written for. About's band has no
   blockquote, so the 400px column only takes space from an empty second
   column there -- nothing beside the stat to crush. index.html's
   .proof-band has the same split and deliberately still does NOT carry
   this class. */
.proof-band.proof-cx .stat strong { white-space: nowrap; }
@media (min-width: 961px) { .proof-band.proof-cx { grid-template-columns: 400px minmax(0, 1fr); } }

/* 5. CTA band: the aside's top lines up with the two buttons, and stays there
   when the brochure form opens below them. .cta-main becomes display:contents
   so the headline, the buttons and the form are themselves grid items in
   column 1 (rows 1, 2, 3); the aside takes column 2 from row 2 down, aligned
   to the start of that row -- the row the buttons are in. The 28px row-gap
   replaces the gap .cta-main had as a flex column, and .bro keeps its own
   24px margin-top, so the spacing is unchanged. Below 901px none of this
   applies and the shared max-width: 900px rule stacks the band as before. */
@media (min-width: 901px) {
  .cta-split-bro { align-items: start; column-gap: 64px; row-gap: 28px; }
  .cta-split-bro .cta-main { display: contents; }
  .cta-split-bro .cta-main > p { grid-column: 1; grid-row: 1; }
  .cta-split-bro .cta-btns { grid-column: 1; grid-row: 2; }
  .cta-split-bro .bro { grid-column: 1; grid-row: 3; }
  /* span 2, not "2 / -1": with no explicit rows declared, line -1 resolves to
     line 1 of the explicit grid, which silently puts the aside back in row 1
     (measured: aside top 4301.75 vs buttons 4471.33 at 1024px). */
  .cta-split-bro .cta-aside { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
}

/* ---------------------------------------------------------------------------
   Operations v6 (Oct 2026 pack, _handoff/OPS/.../assets/isarr-operations-v6.css).
   Only the blocks-figure and module-group rules are here: the CTA and brochure
   form rules in that file are the same ones the CORTEX pack brought in and are
   already above (verified rule by rule, declaration by declaration -- see the
   change note), so they are deliberately not repeated.
   Scoped as the pack gives them. ".ph" also exists as ".person .ph" (the about
   page's photo placeholder), but that element contains only a <span>, never a
   ul/li, so none of the four descendant rules below can reach it.
   #0F1E2E, #4A5560 and #2A3947 are the pack's literal spellings of --midnight,
   --ink-3 and --ink-2 -- no new colour. The four group swatch colours live in
   the template as inline styles, per the pack. */
/* .ops-fig, as the operations v7 pack respecifies it
   (assets/operations-v7.css): wider (1040 -> 1200px) and CENTRED -- "margin:
   48px auto 0" is what replaces the v6 "margin: 40px 0 0", which left the
   figure hard against the section's left edge. background:#FFFFFF on the img
   is the pack's; the file behind it is already white to the edge, so it is
   belt and braces for the moment between layout and decode, when the box
   would otherwise show the section through. .ops-fig is used by exactly one
   element on the site (operations.html's #how) and carries no aspect-ratio
   rule, so the <img>'s declared width/height is the only thing reserving the
   box while it loads -- see the template comment there. */
.ops-fig { max-width: 1200px; margin: 48px auto 0; }
.ops-fig img { display: block; width: 100%; height: auto; background: #FFFFFF; }
.ph-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; }
.ph-k { display: flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .16em; color: var(--midnight); padding-bottom: 10px; border-bottom: 1px solid var(--midnight); }
.ph-k .sw { width: 14px; height: 14px; border: 1px solid #0F1E2E; }
.ph ul { list-style: none; margin: 0; padding: 0; }
.ph li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid rgba(15, 30, 46, .14); }
.ph li .n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #4A5560; padding-top: 2px; }
.ph li strong { display: block; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--midnight); }
.ph li div span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: #2A3947; }

/* ---------------------------------------------------------------------------
   Sectors v6 (Oct 2026 pack, _handoff/SEC/.../assets/isarr-sectors-v6.css).
   Three groups, in the pack's order: the sector map, the .pl product labels,
   and the shared photo tint. Declarations are the pack's, respaced to match
   the rest of this file; the pack's #0F1E2E and #CB4D0E are --midnight and
   --signal, so the variables are used instead -- same colours, one source.

   1. Sector map (.sec-map). Replaces the .sec-jump row of pill links in the
   page header; the .sec-jump rules above are now unused by any template but
   are left in place, per the pack's "styles stay until every page has been
   reviewed" rule.
   The pack ships .sec-map with both "margin-top: 36px !important" and a later
   "margin: 0 var(--side)" shorthand. The !important declaration wins over the
   shorthand's margin-top, so the two together compute to
   "margin: 36px var(--side) 0" -- kept verbatim rather than collapsed, so this
   block still matches the pack byte for byte (noted in the change note as a
   tidy for Nick). var(--side) is the same inline padding .page-head .grid
   uses, so the map's edges line up with the title and intro above it. */
.sec-map { display: grid; margin-top: 36px !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(244, 242, 237, .16); border-top: 1px solid rgba(244, 242, 237, .16); margin: 0 var(--side); padding: 0; }
.sec-map a { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; background: var(--midnight); color: var(--paper); text-decoration: none; min-height: 132px; }
.sec-map a:hover { background: #16293C; }
.sec-map .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #AEB6BE; }
.sec-map .t { font-size: 17px; line-height: 1.3; text-wrap: pretty; }
.sec-map .ps { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 1000px) { .sec-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sec-map { grid-template-columns: 1fr; } .sec-map a { min-height: 0; } }

/* 2. Product labels (.pl): a thin --signal hairline, then the product name.
   Deliberately UNSCOPED, as the pack has them -- the README says the
   short-form lockup may be reused elsewhere on the site. Checked before
   adding: no other template carries a .pl, .pl-c or .pl-o class, and no other
   rule in this file matches .pl, so nothing outside the sector map and the
   sector blocks is restyled by these. The hairline is a ::before, so it is
   decorative and not announced.

   The hairline is 2px, not the pack's 1.5px (Nick, Oct 2026: "that's our
   standard hairline"). 1.5px is not a width a device pixel can hold at
   device-pixel-ratio 1: where the label's left edge lands on a whole or
   quarter pixel the browser paints two columns, and where it lands on .50 or
   .75 it paints one, so the same hairline came out half as thick in some
   tiles as in others -- and on a real standard-resolution screen the
   half-covered column is anti-aliased onto the dark tile and reads grey
   rather than --signal. Measured at device-scale-factor 1 before the change:
   20 of the 72 hairlines on sectors.html and about.html at 1440 and 1024
   painted a single column (sector-map tiles 03, 04, 07 and 08), the other 52
   painted two. At 2px every one of the 72 paints two columns, whatever the
   subpixel offset, because floor(left + width / 2) always lands inside a
   fully covered column when the box is 2px wide. The Playwright check
   "sectors/about .pl hairline" asserts both halves of that and fails if the
   width goes back to 1.5px. Height is unchanged. */
.pl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1; white-space: nowrap; }
.pl::before { content: ""; width: 2px; height: 14px; background: var(--signal); }
.pl-c { font-weight: 500; letter-spacing: .02em; }
.pl-o { font-weight: 400; }
.sec-map .pl { color: #E6E3DC; }
/* In a sector block the same lockup is bigger and sits on paper, so it has to
   undo the grey-tag look the older ".sb-p span" rule above still declares:
   that rule gives every span in a .sb-p a --midnight background, 5px 9px of
   padding, --mono and 0.12em of tracking. These four override exactly those,
   for .pl spans only, so a non-.pl span in a .sb-p would still get the old
   tag. "No tracked capitals", per the pack, hence letter-spacing: 0 with the
   0.02em CORTEX exception put back. */
.sb-p { gap: 8px 20px; }
.sb-p span.pl { background: none; padding: 0; font-family: 'IBM Plex Sans', sans-serif; letter-spacing: 0; }
.sb-p span.pl-c { letter-spacing: .02em; }
.sb-p .pl { font-size: 16px; color: var(--midnight); }
.sb-p .pl::before { height: 18px; }

/* Standing guard for the pack's "no gap where a sector has no proof block"
   (item 4). Checked first: nothing on this page renders an EMPTY .sb-proof --
   security-consultancies and corporates have no .sb-proof element at all, so
   the 24px top margin, the 24px padding and the 2px --signal left border of
   the .sb-proof rule above are never painted for them, and both blocks end
   flush after their links (measured; see the change note). This rule exists
   so that if a future empty one ever does appear -- the pack's premise is a
   block filled from data -- it costs no space and draws no orange rule
   instead of leaving a 74px band. :empty does not match an element
   containing whitespace, so the Playwright check asserts the stronger
   "no .sb-proof with no text content" as well. */
.sb-proof:empty { display: none; }

/* 3. Photo tint (item 5): one treatment for all eight sector photos --
   saturate(0.65) on the image and a --midnight layer at 12% over it, so the
   daylight photographs sit with the satellite images and the palette. The
   pack writes the overlay colour as #0F1E2E, which is --midnight exactly, so
   the variable is used.
   The !important on the filter is the pack's, and it has work to do: it is
   what guarantees the eight per-element filters the build used to generate
   from the images' inline style="filter:..." attributes cannot come back and
   override this one from a higher-specificity generated class. Those inline
   filters are now gone from the template (only object-position remains, on
   three of the eight), so the only filter on these images is this one.
   Scope: these were written as ".sb-img ..." when sectors.html was the only
   page with tinted photos. The about v6 pack puts the SAME treatment on the
   "Where to find us" photograph and calls it "the same shared rule as the
   Sectors photos", so the three that do the work now hang off .tw-wrap
   itself and are shared: the wrapper, its ::after overlay, and the filter on
   the image inside it. Nothing else changes -- .tw-wrap is a span that exists
   for exactly this purpose and appears only on these two pages, the
   declarations are the same ones, and the selectors are no more specific than
   what they replace, so the Sectors rendering is unchanged (proved by
   measuring all eight photos' computed filter, overlay colour, overlay
   opacity and wrapper box before and after; dist/sectors.html is also still
   byte-identical -- see the change note). Page heroes keep their own
   settings, as the Sectors pack requires: they are .hero/.ph-hero and carry
   no .tw-wrap.
   ".sb-img { position: relative }" stays scoped and stays put: it is not part
   of the tint (the overlay is positioned against .tw-wrap, not the figure),
   and leaving it alone leaves that page's stacking context exactly as it was
   reviewed. The !important on the filter is the pack's and still has work to
   do -- it is what stops a per-element filter generated from an inline
   style="filter:..." attribute from overriding the shared one. */
.sb-img { position: relative; }
.tw-wrap { position: relative; display: block; }
.tw-wrap img { filter: saturate(0.65) !important; }
.tw-wrap::after { content: ""; position: absolute; inset: 0; background: var(--midnight); opacity: .12; pointer-events: none; }

/* ---------------------------------------------------------------------------
   About v6 (Oct 2026 pack, _handoff/ABT/.../assets/isarr-about-v6.css).
   Only the tagline section's rules are new. Everything else in that file is
   already here: the sector map and .pl product labels came in with the
   Sectors pack, and the .bro- form rules, .cta-btns and .btn-ghost with the
   CORTEX pack -- checked declaration by declaration before deciding not to
   repeat them (see the change note). (Do not write the brochure rules as a
   ".bro" wildcard here: the star-slash that makes closes this comment, which
   silently swallowed the first rule below it once already.)
   The pack's #CB4D0E is --signal, so the variable is used;
   #C9CFD5 and the rgba(244, 242, 237, ...) values are the pack's own and are
   kept as given, as in the earlier packs.

   1. The sector map in a section rather than in the page header. On
   sectors.html the map sits in .page-head next to nothing else, so it
   carries its own "margin: 0 var(--side)" to line its tile edges up with the
   title above it. On about.html it is a child of a .section, whose
   "padding: 96px var(--side) 88px" already IS that gutter, so the side
   margins would double it and push the tiles var(--side) in from the
   heading. The about pack's CSS answers this by shipping .sec-map with
   "margin: 0" and, further down the same file, a second
   "margin-top: 32px !important" -- but both of those are unscoped, so
   dropping them in as given would move the Sectors map too. Hence the
   modifier class: about.html's nav is class="sec-map sec-map-flush", the
   Sectors nav is untouched (which is what keeps dist/sectors.html byte for
   byte identical), and the two declarations below are exactly what the about
   pack asks for. Longhand, not the "margin: 0" shorthand, so it cannot
   silently reset margin-top as well; 32px over 36px needs !important only
   because the rule it overrides is itself !important. Verified at 1440,
   1024, 768 and 390: the tiles' left and right edges sit on the section
   heading's (see the change note). */
.sec-map-flush { margin-left: 0; margin-right: 0; margin-top: 32px !important; }

/* 2. The "Where to find us" photo takes the shared .tw-wrap tint (the rule
   is up in the Sectors v6 block, generalised off .sb-img for this). The one
   page-only line the about pack adds is this height: a .base-img figure gets
   its height from aspect-ratio: 4 / 3 and .base-img img is height: 100%, so
   the wrapper that now sits between them has to pass that height through or
   the image would collapse to its intrinsic ratio inside a 4:3 box. With it,
   the rendered image box is unchanged: 636x477 at 1440, 428x321 at 1024 and
   350x262.5 at 390, flush with the figure on all four sides, exactly as it
   measured before the wrapper was added. */
.base-img .tw-wrap { height: 100%; }

/* 2. "What we mean by it" (#house-line). The pack's selectors are unscoped, as
   it ships them. Checked before adding: the only other rule in this file that
   matches .hl is ".ohead .hl" (line 504), the hairline in an .ohead header
   lockup -- and neither .ohead nor a bare class="hl" appears in any template,
   so those rules are dead markup from the v1.2 reference and nothing on the
   site is restyled by these. .bar is more widely used (.brand .bar,
   .bars .bar, .thr-row .bar) but every one of those is scoped to its own
   parent, and the rule below is scoped to .hl-line, so they do not meet. */
.hl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.hl-line { display: flex; gap: 22px; align-items: stretch; container-type: inline-size; }
.hl-line .bar { width: 2px; background: var(--signal); flex: none; }
/* The one place this block does not take the pack's declaration as given.
   The pack sets font-size: clamp(34px, 4vw, 54px) and the README requires the
   tagline to be "always stacked on two lines". Those two only agree at the
   width the pack was drawn at: the tagline sits in the 1fr half of a
   1fr/1.3fr grid, so its line box grows like viewport/2.3 while 4vw grows
   over twice as fast, and "Grounded intelligence." is ~9.8x the font size
   wide. Measured on the built page before this line was added: two lines at
   1440 (where the longest line came to 520.19px in 520.19px of space, i.e.
   it fitted with nothing to spare) and in the stacked layout at 900, 768 and
   520 -- but THREE lines at 1280, 1024 and 901, and three again at 390 and
   360, where the 34px floor is 0.78px too wide for the column. So the pack's
   own type scale is kept wherever it fits, and capped at the size that fits
   where it does not: 100cqi is the .hl-line column's own width (hence
   container-type above), less the 2px rule and the 22px gap, over 10 -- the
   measured worst-case width-to-font ratio of that line, 9.81, plus a little
   room for rounding. Result: exactly two lines at every width from 320px up.
   Nick may prefer the other fix -- a wider left column, or shorter copy --
   which is why this is one line and commented, not spread through the block. */
.hl-line p { margin: 0; font-size: min(clamp(34px, 4vw, 54px), calc((100cqi - 24px) / 10)); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; color: var(--paper); }
.hl-parts { display: grid; gap: 28px; }
.hl-part { display: grid; gap: 8px; border-top: 1px solid rgba(244, 242, 237, .2); padding-top: 16px; }
.hl-part h3 { margin: 0; font-size: 20px; font-weight: 500; color: var(--paper); }
.hl-part p { margin: 0; font-size: 17px; line-height: 1.55; color: #C9CFD5; max-width: 58ch; }
@media (max-width: 900px) { .hl { grid-template-columns: 1fr; gap: 36px; } }

/* ---------------------------------------------------------------------------
   CORTEX v7 (Oct 2026 pack, _handoff/CX7/assets/cortex-v7.css). The page-only
   rules the three new/re-laid-out sections need, in the pack's own order and
   with the pack's declarations; respaced to match this file, and the pack's
   literal #CB4D0E / #0F1E2E / #D3D5D4 written as var(--signal) / var(--ink) /
   var(--rule-soft), which is what the pack itself falls back to, so no new
   colour enters the stylesheet.

   DELIBERATELY NOT MERGED from that file, with why:
     * .bro*, .cta-btns, .btn-ghost, .cta-band p.bro-meta -- the brochure form
       and CTA buttons. Already in this file (CORTEX v6 block above), already
       built and tested, and the pack's copies are the same declarations.
     * .lay-fig, .lay-fig figcaption, .lay-notes, #layers .lay-notes,
       #layers .lay-fig img -- merged, but into the existing .lay-* rules in
       the v6 block above rather than repeated here, so there is one set of
       figure rules to read.
     * @media (min-width: 961px) #this-week .wk-strip, the 6-up figures row --
       already in the v6 block above, identical to the pack's. KEPT while
       #this-week is hidden behind build.py's SHOW_THIS_WEEK, so the section
       comes back laid out correctly the moment the flag flips.
     * .see-q -- the pack still ships it, but the grid it collapsed is gone
       (the evidence area folded into the quotes band), so it would style
       nothing. Removed from the v6 block rather than carried forward.
     * .v7-ev, .v7-kinds, .v7-q -- the pack's evidence-area layout, the
       numbered "kinds" list and its quote treatment. Nothing in this pack's
       fragments, in its reference file or on this page uses any of them.
   The base .see rules further up this file (around line 640) are now
   unreferenced too, but they are original v1.2 base-layer rules sharing a
   media query with .cta-split and .ptabs, so they are left alone rather than
   edited around.
   --------------------------------------------------------------------------- */

/* What you get (#outputs): three cards, one column below 960px (the shared
   breakpoint at the end of this block). */
.v7-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.v7-card { border-top: 2px solid var(--midnight); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.v7-n { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--signal); }
.v7-card h3 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.v7-card p { margin: 0; font-size: 17px; line-height: 1.55; color: #2A3947; max-width: 36ch; }

/* How it is used (#access): five route boxes, the "sits beneath" line and the
   two roles lists. The pack gives .v7-beneath a 60ch cap and then overrides it
   to 68ch for this page; only the page value is kept, since 68ch is what the
   README asks for and #access is the only section with the class (same for
   the pack's two #access-scoped margins, folded into the base rules here).
   The second list is the medium-weight one and the first is explicitly
   regular -- the pack states both, so neither depends on a browser default. */
.v7-routes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.v7-routes > div { border: 1px solid var(--rule-soft); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.v7-tag { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--midnight); }
.v7-routes p { margin: 0; font-size: 16px; }
.v7-beneath { margin: 20px 0 0; font-size: 18px; line-height: 1.55; max-width: 68ch; color: #2A3947; }
.v7-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.v7-roles ul { list-style: none; margin: 16px 0 0; padding: 0; }
.v7-roles li { padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 17px; }
.v7-roles > div:first-child ul li { font-weight: 400; color: #2A3947; }
.v7-roles > div:last-child ul li { color: var(--midnight); font-weight: 500; }

/* Quotes band: the stat left, the two quotes stacked right, aligned to the top
   of the band rather than centred. One column at and below 960px comes from
   .proof-band's own shared rule (around line 447), which is why there is no
   second grid declaration here. The thin top rule and the absence of the
   orange left bar are the point of .v7-quotes .q blockquote: it zeroes the
   border-left and padding-left that .proof-band blockquote gives every quote
   on the site, and it is scoped to this band, so index.html's and about.html's
   bands keep theirs. */
.v7-proof { align-items: start; }
.v7-quotes { display: flex; flex-direction: column; gap: 32px; }
.v7-quotes .q { margin: 0; border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.v7-quotes .q blockquote { border-left: 0; padding-left: 0; margin: 0; font-size: 22px; font-weight: 300; line-height: 1.4; text-wrap: pretty; }
.v7-quotes .q figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-3); }
.v7-quotes .q .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--signal); }

/* The pack's one media query for these sections: #outputs and the roles lists
   to a single column, the five route boxes to two. (.v7-ev and .v7-kinds are
   in the pack's own version of this query; they are not merged, as above.) */
@media (max-width: 960px) {
  .v7-out, .v7-roles { grid-template-columns: minmax(0, 1fr); }
  .v7-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}