/* ==========================================================================
   elan1: web design system
   Source: 01-elan1-website-strategy.md §10 (Brand Book values, web scale ×0.6)
   Rules kept here: no rounded corners, no shadows, no gradients except the
   named ones, clay as the single accent per viewport, kiln for links on paper,
   ember for links on ink only.
   ========================================================================== */

/* Fonts: see fonts-local.css (self-hosted) or the Google Fonts link added by build.js */

/* ---------- Tokens ---------- */
:root {
  /* Core palette (BR 03) */
  --ink: #0A1320;
  --clay: #B9603F;
  --paper: #FBFAF7;
  --ember: #DF8C64;
  --kiln: #8A4229;
  --slate: #1E3048;
  --bone: #F2EDE6;
  --graphite: #4A5561;

  /* Ramps */
  --ink-100: #E7ECF1;
  --ink-200: #CDD6E0;
  --ink-300: #A9B6C4;
  --ink-400: #7C8B9D;
  --ink-500: #56657A;
  --ink-600: #3A485C;
  --ink-700: #243246;
  --ink-800: #121D2D;
  --ink-900: #060B12;
  --clay-100: #F7DCCD;
  --clay-300: #E3A487;
  --clay-500: #B9603F;
  --clay-700: #7A3A24;
  --clay-900: #40190E;

  /* Fusion ladder: clay mixed into ink (OKLab), for diagrams only */
  --fuse-10: color-mix(in oklab, var(--clay) 10%, var(--ink));
  --fuse-25: color-mix(in oklab, var(--clay) 25%, var(--ink));
  --fuse-40: color-mix(in oklab, var(--clay) 40%, var(--ink));
  --fuse-55: color-mix(in oklab, var(--clay) 55%, var(--ink));
  --fuse-70: color-mix(in oklab, var(--clay) 70%, var(--ink));
  --fuse-85: color-mix(in oklab, var(--clay) 85%, var(--ink));

  /* Type */
  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-display: clamp(2.75rem, 1.55rem + 4.1vw, 5.25rem);   /* 44 → 84 */
  --t-title: clamp(2rem, 1.55rem + 1.6vw, 2.875rem);       /* 32 → 46 */
  --t-section: clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem);/* 22 → 26 */
  --t-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);     /* 18 → 20 */
  --t-body: 1rem;                                          /* 16 */
  --t-caption: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);/* 14 → 15 */
  --t-label: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* 13 → 14 */

  /* Space: 8 px baseline */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;

  --gutter: 24px;
  --wrap: 1280px;
  --measure: 68ch;
  --header-h: 72px;
  --header-h-condensed: 56px;
  --rule: 1px solid var(--ink-200);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-condensed) + 64px); }
body { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; }

/* ---------- Base ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.42;
  font-weight: 400;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: none;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); color: inherit; }
h1 { font-weight: 700; }
h2, h3, h4 { font-weight: 600; }

p + p { margin-top: 1em; }

a { color: var(--kiln); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay-900); text-decoration-thickness: 2px; }

strong, b { font-weight: 600; }
em { font-style: italic; }

code, kbd, samp, pre { font-family: var(--f-mono); font-size: 0.92em; }
:not(pre) > code {
  background: var(--bone);
  padding: 0.05em 0.35em;
  word-break: break-word;
}

.on-ink code, .hero--ink code, .section--ink code, .section--slate code, .proof-strip code, .band code, .mega-feature code, .law code, .card--ink code {
  background: transparent; color: inherit; padding: 0;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-ink :focus-visible, .section--ink :focus-visible, .section--slate :focus-visible { outline-color: var(--paper); }

::selection { background: var(--clay-100); color: var(--ink); }

.tnum, table { font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: 8px; color: var(--paper); }

/* ---------- Type roles ---------- */
.display { font-family: var(--f-display); font-weight: 700; font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.03em; }
.title   { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1.08; letter-spacing: -0.02em; }
.h-section, .section-head { font-family: var(--f-display); font-weight: 600; font-size: var(--t-section); line-height: 1.2; letter-spacing: -0.01em; }
.h-sub { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.lead { font-weight: 300; font-size: var(--t-lead); line-height: 1.45; max-width: 60ch; }
.caption { font-size: var(--t-caption); line-height: 1.45; color: var(--graphite); }
.label {
  font-family: var(--f-body); font-weight: 600; font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.3;
}
.label--kiln { color: var(--kiln); }
/* Product and pack names keep their lowercase inside uppercased labels, chips and buttons */
.nocase { text-transform: none; letter-spacing: 0.02em; }
.mono { font-family: var(--f-mono); }
.measure { max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose > :where(h2) { margin-top: var(--s6); font-size: var(--t-section); line-height: 1.2; }
.prose > :where(h3) { margin-top: var(--s4); font-size: 1.125rem; }
.prose > .label + .title, .prose > .label + h2 { margin-top: var(--s1); }
.prose > .title + p { margin-top: var(--s3); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }

.on-ink, .section--ink, .section--slate, .hero--ink, .band, .site-footer { color: var(--paper); }
.on-ink a, .section--ink a:not(.btn), .section--slate a:not(.btn), .hero--ink a:not(.btn), .band a:not(.btn), .site-footer a { color: var(--ember); }
.on-ink a:hover, .section--ink a:not(.btn):hover, .section--slate a:not(.btn):hover, .hero--ink a:not(.btn):hover, .band a:not(.btn):hover, .site-footer a:hover { color: var(--clay-100); }
.on-ink .caption, .section--ink .caption, .section--slate .caption, .hero--ink .caption, .band .caption { color: var(--ink-300); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(880px + var(--gutter) * 2); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4) var(--gutter); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
/* grid children never let wide content (tables, code) widen the page */
.grid > *, .pillar > *, .cards > *, .split-list > *, .doc-layout > * { min-width: 0; }
@media (max-width: 960px) {
  .span-3 { grid-column: span 6; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .span-3 { grid-column: 1 / -1; } }

.stack > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s4); }

.section { padding-block: var(--s12); position: relative; }
.section--tight { padding-block: var(--s8); }
.section--bone { background: var(--bone); }
.section--ink { background: var(--ink); }
.section--slate { background: var(--slate); }
.section--rule { border-top: var(--rule); }
@media (max-width: 640px) { .section { padding-block: var(--s8); } .section--tight { padding-block: var(--s6); } }

.section-intro { max-width: 62ch; margin-bottom: var(--s6); }
.section-intro > * + * { margin-top: var(--s2); }
.section-intro .h-section, .section-intro .title { margin-top: var(--s1); }

/* Page furniture: every page carries a hairline rule (BR layout rule) */
main { display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--f-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--kiln); color: var(--paper); border-color: var(--kiln);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--t-label);
}
.btn--primary:hover { background: var(--clay-900); border-color: var(--clay-900); color: var(--paper); }
/* True clay reserved for hero-scale blocks where the label is ≥ 19 px bold (D9) */
.btn--clay {
  background: var(--clay); color: var(--paper); border-color: var(--clay);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.1875rem; font-weight: 600;
  min-height: 60px; padding: 16px 28px;
}
.btn--clay:hover { background: var(--kiln); border-color: var(--kiln); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn--secondary, .hero--ink .btn--secondary, .band .btn--secondary, .section--ink .btn--secondary, .section--slate .btn--secondary {
  color: var(--paper); border-color: var(--paper);
}
.on-ink .btn--secondary:hover, .hero--ink .btn--secondary:hover, .band .btn--secondary:hover, .section--ink .btn--secondary:hover, .section--slate .btn--secondary:hover {
  background: var(--paper); color: var(--ink);
}
.btn--sm { min-height: 40px; padding: 8px 16px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.link-arrow::after { content: "→"; transition: transform .15s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink);
  border-bottom: var(--rule);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.header-inner { display: flex; align-items: center; gap: var(--s3); height: var(--header-h); transition: height .2s var(--ease); }
.site-header.is-condensed .header-inner { height: var(--header-h-condensed); }

/* Over the home hero the header is ink until the hero scrolls away */
.header-ink .site-header:not(.is-past-hero) { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink-700); }
.header-ink .site-header:not(.is-past-hero) .nav-trigger:hover,
.header-ink .site-header:not(.is-past-hero) .nav-trigger[aria-expanded="true"] { color: var(--ember); }
.header-ink .site-header:not(.is-past-hero) .btn--secondary { color: var(--paper); border-color: var(--paper); }
.header-ink .site-header:not(.is-past-hero) .btn--secondary:hover { background: var(--paper); color: var(--ink); }
.header-ink .site-header:not(.is-past-hero) .icon-btn:hover { background: var(--ink-700); }

.logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; flex: 0 0 auto; min-width: 96px; }
.logo:hover { color: inherit; }

.primary-nav { flex: 1 1 auto; }
.nav-list { display: flex; gap: 2px; align-items: center; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 400; color: inherit;
}
.nav-trigger::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--ease);
}
.nav-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--kiln); }
.nav-item.is-current > .nav-trigger { box-shadow: inset 0 -2px 0 currentColor; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; color: inherit; }
.icon-btn:hover { background: var(--ink-100); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }

/* Mega-menu panels: square, paper ground, 1 px ink-200 border, no shadow */
.mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); color: var(--ink);
  border-top: var(--rule); border-bottom: var(--rule);
}
.nav-item.is-open > .mega { display: block; }
html:not(.js) .nav-item:hover > .mega, html:not(.js) .nav-item:focus-within > .mega { display: block; }
.mega-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: var(--s5); }
.mega-cols { grid-column: span 8; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--gutter); }
.mega-col .label { color: var(--graphite); padding-bottom: var(--s2); border-bottom: var(--rule); margin-bottom: var(--s1); }
.mega-col ul { list-style: none; padding: 0; }
.mega-col a { display: block; padding: 10px 0; text-decoration: none; color: var(--ink); }
.mega-col a:hover .mega-title { color: var(--kiln); text-decoration: underline; text-underline-offset: 3px; }
.mega-title { display: block; font-weight: 600; font-size: 0.9375rem; }
.mega-desc { display: block; font-size: var(--t-caption); color: var(--graphite); margin-top: 2px; }
.mega-col .more a { font-style: normal; font-weight: 600; color: var(--kiln); }
.mega-col .soon { display: block; padding: 10px 0; color: var(--graphite); }
.mega-col .soon .mega-title { color: var(--ink-500); font-weight: 600; }
.phase { font-family: var(--f-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; border: 1px solid currentColor; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; color: var(--graphite); }
.mega-feature {
  grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
  background: var(--ink); color: var(--paper); padding: var(--s4); text-decoration: none; min-height: 220px; position: relative; overflow: hidden;
}
.mega-feature:hover { color: var(--paper); }
.mega-feature .label { color: var(--ink-300); }
.mega-feature .mega-feature-title { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; max-width: 22ch; }
.mega-feature .link-arrow { color: var(--ember); }
.mega-feature:hover .link-arrow { text-decoration: underline; }
.mega-feature code { background: var(--slate); color: var(--paper); }

.mobile-actions { display: none; }

@media (max-width: 1180px) {
  .nav-trigger { padding: 0 8px; font-size: 0.875rem; }
  .header-actions .btn--secondary { display: none; }
}

@media (max-width: 1040px) {
  .menu-btn { display: inline-grid; }
  .header-actions .btn--primary { display: none; }
  .header-inner { justify-content: space-between; }
  .primary-nav {
    display: none;
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    background: var(--ink); color: var(--paper);
    overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column;
  }
  .site-header.is-condensed .primary-nav { inset: var(--header-h-condensed) 0 0 0; }
  .nav-open .primary-nav { display: flex; }
  .nav-open { overflow: hidden; }
  .nav-open .site-header { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink-700); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--gutter); flex: 1 0 auto; }
  .nav-item { border-bottom: 1px solid var(--ink-700); }
  .nav-trigger { width: 100%; justify-content: space-between; height: 60px; padding: 0; font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ember); }
  .nav-item.is-current > .nav-trigger { box-shadow: none; }
  .mega { position: static; background: transparent; color: var(--paper); border: 0; }
  .mega .wrap { padding: 0; }
  .mega-inner { display: block; padding: 0 0 var(--s3); }
  .mega-cols { display: block; }
  .mega-col + .mega-col { margin-top: var(--s3); }
  .mega-col .label { color: var(--ink-300); border-bottom-color: var(--ink-700); }
  .mega-col a { color: var(--paper); }
  .mega-col a:hover .mega-title { color: var(--ember); }
  .mega-col .more a { color: var(--ember); }
  .mega-desc { color: var(--ink-300); }
  .mega-col .soon .mega-title { color: var(--ink-400); }
  .primary-nav .phase { color: var(--ink-300); }
  .mega-feature { display: none; }
  .mobile-actions {
    display: grid; gap: 12px; position: sticky; bottom: 0;
    padding: var(--s2) var(--gutter) var(--s3); background: var(--ink); border-top: 1px solid var(--ink-700);
  }
  .mobile-actions .btn { width: 100%; }
  .mobile-actions .btn--secondary { color: var(--paper); border-color: var(--paper); }
}

/* ---------- Search overlay ---------- */
.search-panel {
  position: fixed; inset: 0; z-index: 150; background: rgba(10, 19, 32, .6);
  display: none; align-items: flex-start; justify-content: center; padding: 10vh var(--gutter) var(--gutter);
}
.search-panel.is-open { display: flex; }
.search-box { width: 100%; max-width: 760px; background: var(--paper); border: 1px solid var(--ink); max-height: 80vh; display: flex; flex-direction: column; }
.search-head { display: flex; border-bottom: var(--rule); }
.search-head input { flex: 1; border: 0; padding: 20px 24px; font-size: 1.125rem; background: transparent; min-width: 0; }
.search-head input:focus { outline: none; }
.search-head:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.search-close { padding: 0 20px; font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.search-scopes { display: flex; gap: 4px; padding: 12px 24px; border-bottom: var(--rule); flex-wrap: wrap; }
.search-scopes button { padding: 6px 12px; border: 1px solid var(--ink-200); font-size: var(--t-caption); }
.search-scopes button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.search-results { overflow-y: auto; padding: 8px 0; }
.search-results a { display: block; padding: 14px 24px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink-100); }
.search-results a:hover, .search-results a:focus { background: var(--bone); }
.search-results .r-type { font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.search-results .r-title { display: block; font-weight: 600; margin-top: 2px; }
.search-results .r-desc { display: block; font-size: var(--t-caption); color: var(--graphite); margin-top: 2px; }
.search-results .r-def { padding: 16px 24px; background: var(--bone); border-bottom: var(--rule); }
.search-results .r-def dt { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; }
.search-results .r-def dd { margin-top: 4px; }
.search-empty { padding: 24px; color: var(--graphite); }

/* ---------- Heroes ---------- */
.hero { position: relative; overflow: hidden; }
.hero--ink { background: var(--ink); padding-block: var(--s16) var(--s12); }
.hero--paper { background: var(--paper); padding-block: var(--s10) var(--s8); border-bottom: var(--rule); }
.hero .wrap { position: relative; z-index: 1; }
.hero-body { max-width: 780px; }
.hero-body > * + * { margin-top: var(--s3); }
.hero-body .actions { margin-top: var(--s5); }
.hero .label { color: var(--ink-300); }
.hero--paper .label { color: var(--kiln); }
.hero--paper .hero-body { max-width: 860px; }
.crumbs { font-size: var(--t-caption); color: var(--graphite); margin-bottom: var(--s3); }
.crumbs a { color: var(--graphite); }
.hero--ink .crumbs, .hero--ink .crumbs a { color: var(--ink-300); }
@media (max-width: 640px) {
  .hero--ink { padding-block: var(--s10) var(--s8); }
  .hero--paper { padding-block: var(--s6) var(--s6); }
}

/* Home hero: "Ember on Ink" gradient, field-crop disc cropped by two edges */
.hero--home {
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(223, 140, 100, .30) 0%, rgba(185, 96, 63, .12) 32%, rgba(10, 19, 32, 0) 62%),
    var(--ink);
  min-height: min(88vh, 820px);
  display: flex; align-items: center;
  padding-block: var(--s12);
}
.hero--home .display { max-width: none; }
.hero--home .lead { color: var(--ink-100); max-width: 52ch; }

/* ---------- Discs (one derivation per surface) ---------- */
.disc { position: absolute; pointer-events: none; color: var(--clay); z-index: 0; }
.disc svg { width: 100%; height: 100%; }
/* page scale: over a third of the width, cropped by two edges */
.disc--page { width: min(56vw, 760px); aspect-ratio: 1; right: calc(min(56vw, 760px) * -0.28); bottom: calc(min(56vw, 760px) * -0.34); }
.disc--page-top { width: min(46vw, 620px); aspect-ratio: 1; right: calc(min(46vw, 620px) * -0.3); top: calc(min(46vw, 620px) * -0.3); }
/* element scale: under 2U, sits in a corner */
.disc--corner { width: 56px; height: 56px; right: var(--gutter); top: var(--s5); }
.hero--paper .disc--corner { right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.disc--inline { position: static; width: 40px; height: 40px; display: inline-block; }
/* cut disc: a full disc that the page edge itself crops */
.hero .disc--cut.disc--corner { right: -28px; width: 56px; height: 56px; }
@media (max-width: 760px) {
  .disc--page { width: 88vw; right: -38vw; bottom: -40vw; opacity: .9; }
  .disc--page-top { width: 70vw; right: -30vw; top: -24vw; }
  .disc--corner { width: 40px; height: 40px; top: var(--s3); }
  .hero .disc--cut.disc--corner { right: -20px; width: 40px; height: 40px; }
}

/* ---------- Sticky in-page tab bar ---------- */
.tabbar {
  position: sticky; top: var(--header-h-condensed); z-index: 50;
  background: var(--paper); border-bottom: var(--rule);
}
.tabbar-inner { position: relative; }
.tabbar ul { display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none; list-style: none; padding: 0; margin: 0; }
.tabbar ul::-webkit-scrollbar { display: none; }
.tabbar a {
  display: block; padding: 18px 0 16px; white-space: nowrap;
  font-weight: 600; font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none; border-bottom: 2px solid transparent;
}
.tabbar a:hover { color: var(--ink); }
.tabbar a.is-active, .tabbar a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 760px) {
  .tabbar-inner::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48px; background: linear-gradient(90deg, rgba(251,250,247,0), var(--paper)); pointer-events: none; }
  .tabbar ul { gap: var(--s3); padding-right: 48px; }
}

/* ---------- Proof strip (replaces the logo wall) ---------- */
.proof-strip { background: var(--slate); color: var(--paper); }
.proof-strip .grid { gap: 0; }
.proof-cell { padding: var(--s5) var(--s4); border-left: 1px solid var(--ink-600); }
.proof-cell:first-child { border-left: 0; padding-left: 0; }
.proof-figure { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.proof-sub { margin-top: var(--s1); font-family: var(--f-mono); font-size: 0.875rem; color: var(--clay-100); word-break: break-all; }
.proof-sub--text { font-family: var(--f-body); font-weight: 600; color: var(--paper); font-size: 0.9375rem; }
.proof-cell p.caption { margin-top: var(--s2); color: var(--ink-300); max-width: 38ch; }
.proof-cell .claim { margin-top: var(--s1); }
@media (max-width: 960px) {
  .proof-cell { border-left: 0; border-top: 1px solid var(--ink-600); padding: var(--s4) 0; }
  .proof-cell:first-child { border-top: 0; }
}

/* ---------- Claim labels & chips ---------- */
.claim {
  display: inline-block; vertical-align: 0.1em;
  font-family: var(--f-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite); border: 1px solid var(--ink-300); padding: 2px 6px; line-height: 1.3; white-space: nowrap;
}
.claim::before { content: "["; } .claim::after { content: "]"; }
.claim::before, .claim::after { opacity: .55; }
.on-ink .claim, .section--ink .claim, .section--slate .claim, .hero--ink .claim, .proof-strip .claim, .band .claim { color: var(--ink-300); border-color: var(--ink-500); }

.chip {
  display: inline-block; font-family: var(--f-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--ink); color: var(--ink); line-height: 1.2; white-space: nowrap;
}
.chip--muted { border-color: var(--ink-300); color: var(--graphite); }
.chip--type { border: 0; padding: 0; color: var(--kiln); }
.on-ink .chip, .hero--ink .chip { border-color: var(--paper); color: var(--paper); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cards--2 { --cols: 2; } .cards--3 { --cols: 3; } .cards--4 { --cols: 4; }
@media (max-width: 1040px) { .cards--4 { --cols: 2; } .cards--3 { --cols: 2; } }
@media (max-width: 640px) { .cards { --cols: 1 !important; } }

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  border: var(--rule); background: var(--paper); padding: var(--s4);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease);
}
.section--bone .card { background: var(--paper); }
a.card:hover { border-color: var(--ink); color: var(--ink); }
a.card:hover .card-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card-num { font-family: var(--f-body); font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; color: var(--kiln); }
.card-title { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.card-sub { font-size: var(--t-caption); color: var(--graphite); }
.card p { max-width: 52ch; }
.card .card-foot { margin-top: auto; padding-top: var(--s2); display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.card .card-link { font-weight: 600; color: var(--kiln); }
a.card .card-link::after { content: " →"; }
.card--q .card-q { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--ink .card-sub { color: var(--ink-300); }
.card--ink .card-num { color: var(--ember); }
a.card--ink:hover { color: var(--paper); border-color: var(--clay); }

/* Numbered refusals list ("What we will not build") */
.refusals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); counter-reset: r; }
.refusals li { border-right: var(--rule); border-bottom: var(--rule); padding: var(--s4); counter-increment: r; }
.refusals li::before { content: counter(r, decimal-leading-zero); display: block; font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; color: var(--kiln); margin-bottom: var(--s2); }
.refusals strong { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; margin-bottom: var(--s1); }
@media (max-width: 960px) { .refusals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .refusals { grid-template-columns: 1fr; } }

/* ---------- Registration-mark frame: reserved for proof objects ---------- */
.proof-object { position: relative; padding: var(--s4); border: var(--rule); background: var(--paper); }
.proof-object::before, .proof-object::after, .proof-object > .reg::before, .proof-object > .reg::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  background:
    linear-gradient(var(--clay), var(--clay)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--clay), var(--clay)) center / 100% 1.5px no-repeat;
}
.proof-object::before { top: -8px; left: -8px; }
.proof-object::after { top: -8px; right: -8px; }
.proof-object > .reg::before { bottom: -8px; left: -8px; }
.proof-object > .reg::after { bottom: -8px; right: -8px; }
.proof-object--ink { background: var(--slate); border-color: var(--ink-600); color: var(--paper); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: var(--rule); background: var(--paper); }
.table-wrap:focus-visible { outline-offset: 4px; }
.table { width: 100%; font-size: 0.9375rem; text-align: left; }
.table caption { text-align: left; padding: var(--s2) var(--s3); caption-side: bottom; font-size: var(--t-caption); color: var(--graphite); border-top: var(--rule); }
.table th, .table td { padding: 14px var(--s3); vertical-align: top; border-bottom: 1px solid var(--ink-100); }
.table thead th { background: var(--slate); color: var(--paper); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; border-bottom: 0; white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 600; }
.table td.mono, .table th.mono, .table .mono { font-family: var(--f-mono); font-size: 0.875rem; white-space: nowrap; }
.table .num { text-align: right; white-space: nowrap; }
.table--compare td, .table--compare th { text-align: center; }
.table--compare td:first-child, .table--compare th:first-child { text-align: left; }
.table--compare .is-us { background: var(--bone); font-weight: 600; }
.table--compare thead .is-us { background: var(--ink); color: var(--paper); }
.table--compare .no { color: var(--graphite); }
.table--compare .yes { color: var(--ink); font-weight: 600; }
.table--compact th, .table--compact td { padding: 10px var(--s2); }

/* ---------- Feature rows (Govern · Seal · Verify) ---------- */
.pillars { display: grid; gap: 0; border-top: var(--rule); }
.pillar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: var(--s8); border-bottom: var(--rule); align-items: start; }
.pillar-text { grid-column: 1 / span 6; }
.pillar-media { grid-column: 8 / span 5; }
.pillar:nth-child(even) .pillar-text { grid-column: 7 / span 6; grid-row: 1; }
.pillar:nth-child(even) .pillar-media { grid-column: 1 / span 5; grid-row: 1; }
.pillar--lead { padding-block: var(--s12); }
.pillar--lead .pillar-text .h-section { font-size: var(--t-title); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
.pillar-text > * + * { margin-top: var(--s2); }
.pillar-text .label { color: var(--kiln); }
.pillar-text .link-arrow { margin-top: var(--s3); display: inline-flex; }
@media (max-width: 960px) {
  .pillar, .pillar:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .pillar-text, .pillar-media, .pillar:nth-child(even) .pillar-text, .pillar:nth-child(even) .pillar-media { grid-column: 1; grid-row: auto; }
}

/* Rung ladder visual */
.rungs { border: var(--rule); background: var(--paper); font-size: 0.875rem; }
.rungs li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--ink-100); align-items: baseline; }
.rungs li:last-child { border-bottom: 0; }
.rungs .n { font-family: var(--f-mono); color: var(--graphite); }
.rungs .nm { font-weight: 600; }
.rungs .t { font-family: var(--f-mono); color: var(--graphite); font-size: 0.8125rem; }
.rungs .is-act { background: var(--ink); color: var(--paper); }
.rungs .is-act .n, .rungs .is-act .t { color: var(--ink-300); }
.rungs .is-decide .nm::after { content: "allow · refuse · escalate"; display: block; font-weight: 400; color: var(--kiln); font-size: 0.8125rem; }

/* ---------- Terminal / code ---------- */
.terminal, pre.code {
  background: var(--slate); color: var(--paper); font-family: var(--f-mono); font-size: 0.875rem; line-height: 1.6;
  padding: var(--s3); overflow-x: auto; margin: 0; white-space: pre;
}
.terminal .t-head { display: flex; justify-content: space-between; color: var(--ink-300); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s2); padding: 10px var(--s3); border-bottom: 1px solid var(--ink-600); font-family: var(--f-body); font-weight: 600; }
.terminal .prompt { color: var(--ink-300); }
.terminal .pass { color: var(--paper); font-weight: 600; background: var(--fuse-40); padding: 0 4px; }
.terminal .fail { color: var(--paper); font-weight: 600; background: var(--clay-700); padding: 0 4px; }
.terminal .dim { color: var(--ink-300); }
.terminal-wrap figcaption { margin-top: var(--s2); }
code.digest { font-family: var(--f-mono); word-break: break-all; }

/* ---------- Architecture: nine strata + plane E ---------- */
.strata { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
.strata-layers { display: grid; gap: 6px; }
.stratum { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; background: var(--paper); border: var(--rule); min-height: 52px; }
.stratum .sid { align-self: stretch; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--paper); background: var(--ink); }
.stratum .sbody { padding: 10px 16px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.stratum .sname { font-weight: 600; }
.stratum .sdesc { color: var(--graphite); font-size: var(--t-caption); }
.stratum:nth-child(1) .sid { background: var(--fuse-85); }
.stratum:nth-child(2) .sid { background: var(--fuse-70); }
.stratum:nth-child(3) .sid { background: var(--fuse-55); }
.stratum:nth-child(4) .sid { background: var(--fuse-40); }
.stratum:nth-child(5) .sid { background: var(--fuse-25); }
.stratum:nth-child(6) .sid { background: var(--fuse-10); }
.plane-e { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s2); position: relative; border-left: 3px solid var(--clay); }
.plane-e .label { color: var(--ember); font-size: 0.6875rem; }
.plane-e .pname { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin-top: 6px; }
.plane-e ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 0.8125rem; color: var(--ink-200); }
.plane-e li { border-top: 1px solid var(--ink-600); padding-top: 8px; }
@media (max-width: 640px) {
  .strata { grid-template-columns: 1fr; }
  .plane-e { border-left: 0; border-top: 3px solid var(--clay); }
  .stratum .sbody { display: block; }
  .stratum .sdesc { display: block; margin-top: 2px; }
}
.boundaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s6); }
.boundary { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.boundary .bid { font-family: var(--f-mono); font-weight: 400; color: var(--kiln); }
.boundary p { margin-top: 6px; }
@media (max-width: 860px) { .boundaries { grid-template-columns: 1fr; } }

/* ---------- Numbered list / steps ---------- */
.numbered { counter-reset: n; display: grid; gap: 0; border-top: var(--rule); }
.numbered > li { counter-increment: n; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--gutter); padding-block: var(--s4); border-bottom: var(--rule); }
.numbered > li::before { content: counter(n, decimal-leading-zero); font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; color: var(--kiln); padding-top: 6px; }
.numbered h3 { font-size: var(--t-section); line-height: 1.2; }
.numbered h3 + * { margin-top: var(--s1); }
.numbered p { max-width: var(--measure); }
@media (max-width: 640px) { .numbered > li { grid-template-columns: 1fr; gap: var(--s1); } }

.steps { display: grid; gap: var(--s4); counter-reset: s; }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--gutter); counter-increment: s; }
.step::before { content: counter(s); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 1.375rem; }
.step > div { min-width: 0; }
.step > div > * + * { margin-top: var(--s2); }
@media (max-width: 640px) { .step { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

.flow { display: flex; flex-wrap: wrap; gap: 0; border: var(--rule); counter-reset: f; }
.flow li { flex: 1 1 150px; padding: var(--s3); border-right: var(--rule); counter-increment: f; position: relative; }
.flow li:last-child { border-right: 0; }
.flow li::before { content: counter(f, decimal-leading-zero); display: block; font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; color: var(--kiln); margin-bottom: var(--s1); }
.flow strong { display: block; font-family: var(--f-display); font-size: 1.125rem; }
.flow span { display: block; font-size: var(--t-caption); color: var(--graphite); margin-top: 4px; }
@media (max-width: 760px) { .flow li { flex-basis: 100%; border-right: 0; border-bottom: var(--rule); } .flow li:last-child { border-bottom: 0; } }

/* ---------- Limits block: same type size as claims, bone inset ---------- */
.limits { background: var(--bone); padding: var(--s5); border-left: 3px solid var(--ink); }
.limits > .label { color: var(--graphite); margin-bottom: var(--s2); display: block; }
.limits h2, .limits h3 { font-size: var(--t-section); margin-bottom: var(--s2); }
.limits ul { padding-left: 1.2em; }
.limits li + li { margin-top: var(--s1); }
.limits p { max-width: var(--measure); }
.section--bone .limits { background: var(--paper); }

.wrong { border-top: 2px solid var(--ink); padding-top: var(--s3); max-width: var(--measure); }
.wrong .label { color: var(--graphite); display: block; margin-bottom: var(--s1); }

/* ---------- Pull line / quote ---------- */
.pull { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; border-left: 3px solid var(--clay); padding-left: var(--s3); }
.quote { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; max-width: 44ch; padding: var(--s4); border: var(--rule); background: var(--paper); }
.note { font-size: var(--t-caption); color: var(--graphite); border-top: var(--rule); padding-top: var(--s2); max-width: var(--measure); }
.law { background: var(--ink); color: var(--paper); padding: var(--s6); }
.law .title { max-width: 22ch; }
.law p { color: var(--ink-200); max-width: var(--measure); }
.law > * + * { margin-top: var(--s3); }

/* ---------- Media frame (square, 1px border) ---------- */
.media-frame { border: var(--rule); background: var(--paper); }
.media-frame figcaption { padding: var(--s2) var(--s3); border-top: var(--rule); }

/* ---------- Definition lists (spec-style) ---------- */
.deflist { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); border-top: var(--rule); }
.deflist dt, .deflist dd { padding: var(--s2) 0; border-bottom: var(--rule); }
.deflist dt { font-weight: 600; padding-right: var(--s3); }
@media (max-width: 640px) { .deflist { grid-template-columns: 1fr; } .deflist dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Download rows ---------- */
.downloads { border: var(--rule); }
.download { display: grid; grid-template-columns: minmax(180px, 1.3fr) 90px minmax(0, 3fr) 110px; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink-100); font-size: 0.9375rem; }
.download:last-child { border-bottom: 0; }
.download--head { background: var(--slate); color: var(--paper); font-weight: 600; font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; }
.download .file { font-family: var(--f-mono); font-weight: 400; }
.download .sha { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--graphite); word-break: break-all; }
@media (max-width: 760px) {
  .download { grid-template-columns: 1fr auto; }
  .download .sha { grid-column: 1 / -1; }
  .download--head { display: none; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s4); max-width: 720px; }
.field { display: grid; gap: var(--s1); }
.field label { font-weight: 600; }
.field .req { font-weight: 400; color: var(--graphite); font-size: var(--t-caption); margin-left: 6px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--ink-400); border-radius: 0; background: var(--paper);
  padding: 12px 14px; font-size: 1rem; line-height: 1.4;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field .hint { font-size: var(--t-caption); color: var(--graphite); }
.form-status { display: none; padding: var(--s3); border: 1px solid var(--ink); background: var(--bone); }
.form-status.is-visible { display: block; }

/* ---------- Closing band ---------- */
.band { background: var(--ink); padding-block: var(--s12); position: relative; overflow: hidden; }
.band .wrap { position: relative; }
.band-rule { width: 64px; height: 3px; background: var(--clay); margin: 0 0 var(--s4); border: 0; }
.band .title { max-width: 20ch; }
.band p.lead { color: var(--ink-200); margin-top: var(--s2); max-width: 54ch; }
.band .actions { margin-top: var(--s5); }
@media (max-width: 640px) { .band { padding-block: var(--s8); } }

/* ---------- Library cards ---------- */
.lib-card .chip--type { margin-bottom: var(--s1); }
.lib-card .card-title { font-size: 1.125rem; }

/* ---------- Status / gates ---------- */
.gates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); }
.gates > div { padding: var(--s3); border-right: var(--rule); border-bottom: var(--rule); }
.gates .gid { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; color: var(--kiln); line-height: 1; }
.gates .gname { font-weight: 600; margin-top: var(--s1); }
.gates p { font-size: var(--t-caption); color: var(--graphite); margin-top: 4px; }
@media (max-width: 960px) { .gates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gates { grid-template-columns: 1fr; } }

.split-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--rule); }
.split-list > div { padding: var(--s4); }
.split-list > div + div { border-left: var(--rule); }
.split-list h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.split-list ul { padding-left: 1.2em; }
.split-list li + li { margin-top: var(--s1); }
@media (max-width: 760px) { .split-list { grid-template-columns: 1fr; } .split-list > div + div { border-left: 0; border-top: var(--rule); } }

/* ---------- FAQ / objections ---------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s3) 40px var(--s3) 0; position: relative; font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--f-body); font-weight: 300; font-size: 1.75rem; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s3); max-width: var(--measure); }

/* ---------- Doc layout (T7 developer pages) ---------- */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: var(--s6); padding-block: var(--s8) var(--s12); }
.doc-nav, .doc-toc { position: sticky; top: calc(var(--header-h-condensed) + var(--s3)); align-self: start; font-size: 0.875rem; }
.doc-nav .label, .doc-toc .label { color: var(--graphite); display: block; margin-bottom: var(--s2); font-size: 0.6875rem; }
.doc-nav ul, .doc-toc ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.doc-nav a, .doc-toc a { display: block; padding: 6px 0 6px 12px; color: var(--graphite); text-decoration: none; border-left: 1px solid var(--ink-200); }
.doc-nav a:hover, .doc-toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.doc-nav a[aria-current="page"] { color: var(--ink); border-left: 2px solid var(--ink); font-weight: 600; }
.doc-nav li.soon span { display: block; padding: 6px 0 6px 12px; color: var(--ink-400); border-left: 1px solid var(--ink-200); }
.doc-body { min-width: 0; }
.doc-body > * + * { margin-top: var(--s3); }
.doc-body h2 { font-size: var(--t-section); margin-top: var(--s8); padding-top: var(--s3); border-top: var(--rule); }
.doc-body > h2:first-child, .doc-meta + h2 { margin-top: var(--s5); padding-top: 0; border-top: 0; }
.doc-body > h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 1.125rem; margin-top: var(--s5); }
.doc-body p, .doc-body ul, .doc-body ol { max-width: var(--measure); }
.doc-body ul, .doc-body ol { padding-left: 1.2em; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-caption); color: var(--graphite); padding: var(--s2) 0; border-top: var(--rule); border-bottom: var(--rule); }
.doc-meta b { color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 200px minmax(0, 1fr); } .doc-toc { display: none; } }
@media (max-width: 760px) { .doc-layout { grid-template-columns: 1fr; gap: var(--s4); } .doc-nav { position: static; border-bottom: var(--rule); padding-bottom: var(--s3); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); padding-block: var(--s10) var(--s5); border-top: 1px solid var(--ink-700); }
.footer-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.footer-cols h2 { font-family: var(--f-body); font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-300); margin-bottom: var(--s2); }
.footer-cols ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; }
.site-footer .footer-cols a { color: var(--paper); text-decoration: none; }
.site-footer .footer-cols a:hover { color: var(--ember); text-decoration: underline; }
.footer-cols .phase { color: var(--ink-400); }
.footer-base { margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--ink-700); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); }
.site-footer .logo, .site-footer .logo:hover { color: var(--paper); }
.footer-brand .descriptor { margin-top: var(--s2); font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.footer-brand .oneline { margin-top: var(--s1); color: var(--ink-300); font-size: var(--t-caption); max-width: 36ch; }
.boilerplate { color: var(--ink-200); font-size: var(--t-caption); max-width: 70ch; }
.footer-legal { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-caption); color: var(--ink-300); }
.footer-legal a { color: var(--ink-200) !important; }
.footer-social { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--t-caption); }
@media (max-width: 960px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
  .footer-base { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Misc ---------- */
.two-col { columns: 2; column-gap: var(--s6); }
.two-col > * { break-inside: avoid; }
@media (max-width: 760px) { .two-col { columns: 1; } }
.divider { border: 0; border-top: var(--rule); margin: var(--s6) 0; }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); } .mt-8 { margin-top: var(--s8); }
.center { text-align: center; }
.kiln { color: var(--kiln); }
.graphite { color: var(--graphite); }

.video-poster { position: relative; aspect-ratio: 16 / 10; background: var(--slate); display: flex; flex-direction: column; }

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

@media print {
  .site-header, .tabbar, .band, .site-footer, .search-panel { display: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   Composition layer: product visuals, texture, states and motion.
   Uses only the design-system tokens, type scale and rules above:
   square corners, no shadows, named gradients only, motion ≤ 200 ms.
   ========================================================================== */

/* ---------- Logo (drawn asset: ink on paper, white on ink) ---------- */
.logo { min-width: 96px; }
.logo-img { width: 118px; height: auto; display: block; }
.logo-img--white { display: none; }
.header-ink .site-header:not(.is-past-hero) .logo-img--ink,
.nav-open .site-header .logo-img--ink,
.site-footer .logo-img--ink,
.on-ink .logo-img--ink { display: none; }
.header-ink .site-header:not(.is-past-hero) .logo-img--white,
.nav-open .site-header .logo-img--white,
.site-footer .logo-img--white,
.on-ink .logo-img--white { display: block; }
.site-header.is-condensed .logo-img { width: 104px; }
.footer-brand .logo-img { width: 150px; }
@media (max-width: 640px) { .logo-img { width: 104px; } }

/* ---------- Header: translucent, blurred ---------- */
.site-header {
  background: rgba(251, 250, 247, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.header-ink .site-header:not(.is-past-hero) { background: var(--ink); border-bottom-color: rgba(231, 236, 241, .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-open .site-header { background: var(--ink); }
.nav-trigger { position: relative; }
.nav-item.is-current > .nav-trigger { box-shadow: none; }
.nav-item.is-current > .nav-trigger::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -16px; height: 2px; background: currentColor;
}
.site-header.is-condensed .nav-item.is-current > .nav-trigger::before { bottom: -8px; }
@media (max-width: 1180px) { .nav-item.is-current > .nav-trigger::before { left: 8px; right: 8px; } }
@media (max-width: 1040px) { .nav-item.is-current > .nav-trigger::before { display: none; } }

/* Mega-menu: entrance, row hover, textured feature tile */
.nav-item.is-open > .mega { animation: mega-in .18s var(--ease); }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-col a { padding: 10px 12px; margin-inline: -12px; transition: background-color .15s var(--ease); }
.mega-col a:hover { background: var(--bone); }
.mega-col a:hover .mega-title { text-decoration: none; }
@media (max-width: 1040px) {
  .mega-col a:hover { background: transparent; }
}

/* Plain grounds: no background texture anywhere */
.section--ink, .proof-strip, .site-footer { position: relative; overflow: hidden; }
.section--ink > .wrap, .proof-strip > .wrap, .site-footer > .wrap, .band > .wrap { position: relative; z-index: 1; }

/* Halo: only on ink, centred on the page disc */
.hero--ink:not(.hero--home) { padding-block: var(--s16); }
/* "Halo": only on ink, only centred on the disc */
.hero--ink .disc--page::before, .hero--ink .disc--page-top::before {
  content: ""; position: absolute; inset: -35%; z-index: -1;
  background: radial-gradient(closest-side, rgba(223, 140, 100, .28), rgba(185, 96, 63, .08) 60%, transparent);
}
.hero--ink .lead { color: var(--ink-100); }
.hero--paper { padding-block: var(--s12) var(--s10); }
.hero--paper .lead { color: var(--ink-700); }


/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; letter-spacing: .01em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--ink); }
.hero--ink .crumbs a:hover { color: var(--paper); }

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section-intro { margin-bottom: clamp(40px, 5vw, 64px); }
.section-intro .lead { color: var(--graphite); }
.section--ink .section-intro .lead, .section--slate .section-intro .lead { color: var(--ink-200); }
.section--ink .label--kiln, .section--slate .label--kiln { color: var(--ember); }
.section-intro--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s3) var(--s6); align-items: end; max-width: none; }
.section-intro--split > .lead { margin-top: 0; max-width: 48ch; }
@media (max-width: 860px) { .section-intro--split { grid-template-columns: 1fr; } }

/* ---------- Cards: a clay rule draws in on hover ---------- */
.card { transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease); }
.card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--clay);
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
a.card:hover { transform: translateY(-4px); border-color: var(--ink); }
a.card:hover::before { transform: scaleX(1); }
a.card:hover .card-title { text-decoration: none; }
a.card .card-link::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
a.card:hover .card-link::after { transform: translateX(4px); }
.section--ink .card { background: rgba(30, 48, 72, .55); border-color: var(--ink-600); color: var(--paper); }
.section--ink .card .card-sub, .section--ink .card p { color: var(--ink-200); }
.section--ink a.card:hover { border-color: var(--ember); color: var(--paper); }
.section--ink .card .card-link, .section--ink .card-num { color: var(--ember); }

/* Buttons: arrow nudge, tactile press */
.btn { transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); }
.btn:active { transform: translateY(1px); }

/* ---------- Tables ---------- */
.table tbody tr { transition: background-color .15s var(--ease); }
.table tbody tr:hover { background: var(--bone); }
.table thead th { padding-block: 16px; }
.table thead .claim { color: var(--ink-200); border-color: var(--ink-400); }

/* ---------- Tab bar: blurred, with reading progress ---------- */
.tabbar { background: rgba(251, 250, 247, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tabbar a { transition: color .15s var(--ease), border-color .15s var(--ease); }

/* ---------- Home hero: two columns, product composition ---------- */
.hero--home {
  background:
    radial-gradient(55% 65% at 88% 78%, rgba(223, 140, 100, .30), rgba(185, 96, 63, .10) 40%, transparent 68%),
    var(--ink);
  min-height: min(94vh, 900px);
  padding-block: calc(var(--s12) + 8px) var(--s12);
}
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--s6); align-items: center; }
.hero--home .hero-body { max-width: none; }
.hero--home .display em { font-style: normal; color: var(--ember); }
.hero-trust { margin-top: var(--s6) !important; display: flex; flex-wrap: wrap; gap: 8px 0; color: var(--ink-300); font-size: var(--t-caption); }
.hero-trust span { display: inline-flex; align-items: center; }
.hero-trust span + span::before { content: ""; width: 4px; height: 4px; background: var(--ink-500); margin: 0 14px; }
.hero--home .disc--page { width: min(44vw, 620px); right: calc(min(44vw, 620px) * -0.22); bottom: calc(min(44vw, 620px) * -0.42); }
@media (max-width: 1040px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--s6); }
  .hero--home { min-height: 0; }
}

/* The governed-write console (an illustration, labelled as such) */
.console {
  position: relative; z-index: 2;
  background: rgba(18, 29, 45, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(169, 182, 196, .22);
  color: var(--paper); font-size: 0.875rem;
}
.console-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(169, 182, 196, .16);
  font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.console-bar .ttl { flex: 1; text-transform: none; letter-spacing: .01em; font-weight: 400; color: var(--ink-200); font-size: 0.8125rem; }
.console-tag { border: 1px solid var(--ink-500); padding: 2px 6px; font-size: 0.625rem; letter-spacing: .14em; }
.console-steps { list-style: none; margin: 0; padding: 8px 0; position: relative; }
.console-steps::before { content: ""; position: absolute; left: 35px; top: 26px; bottom: 26px; width: 1px; background: rgba(169, 182, 196, .2); }
.console-steps li {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 16px;
}
.cs-rung {
  width: 40px; height: 26px; display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--f-mono); font-size: 0.75rem; background: var(--ink-800); border: 1px solid var(--ink-600); color: var(--ink-200);
}
.cs-body b { display: block; font-weight: 600; font-size: 0.9375rem; }
.cs-body small { display: block; color: var(--ink-300); font-size: 0.78rem; margin-top: 2px; font-family: var(--f-mono); }
.cs-state { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; border: 1px solid var(--ink-500); color: var(--ink-200); white-space: nowrap; }
.console-steps .is-escalate .cs-state { border-color: var(--ember); color: var(--ember); }
.console-steps .is-person { background: rgba(251, 250, 247, .05); }
.console-steps .is-person .cs-rung, .console-steps .is-person .cs-state { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.console-steps .is-seal .cs-rung, .console-steps .is-seal .cs-state { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.console-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
  border-top: 1px solid rgba(169, 182, 196, .16); font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-200);
}
.console-foot .pass { font-weight: 600; padding: 2px 8px; background: var(--fuse-40); color: var(--paper); }
.console-caption { margin-bottom: 12px; font-size: 0.8125rem; color: var(--ink-300); position: relative; z-index: 2; }
html.js .console-steps li, html.js .console-foot { opacity: 0; transform: translateY(8px); animation: step-in .2s var(--ease) forwards; animation-delay: calc(300ms + var(--i, 0) * 320ms); }
html.js .console-foot { --i: 6; }
@keyframes step-in { to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .console-steps li { grid-template-columns: 36px minmax(0, 1fr); }
  .cs-rung { width: 36px; }
  .cs-state { grid-column: 2; justify-self: start; }
  .console-steps::before { left: 33px; }
}

/* ---------- Proof strip + standards row ---------- */
.standards { border-top: 1px solid var(--ink-600); padding-block: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.standards-label { font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-300); }
.standards ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.standards li { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--paper); padding: 6px 12px; border: 1px solid var(--ink-600); background: rgba(10, 19, 32, .35); transition: border-color .2s var(--ease); }
.standards li:hover { border-color: var(--ember); }

/* ---------- Stats row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink-600); border-bottom: 1px solid var(--ink-600); margin-bottom: var(--s8); }
.stat { padding: var(--s4) var(--s3) var(--s4) 0; }
.stat + .stat { border-left: 1px solid var(--ink-600); padding-left: var(--s3); }
.stat-n { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.stat-l { display: block; margin-top: var(--s1); color: var(--ink-200); font-size: 0.9375rem; max-width: 22ch; }
.section:not(.section--ink) .stats, .section:not(.section--ink) .stat + .stat { border-color: var(--ink-200); }
.section:not(.section--ink) .stat-l { color: var(--graphite); }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ink-600); }
}

/* ---------- Pillars on ink (Govern · Seal · Verify) ---------- */
.section--ink .pillars { border-top-color: var(--ink-700); }
.section--ink .pillar { border-bottom-color: var(--ink-700); }
.section--ink .pillar-text .label { color: var(--ember); }
.section--ink .pillar-text p { color: var(--ink-100); }
.section--ink .rungs { background: var(--slate); border-color: var(--ink-600); }
.section--ink .rungs li { border-bottom-color: var(--ink-600); transition: background-color .15s var(--ease); }
.section--ink .rungs li:hover { background: rgba(251, 250, 247, .04); }
.section--ink .rungs .n, .section--ink .rungs .t { color: var(--ink-300); }
.section--ink .rungs .is-act { background: var(--paper); color: var(--ink); }
.section--ink .rungs .is-act .n, .section--ink .rungs .is-act .t { color: var(--graphite); }
.section--ink .rungs .is-decide .nm::after { color: var(--ember); }
.section--ink .proof-object { background: var(--slate); border-color: var(--ink-600); color: var(--paper); }
.section--ink .table { color: var(--paper); }
.section--ink .table td, .section--ink .table th { border-bottom-color: var(--ink-600); }
.section--ink .table tbody tr:hover { background: rgba(251, 250, 247, .04); }
.section--ink .table-wrap { background: var(--slate); border-color: var(--ink-600); }
.section--ink pre.code { border: 1px solid var(--ink-600); background: var(--slate); }
.section--ink .claim { color: var(--ink-300); border-color: var(--ink-500); }
.section--ink .mono.caption { color: var(--clay-100); }
.panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-300); background: var(--ink-800); border: 1px solid var(--ink-600); border-bottom: 0; }

/* ---------- Architecture diagram ---------- */
.stratum { transition: transform .2s var(--ease), border-color .2s var(--ease); }
.stratum:hover { transform: translateX(6px); border-color: var(--ink); }
.plane-e { overflow: hidden; }
.plane-e > * { position: relative; z-index: 1; }

/* Terminal window chrome */
.terminal { border: 1px solid var(--ink-600); }


/* ---------- Lists and blocks ---------- */
.refusals li { transition: background-color .2s var(--ease); }
.refusals li:hover { background: var(--bone); }
.limits { border-left-width: 4px; }
.gates > div, .flow li { transition: background-color .2s var(--ease); }
.gates > div:hover, .flow li:hover { background: var(--bone); }

/* ---------- Closing band: two columns, texture, halo ---------- */
.band { padding-block: clamp(80px, 10vw, 128px); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-items: end; }
.band .wrap > * { grid-column: 1; }
.band .wrap > .actions { grid-column: 2; grid-row: 1 / span 3; justify-self: end; margin-top: 0; }
.band .btn--primary { min-height: 56px; padding: 16px 28px; }
@media (max-width: 860px) {
  .band .wrap { grid-template-columns: 1fr; }
  .band .wrap > .actions { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s5); }
}

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--s12); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink-600);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .15s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--kiln); }
.to-top svg { width: 18px; height: 18px; }
.nav-open .to-top { display: none; }

/* ---------- Forms ---------- */
.field input, .field textarea { transition: border-color .15s var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--clay-700); }

/* ---------- FAQ and doc pages ---------- */
.faq summary { transition: color .15s var(--ease); }
.faq summary:hover { color: var(--kiln); }
.doc-nav a, .doc-toc a { transition: color .15s var(--ease), border-color .15s var(--ease); }
.doc-toc a.is-active { color: var(--ink); border-left: 2px solid var(--clay); }

/* ---------- Scroll reveal (JS adds .reveal; reduced motion shows everything) ---------- */
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .2s var(--ease) var(--d, 0ms), transform .2s var(--ease) var(--d, 0ms); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js a.card.reveal.is-in:hover { transform: translateY(-4px); transition: transform .2s var(--ease), border-color .2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
  html.js .console-steps li, html.js .console-foot { opacity: 1; transform: none; animation: none; }
}
@media print { .to-top, .read-progress { display: none !important; } html.js .reveal { opacity: 1; transform: none; } }

/* Code: muted comment spans outside the terminal too */
pre.code .dim { color: var(--ink-300); }
.pillar-num { display: block; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-400); margin-bottom: var(--s2); }
.section--ink .pillar-num { color: var(--ink-300); }
.pillar-media .panel-bar + * { margin-top: 0; }
.panel-bar + .proof-object::before, .panel-bar + .proof-object::after { display: none; }

.stats + .pillars { border-top: 0; }

/* ---------- Editorial two-column sections ----------
   A section that is only a heading and a short body reads as a slide when
   stacked. On wide screens: heading left (sticky), body right. */
@media (min-width: 961px) {
  .section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child),
  .section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4) var(--s8); align-items: start;
  }
  .section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child) > .section-intro,
  .section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) > .section-intro {
    margin-bottom: 0; position: sticky; top: calc(var(--header-h-condensed) + 88px);
  }
  .section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) > :not(.section-intro) {
    grid-column: 2;
  }
  .section > .wrap:has(> .section-intro:first-child + .prose:last-child) > .prose { font-size: 1.0625rem; padding-top: var(--s1); }
  .section:has(> .wrap > .section-intro:first-child + .prose:last-child) { padding-block: clamp(64px, 7vw, 104px); }
}

/* ---------- Paper hero: "At a glance" panel ---------- */
@media (min-width: 961px) {
  .hero--paper .wrap:has(> .hero-aside) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--s8); align-items: end;
  }
  .hero--paper .wrap:has(> .hero-aside) > .crumbs { grid-column: 1 / -1; }
}
.hero-aside { background: var(--paper); border: 1px solid var(--ink-200); position: relative; z-index: 1; }
.hero-aside-head {
  padding: 14px var(--s3); border-bottom: 1px solid var(--ink-200);
  font-weight: 600; font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite);
}
.hero-aside dl { margin: 0; }
.hero-aside dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s2); padding: 14px var(--s3); border-bottom: 1px solid var(--ink-100); align-items: baseline; }
.hero-aside dl > div:last-child { border-bottom: 0; }
.hero-aside dt { font-size: var(--t-caption); color: var(--graphite); }
.hero-aside dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.hero-aside dd .claim { margin-left: 6px; vertical-align: 2px; }
.hero-aside dd code { font-size: 0.9375rem; }
@media (max-width: 960px) { .hero-aside { margin-top: var(--s5); } }

/* ==========================================================================
   In-page navigation: the sticky "On this page" bar, and the series pager.
   Active section marked in ink (doc 2 §3.3: clay is reserved for the accent).
   ========================================================================== */
html { scroll-padding-top: calc(var(--header-h-condensed) + 88px); }

.tabbar.is-enhanced { border-bottom: 1px solid var(--ink-200); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.tabbar.is-enhanced.is-stuck { background: rgba(251, 250, 247, .96); border-bottom-color: var(--ink-300); }
.tabbar.is-enhanced .tabbar-inner { display: flex; align-items: stretch; gap: var(--s4); min-height: 68px; }
.tabbar.is-enhanced .tabbar-inner::after { display: none; }

/* Page name */
.tabbar-title {
  flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding-right: var(--s3); border-right: 1px solid var(--ink-200); text-decoration: none; color: var(--ink);
}
.tabbar-title:hover { color: var(--ink); }
.tabbar-title-kicker { font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.tabbar-title-name { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar-title:hover .tabbar-title-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabbar.is-stuck .tabbar-title-kicker { color: var(--kiln); }

/* Tabs */
.tabbar.is-enhanced ul { flex: 1 1 auto; min-width: 0; gap: var(--s4); align-items: stretch; scroll-snap-type: x proximity; }
.tabbar.is-enhanced li { display: flex; scroll-snap-align: start; }
.tabbar.is-enhanced a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0; border-bottom: 0; color: var(--graphite); letter-spacing: .14em;
}
.tab-num { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--ink-400); transition: color .15s var(--ease); }
.tab-name { transition: color .15s var(--ease); }
.tab-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; overflow: hidden; transition: background-color .15s var(--ease); }
.tab-fill { position: absolute; inset: 0; background: var(--ink-300); transform-origin: left; transform: scaleX(0); }
.tabbar.is-enhanced a:hover { color: var(--ink); }
.tabbar.is-enhanced a:hover .tab-track { background: var(--ink-100); }
.tabbar.is-enhanced a:hover .tab-num { color: var(--ink); }
.tabbar.is-enhanced a.is-done .tab-num { color: var(--ink-500); }
.tabbar.is-enhanced a.is-active { color: var(--ink); }
.tabbar.is-enhanced a.is-active .tab-num { color: var(--kiln); }
.tabbar.is-enhanced a.is-active .tab-track { background: var(--ink-100); }
.tabbar.is-enhanced a.is-active .tab-fill { background: var(--ink); }
.tabbar.is-enhanced a:focus-visible { outline-offset: -2px; }

/* Counter */
.tabbar-count {
  flex: 0 0 auto; display: flex; align-items: center; padding-left: var(--s3); border-left: 1px solid var(--ink-200);
  font-family: var(--f-mono); font-size: 0.8125rem; color: var(--graphite); font-variant-numeric: tabular-nums;
}
.tabbar-count b { color: var(--ink); font-weight: 400; }

/* Phone toggle (hidden on wide screens) */
.tabbar-toggle { display: none; }

@media (max-width: 1100px) {
  .tabbar-title { flex-basis: 180px; }
}
@media (max-width: 860px) {
  .tabbar.is-enhanced .tabbar-inner { position: relative; min-height: 56px; }
  .tabbar-title, .tabbar-count { display: none; }
  .tabbar-toggle {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
    width: 100%; text-align: left; padding: 0; min-height: 56px; color: var(--ink);
  }
  .tabbar-toggle::after {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--ease); margin-right: 4px;
  }
  .tabbar.is-open .tabbar-toggle::after { transform: translateY(2px) rotate(-135deg); }
  .tabbar-toggle-kicker { font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
  .tabbar-toggle-cur { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar-toggle-num { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); }
  .tabbar.is-enhanced ul {
    display: none; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 100%;
    flex-direction: column; gap: 0; background: var(--paper); border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-300);
    max-height: 70vh; overflow-y: auto; padding: 4px 0;
  }
  .tabbar.is-open ul { display: flex; animation: mega-in .15s var(--ease); }
  .tabbar.is-enhanced li { display: block; }
  .tabbar.is-enhanced a { padding: 14px var(--gutter); min-height: 48px; }
  .tabbar.is-enhanced a.is-active { background: var(--bone); }
  .tab-track { left: var(--gutter); right: var(--gutter); }
}

/* No-JS fallback keeps the plain tab row styling from the base layer. */

/* ---------- Series pager: where this page sits, and what comes next ---------- */
.pager { border-top: 1px solid var(--ink-200); padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.pager-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.pager-head .label { color: var(--kiln); }
.pager-pos { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--graphite); }
.pager-map { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-top: 1px solid var(--ink-200); counter-reset: pm; }
.pager-map li { counter-increment: pm; min-width: 0; }
.pager-map a, .pager-map span.cur {
  display: block; position: relative; padding: 14px 16px 0 0; color: var(--graphite); text-decoration: none; font-size: 0.875rem; line-height: 1.35;
}
.pager-map a::before, .pager-map span.cur::before {
  content: counter(pm, decimal-leading-zero); display: block; font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-400); margin-bottom: 4px;
}
.pager-map a::after, .pager-map span.cur::after { content: ""; position: absolute; left: 0; right: 16px; top: -1px; height: 2px; background: transparent; transition: background-color .15s var(--ease); }
.pager-map a:hover { color: var(--ink); }
.pager-map a:hover::after { background: var(--ink-300); }
.pager-map span.cur { color: var(--ink); font-weight: 600; }
.pager-map span.cur::before { color: var(--kiln); }
.pager-map span.cur::after { background: var(--ink); }
.pager-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.pager-link {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--s4); border: 1px solid var(--ink-200);
  text-decoration: none; color: var(--ink); background: var(--paper); min-height: 132px; justify-content: space-between;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pager-link::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.pager-next { text-align: right; align-items: flex-end; }
.pager-next::before { transform-origin: right; }
.pager-link:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-3px); }
.pager-link:hover::before { transform: scaleX(1); }
.pager-dir { font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); display: inline-flex; gap: 8px; align-items: center; }
.pager-arrow { font-size: 1rem; letter-spacing: 0; transition: transform .2s var(--ease); display: inline-block; }
.pager-prev:hover .pager-arrow { transform: translateX(-4px); }
.pager-next:hover .pager-arrow { transform: translateX(4px); }
.pager-title { font-family: var(--f-display); font-weight: 600; font-size: var(--t-section); line-height: 1.2; letter-spacing: -0.01em; }
.pager-sub { font-size: var(--t-caption); color: var(--graphite); }
.pager-link.is-empty { visibility: hidden; }
@media (max-width: 860px) {
  .pager-map { display: none; }
  .pager-links { grid-template-columns: 1fr; }
  .pager-link.is-empty { display: none; }
  .pager-next { text-align: left; align-items: flex-start; }
}

/* ---------- Developer side rail ---------- */
.doc-nav .label { display: flex; justify-content: space-between; }
.doc-nav a { position: relative; }
.doc-nav a[aria-current="page"] { background: var(--bone); border-left-color: var(--ink); padding-left: 14px; }
.doc-nav a:hover { background: rgba(242, 237, 230, .6); }
.doc-toc a.is-active { font-weight: 600; }
.tabbar a.tabbar-title {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: 0 var(--s3) 0 0; border-bottom: 0; text-transform: none; letter-spacing: 0; white-space: normal; color: var(--ink); font-weight: 400;
}
.tabbar-count b { margin-right: 4px; }
a.card .card-link::after { content: "→"; margin-left: 6px; }
@media (max-width: 860px) { .tabbar a.tabbar-title { display: none; } }

/* ==========================================================================
   Boomi-pattern layout layer
   Structure and composition modelled on boomi.com (centred heroes and
   headings, floating proof bar, stacked feature cards, product tiles,
   contained CTA straddling the footer). Tokens, type, square corners,
   no shadows and the disc rules are unchanged.
   ========================================================================== */
:root { --wrap: 1200px; }

/* ---------- Header: always paper, as on boomi.com ---------- */
.site-header .nav-trigger { font-size: 0.875rem; }

/* ---------- Heroes: every hero is a dark full-width band ---------- */
.hero--paper { background: var(--ink); color: var(--paper); border-bottom: 0; padding-block: var(--s12) var(--s12); }
.hero--paper .label { color: var(--ember); }
.hero--paper .lead { color: var(--ink-100); }
.hero--paper .crumbs, .hero--paper .crumbs a { color: var(--ink-300); }
.hero--paper .crumbs a:hover { color: var(--paper); }
.hero--paper .hero-body a:not(.btn) { color: var(--ember); }
.hero--paper .btn--secondary { color: var(--paper); border-color: var(--paper); }
.hero--paper .btn--secondary:hover { background: var(--paper); color: var(--ink); }
.hero--paper .hero-body code { background: var(--slate); color: var(--paper); }
.hero--paper .hero-body .chip { border-color: var(--paper); color: var(--paper); }
.hero--paper .hero-body .claim { color: var(--ink-300); border-color: var(--ink-500); }
.hero--paper .hero-body .caption { color: var(--ink-300); }
.hero--paper :focus-visible { outline-color: var(--paper); }

/* The "At a glance" card plays the role of Boomi's hero image */
.hero-aside { color: var(--ink); }
.hero-aside a { color: var(--kiln); }

/* Heroes without an aside are centred */
.hero:not(.hero--home) .wrap:not(:has(> .hero-aside)) > .hero-body { margin-inline: auto; text-align: center; max-width: 880px; }
.hero:not(.hero--home) .wrap:not(:has(> .hero-aside)) > .hero-body .lead { margin-inline: auto; }
.hero:not(.hero--home) .wrap:not(:has(> .hero-aside)) > .hero-body .actions { justify-content: center; }
.hero:not(.hero--home) .wrap:not(:has(> .hero-aside)) > .crumbs { justify-content: center; }

/* ---------- Home hero: centred message, product visual beneath ---------- */
.header-ink .site-header:not(.is-past-hero) { background: rgba(251, 250, 247, .86); color: var(--ink); border-bottom-color: var(--ink-200); }
.hero--home { display: block; min-height: 0; padding-block: var(--s12) calc(var(--s16) + 72px); }
.hero-stack { text-align: center; }
.hero-stack .hero-body { max-width: 980px; margin-inline: auto; }
.hero-stack .hero-body .lead { margin-inline: auto; max-width: 62ch; }
.hero-stack .actions { justify-content: center; }
.hero-stack .hero-trust { justify-content: center; }
.hero-stack .hero-visual { max-width: 880px; margin: var(--s8) auto 0; text-align: left; position: relative; z-index: 2; }
.hero-stack .console-caption { text-align: center; }

/* ---------- Floating proof bar overlapping the hero (Boomi's logo bar) ---------- */
.proof-strip { background: transparent; color: var(--ink); overflow: visible; margin-top: -120px; position: relative; z-index: 3; }
.proof-strip > .wrap { max-width: calc(1120px + var(--gutter) * 2); }
.proof-strip > .wrap > * { background: var(--paper); border-inline: 1px solid var(--ink-200); }
.proof-strip > .wrap > .grid { border-top: 1px solid var(--ink-200); padding-inline: var(--s5); }
.proof-strip > .wrap > .standards { border-bottom: 1px solid var(--ink-200); border-top: 1px solid var(--ink-100); padding: var(--s3) var(--s5); justify-content: center; }
.proof-strip .proof-cell { border-color: var(--ink-200); }
.proof-strip .proof-sub { color: var(--kiln); }
.proof-strip .proof-sub--text { color: var(--ink); }
.proof-strip .proof-cell p.caption { color: var(--graphite); }
.proof-strip .claim { color: var(--graphite); border-color: var(--ink-300); }
.proof-strip .standards-label { color: var(--graphite); }
.proof-strip .standards li { color: var(--ink); background: var(--bone); border-color: var(--ink-200); }
.proof-strip .standards li:hover { border-color: var(--ink); }
@media (max-width: 960px) {
  .proof-strip { margin-top: -64px; }
  .proof-strip > .wrap > .grid { padding-inline: var(--s3); }
  .proof-strip > .wrap > .standards { padding-inline: var(--s3); justify-content: flex-start; }
}

/* ---------- Centred section headings (every boomi.com section) ---------- */
.section-intro { text-align: center; margin-inline: auto; max-width: 800px; }
.section-intro .lead { margin-inline: auto; }
.section-intro--split { display: block; max-width: 800px; }
.section-intro--split > .lead { margin: var(--s2) auto 0; }
.section > .wrap > p:has(> .link-arrow), .section > .wrap > p.mt-4, .section > .wrap > p.mt-6 { text-align: center; }
.section > .wrap > :is(.prose, .faq, .numbered, .wrong, .pull, .note, .deflist, .split-list, .steps, .downloads, .form) { margin-inline: auto; }
.section > .wrap > :is(.prose, .faq, .wrong, .note, .deflist) { max-width: 880px; }
.section > .wrap > .numbered { max-width: 1000px; }
.section > .wrap > .pull { max-width: 30ch; }
.section > .wrap > .limits { max-width: 1120px; margin-inline: auto; }

/* ---------- Stacked feature cards (Boomi's "Connect. Govern. Control." rows) ----------
   A section that is only a heading + body becomes a card: heading left, body right,
   stacked on a bone ground. */
@media (min-width: 961px) {
  .section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child),
  .section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) {
    max-width: 1120px; background: var(--paper); border: 1px solid var(--ink-200);
    padding: clamp(40px, 4vw, 64px); gap: var(--s3) var(--s8);
  }
}
.section:has(> .wrap > .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child),
.section:has(> .wrap > .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) {
  background: var(--bone); border-top: 0; padding-block: var(--s3);
}
.tabbar + .section:has(> .wrap > .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child),
.tabbar + .section:has(> .wrap > .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) { padding-top: var(--s10); }
.section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child) > .section-intro,
.section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) > .section-intro {
  text-align: left; margin: 0; max-width: none; position: static;
}
.section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child) > .section-intro .lead,
.section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) > .section-intro .lead { margin-inline: 0; }
.section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child) > :not(.section-intro) { margin-inline: 0; max-width: none; }
.section:has(> .wrap > .section-intro:first-child + :is(.prose, .limits):last-child) .limits { background: var(--bone); }
@media (max-width: 960px) {
  .section > .wrap:has(> .section-intro:first-child + :is(.prose, .faq, .numbered, .deflist, .limits, .split-list):last-child),
  .section > .wrap:has(> .section-intro:first-child + .prose + :is(.prose, .note, .limits, .wrong, .cards):last-child) {
    width: calc(100% - var(--gutter) * 2); background: var(--paper); border: 1px solid var(--ink-200); padding: var(--s4) var(--s3);
  }
}

/* ---------- Home: Govern · Seal · Verify as stacked cards with dark screens ---------- */
.pillars--cards { border-top: 0; display: grid; gap: var(--s3); }
.pillars--cards .pillar, .pillars--cards .pillar:nth-child(even) {
  background: var(--paper); border: 1px solid var(--ink-200); padding: clamp(32px, 4vw, 56px); align-items: center;
}
.pillars--cards .pillar-text, .pillars--cards .pillar:nth-child(even) .pillar-text { grid-column: 1 / span 5; grid-row: 1; }
.pillars--cards .pillar-media, .pillars--cards .pillar:nth-child(even) .pillar-media { grid-column: 7 / span 6; grid-row: 1; background: var(--ink); padding: var(--s3); }
.pillars--cards .pillar-text .label { color: var(--kiln); }
.pillars--cards .pillar-text p { color: var(--ink); }
.pillars--cards .pillar-num { color: var(--graphite); }
.pillars--cards .pillar--lead .pillar-text .h-section { font-size: var(--t-section); letter-spacing: -0.01em; line-height: 1.2; }
.pillars--cards .pillar-media .panel-bar { margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3); border: 0; border-bottom: 1px solid var(--ink-600); }
.pillars--cards .pillar-media .rungs { background: var(--slate); border-color: var(--ink-600); color: var(--paper); }
.pillars--cards .pillar-media .rungs li { border-bottom-color: var(--ink-600); }
.pillars--cards .pillar-media .rungs .n, .pillars--cards .pillar-media .rungs .t { color: var(--ink-300); }
.pillars--cards .pillar-media .rungs .is-act { background: var(--paper); color: var(--ink); }
.pillars--cards .pillar-media .rungs .is-act .n, .pillars--cards .pillar-media .rungs .is-act .t { color: var(--graphite); }
.pillars--cards .pillar-media .rungs .is-decide .nm::after { color: var(--ember); }
.pillars--cards .pillar-media .caption { color: var(--ink-300); }
.pillars--cards .pillar-media .claim { color: var(--ink-300); border-color: var(--ink-500); }
.pillars--cards .pillar-media .proof-object { background: var(--slate); border-color: var(--ink-600); color: var(--paper); }
.pillars--cards .pillar-media .table { color: var(--paper); }
.pillars--cards .pillar-media .table td { border-bottom-color: var(--ink-600); }
.pillars--cards .pillar-media .table tbody tr:hover { background: rgba(251, 250, 247, .04); }
.pillars--cards .pillar-media .mono.caption { color: var(--clay-100); }
.pillars--cards .pillar-media pre.code { border: 0; }
@media (max-width: 960px) {
  .pillars--cards .pillar, .pillars--cards .pillar:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .pillars--cards .pillar-text, .pillars--cards .pillar-media, .pillars--cards .pillar:nth-child(even) .pillar-text, .pillars--cards .pillar:nth-child(even) .pillar-media { grid-column: 1; grid-row: auto; }
}

/* ---------- Architecture inside a dark card ---------- */
.arch-card { background: var(--ink); padding: clamp(24px, 4vw, 56px); color: var(--paper); }
.arch-card .stratum { border-color: var(--ink-700); }
.arch-card .stratum:hover { border-color: var(--paper); }
.arch-card .plane-e { background: var(--slate); }

/* ---------- Product tiles on cards (Boomi's image-top platform cards) ---------- */
.card-media {
  display: grid; place-items: center; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s1);
  height: 168px; background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em;
  transition: background-color .2s var(--ease);
}
a.card:hover .card-media { background: var(--slate); }

/* ---------- Card call to action: full-width outlined button ---------- */
.card .card-foot { flex-direction: column; align-items: stretch; gap: var(--s2); }
.card .card-foot > .chip { align-self: flex-start; }
.card .card-link {
  display: block; text-align: center; padding: 11px 16px; border: 1px solid var(--ink); color: var(--ink);
  font-weight: 600; font-size: 0.9375rem; transition: background-color .15s var(--ease), color .15s var(--ease);
}
a.card:hover .card-link { background: var(--ink); color: var(--paper); }
.section--ink .card .card-link { border-color: var(--paper); color: var(--paper); }
.section--ink a.card:hover .card-link { background: var(--paper); color: var(--ink); }
.card-media + .card-title, .card-num + .card-title { margin-top: 4px; }

/* ---------- "What we will not build" as Boomi's Difference band ---------- */
.section--ink .refusals { border: 0; gap: var(--s2); }
.section--ink .refusals li { background: var(--paper); color: var(--ink); border: 0; }
.section--ink .refusals li:hover { background: var(--bone); }
.section--ink .section-intro .title { color: var(--paper); }
.section--ink > .wrap > p a.link-arrow { color: var(--ember); }

/* ---------- Tab bar: centred, sentence case ---------- */
.tabbar.is-enhanced ul { justify-content: center; }
.tabbar.is-enhanced a { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 400; }
.tabbar.is-enhanced a.is-active { font-weight: 600; }
@media (max-width: 1100px) { .tabbar.is-enhanced ul { justify-content: flex-start; } }

/* ---------- Closing call to action: contained panel straddling the footer ---------- */
.band { background: transparent; padding: var(--s8) 0 0; margin-bottom: -136px; z-index: 2; overflow: visible; }
.band .wrap {
  display: block; max-width: calc(1120px + var(--gutter) * 2); padding: 0; background: transparent;
}
.band .wrap > * { grid-column: auto; }
.band .wrap {
  --pad: clamp(40px, 5vw, 72px);
}
.band .wrap::before { content: none; }
.band .wrap { position: relative; }
.band .wrap > .band-rule, .band .wrap > .title, .band .wrap > .lead, .band .wrap > .actions { position: relative; z-index: 1; }
.band .wrap {
  background: var(--slate); padding: var(--pad) var(--pad); text-align: center; width: calc(100% - var(--gutter) * 2);
}
.band .band-rule { margin: 0 auto var(--s4); }
.band .title { margin-inline: auto; max-width: 22ch; }
.band p.lead { margin-inline: auto; }
.band .wrap > .actions { justify-content: center; margin-top: var(--s5); justify-self: auto; }
.site-footer { padding-top: calc(136px + var(--s10)); }
main:not(:has(.band)) + .site-footer { padding-top: var(--s12); }

/* Boomi layer: refinements */
.arch-card .stratum { color: var(--ink); }
.proof-sub--text { word-break: normal; }
.section--rule { border-top: 0; }
.section > .wrap > p.caption { margin-inline: auto; text-align: center; }
.section > .wrap > h3.h-sub { text-align: center; }
.tabbar a.tabbar-title { max-width: 240px; overflow: hidden; }
.tabbar-title-name, .tabbar-title-kicker { max-width: 100%; }
.tabbar-title-name { display: block; }
/* Centred heroes: the disc frames the corner instead of sitting behind the text */
.hero:not(.hero--home) .wrap:not(:has(> .hero-aside)) ~ .disc--page,
.hero:not(.hero--home):not(:has(.hero-aside)) > .disc--page { width: min(34vw, 460px); right: calc(min(34vw, 460px) * -0.45); bottom: calc(min(34vw, 460px) * -0.45); }
.hero:not(.hero--home):not(:has(.hero-aside)) > .disc--page-top { width: min(30vw, 400px); right: calc(min(30vw, 400px) * -0.4); top: calc(min(30vw, 400px) * -0.4); }
@media (max-width: 760px) {
  .hero:not(.hero--home):not(:has(.hero-aside)) > .disc--page { width: 60vw; right: -30vw; bottom: -30vw; opacity: .9; }
  .hero:not(.hero--home):not(:has(.hero-aside)) > .disc--page-top { width: 50vw; right: -22vw; top: -22vw; }
}
@media (max-width: 640px) {
  .pillars--cards .pillar, .pillars--cards .pillar:nth-child(even) { padding: var(--s3) var(--s2); }
  .pillars--cards .pillar-media { padding: var(--s2); overflow-x: auto; }
  .pillars--cards .pillar-media .panel-bar { margin: calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s2); }
  .pillars--cards .pillar-media .proof-object { padding: var(--s2); }
  .pillars--cards .pillar-media .table--compact th, .pillars--cards .pillar-media .table--compact td { padding: 8px 6px; }
}

/* ==========================================================================
   Animated diagrams — "product video" moments built from the brand system.
   Every change is opacity or position, 200 ms. Nothing loops.
   ========================================================================== */

/* Step states (only once JS has prepared the element) */
.anim-ready [data-step] { transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.anim-ready [data-step]:not(.on) { opacity: .18; transform: translateY(8px); }

/* Frame */
.viz { background: var(--ink); color: var(--paper); border: 1px solid var(--ink-700); margin: 0; position: relative; }
.viz-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: 12px 20px; border-bottom: 1px solid var(--ink-700);
  font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300);
}
.viz-replay {
  font-family: var(--f-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); padding: 4px 0; opacity: 0; transition: opacity .2s var(--ease);
}
.viz-replay::before { content: "↺ "; letter-spacing: 0; }
.is-done .viz-replay, .viz-replay:focus-visible { opacity: 1; }
.viz-replay:hover { color: var(--clay-100); }
.viz-body { padding: clamp(20px, 3vw, 40px); }
.viz figcaption { padding: 12px 20px; border-top: 1px solid var(--ink-700); color: var(--ink-300); font-size: 0.8125rem; }
.section-intro + .viz, .viz + .table-wrap, .viz + .prose { margin-top: var(--s5); }
.section > .wrap > .viz { max-width: 1120px; margin-inline: auto; }
.section > .wrap > .prose + .viz { margin-top: var(--s5); }

/* ---------- Rung pipeline ---------- */
.pipe-track { position: relative; height: 18px; margin-bottom: 14px; }
.pipe-track::before { content: ""; position: absolute; left: 5%; right: 5%; top: 8px; height: 2px; background: var(--ink-700); }
.pipe-token {
  position: absolute; top: 2px; width: 14px; height: 14px; margin-left: -7px; background: var(--paper);
  left: calc(min(max(var(--at, -1), 0), 9) * 10% + 5%);
  opacity: 0; transition: left .2s var(--ease), opacity .2s var(--ease);
}
.viz-pipeline.is-playing .pipe-token, .viz-pipeline.is-done .pipe-token { opacity: 1; }
.pipe { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pipe li { background: var(--slate); border: 1px solid var(--ink-600); padding: 12px 10px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.pipe .pn { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-300); }
.pipe .pm { font-weight: 600; font-size: 0.875rem; line-height: 1.25; }
.pipe .pd { font-size: 0.75rem; color: var(--ember); line-height: 1.3; }
.pipe li.now { border-color: var(--paper); }
.pipe li.is-act.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pipe li.is-act.on .pn, .pipe li.is-act.on .pd { color: var(--graphite); }
.pipe-out { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--ink-700); color: var(--ink-100); }
.pipe-out b { color: var(--paper); }
@media (max-width: 960px) {
  .pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pipe-track { display: none; }
}
@media (max-width: 560px) { .pipe { grid-template-columns: 1fr 1fr; } .pipe li { min-height: 0; } }

/* ---------- Seal chain ---------- */
.chain { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); align-items: stretch; }
.seal-box { background: var(--slate); border: 1px solid var(--ink-600); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-seq { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-300); }
.sb-kind { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.sb-line { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-200); overflow-wrap: anywhere; }
.seal-box.is-refusal { border-color: var(--ember); }
.seal-box.is-refusal .sb-kind { color: var(--ember); }
.chain-link { align-self: center; height: 2px; background: var(--paper); }
.anim-ready .chain-link:not(.on) { transform: scaleX(0); transform-origin: left; opacity: 1; }
.anim-ready .chain-link { transform-origin: left; }
.anchor-row { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 14px 16px; border: 1px dashed var(--ink-400); }
.ar-k { font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.ar-v { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-100); }
/* stacked chain: narrow columns and phones */
.viz-chain--stack .chain, .viz-chain--stack .chain { grid-template-columns: minmax(0, 1fr); }
.viz-chain--stack .chain-link { width: 2px; height: 18px; justify-self: start; margin-left: 24px; align-self: auto; }
.anim-ready.viz-chain--stack .chain-link:not(.on) { transform: scaleY(0); transform-origin: top; }
.viz-chain--stack .seal-box { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 14px; }
@media (max-width: 900px) {
  .viz-chain .chain { grid-template-columns: minmax(0, 1fr); }
  .viz-chain .chain-link { width: 2px; height: 18px; justify-self: start; margin-left: 24px; align-self: auto; }
  .anim-ready.viz-chain .chain-link:not(.on) { transform: scaleY(0); transform-origin: top; }
}

/* ---------- Autonomy ladder ---------- */
.ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; min-height: 320px; }
.ladder li {
  height: calc(var(--h, 7) * 36px + 72px); background: var(--slate); border: 1px solid var(--ink-600);
  padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.ladder .lv { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ember); }
.ladder .ln { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.ladder .ld { font-size: 0.75rem; color: var(--ink-200); line-height: 1.3; }
.ladder li:nth-child(-n+3) { border-top: 2px solid var(--paper); }
.ladder .ladder-cap { --h: 7; background: transparent; border: 1px dashed var(--ink-500); }
.ladder .ladder-cap .lv, .ladder .ladder-cap .ln { color: var(--ink-400); }
@media (max-width: 860px) {
  .ladder { grid-template-columns: 1fr; min-height: 0; align-items: stretch; }
  .ladder li { height: auto; width: calc(40% + var(--h, 7) * 8.5%); max-width: 100%; }
}

/* ---------- Product seam ---------- */
.seam-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.seam-p { background: var(--slate); border: 1px solid var(--ink-600); padding: 18px 12px; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; }
.seam-wires { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); height: 40px; }
.seam-wires span { justify-self: center; width: 2px; height: 100%; background: var(--paper); transform-origin: top; }
.anim-ready .seam-wires span:not(.on) { transform: scaleY(0); opacity: 1; }
.seam-port { border: 1px solid var(--paper); padding: var(--s3); }
.seam-name { display: block; text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); margin-bottom: var(--s2); }
.seam-calls { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.seam-calls li { font-family: var(--f-mono); font-size: 0.9375rem; text-align: center; padding: 14px 6px; border: 1px solid var(--ink-600); background: var(--slate); }
.seam-calls li.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 760px) {
  .seam-products, .seam-wires { grid-template-columns: 1fr 1fr; }
  .seam-wires { height: 24px; }
  .seam-calls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Terminals: line by line ---------- */
.terminal .tl, pre.code .tl { display: inline; }
.anim-ready .tl:not(.on) { opacity: 0; transform: none; }
.terminal .t-head { display: flex; align-items: center; gap: 16px; }
.terminal .t-head .viz-replay { margin-left: 16px; }

/* ---------- Sequences that already exist ---------- */
.anim-ready.rungs li.now { background: var(--paper); color: var(--ink); }
.anim-ready.rungs li.now .n, .anim-ready.rungs li.now .t { color: var(--graphite); }
.anim-ready.flow li.now { background: var(--bone); }
.section--ink .anim-ready.flow li.now, .viz .anim-ready.flow li.now { background: var(--slate); }
.anim-ready.strata .stratum:not(.on) { transform: translateY(10px); }
.anim-ready.strata .plane-e:not(.on) { transform: translateX(16px); }

/* Home pillar media holding a diagram: the diagram is the frame */
.pillars--cards .pillar-media:has(> .viz) { background: none; padding: 0; }
.viz-replay::before { content: "↺"; margin-right: 6px; }
.pillars--cards .pillar .pillar-media:has(> .viz) { background: none; padding: 0; }

/* ==========================================================================
   Product surfaces — illustrative product screens.
   Functional colours are allowed here only (BR: "product screenshots,
   status page and data only, always with a label"). Status markers are
   square, so no second circle appears beside the page's disc.
   ========================================================================== */
:root {
  --verdigris: #2E7D6B; --amber: #C99A2E; --crimson: #9B2C3B; --cobalt: #2F6FB3;
}
.surface { background: var(--paper); color: var(--ink); border: 1px solid var(--ink-200); font-size: 0.875rem; line-height: 1.45; margin: 0; }
.surface-bar { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--ink-200); padding: 10px 16px; font-size: 0.75rem; }
.surface-app { font-weight: 600; color: var(--paper); letter-spacing: .02em; }
.surface-path { font-family: var(--f-mono); color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.surface-tag { margin-left: auto; border: 1px solid var(--ink-500); padding: 2px 6px; font-size: 0.625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); white-space: nowrap; }
.surface-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 320px; }
.surface-side { background: var(--bone); border-right: 1px solid var(--ink-200); padding: 14px 0; }
.surface-side p { padding: 0 16px 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.surface-side ul { list-style: none; margin: 0; padding: 0; }
.surface-side li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; color: var(--graphite); }
.surface-side li.is-cur { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }
.surface-side .ct { font-family: var(--f-mono); font-size: 0.75rem; }
.surface-main { padding: 20px 24px; min-width: 0; }
.surface-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink-200); margin-bottom: 14px; }
.surface-title { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; }
.surface-sub { display: block; font-size: 0.8125rem; color: var(--graphite); margin-top: 2px; font-family: var(--f-body); font-weight: 400; }
.surface-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.surface-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ink-100); }
.surface-kv dt { color: var(--graphite); }
.surface-kv dd { margin: 0; font-weight: 600; }
.surface-kv .mono, .surface .mono { font-family: var(--f-mono); font-weight: 400; font-size: 0.8125rem; }
.surface-kv .ph { color: var(--ink-400); font-weight: 400; font-family: var(--f-mono); font-size: 0.8125rem; }
.surface-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-200); }
.surface-note { font-size: 0.75rem; color: var(--graphite); flex: 1 1 220px; }
.s-btn { font-family: var(--f-body); font-weight: 600; font-size: 0.8125rem; padding: 8px 14px; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); white-space: nowrap; }
.s-btn--primary { background: var(--ink); color: var(--paper); }
.surface-list { list-style: none; margin: 0; padding: 0; }
.surface-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ink-100); }
.surface-list .rn { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); }

/* Status chips: always a word, plus a square marker */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.st--ok { color: var(--verdigris); }
.st--bad { color: var(--crimson); }
.st--info { color: var(--cobalt); }
.st--warn { color: var(--ink); border-color: var(--amber); background: rgba(201, 154, 46, .12); }
.st--warn::before { background: var(--amber); }

/* Data table inside a surface */
.surface-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.surface-table th { text-align: left; font-weight: 600; color: var(--graphite); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--ink-200); white-space: nowrap; }
.surface-table td { padding: 9px 8px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.surface-table .num { text-align: right; font-family: var(--f-mono); }
.surface-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.surface-filter span { font-family: var(--f-mono); font-size: 0.75rem; padding: 4px 8px; background: var(--bone); border: 1px solid var(--ink-200); }

/* Studio: declaration editor */
.surface-code { background: var(--ink); color: var(--ink-100); font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.75; padding: 14px 16px; margin: 0; overflow-x: auto; white-space: pre; }
.surface-code .k { color: var(--ember); }
.surface-code .c { color: var(--ink-400); }
.surface-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.surface-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.surface-checks li { border: 1px solid var(--ink-200); padding: 10px 12px; display: grid; gap: 6px; }
.surface-checks b { font-size: 0.8125rem; }
.surface-checks span:not(.st) { font-size: 0.75rem; color: var(--graphite); }

.surface-caption { margin-top: 12px; font-size: var(--t-caption); color: var(--graphite); text-align: center; }
.section > .wrap > .surface, .section > .wrap > figure.surface-figure { max-width: 1120px; margin: var(--s5) auto 0; }

@media (max-width: 760px) {
  .surface-body { grid-template-columns: 1fr; }
  .surface-side { display: none; }
  .surface-kv { grid-template-columns: 1fr; }
  .surface-split { grid-template-columns: 1fr; }
  .surface-main { padding: 16px; }
  .surface-table .hide-sm { display: none; }
}

/* ---------- Home: product showcase with tabs (Boomi "How it all works together") ---------- */
.showcase-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink-200); margin-bottom: var(--s5); }
.showcase-tabs button {
  padding: 14px 20px; font-size: 0.9375rem; color: var(--graphite); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; gap: 10px; align-items: baseline; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.showcase-tabs button .n { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-400); }
.showcase-tabs button:hover { color: var(--ink); }
.showcase-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.showcase-tabs button[aria-selected="true"] .n { color: var(--kiln); }
.showcase-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: center; }
.showcase-panel[hidden] { display: none; }
.showcase-copy > * + * { margin-top: var(--s2); }
.showcase-copy .label { color: var(--kiln); }
.js .showcase-panel:not([hidden]) { animation: step-in .2s var(--ease); }
@media (max-width: 960px) { .showcase-panel { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .showcase-tabs button { padding: 12px 10px; font-size: 0.875rem; } }
.surface-slot { max-width: 1120px; margin: var(--s6) auto 0; grid-column: 1 / -1; }
.surface-side li.is-cur { box-shadow: none; border-left: 2px solid var(--ink); padding-left: 14px; }
.showcase-panel > *, .surface-slot, .surface, .surface-main, .surface-split > * { min-width: 0; }
@media (max-width: 960px) { .showcase-panel { grid-template-columns: minmax(0, 1fr); } }
.surface { overflow: hidden; }
.surface-table { table-layout: auto; }
@media (max-width: 480px) { .surface-table th, .surface-table td { padding-inline: 5px; } .surface-bar .surface-path { display: none; } }

/* ==========================================================================
   Photography (Unsplash License; credits in assets/img/photos/credits.json).
   Scene-setting only: never presented as elan1 customers, staff or partners.
   ========================================================================== */

/* Hero photographs sit under an ink overlay so type stays legible */
.hero.has-photo { background: var(--ink); isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 19, 32, .95) 0%, rgba(10, 19, 32, .86) 45%, rgba(10, 19, 32, .62) 100%); }
.hero.has-photo:not(:has(.hero-aside)) .hero-photo::after { background: linear-gradient(180deg, rgba(10, 19, 32, .78), rgba(10, 19, 32, .9)); }
.hero--home.has-photo .hero-photo img { opacity: .55; }
.hero--home.has-photo .hero-photo::after { background: linear-gradient(180deg, rgba(10, 19, 32, .82), rgba(10, 19, 32, .94) 70%); }
.hero.has-photo > .wrap { position: relative; z-index: 1; }

/* Photo tops on cards */
.card--photo .card-photo { display: block; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s1); height: 188px; overflow: hidden; background: var(--ink); }
.card--photo .card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
a.card--photo:hover .card-photo img { transform: scale(1.03); }
.lib-card.card--photo .card-photo { height: 150px; }

/* Family tiles: photograph with the product name set in type */
.card-media--photo { position: relative; overflow: hidden; padding: 0; }
.card-media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .2s var(--ease); }
.card-media--photo::after { content: ""; position: absolute; inset: 0; background: rgba(10, 19, 32, .58); }
.card-media--photo .card-media-name { position: relative; z-index: 1; }
a.card:hover .card-media--photo img { transform: scale(1.03); }
a.card:hover .card-media--photo { background: var(--ink); }

/* Full-width photo band */
.photo-band { position: relative; min-height: clamp(360px, 42vw, 560px); display: flex; align-items: center; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate; }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 19, 32, .92) 0%, rgba(10, 19, 32, .7) 50%, rgba(10, 19, 32, .25) 100%); }
.photo-quote { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; }
.photo-band .link-arrow { color: var(--ember); margin-top: var(--s4); display: inline-flex; }
@media (max-width: 640px) { .photo-band::after { background: rgba(10, 19, 32, .78); } }

/* ==========================================================================
   Mobile audit fixes: finger-sized targets (≥ 44 px) and a 12 px text floor
   ========================================================================== */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .footer-cols ul { gap: 0; }
  .footer-cols a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-legal { gap: 0 var(--s3); }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .viz-replay { min-height: 44px; padding: 10px 0; opacity: 1; }
  .terminal .t-head .viz-replay { min-height: 36px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .chip, .claim, .phase, .st, .surface-tag, .console-tag, .cs-state, .tabbar-toggle-kicker,
  .ar-k, .viz-replay, .surface-table th, .table thead th, .hero-aside-head, .standards-label,
  .tabbar-title-kicker, .pager-dir, .label { font-size: 0.75rem; }
  .table th, .table td { font-size: 0.875rem; }
  .surface { font-size: 0.875rem; }
}

/* Phones: each table row becomes a card; column names sit beside the values */
@media (max-width: 640px) {
  .table-wrap:has(.table--stack) { overflow: visible; border: 0; background: transparent; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody { display: block; }
  .table--stack tr { display: block; background: var(--paper); border: 1px solid var(--ink-200); padding: 6px 16px; margin-bottom: 12px; }
  .table--stack tr:hover { background: var(--paper); }
  .table--stack th, .table--stack td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-100); text-align: left; white-space: normal; }
  .table--stack tr > :last-child { border-bottom: 0; }
  .table--stack [data-label]::before { content: attr(data-label); font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); font-family: var(--f-body); }
  .table--stack th[scope="row"] { font-size: 1rem; }
  .table--stack td.num { text-align: left; }
  .table--stack caption { display: block; padding: 0 0 8px; border: 0; }
  .table--compare.table--stack .is-us { background: var(--bone); margin: 0 -16px; padding-inline: 16px; }
  .section--ink .table--stack tr, .pillar-media .table--stack tr { background: var(--slate); border-color: var(--ink-600); }
  /* Terminals wrap instead of hiding text past the edge */
  .terminal, pre.code { white-space: pre-wrap; word-break: break-word; }
  /* Seam diagram: connectors only make sense in the four-across layout */
  .seam-wires { display: none; }
  .seam-products { margin-bottom: var(--s2); }
}
@media (max-width: 640px) { .table--stack [data-nocase]::before { text-transform: none; letter-spacing: .02em; } }
@media (max-width: 860px) { .tabbar-toggle { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .doc-nav a, .doc-nav li.soon span, .doc-toc a { min-height: 44px; display: flex; align-items: center; padding-block: 8px; }
  .link-arrow { min-height: 44px; align-items: center; }
  .note a, .caption a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) { .plane-e .label, .panel-bar, .doc-nav .label, .doc-toc .label { font-size: 0.75rem; } }

/* Stacked tables: the value is one grid item even when it holds several parts */
.table .cell { display: inline; }
@media (max-width: 640px) { .table--stack .cell { display: block; min-width: 0; } }

/* Developer side menu: collapsed on phones, full list on wider screens */
.doc-nav-toggle { display: none; }
@media (max-width: 760px) {
  .doc-nav.is-collapsible > .label { display: none; }
  .doc-nav-toggle {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--ink-200); background: var(--paper); text-align: left; color: var(--ink);
  }
  .doc-nav-toggle::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .doc-nav.is-open .doc-nav-toggle::after { transform: translateY(2px) rotate(-135deg); }
  .doc-nav-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
  .doc-nav-cur { font-family: var(--f-display); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .doc-nav.is-collapsible ul { display: none; margin-top: 8px; }
  .doc-nav.is-collapsible.is-open ul { display: grid; }
  .doc-nav { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 640px) { .table--stack .claim, .table--stack .chip, .table--stack .st { white-space: normal; max-width: 100%; } }

/* Contrast audit fixes: every text pair at WCAG AA (4.5:1) */
.surface-kv .ph { color: var(--graphite); }                       /* placeholders: 7.3:1 */
.tab-num { color: var(--ink-500); }                               /* inactive section numbers */
.showcase-tabs button .n { color: var(--ink-500); }               /* home product tab numbers on bone */
.doc-nav li.soon span { color: var(--ink-500); }                  /* "P1" items: muted, still readable */
.phase { color: var(--graphite); }
.primary-nav .phase, .site-footer .phase { color: var(--ink-300); } /* on ink */

/* Short landscape phones: the on-page bar scrolls away so content keeps most of the screen */
@media (max-height: 500px) and (orientation: landscape) { .tabbar { position: relative; top: auto; } }
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) { .surface-side p { font-size: 0.75rem; } }