/* Angels comparison site. All visual design derives from design/BRAND.md.
   No third-party origin is referenced. Fonts are self-hosted woff2 under /assets/fonts/.
   No em dashes anywhere in this file, by hard rule. */

/* ----------------------------------------------------------------------------
   1. Self-hosted fonts (font-display: swap, system fallbacks per BRAND.md)
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Libre Caslon Display";
  src: url("../assets/fonts/libre-caslon-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../assets/fonts/libre-caslon-text-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../assets/fonts/libre-caslon-text-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------------------
   2. Tokens (dropped in from BRAND.md verbatim)
   ---------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --keep: #0C2026;
  --keep-panel: #112A30;
  --parchment: #E8ECE6;
  --card: #F4F6F2;
  --line: #CBD3CB;

  /* Ink */
  --ink: #13262B;
  --ink-muted: #4F5E5C;
  --paper-text: #EAEDE7;   /* text on --keep */
  --paper-muted: #AEB9B5;  /* secondary text on --keep */

  /* Accents */
  --guardian: #1F7A64;        /* fills, focus ring */
  --guardian-ink: #14503F;    /* verdigris as text or link on light */
  --guardian-bright: #3FA384; /* verdigris on --keep */
  --brass: #BE9B57;           /* seal and frame, dark-field only */
  --brass-ink: #7A5418;       /* readable brass-family ink on light */
  --wax: #9E3B2E;             /* fail-closed and tamper state */
  --wax-bright: #C8624F;      /* wax on --keep */

  /* Honest status tags (carry the REAL / IN PROGRESS / DESIGNED convention) */
  --tag-real: #14503F;
  --tag-progress: #7A5418;
  --tag-designed: #3C4A82;
  --tag-real-on-dark: #3FA384;
  --tag-progress-on-dark: #BE9B57;
  --tag-designed-on-dark: #8FA0D8;

  /* Links and focus */
  --link: #14503F;
  --link-hover: #0C2026;
  --focus: #1F7A64;

  /* Type */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --ls-eyebrow: 0.18em;
  --ls-display: -0.01em;

  /* Spacing and layout */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --maxw: 1080px;
  --maxw-text: 68ch;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-seal: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 0 rgba(19,38,43,.04), 0 6px 20px rgba(19,38,43,.06);
  --shadow-md: 0 2px 0 rgba(19,38,43,.05), 0 14px 40px rgba(19,38,43,.08);
}

/* ----------------------------------------------------------------------------
   3. Reset and base
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 700; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Visible focus, never removed. Verdigris ring, 3:1 against both fields. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* For elements that carry their own radius, the ring follows it via offset. */

/* ----------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Section rhythm. Set padding once here so light/dark modifiers never fight it. */
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--light { background: var(--parchment); color: var(--ink); }
.section--dark  { background: var(--keep); color: var(--paper-text); }

/* The charter frame: a double brass hairline inset on every dark surface,
   so the whole dark field reads as a sealed document. Decorative only. */
.section--dark { isolation: isolate; }
.section--dark > .wrap,
.section--dark > .guilloche { position: relative; z-index: 1; }
.section--dark::before {
  content: "";
  position: absolute;
  inset: var(--space-1);
  border: 1px solid rgba(190, 155, 87, 0.55);
  border-radius: var(--r-sm);
  pointer-events: none;
  z-index: 0;
}
.section--dark::after {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px solid rgba(190, 155, 87, 0.28);
  border-radius: var(--r-xs);
  pointer-events: none;
  z-index: 0;
}

.lede {
  font-size: var(--text-md);
  max-width: var(--maxw-text);
  color: var(--ink);
}
.lede--dark { color: var(--paper-text); }

.trust {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: var(--maxw-text);
}
.trust--dark { color: var(--paper-muted); }

/* Eyebrow: uppercase mono with the section seal-marker beside it. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-ink);
}
.eyebrow--dark { color: var(--brass); }
.eyebrow .seal-marker { width: 32px; height: 32px; flex: none; }

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-width: 22ch;
  overflow-wrap: break-word;
  hyphens: auto;
}
.section__title--dark { color: var(--paper-text); }

.section__intro { margin-top: var(--space-4); }

/* ----------------------------------------------------------------------------
   5. Buttons (live on the dark keep field)
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary {
  background: var(--guardian);
  color: #ffffff;
  border-color: var(--guardian);
}
.btn--primary:hover { background: var(--guardian-ink); border-color: var(--guardian-ink); color: #ffffff; }
.btn--ghost {
  background: transparent;
  color: var(--paper-text);
  border-color: var(--brass);
}
.btn--ghost:hover { background: rgba(190, 155, 87, 0.14); color: var(--paper-text); }

/* ----------------------------------------------------------------------------
   6. Status chips (one reusable component, linkable to #honesty)
   ---------------------------------------------------------------------------- */
.chip {
  display: inline-block;
  vertical-align: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.1em 0.5em;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  text-decoration: none;
}
a.chip:hover { text-decoration: underline; }
.chip--real     { color: var(--tag-real);     background: rgba(20, 80, 63, 0.08); }
.chip--progress { color: var(--tag-progress); background: rgba(122, 84, 24, 0.09); }
.chip--designed { color: var(--tag-designed); background: rgba(60, 74, 130, 0.09); }

/* Chips on the dark keep field switch to the on-dark token colors. */
.section--dark .chip--real     { color: var(--tag-real-on-dark);     background: rgba(63, 163, 132, 0.14); }
.section--dark .chip--progress { color: var(--tag-progress-on-dark); background: rgba(190, 155, 87, 0.14); }
.section--dark .chip--designed { color: var(--tag-designed-on-dark); background: rgba(143, 160, 216, 0.16); }

/* ----------------------------------------------------------------------------
   7. Skip link
   ---------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-3); }

/* ----------------------------------------------------------------------------
   8. Site header / nav (light, sticky)
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(232, 236, 230, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
}
.brand__crest { width: 36px; height: 36px; }
.brand__word {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: inline-block;
  padding: var(--space-1) 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--guardian-ink); border-bottom-color: var(--guardian); }

/* ----------------------------------------------------------------------------
   9. Hero
   ---------------------------------------------------------------------------- */
.hero__inner { max-width: 60ch; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-4);
  color: var(--paper-text);
  /* Let a very long display word hyphenate on the narrowest phones rather than
     overflow the viewport. Only triggers when a single word exceeds the line. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero__line { display: block; }
.hero__line--accent { color: var(--brass); }
.hero__lede { margin-bottom: var(--space-5); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hero__trust { margin: 0; }

/* The guilloche divider, used sparingly at dark-section edges. */
.guilloche {
  display: block;
  width: 100%;
  height: 26px;
  position: absolute;
  left: 0;
  opacity: 0.7;
  pointer-events: none;
}
.guilloche--bottom { bottom: var(--space-2); }
.guilloche--top { top: var(--space-2); }

/* ----------------------------------------------------------------------------
   10. Comparison table
   ---------------------------------------------------------------------------- */
.table-scroll {
  margin-top: var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 900px;
  font-size: var(--text-sm);
}
.compare-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: var(--space-3) var(--space-3) var(--space-2);
  caption-side: top;
}
.compare-table th,
.compare-table td {
  vertical-align: top;
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 2px solid var(--line);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--ink);
  z-index: 2;
}
.compare-table .col-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.compare-table .col-name { display: block; }

/* Row header (capability), the sticky first column. */
.compare-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  font-weight: 700;
  color: var(--ink);
  min-width: 180px;
  box-shadow: 1px 0 0 var(--line);
}
.compare-table .col-capability {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 180px;
  box-shadow: 1px 0 0 var(--line);
}

/* Angel column emphasis: more than color. Left verdigris rule + weight + a check mark. */
.compare-table .is-angel {
  background: rgba(31, 122, 100, 0.07);
  border-left: 3px solid var(--guardian);
}
.compare-table td.is-angel { color: var(--ink); font-weight: 600; }
.compare-table thead th.is-angel { background: rgba(31, 122, 100, 0.12); }
.col-angel { white-space: nowrap; }
.col-angel__mark {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--guardian-ink);
}
.col-angel__name { vertical-align: middle; }
.compare-table td.is-angel .chip { margin-right: 4px; }

.table-footnote {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: var(--maxw-text);
}

/* ----------------------------------------------------------------------------
   11. Differentiator cards
   ---------------------------------------------------------------------------- */
.cards {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--brass-ink);
  letter-spacing: 0.02em;
}
.card__icon { color: var(--guardian-ink); }
.card__icon svg { width: 30px; height: 30px; display: block; }
.card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}
.card__body { font-size: var(--text-base); margin-bottom: var(--space-3); }
.card__honest {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  border-left: 2px solid var(--brass);
  padding-left: var(--space-3);
  margin: 0;
}
.card__link { margin: auto 0 0; padding-top: var(--space-3); }
.card__link a {
  font-weight: 600;
  text-decoration: none;
  color: var(--guardian-ink);
}
.card__link a:hover { text-decoration: underline; }
.card__arrow { display: inline-block; margin-left: 4px; }

/* ----------------------------------------------------------------------------
   12. Profession tabs
   ---------------------------------------------------------------------------- */
.tabs { margin-top: var(--space-6); }

/* No-JS baseline: tab strip hidden, all panels shown stacked with their heads. */
.tabs__list { display: none; }
.tabs--js .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.tab:hover { color: var(--guardian-ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--guardian);
}

.tab-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
/* No-JS: stack the panels with a little separation. */
.tab-panel + .tab-panel { margin-top: var(--space-4); }
.tabs--js .tab-panel { margin-top: 0; }
.tab-panel[hidden] { display: none; }

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.panel__crest { color: var(--guardian-ink); display: inline-flex; }
.panel__crest svg { width: 28px; height: 28px; display: block; }
.panel__row { margin-bottom: var(--space-4); max-width: var(--maxw-text); }
.panel__row:last-child { margin-bottom: 0; }
.panel__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.panel__row p:last-child { font-size: var(--text-base); color: var(--ink); }
.panel__row--caveat {
  border-left: 3px solid var(--wax);
  padding-left: var(--space-3);
}
.panel__row--caveat .panel__label { color: var(--wax); }

/* ----------------------------------------------------------------------------
   13. Architecture
   ---------------------------------------------------------------------------- */
.architecture__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.diagram { margin: 0; }
.diagram__img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--keep-panel);
  border: 1px solid rgba(190, 155, 87, 0.45);
  border-radius: var(--r-md);
}
.diagram__cap {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--paper-muted);
}

.rail__lead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.rail__item { border-top: 1px solid rgba(190, 155, 87, 0.3); }
.rail__item:last-child { border-bottom: 1px solid rgba(190, 155, 87, 0.3); }
.rail details { padding: 0; }
.rail summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-1);
  min-height: 44px;
  color: var(--paper-text);
}
.rail summary::-webkit-details-marker { display: none; }
.rail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--brass);
  border-radius: var(--r-seal);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brass);
}
.rail__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-right: auto;
}
.rail summary .chip { flex: none; }
.rail details > p {
  margin: 0;
  padding: 0 var(--space-1) var(--space-3) calc(26px + var(--space-2) + var(--space-1));
  color: var(--paper-muted);
  font-size: var(--text-base);
}
.rail summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  margin-left: var(--space-1);
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.rail details[open] summary::after { transform: rotate(225deg); }
.rail__close {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--paper-muted);
}
.rail__close code {
  color: var(--brass);
  background: rgba(190, 155, 87, 0.1);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

/* ----------------------------------------------------------------------------
   14. Honesty band
   ---------------------------------------------------------------------------- */
.honesty__inner { max-width: var(--maxw-text); }
.honesty__defs { margin: var(--space-5) 0 var(--space-4); display: grid; gap: var(--space-3); }
.honesty__def {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.honesty__def dt { flex: none; }
.honesty__def dd { margin: 0; color: var(--ink); }
.honesty__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

/* ----------------------------------------------------------------------------
   15. CTA
   ---------------------------------------------------------------------------- */
.cta__inner { max-width: 60ch; }
.cta__body { margin: var(--space-4) 0 var(--space-5); }
.cta__action { margin-bottom: var(--space-4); }
.cta__trust { margin: 0; }

/* ----------------------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------------------- */
.site-footer { padding-block: var(--space-7); }
.site-footer__inner { max-width: var(--maxw-text); }
.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--paper-text);
  margin-bottom: var(--space-3);
}
.site-footer__fine { font-size: var(--text-sm); color: var(--paper-muted); margin-bottom: var(--space-2); }
.site-footer__contact { margin: 0; }
.site-footer__contact a { color: var(--brass); font-family: var(--font-mono); font-size: var(--text-sm); }
.site-footer__contact a:hover { color: var(--guardian-bright); }

/* ----------------------------------------------------------------------------
   17. Scroll reveal (added by JS only when motion is allowed)
   ---------------------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   18. Smooth scroll only when motion is welcome
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* keep sticky anchors clear of the sticky header */
  :target { scroll-margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}
:target { scroll-margin-top: 80px; }

/* ----------------------------------------------------------------------------
   19. Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .architecture__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .diagram { max-width: 560px; }
}

@media (max-width: 620px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 0; padding-block: var(--space-2); }
  .site-nav__list { gap: var(--space-1) var(--space-3); }
  .cards { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .tab-panel { padding: var(--space-4); }
}