/* UsageVault — "Slab" direction. Site-wide theme layer, loaded after instrument.css
   (and after inner-pages.css on the pages that still use the legacy article markup).
   Light mode only: do not add a dark theme, a toggle, or a prefers-color-scheme block.

   Muted-grey deviation from the handoff: #747C8D / #9197A5 / #A0A6B2 / #6B7385 land
   between 2.2:1 and 3.9:1 on their backgrounds, below WCAG AA for body copy. They are
   darkened here to the nearest same-hue value that clears 4.5:1. Every other value is
   the handoff value. */

:root {
  --hp-paper: #f5f6f8;
  --hp-paper-2: #ebecee;
  --hp-slab: #16233f;
  --hp-slab-2: #29354e;
  --hp-slab-deep: #0f192c;
  --hp-frame: #0c1323;
  --hp-footer: #0d1425;
  --hp-mint: #a8d8b7;
  --hp-mint-2: #c2e4cd;
  --hp-mint-tint: #e7f1ec;
  --hp-mint-tint-2: #d6eade;
  --hp-accent: #1c7a5e;
  --hp-ink: #0e1729;
  --hp-ink-2: #37435b;
  --hp-ink-3: #596277;
  --hp-ink-4: #4b566b;
  --hp-ink-5: #656d7f;     /* handoff #747C8D, darkened for AA */
  --hp-muted: #5f6878;
  --hp-muted-2: #666d80;   /* handoff #9197A5 / #A0A6B2, darkened for AA */
  --hp-line: #dddddf;
  --hp-line-2: #d5d6d8;
  --hp-line-3: #c6c8cf;
  --hp-line-warm: #e6e3d8;
  --hp-on-slab: #c4c8cf;
  --hp-on-slab-2: #dadde2;
  --hp-on-slab-muted: #8c92a1;
  --hp-on-footer-muted: #858ca0;   /* handoff #6B7385, darkened for AA */
  --hp-glass: rgba(245, 246, 248, .08);
  --hp-hairline: rgba(245, 246, 248, .15);

  --hp-gutter: clamp(24px, 4.2vw, 60px);
  --hp-sec-y: clamp(64px, 7.2vw, 104px);
  --hp-sec-y-sm: clamp(56px, 6.4vw, 92px);
  --hp-col-gap: clamp(40px, 5.6vw, 80px);
  --hp-col-gap-lg: clamp(40px, 6.3vw, 90px);
  --hp-ease: cubic-bezier(.2, .7, .3, 1);
  --hp-lift: transform .22s var(--hp-ease), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
  --hp-hover-shadow: 0 10px 22px rgba(14, 23, 41, .18);
}

html { scroll-padding-top: 104px; background: var(--hp-paper); }
body { color: var(--hp-ink); background: var(--hp-paper); }
a { color: var(--hp-slab); }
a:hover { color: var(--hp-accent); }
.container { width: 100%; max-width: none; padding-inline: var(--hp-gutter); }
.section { padding: var(--hp-sec-y) 0 clamp(58px, 6.6vw, 96px); }
.section--flush { padding-bottom: var(--hp-sec-y); }
.rule-bottom { border-bottom: 1px solid var(--hp-line); }
.skip-link { color: var(--hp-paper); background: var(--hp-slab); border-radius: 0; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; }

/* ── Type ───────────────────────────────────────────────────────────────── */
.hp-eyebrow { display: block; color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.hp-eyebrow--light { color: var(--hp-mint); }
.hp-eyebrow--ink { color: var(--hp-slab-2); }
.hp-h1 { max-width: 18ch; color: var(--hp-paper); font-size: clamp(38px, 4.6vw, 66px); line-height: .99; letter-spacing: -.035em; font-weight: 700; text-wrap: pretty; }
.hp-h1--page { max-width: none; font-size: clamp(36px, 4.45vw, 64px); line-height: 1; }
.hp-h2 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; text-wrap: pretty; }
.hp-h2--sm { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; }
.hp-h2--xs { font-size: clamp(27px, 3.05vw, 44px); line-height: 1.04; }
.hp-h2--lg { font-size: clamp(32px, 4vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
:is(h1, h2, h3) em { font-style: normal; color: var(--hp-accent); }
.hp-h1 em, .hp-on-slab em { color: var(--hp-mint); }
.hp-lead { max-width: 58ch; color: var(--hp-ink-3); font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; text-wrap: pretty; }
.hp-lead--sm { font-size: clamp(16.5px, 1.25vw, 18px); }
.hp-lead--light { color: var(--hp-on-slab); }
.hp-note { max-width: 100ch; margin: 26px 0 0; color: var(--hp-muted); font-family: var(--uv-font-mono); font-size: 13px; line-height: 1.65; text-wrap: pretty; }
.hp-note strong, .hp-note b { color: var(--hp-ink); font-weight: 400; }
.hp-stamp { display: block; color: var(--hp-muted); font-family: var(--uv-font-mono); font-size: 13px; }
.hp-slab-band .hp-stamp, .hp-closer .hp-stamp { color: var(--hp-on-slab-muted); }

/* Checked item lists */
.hp-checks { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--hp-ink-2); font-size: 17px; line-height: 1.5; }
.hp-checks li { display: flex; gap: 12px; }
.hp-checks li::before { content: '✓'; flex: none; color: var(--hp-accent); font-size: 15px; }
.hp-checks--light { color: var(--hp-on-slab-2); }
.hp-checks--light li::before { color: var(--hp-mint); }

/* ── Buttons and links ──────────────────────────────────────────────────── */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 26px; border: 1.5px solid transparent; border-radius: 0; font-family: var(--uv-font-sans); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: var(--hp-lift); }
.hp-btn:hover { transform: translateY(-2px); box-shadow: var(--hp-hover-shadow); }
.hp-btn--mint, .hp-btn--mint:hover { color: var(--hp-slab-deep); }
.hp-btn--mint { background: var(--hp-mint); }
.hp-btn--mint:hover { background: var(--hp-mint-2); }
.hp-btn--ghost { color: var(--hp-paper); border-color: rgba(245, 246, 248, .5); }
.hp-btn--ghost:hover { color: var(--hp-mint); border-color: var(--hp-mint); }
.hp-btn--slab, .hp-btn--slab:hover { color: var(--hp-paper); }
.hp-btn--slab { background: var(--hp-slab); padding: 17px 24px; }
.hp-btn--slab:hover { background: var(--hp-slab-2); }
.hp-btn--outline { color: var(--hp-ink); border-color: var(--hp-ink); }
.hp-btn--outline:hover { color: var(--hp-paper); background: var(--hp-ink); }
.hp-btn--sm { padding: 13px 22px; font-size: 15px; }
.hp-btn--lg { padding: 19px 30px; font-size: 17px; }
.hp-btn--full { width: 100%; padding-inline: 16px; }
.hp-btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.hp-link { display: inline-block; align-self: flex-start; color: var(--hp-slab); border-bottom: 1.5px solid var(--hp-mint); padding-bottom: 3px; font-family: var(--uv-font-mono); font-size: 14px; letter-spacing: .04em; }
.hp-link:hover { color: var(--hp-accent); border-bottom-color: var(--hp-accent); }
.hp-link--ink { color: var(--hp-slab-deep); border-bottom-color: var(--hp-slab-deep); font-family: var(--uv-font-sans); font-size: 16px; font-weight: 600; letter-spacing: normal; padding-bottom: 2px; }
.hp-link--ink:hover { color: var(--hp-slab); border-bottom-color: var(--hp-slab); }
.hp-link--mono-ink { color: var(--hp-slab-deep); border-bottom-color: var(--hp-slab-deep); }
.hp-lead a, .hp-prose-link { color: var(--hp-slab); border-bottom: 1.5px solid var(--hp-mint); }
.hp-lead a:hover, .hp-prose-link:hover { color: var(--hp-accent); }

.hp-chip-link { display: inline-flex; color: var(--hp-paper); border: 1px solid rgba(245, 246, 248, .35); padding: 10px 14px; font-family: var(--uv-font-mono); font-size: 13px; transition: var(--hp-lift); }
.hp-chip-link:hover { color: var(--hp-mint); border-color: var(--hp-mint); transform: translateY(-2px); box-shadow: var(--hp-hover-shadow); }

.hp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hp-tags li { color: var(--hp-ink-3); background: var(--hp-paper); border: 1px solid var(--hp-line-2); padding: 9px 13px; font-family: var(--uv-font-mono); font-size: 13px; line-height: 1.3; }
.hp-tags--sm li { padding: 8px 11px; font-size: 12.5px; }
.hp-tags--light li { color: var(--hp-on-slab-2); background: none; border-color: rgba(245, 246, 248, .3); }

/* ── Wedges and frames ──────────────────────────────────────────────────── */
.hp-wedge { position: absolute; background: var(--hp-mint); clip-path: polygon(100% 0, 100% 100%, 0 0); pointer-events: none; }
.hp-wedge--hero { top: 0; right: 0; width: min(520px, 74%); aspect-ratio: 1; }
.hp-wedge--sm { top: -28px; right: -12px; width: min(190px, 34%); aspect-ratio: 1; z-index: 0; }
.hp-wedge--band { top: 0; right: 0; width: min(300px, 30%); aspect-ratio: 1; background: rgba(168, 216, 183, .16); }
.hp-wedge--page { top: 0; right: 0; width: min(420px, 34%); aspect-ratio: 1; background: rgba(168, 216, 183, .16); }
.hp-wedge--card { top: 0; right: 0; width: 170px; aspect-ratio: 1; background: rgba(168, 216, 183, .18); }
.hp-wedge--bl { bottom: 0; left: 0; width: min(320px, 34%); aspect-ratio: 1; background: rgba(168, 216, 183, .13); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.hp-wedge--closer { bottom: 0; left: 0; width: min(380px, 44%); aspect-ratio: 1; background: rgba(168, 216, 183, .14); clip-path: polygon(0 0, 0 100%, 100% 100%); }

.hp-frame { position: relative; background: var(--hp-frame); padding: 12px 12px 0; box-shadow: 0 30px 70px rgba(14, 23, 41, .3); }
.hp-frame--flat { box-shadow: 0 26px 60px rgba(14, 23, 41, .2); }
/* Window controls sit top-right: the audience is on Windows, not macOS. */
.hp-frame__bar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; }
.hp-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #495369; }
.hp-frame__bar span { margin-right: auto; color: #868d9c; font-family: var(--uv-font-mono); font-size: 12px; }
.hp-frame img { width: 100%; height: clamp(220px, 27.8vw, 400px); object-fit: cover; object-position: top left; }
.hp-frame--tall img { height: clamp(260px, 43vw, 620px); object-position: top center; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { background: rgba(245, 246, 248, .94); border-bottom: 1px solid var(--hp-line); }
.site-header.is-scrolled { box-shadow: 0 14px 28px -22px rgba(14, 23, 41, .32); }
.nav-wrap { height: 84px; gap: 32px; }
.brand { gap: 10px; color: var(--hp-ink); font-size: 23px; }
.brand:hover { color: var(--hp-accent); }
.brand__mark { width: 27px; height: 27px; color: var(--hp-slab); }
.nav { font-size: 15.5px; }
.nav__links { gap: 30px; }
.nav a:not(.hp-btn), .nav-group__trigger { color: var(--hp-ink-2); font-size: 15.5px; }
.nav a:not(.hp-btn):hover, .nav a[aria-current="page"]:not(.hp-btn) { color: var(--hp-accent); }
.nav-group__trigger:hover, .nav-group__trigger[aria-expanded="true"] { color: var(--hp-accent); }
/* instrument.css scopes nav link colour with `.nav a:not(.button)`, which also matches
   the CTA — these two rules out-specify it so the button keeps its own palette. */
.nav a.hp-btn, .nav a.hp-btn:hover, .nav .nav__actions a.hp-btn[aria-current="page"] { color: var(--hp-paper); }
.nav-panel { top: calc(100% + 12px); left: -26px; min-width: 360px; display: flex; flex-direction: column; padding: 24px 26px; gap: 20px; background: var(--hp-paper); border: 1px solid var(--hp-line); border-radius: 0; box-shadow: 0 22px 48px rgba(14, 23, 41, .16); }
.nav-panel::before { top: -12px; height: 12px; }
.nav-panel a { padding: 0; border-radius: 0; transition: var(--hp-lift); }
.nav-panel a:hover { background: none; transform: translateX(3px); }
.nav-panel a b { color: var(--hp-ink); font-size: 17px; font-weight: 600; }
.nav-panel a:hover b, .nav-panel a[aria-current="page"] b { color: var(--hp-accent); }
.nav-panel a span { margin-top: 3px; color: var(--hp-muted-2); font-size: 14.5px; }
.nav-toggle span:not(.sr-only) { background: var(--hp-ink); }

/* ── Homepage hero ──────────────────────────────────────────────────────── */
.hp-hero { position: relative; display: grid; grid-template-columns: 46% 1fr; min-height: 760px; overflow: hidden; }
.hp-hero__slab { display: flex; flex-direction: column; justify-content: space-between; padding: 78px var(--hp-gutter) 0; background: var(--hp-slab); }
.hp-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hp-hero__copy .hp-lead { max-width: 470px; color: var(--hp-on-slab); }
.hp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hp-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 56px 0 0; padding: 0; background: rgba(245, 246, 248, .18); list-style: none; }
.hp-hero__facts li { display: flex; flex-direction: column; gap: 4px; padding: 24px 0 32px; background: var(--hp-slab); }
.hp-hero__facts li + li { padding-left: 22px; }
.hp-hero__facts b { color: var(--hp-paper); font-family: var(--uv-font-mono); font-size: 21px; font-weight: 400; line-height: 1.2; }
.hp-hero__facts span { color: var(--hp-on-slab-muted); font-size: 13px; line-height: 1.4; }
.hp-hero__field { position: relative; background: var(--hp-paper); }
.hp-hero__frame { position: absolute; z-index: 4; top: 112px; left: -9.3%; right: var(--hp-gutter); margin: 0; }

/* ── Inner-page slab hero ───────────────────────────────────────────────── */
.hp-page-hero { position: relative; padding: 88px 0 84px; overflow: hidden; background: var(--hp-slab); }
.hp-page-hero .container { position: relative; display: grid; grid-template-columns: 53% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.hp-page-hero--wide .container { grid-template-columns: 1fr 33%; }
.hp-page-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hp-page-hero__copy .hp-lead { max-width: 60ch; color: var(--hp-on-slab); }
.hp-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hp-aside { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; background: var(--hp-glass); }
.hp-aside > span:first-child { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-aside ul { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.hp-aside li, .hp-aside p { color: var(--hp-on-slab-2); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

/* ── Section ledes ──────────────────────────────────────────────────────── */
.hp-lede { display: grid; grid-template-columns: 45% 1fr; gap: var(--hp-col-gap); align-items: end; }
.hp-lede--top { align-items: start; }
.hp-lede__head { display: flex; flex-direction: column; gap: 20px; }
.hp-lede .hp-lead { margin-bottom: 6px; font-size: clamp(16.5px, 1.25vw, 18px); }
.hp-stack { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.hp-stack--narrow { max-width: 780px; }

/* ── Split sections (copy + visual) ─────────────────────────────────────── */
.hp-split { display: grid; grid-template-columns: 39% 1fr; gap: var(--hp-col-gap); align-items: center; }
.hp-split--top { align-items: start; gap: var(--hp-col-gap-lg); }
.hp-copy { display: flex; flex-direction: column; gap: 22px; }
.hp-copy .hp-h2 { max-width: 15ch; }
.hp-copy .hp-link { margin-top: 10px; }
.hp-visual { position: relative; }
.hp-visual .hp-frame { z-index: 1; box-shadow: 0 24px 56px rgba(14, 23, 41, .22); }

/* Nine report pages, inside the dark frame.
   Swap this list for <img src="…gallery.png"> when the gallery screenshot exists. */
.hp-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 12px; padding: 0; background: rgba(245, 246, 248, .12); list-style: none; }
.hp-pages li { display: flex; align-items: baseline; gap: 12px; padding: 17px 18px; background: var(--hp-frame); }
.hp-pages span { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12.5px; }
.hp-pages b { color: var(--hp-paper); font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.hp-pages .is-model { background: var(--hp-slab); }
.hp-pages .is-model b { color: var(--hp-mint); }

/* Extend-the-model card */
.hp-extend { margin: 0; padding: 8px 34px; background: var(--hp-paper); border: 1px solid var(--hp-line-2); list-style: none; }
.hp-extend li { display: grid; grid-template-columns: 130px 1fr; gap: 26px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--hp-line-warm); }
.hp-extend li:last-child { border-bottom: 0; }
.hp-extend span { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hp-extend p { color: var(--hp-ink-2); font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.55; text-wrap: pretty; }
.hp-extend b { font-weight: 600; }

/* ── Hairline card grids ────────────────────────────────────────────────── */
.hp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(36px, 3.7vw, 52px); background: var(--hp-line-2); border: 1px solid var(--hp-line-2); }
.hp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px 36px; background: var(--hp-paper); transition: var(--hp-lift); }
a.hp-card { color: var(--hp-slab); }
a.hp-card:hover { color: var(--hp-slab); background: var(--hp-mint-tint); transform: translateY(-2px); box-shadow: var(--hp-hover-shadow); }
.hp-card__tag { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-card__num { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 13px; }
.hp-card h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--hp-ink); }
.hp-card p { color: var(--hp-ink-4); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.hp-card__more { margin-top: 6px; color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 13px; }
.hp-cards--lg .hp-card { padding: 34px 30px 38px; }
.hp-cards--lg .hp-card h3 { font-size: 24px; }
.hp-cards--lg .hp-card p { font-size: 16.5px; line-height: 1.6; }

/* Bordered panel grid */
.hp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 3.7vw, 52px); }
.hp-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-panel { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px; background: var(--hp-paper); border: 1px solid var(--hp-line-2); }
.hp-panel h3 { font-size: 24px; letter-spacing: -.02em; font-weight: 600; }
.hp-panel p { color: var(--hp-ink-4); font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
.hp-panel__tag { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-panel__tag--muted { color: var(--hp-muted); }
.hp-panel--tint p { color: var(--hp-ink-2); font-size: 17px; }
.hp-panel__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.hp-panels--flush { margin-top: 0; }
.hp-mint-band .hp-panel { padding: 24px; border: 0; }
.hp-mint-band .hp-panel p { font-size: 15.5px; }
.hp-checks--ruled { margin-top: 12px; padding-top: 26px; border-top: 1px solid rgba(245, 246, 248, .18); }
.hp-shot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 40px; }
.hp-shot-head > div { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hp-shot-head__meta { padding-bottom: 8px; color: var(--hp-muted); font-family: var(--uv-font-mono); font-size: 13px; white-space: nowrap; }

/* Definition rows */
.hp-defs { margin: clamp(32px, 3.4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--hp-line-2); list-style: none; }
.hp-defs li { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--hp-line-2); }
.hp-defs--narrow li { grid-template-columns: 200px 1fr; padding: 22px 0; }
.hp-defs strong { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.hp-defs span { color: var(--hp-ink-4); font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* ── Bands ──────────────────────────────────────────────────────────────── */
.hp-band { padding: var(--hp-sec-y) 0 clamp(58px, 6.6vw, 96px); background: var(--hp-paper-2); border-bottom: 1px solid var(--hp-line); }
.hp-band--pricing { border-top: 1px solid var(--hp-line); border-bottom: 0; }
.hp-slab-band { position: relative; padding: var(--hp-sec-y-sm) 0; overflow: hidden; background: var(--hp-slab); }
.hp-slab-band .container { position: relative; }
.hp-on-slab { color: var(--hp-paper); }
.hp-mint-band { padding: var(--hp-sec-y-sm) 0; background: var(--hp-mint); }
.hp-mint-band__head { display: flex; flex-direction: column; gap: 18px; max-width: 780px; }
.hp-mint-band__head .hp-h2 { color: var(--hp-slab-deep); }
.hp-mint-band__head p { color: #131e36; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.6; text-wrap: pretty; }

/* Dark translucent card grid */
.hp-dark-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: clamp(36px, 3.7vw, 52px) 0 0; padding: 0; list-style: none; }
.hp-dark-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp-dark-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hp-dark-card { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 34px; background: var(--hp-glass); }
.hp-dark-card__tag { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-dark-card__tag--muted { color: var(--hp-on-slab-muted); }
.hp-dark-card__num { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 24px; line-height: 1; }
.hp-dark-card h3 { color: var(--hp-paper); font-size: 23px; letter-spacing: -.02em; font-weight: 600; }
.hp-dark-card p { color: var(--hp-on-slab); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.hp-dark-card p.is-muted { color: var(--hp-on-slab-muted); }

/* ── Homepage "fit" band ────────────────────────────────────────────────── */
.hp-fit { display: grid; grid-template-columns: 43% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.hp-fit__head { display: flex; flex-direction: column; gap: 20px; }
.hp-fit__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hp-fit__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; margin: 0; padding-top: 8px; list-style: none; }
.hp-fit__checks li { display: flex; gap: 12px; color: var(--hp-on-slab-2); font-size: 17px; line-height: 1.5; }
.hp-fit__checks li::before { content: '✓'; flex: none; color: var(--hp-mint); font-size: 15px; }

/* ── Numbered stages ────────────────────────────────────────────────────── */
.hp-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin: clamp(40px, 4.2vw, 60px) 0 0; padding: 0; list-style: none; }
.hp-stages--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.hp-stages li { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 2px solid var(--hp-slab); }
.hp-stages span { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 28px; line-height: 1; }
.hp-stages--4 span { font-size: 26px; }
.hp-stages h3 { font-size: 26px; letter-spacing: -.02em; font-weight: 600; }
.hp-stages--4 h3 { font-size: 23px; }
.hp-stages p { color: var(--hp-ink-4); font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* ── Homepage architecture flow ─────────────────────────────────────────── */
.hp-arch { display: flex; align-items: stretch; gap: 18px; margin: 52px 0 0; padding: 0; list-style: none; }
.hp-arch__node { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 22px; background: var(--hp-paper); }
.hp-arch__node span { color: var(--hp-muted-2); font-family: var(--uv-font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.hp-arch__node b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.hp-arch__node em { color: var(--hp-ink-4); font-size: 14.5px; font-style: normal; }
.hp-arch__node--source { flex: 0 0 260px; padding: 24px; }
.hp-arch__node--dark { background: var(--hp-slab); }
.hp-arch__node--dark span { color: var(--hp-mint); }
.hp-arch__node--dark b { color: var(--hp-paper); }
.hp-arch__node--dark em { color: var(--hp-on-slab-muted); }
.hp-arch__arrow { display: flex; align-items: center; gap: 4px; color: var(--hp-slab-2); font-family: var(--uv-font-mono); font-size: 13px; }
.hp-arch__arrow span { display: inline-block; }
.hp-arch__owned { display: flex; flex: 1; gap: 16px; padding: 18px; border: 1.5px dashed rgba(15, 25, 44, .35); }
.hp-mint-band__foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 22px; }
.hp-mint-band__foot > span { color: #131e36; font-family: var(--uv-font-mono); font-size: 13px; }

/* ── Semantic-model diagram (report page) ───────────────────────────────── */
.hp-model { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hp-model__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hp-model__node { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--hp-glass); }
.hp-model__node span { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.hp-model__node b { color: var(--hp-paper); font-size: 18px; font-weight: 600; }
.hp-model__node em { color: var(--hp-on-slab-muted); font-size: 13.5px; font-style: normal; }
.hp-model__fact { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: var(--hp-mint); }
.hp-model__fact span { color: var(--hp-slab-2); font-family: var(--uv-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.hp-model__fact b { color: var(--hp-slab-deep); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.hp-model__fact em { color: #131e36; font-size: 14.5px; font-style: normal; }
.hp-model__measures { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border: 1.5px dashed rgba(168, 216, 183, .5); }
.hp-model__measures span { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.hp-model__measures b { color: var(--hp-paper); font-size: 19px; font-weight: 600; }
.hp-model__measures em { color: var(--hp-on-slab-muted); font-size: 14px; font-style: normal; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.hp-table-wrap { margin-top: clamp(36px, 3.7vw, 52px); overflow-x: auto; }
.hp-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; font-size: 16px; }
.hp-table th, .hp-table td { padding: 18px 20px; font-weight: 400; vertical-align: top; }
.hp-table thead th { padding-block: 16px; color: var(--hp-muted); border-bottom: 1.5px solid var(--hp-ink); font-family: var(--uv-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.hp-table th:first-child, .hp-table td:first-child { padding-left: 0; }
.hp-table thead th:first-child { width: 22%; }
.hp-table--wide-first thead th:first-child { width: 34%; }
.hp-table--narrow-first thead th:first-child { width: 17%; }
.hp-table tbody th { color: var(--hp-ink-2); font-weight: 600; }
.hp-table tbody td { color: var(--hp-muted); line-height: 1.5; }
.hp-table tbody :is(th, td) { border-bottom: 1px solid var(--hp-line); }
.hp-table .is-featured { color: var(--hp-slab-deep); background: var(--hp-mint-tint); font-weight: 500; padding-left: 20px; }
.hp-table thead .is-featured { color: var(--hp-slab-deep); background: var(--hp-mint-tint-2); }

.hp-table--dark { min-width: 720px; }
.hp-table--dark thead th { color: var(--hp-mint); border-bottom-color: rgba(245, 246, 248, .4); }
.hp-table--dark tbody th { color: var(--hp-paper); }
.hp-table--dark tbody td { color: var(--hp-on-slab-2); }
.hp-table--dark tbody td:last-child { color: var(--hp-on-slab-muted); }
.hp-table--dark tbody :is(th, td) { border-bottom-color: var(--hp-hairline); }

/* Two-column fact list (product facts) */
.hp-facts { width: 100%; border-collapse: collapse; margin-top: clamp(36px, 3.7vw, 52px); font-size: 16.5px; text-align: left; }
.hp-facts th { width: 26%; padding: 20px 24px 20px 0; color: var(--hp-accent); border-top: 1px solid var(--hp-line); font-family: var(--uv-font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; vertical-align: top; }
.hp-facts td { padding: 20px 0; color: var(--hp-ink-2); border-top: 1px solid var(--hp-line); line-height: 1.6; }
.hp-facts tr:first-child :is(th, td) { border-top: 1.5px solid var(--hp-ink); }
.hp-facts tr:last-child :is(th, td) { border-bottom: 1px solid var(--hp-line); }
.hp-facts__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-top: 28px; }
.hp-facts__foot .hp-note { margin: 0; }

/* ── Mint CTA band ──────────────────────────────────────────────────────── */
.hp-cta { display: grid; grid-template-columns: 1fr 29%; gap: var(--hp-col-gap); align-items: center; }
.hp-cta__copy { display: flex; flex-direction: column; gap: 18px; }
.hp-cta__copy .hp-h2 { color: var(--hp-slab-deep); }
.hp-cta__copy p { max-width: 62ch; color: #131e36; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.6; text-wrap: pretty; }
.hp-cta__card { display: flex; flex-direction: column; gap: 14px; padding: 32px 30px; background: var(--hp-paper); }
.hp-cta__card strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.hp-cta__card p { color: var(--hp-ink-4); font-size: 16px; line-height: 1.55; }
.hp-cta__card .hp-btn { margin-top: 4px; }
.hp-strip { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hp-strip strong { max-width: 780px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.025em; color: var(--hp-slab-deep); text-wrap: pretty; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.hp-price-intro { display: flex; flex-direction: column; gap: 18px; }
.hp-price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: clamp(40px, 3.9vw, 56px); }
.hp-price { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 40px 38px 38px; overflow: hidden; background: var(--hp-paper); border: 1px solid var(--hp-line-2); }
.hp-price > :not(.hp-wedge) { position: relative; }
.hp-price__scope { color: var(--hp-muted-2); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-price h3 { font-size: 32px; letter-spacing: -.03em; font-weight: 700; }
.hp-price__amount { display: flex; align-items: baseline; gap: 10px; font-size: 44px; font-weight: 700; letter-spacing: -.035em; }
.hp-price__amount small { color: var(--hp-muted-2); font-family: var(--uv-font-mono); font-size: 14px; font-weight: 400; letter-spacing: normal; }
.hp-price__desc { color: var(--hp-ink-3); font-size: 17px; line-height: 1.55; }
.hp-price__summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--hp-mint-tint); }
.hp-price__summary strong { color: var(--hp-slab-deep); font-size: 15.5px; font-weight: 600; }
.hp-price__summary span { color: var(--hp-ink-2); font-family: var(--uv-font-mono); font-size: 12.5px; line-height: 1.5; }
.hp-price .hp-checks { flex: 1; align-content: start; gap: 11px; margin-top: 4px; font-size: 16px; }
.hp-price .hp-btn { margin-top: 14px; }
.hp-price__fine { color: var(--hp-muted-2); font-size: 14px; line-height: 1.5; }
.hp-price--featured { background: var(--hp-slab); border: 0; }
.hp-price--featured :is(h3, .hp-price__amount) { color: var(--hp-paper); }
.hp-price--featured .hp-price__amount small { color: var(--hp-mint); }
.hp-price--featured .hp-price__desc { color: var(--hp-on-slab); }
.hp-price--featured .hp-price__summary { background: var(--hp-glass); }
.hp-price--featured .hp-price__summary strong { color: var(--hp-paper); }
.hp-price--featured .hp-price__summary span { color: var(--hp-mint); }
.hp-price--featured .hp-price__fine { color: var(--hp-on-slab-muted); }
.hp-price__flag { align-self: flex-start; padding: 6px 10px; color: var(--hp-slab-deep); background: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-price-note { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-top: 34px; padding: 30px 34px; background: var(--hp-paper); border: 1px solid var(--hp-line-2); }
.hp-price-note strong { display: block; margin-bottom: 6px; font-size: 19px; letter-spacing: -.02em; }
.hp-price-note p { color: var(--hp-ink-4); font-size: 16.5px; line-height: 1.55; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.hp-faq { display: grid; grid-template-columns: 33% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.faq__intro { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.faq__intro .hp-btn { align-self: flex-start; margin-top: 6px; }
.accordion { border-top: 1px solid var(--hp-line-2); }
.faq-item { border-bottom: 1px solid var(--hp-line-2); }
.faq-item button { gap: 20px; padding: 24px 0; color: var(--hp-ink); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.faq-item button:hover { color: var(--hp-accent); }
.faq-item button > span { width: 20px; height: 20px; color: var(--hp-accent); }
.faq-item button > span::before, .faq-item button > span::after { width: 15px; height: 1.5px; }
.faq-item button[aria-expanded="true"] > span { color: var(--hp-accent); transform: none; }
.faq-item button[aria-expanded="true"] > span::after { opacity: 0; }
.faq-answer p { max-width: 700px; margin: 0 40px 24px 0; color: var(--hp-ink-5); font-size: 17px; line-height: 1.6; }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
.hp-closer { position: relative; padding: var(--hp-sec-y) 0; overflow: hidden; background: var(--hp-slab); }
.hp-closer .container { position: relative; }
.hp-closer__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hp-closer .hp-h2 { max-width: 900px; color: var(--hp-paper); }
.hp-closer p { max-width: 720px; color: var(--hp-on-slab); font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; text-wrap: pretty; }
.hp-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.hp-closer small { margin-top: 6px; color: var(--hp-on-slab-muted); font-family: var(--uv-font-mono); font-size: 13px; }
.hp-closer :focus-visible { outline-color: var(--hp-mint); }

/* ── Cost worksheet (compare) ───────────────────────────────────────────── */
.hp-calc { display: grid; grid-template-columns: 1fr 26%; gap: 28px; margin-top: clamp(32px, 3.4vw, 48px); align-items: start; }
.hp-calc__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 34px; background: var(--hp-paper-2); border: 1px solid var(--hp-line-2); }
.hp-field { display: flex; flex-direction: column; gap: 8px; }
.hp-field label { color: var(--hp-ink-3); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hp-field :is(input, select) { width: 100%; min-height: 46px; padding: 11px 10px; color: var(--hp-ink); background: var(--hp-paper); border: 1px solid var(--hp-line-3); border-radius: 0; font-family: var(--uv-font-mono); font-size: 15px; }
.hp-field small { color: var(--hp-muted); font-size: 13px; line-height: 1.5; }
.hp-calc__totals { display: flex; flex-direction: column; gap: 26px; padding: 34px 32px; background: var(--hp-slab); }
.hp-calc__totals > span:first-child { color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-total { display: flex; flex-direction: column; gap: 6px; }
.hp-total span { color: var(--hp-on-slab-muted); font-size: 14.5px; }
.hp-total strong { color: var(--hp-paper); font-family: var(--uv-font-mono); font-size: 30px; font-weight: 400; letter-spacing: -.01em; }
.hp-total--diff { padding-top: 22px; border-top: 1px solid rgba(245, 246, 248, .2); }
.hp-total--diff strong { color: var(--hp-mint); font-size: 22px; line-height: 1.35; }
.hp-calc__totals > small { color: var(--hp-on-slab-muted); font-family: var(--uv-font-mono); font-size: 12px; line-height: 1.6; }
.hp-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 60px; margin-top: 44px; padding: 34px 0 0; border-top: 1px solid var(--hp-line-2); list-style: none; }
.hp-costs li { display: flex; flex-direction: column; gap: 6px; }
.hp-costs strong { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.hp-costs span { color: var(--hp-ink-4); font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }

/* ── Demo scheduler ─────────────────────────────────────────────────────── */
.hp-scheduler { display: flex; flex-direction: column; gap: 14px; padding: 36px 34px 32px; background: var(--hp-paper); }
.hp-scheduler__eyebrow { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hp-scheduler h2 { font-size: 32px; letter-spacing: -.03em; font-weight: 700; }
.hp-scheduler > p { color: var(--hp-ink-4); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.hp-scheduler .hp-btn { margin-top: 10px; }
.hp-scheduler__privacy { margin-top: 6px; color: var(--hp-muted); font-family: var(--uv-font-mono); font-size: 12px; line-height: 1.6; }
.hp-scheduler__privacy a { color: var(--hp-slab); border-bottom: 1px solid #c8ccd3; }
.hp-scheduler__fallback { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--hp-mint-tint); }
.hp-scheduler__fallback p { color: var(--hp-ink-2); font-size: 15px; line-height: 1.55; }
.hp-booking-confirmation { margin-top: 20px; padding: 16px 20px; color: var(--hp-slab-deep); background: var(--hp-mint); font-weight: 600; }
.hp-agenda { display: grid; grid-template-columns: 36% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.hp-agenda__list { margin: 0; padding: 0; border-top: 1px solid var(--hp-line-2); list-style: none; }
.hp-agenda__list li { display: grid; grid-template-columns: 120px 1fr; gap: 34px; padding: 28px 0; border-bottom: 1px solid var(--hp-line-2); }
.hp-agenda__list > li > span { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 13px; letter-spacing: .08em; }
.hp-agenda__list div { display: flex; flex-direction: column; gap: 8px; }
.hp-agenda__list h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.hp-agenda__list p { color: var(--hp-ink-4); font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* ── Resources closing note ─────────────────────────────────────────────── */
.hp-note-split { display: grid; grid-template-columns: 33% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.hp-note-split h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: pretty; }
.hp-note-split__body { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.hp-note-split__body p { color: var(--hp-ink-3); font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.65; text-wrap: pretty; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { background: var(--hp-footer); border-top: 0; }
.footer__grid { grid-template-columns: 1.2fr auto auto auto; gap: clamp(36px, 4.9vw, 70px); padding-block: 72px 0; }
.footer__about { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.footer__about .brand { color: var(--hp-paper); }
.footer__about .brand__mark { color: var(--hp-mint); }
.footer__about p { max-width: none; margin: 0; color: #868d9c; font-size: 15.5px; line-height: 1.6; }
.footer__links { gap: 12px; }
.footer__links strong { margin: 0; color: var(--hp-mint); font-size: 12px; letter-spacing: .12em; }
.footer__links :is(a, .footer__preference-button) { color: var(--hp-on-slab-2); font-size: 15.5px; transition: var(--hp-lift); }
.footer__links :is(a, .footer__preference-button):hover { color: var(--hp-mint); }
.footer__bottom { margin-top: 56px; padding-block: 24px 44px; color: var(--hp-on-footer-muted); border-top: 1px solid rgba(245, 246, 248, .14); font-family: var(--uv-font-mono); font-size: 12.5px; }
.footer__bottom > span:last-child { font-size: 12.5px; letter-spacing: normal; text-transform: lowercase; }

/* Consent banner (injected by analytics.js) */
.consent-banner { background: var(--hp-paper); border: 1px solid var(--hp-line-2); border-radius: 0; box-shadow: 0 22px 48px rgba(14, 23, 41, .16); }
.consent-banner p { color: var(--hp-ink-4); }
.consent-banner .button { border-radius: 0; }
.consent-banner .button--primary { background: var(--hp-slab); border-color: var(--hp-slab); }
.consent-banner .button--primary:hover { background: var(--hp-slab-2); border-color: var(--hp-slab-2); }
.consent-banner .button--outline { border-color: var(--hp-line-2); }

/* ── Legacy article pages ───────────────────────────────────────────────────
   404, privacy, terms and the six power-bi-* guides still use the inner-pages.css
   markup. These rules retheme those components so they sit in the same system.
   Delete a block here once its page is rebuilt with the hp-* vocabulary. */
.inner-page { background: var(--hp-paper); }
.page-hero { padding: 88px 0 84px; color: var(--hp-paper); background: var(--hp-slab); }
.page-hero__grid { grid-template-columns: 48% 1fr; gap: var(--hp-col-gap-lg); align-items: start; }
.page-hero .kicker { color: var(--hp-mint); font-size: 13px; letter-spacing: .14em; }
.page-hero h1 { max-width: 20ch; margin-top: 22px; color: var(--hp-paper); font-size: clamp(36px, 4.45vw, 64px); line-height: 1; letter-spacing: -.035em; }
.page-hero p { max-width: 60ch; color: var(--hp-on-slab); font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; }
.page-hero__aside { padding: 30px 28px; background: var(--hp-glass); border: 0; border-radius: 0; }
.page-hero__aside strong { margin-bottom: 16px; color: var(--hp-mint); font-family: var(--uv-font-mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.page-hero__aside li { color: var(--hp-on-slab-2); font-size: 16.5px; line-height: 1.55; }
.page-hero__aside li::before { color: var(--hp-mint); }
.page-hero__aside a { color: var(--hp-on-slab-2); }
.page-hero__aside a:hover { color: var(--hp-mint); }
/* Hero-level meta lines sit on the slab, so they need the on-dark muted tone. */
.page-hero :is(.updated, .article-meta) { color: var(--hp-on-slab-muted); }
.page-hero .article-meta { gap: 8px 22px; }
.page-hero .button--primary, .page-hero .button--dark { color: var(--hp-slab-deep); background: var(--hp-mint); border-color: var(--hp-mint); }
.page-hero .button--primary:hover, .page-hero .button--dark:hover { color: var(--hp-slab-deep); background: var(--hp-mint-2); border-color: var(--hp-mint-2); }
.page-hero :is(.button--secondary, .button--ghost, .button--outline) { color: var(--hp-paper); background: none; border-color: rgba(245, 246, 248, .5); }
.page-hero :is(.button--secondary, .button--ghost, .button--outline):hover { color: var(--hp-mint); background: none; border-color: var(--hp-mint); }

.content-section { padding: var(--hp-sec-y) 0 clamp(58px, 6.6vw, 96px); background: var(--hp-paper); border-bottom: 1px solid var(--hp-line); }
.content-section--soft { background: var(--hp-paper-2); border-block: 0; border-bottom: 1px solid var(--hp-line); }
.content-section--dark { color: var(--hp-paper); background: var(--hp-slab); border-bottom: 0; }
.content-section__heading h2 { max-width: 22ch; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -.03em; }
.content-section__heading p { color: var(--hp-ink-3); font-size: clamp(16.5px, 1.25vw, 18px); }
.content-section--dark .content-section__heading p { color: var(--hp-on-slab); }
.kicker { color: var(--hp-accent); font-size: 13px; letter-spacing: .14em; }
.kicker--light { color: var(--hp-mint); }
.updated { color: var(--hp-muted); font-family: var(--uv-font-mono); }

.button { border-radius: 0; padding: 16px 24px; font-size: 16px; transition: var(--hp-lift); }
.button:hover { transform: translateY(-2px); box-shadow: var(--hp-hover-shadow); }
.button--small { padding: 13px 18px; font-size: 14.5px; }
.button--primary, .button--dark, .button--primary:hover, .button--dark:hover { color: var(--hp-paper); }
.button--primary, .button--dark { background: var(--hp-slab); border-color: var(--hp-slab); }
.button--primary:hover, .button--dark:hover { background: var(--hp-slab-2); border-color: var(--hp-slab-2); }
.button--secondary, .button--outline, .button--ghost { color: var(--hp-ink); background: var(--hp-paper); border-color: var(--hp-line-2); }
.button--secondary:hover, .button--outline:hover, .button--ghost:hover { color: var(--hp-paper); background: var(--hp-ink); border-color: var(--hp-ink); }
.button--on-dark, .button--on-dark:hover { color: var(--hp-slab-deep); background: var(--hp-mint); border-color: var(--hp-mint); }
.button--on-dark:hover { background: var(--hp-mint-2); border-color: var(--hp-mint-2); }
.button--outline-light { color: var(--hp-paper); border-color: rgba(245, 246, 248, .5); }
.button--outline-light:hover { color: var(--hp-mint); background: none; border-color: var(--hp-mint); }
.text-link { color: var(--hp-slab); border-bottom: 1.5px solid var(--hp-mint); }
.text-link:hover { color: var(--hp-accent); text-decoration: none; }

.trust-grid, .answer-grid, .resource-grid, .proof-placeholder-grid { gap: 20px; }
.trust-card, .answer-card, .resource-card, .placeholder-panel, .tool-panel, .source-list { background: var(--hp-paper); border: 1px solid var(--hp-line-2); border-radius: 0; }
.trust-card:hover, .answer-card:hover, .resource-card:hover { border-color: var(--hp-line-2); background: var(--hp-mint-tint); }
:is(.trust-card, .resource-card) > span, .resource-card__type { color: var(--hp-accent); font-size: 12px; letter-spacing: .12em; }
:is(.trust-card, .answer-card, .resource-card) :is(h2, h3) { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
:is(.trust-card, .answer-card, .resource-card) p { color: var(--hp-ink-4); font-size: 16px; line-height: 1.55; }
.resource-card__link { color: var(--hp-accent); font-family: var(--uv-font-mono); font-size: 13px; }
.content-section--dark :is(.trust-card, .answer-card) { color: var(--hp-paper); background: var(--hp-glass); border: 0; }
.content-section--dark :is(.trust-card, .answer-card) p { color: var(--hp-on-slab); }

.fact-table, .responsibility-table { background: none; border: 0; border-radius: 0; }
.fact-table :is(th, td), .responsibility-table :is(th, td) { padding: 18px 20px; font-size: 16px; line-height: 1.5; }
.fact-table thead th, .responsibility-table thead th { color: var(--hp-muted); background: none; border-bottom: 1.5px solid var(--hp-ink); font-family: var(--uv-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.fact-table tbody tr, .responsibility-table tbody tr { border-bottom: 1px solid var(--hp-line); }
.fact-table :is(th, td):first-child, .responsibility-table :is(th, td):first-child { padding-left: 0; color: var(--hp-ink-2); }
.fact-table td:last-child, .responsibility-table td { color: var(--hp-muted); }
.is-featured { color: var(--hp-slab-deep); background: var(--hp-mint-tint); font-weight: 500; }
thead .is-featured { color: var(--hp-slab-deep); background: var(--hp-mint-tint-2); }

.prose h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; }
.prose h3 { font-size: 19px; }
.prose p, .prose li { color: var(--hp-ink-4); font-size: 17px; line-height: 1.65; }
.prose a { color: var(--hp-slab); }
.prose a:hover { color: var(--hp-accent); }
.article-meta { color: var(--hp-muted); }
.article-callout, .detail-note { background: var(--hp-mint-tint); border-left: 3px solid var(--hp-accent); border-radius: 0; }
.detail-note { color: var(--hp-ink-2); font-size: 16px; }
.source-list { background: var(--hp-paper-2); }
.definition li { grid-template-columns: 260px 1fr; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--hp-line-2); }
.definition strong { font-size: 19px; letter-spacing: -.02em; }
.definition span { color: var(--hp-ink-4); font-size: 17px; }

/* The contact panel carries .container, so its slab background is full-bleed. The
   wrapping section must not add light padding around it or it reads as empty strips. */
.content-section:has(> .contact-panel) { padding: 0; background: none; border-bottom: 0; }
.contact-panel { grid-template-columns: 1fr 29%; gap: var(--hp-col-gap); padding-block: var(--hp-sec-y-sm); color: var(--hp-paper); background: var(--hp-slab); border-radius: 0; }
.contact-panel__action { padding: 30px 28px; background: var(--hp-glass); border: 0; border-radius: 0; }
.contact-panel__action strong { font-size: 20px; letter-spacing: -.02em; }
.contact-panel p { color: var(--hp-on-slab); }
.contact-panel .button--primary, .contact-panel .button--primary:hover { color: var(--hp-slab-deep); background: var(--hp-mint); border-color: var(--hp-mint); }
.contact-panel .button--primary:hover { background: var(--hp-mint-2); border-color: var(--hp-mint-2); }
.placeholder-panel { background: repeating-linear-gradient(135deg, #e9eaee 0 9px, #dedfe4 9px 18px); border: 1px dashed var(--hp-line-2); }
.placeholder-panel__label { color: var(--hp-muted); background: var(--hp-paper); border: 1px solid var(--hp-line-2); border-radius: 0; }
.video-placeholder { color: var(--hp-paper); background: var(--hp-slab); border: 1px dashed rgba(168, 216, 183, .5); border-radius: 0; }
.video-placeholder__icon { background: var(--hp-glass); border: 1px solid rgba(168, 216, 183, .4); }
.video-placeholder p { color: var(--hp-on-slab); }

.tool-field label { color: var(--hp-ink-3); font-family: var(--uv-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tool-field :is(input, select) { background: var(--hp-paper); border: 1px solid var(--hp-line-3); border-radius: 0; font-family: var(--uv-font-mono); }
.tool-field :is(input, select):focus-visible { border-color: var(--hp-accent); outline-color: var(--hp-accent); }
.tool-field small { color: var(--hp-muted); }
.tool-result { background: var(--hp-mint-tint); border: 0; border-radius: 0; }
.tool-result span { color: var(--hp-ink-3); font-size: 11.5px; letter-spacing: .1em; }
.tool-result strong { color: var(--hp-slab-deep); font-size: 26px; }
.checklist-item { background: var(--hp-paper); border: 1px solid var(--hp-line-2); border-radius: 0; }
.checklist-item:hover { border-color: var(--hp-accent); }
.checklist-item input { accent-color: var(--hp-accent); }
.checklist-item span span { color: var(--hp-ink-4); font-size: 15px; }
.checklist-progress { color: var(--hp-slab-deep); background: var(--hp-mint-tint); border: 0; border-radius: 0; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
.motion-ready .hp-hero__copy > * { animation: uv-rise .5s var(--hp-ease) both; }
.motion-ready .hp-hero__copy > :nth-child(2) { animation-delay: .07s; }
.motion-ready .hp-hero__copy > :nth-child(3) { animation-delay: .14s; }
.motion-ready .hp-hero__copy > :nth-child(4) { animation-delay: .21s; }
.motion-ready .hp-hero__facts { animation: uv-rise .5s var(--hp-ease) .28s both; }
.motion-ready .hp-hero__frame { animation: uv-rise .6s var(--hp-ease) .2s both; }
.motion-ready .hp-page-hero__copy > * { animation: uv-rise .5s var(--hp-ease) both; }
.motion-ready .hp-page-hero__copy > :nth-child(2) { animation-delay: .07s; }
.motion-ready .hp-page-hero__copy > :nth-child(3) { animation-delay: .14s; }
.motion-ready .hp-page-hero__copy > :nth-child(4) { animation-delay: .21s; }
.motion-ready .hp-page-hero .hp-aside { animation: uv-rise .6s var(--hp-ease) .2s both; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hp-split, .hp-lede, .hp-fit, .hp-faq, .hp-agenda, .hp-note-split,
  .hp-page-hero .container, .hp-page-hero--wide .container,
  .page-hero__grid { grid-template-columns: 1fr; }
  .hp-split, .hp-fit, .hp-page-hero .container, .page-hero__grid { gap: 44px; }
  .hp-lede { gap: 24px; align-items: start; }
  .hp-copy .hp-h2, .hp-lede .hp-h2 { max-width: 24ch; }
  .faq__intro { position: static; }
  .hp-cards, .hp-dark-cards, .hp-stages--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-aside, .page-hero__aside { max-width: 640px; }
  .hp-page-hero .container, .page-hero__grid { grid-template-columns: 1fr; }
  .hp-calc { grid-template-columns: 1fr; }
  .hp-calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .hp-hero { grid-template-columns: 1fr; min-height: 0; }
  .hp-hero__slab { padding-block: 56px 0; }
  .hp-hero__facts { margin-top: 48px; }
  .hp-hero__field { padding: 40px var(--hp-gutter) 56px; }
  .hp-hero__frame { position: static; }
  .hp-wedge--hero { width: min(240px, 38%); }
  .hp-arch { flex-direction: column; }
  .hp-arch__node--source { flex: none; }
  .hp-arch__arrow { justify-content: center; }
  .hp-arch__arrow span { transform: rotate(90deg); }
  .hp-mint-band__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hp-cta, .hp-strip, .contact-panel { grid-template-columns: 1fr; display: grid; gap: 30px; }
}

@media (max-width: 900px) {
  .section, .hp-band, .content-section { padding-block: 64px; }
  .hp-slab-band, .hp-mint-band, .hp-closer, .hp-page-hero, .page-hero { padding-block: 60px; }
  .hp-stages, .hp-stages--4, .hp-price-cards, .hp-panels, .hp-panels--3,
  .hp-model__row, .hp-costs, .trust-grid, .answer-grid, .resource-grid { grid-template-columns: 1fr; }
  .hp-stages, .hp-costs { gap: 28px; }
  .hp-arch__owned { flex-direction: column; }
  .hp-shot-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hp-price-note, .hp-facts__foot { grid-template-columns: 1fr; display: grid; gap: 20px; }
  .hp-agenda__list li, .hp-defs li, .hp-defs--narrow li, .definition li { grid-template-columns: 1fr; gap: 10px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 56px 0; }
  .footer__about { grid-column: 1 / -1; max-width: 420px; }
  .footer__bottom { flex-direction: column; gap: 10px; margin-top: 40px; }
}

@media (max-width: 860px) {
  .nav-wrap { height: 72px; }
  .nav { background: var(--hp-paper); }
  .nav__links { gap: 0; }
  .nav a:not(.hp-btn) { font-size: 19px; }
  .nav-group__trigger { color: var(--hp-muted-2); font-family: var(--uv-font-mono); font-size: 11px; }
  .nav-panel { min-width: 0; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; }
  .nav-panel a { padding: 11px 0; border-bottom: 1px solid var(--hp-line); }
  .nav-panel a:hover { transform: none; }
  .nav-panel a b { font-size: 17px; font-weight: 500; color: var(--hp-ink-2); }
  .nav__actions .hp-btn { margin-top: 20px; }
  .hp-btn { min-height: 44px; }
}

@media (max-width: 720px) {
  .hp-hero__facts { grid-template-columns: 1fr; gap: 1px; }
  .hp-hero__facts li { padding: 20px 0; }
  .hp-hero__facts li + li { padding-left: 0; }
  .hp-hero__facts li:last-child { padding-bottom: 32px; }
  .hp-extend { padding-inline: 24px; }
  .hp-extend li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .hp-price, .hp-price-note, .hp-panel, .hp-cta__card, .hp-scheduler, .hp-calc__fields { padding: 26px 24px; }
  .faq-answer p { margin-right: 0; }
  .hp-fit__checks, .hp-calc__fields { grid-template-columns: 1fr; }
  .hp-facts th { display: block; width: auto; padding: 20px 0 0; border-top: 1px solid var(--hp-line); }
  .hp-facts td { display: block; padding: 8px 0 20px; border-top: 0; }
  .hp-facts tr:first-child td { border-top: 0; }
  .hp-facts tr:last-child td { border-bottom: 1px solid var(--hp-line); }
}

@media (max-width: 620px) {
  .hp-cards, .hp-cards--3, .hp-cards--2, .hp-dark-cards, .hp-dark-cards--3,
  .hp-dark-cards--2, .hp-pages, .hp-panels--3 { grid-template-columns: 1fr; }
  .hp-hero__actions .hp-btn, .hp-page-hero__actions .hp-btn { width: 100%; }
  .hp-mint-band__foot .hp-link--ink { font-size: 15px; }
}