/* ============================================================================
   Assay — PLATFORM / ASSAY EVERYWHERE / SECURITY family (the "how it works +
   prove it" layer). Loaded AFTER styles.css + home*.css + agent*.css +
   solutions.css. Inherits the whole system; adds only this family's anatomy:

     PLATFORM
     · .arch-stack     the ARCH-V3 four-band stack glyph (hero table-of-contents)
     · .agent .a-avail availability chip on the reused org-chart seats
     · .evidence-strip the thin "buying as security/legal?" boxed strip
     ASSAY EVERYWHERE (/mcp)
     · .host-frame      the 3-beat grounding -> draft -> Seal demo (host chrome)
     · .seal-standalone the Assay Seal shown on its own + .receipt-page verify mock
     · .capture         the consent-gated idea-engine micro-demo
     · .slash-row / .setup-panel  house-rules chips + the real copy-paste setup
     SECURITY (evidence-as-design)
     · .status-row      the honest 4-stat header (SOC 2 leads "in progress")
     · .compliance / .vet-card  honest-label status cards + technical vetting grid
     · .packet          THE procurement dossier as one tangible, sealed object
     · .disambig        the Trust-Center-vs-this-page card

   Earned pixels absolutism holds throughout: a Seal appears ONLY on a genuine
   check; no badge on empty results, ever. Every reveal has a static/no-JS state.
   ========================================================================== */

/* ============================================================================
   ARCH-STACK — the ARCH-V3 stack glyph (platform hero visual, static map)
   ========================================================================== */
.arch-stack {
  border: 1.5px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  box-shadow: 10px 10px 0 rgba(99,14,212,0.45); padding: 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.arch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding: 2px 4px; }
.arch-head .mono-xs { color: rgba(255,255,255,0.5); }
.arch-band {
  border: 1px solid var(--ink-line); background: rgba(255,255,255,0.028);
  padding: 13px 16px; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
  position: relative;
}
.arch-band .ab-tier { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); line-height: 1.4; }
.arch-band .ab-contents { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.arch-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.82); border: 1px solid var(--ink-line); padding: 6px 10px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.arch-chip .g { color: #c6a2f7; }
.arch-band.you { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.05); }
.arch-band.you .ab-name { font-family: var(--font-headline); font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.015em; }
.arch-band.you .ab-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-left: 12px; }
.arch-band.leaders { border-color: rgba(168,119,240,0.5); background: rgba(99,14,212,0.12); }
.arch-band.leaders .ab-tier { color: #c6a2f7; }
.arch-band.leaders .arch-chip { border-color: rgba(168,119,240,0.5); color: #fff; }
.arch-band.leaders .arch-chip .g { color: #c6a2f7; }
.arch-band.leaders .arch-chip.legal .g { color: #4fd6b6; }
.arch-band.os { border-color: rgba(0,184,148,0.42); background: rgba(0,184,148,0.06); }
.arch-band.os .ab-tier { color: #6fe0c4; }
.arch-band.os .arch-chip.hot { border-color: rgba(0,184,148,0.5); color: #6fe0c4; }
.arch-flow { display: flex; justify-content: center; color: rgba(255,255,255,0.28); font-size: 11px; line-height: 1; height: 2px; align-items: center; }

/* ============================================================================
   ORG-CHART availability chips (on the reused .agent seats) + compact chip
   ========================================================================== */
.avail-chip.mini { font-size: 8.5px; padding: 3px 8px; gap: 5px; letter-spacing: 0.1em; }
.avail-chip.mini .d { width: 5px; height: 5px; }
.agent .a-avail { position: absolute; top: 16px; right: 16px; z-index: 2; }
.agent.leader .a-avail { top: 20px; right: 20px; }
@media (max-width: 480px) { .agent .a-avail { position: static; margin-bottom: 12px; align-self: flex-start; } }

/* ============================================================================
   EVIDENCE-STRIP — the thin "buying as a security or legal team?" boxed strip
   ========================================================================== */
.evidence-strip {
  margin-top: clamp(28px, 3.5vw, 44px); border: 1.5px solid var(--color-outline-variant);
  background: var(--cream-2); padding: 22px 26px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.sec.obsidian .evidence-strip { border-color: var(--ink-line); background: rgba(255,255,255,0.03); }
.evidence-strip .es-mark { width: 34px; height: 34px; flex: none; border: 1.5px solid var(--color-verification); color: var(--color-verification); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 15px; }
.evidence-strip .es-body { flex: 1; min-width: 260px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--color-on-surface-variant); }
.sec.obsidian .evidence-strip .es-body { color: rgba(255,255,255,0.72); }
.evidence-strip .es-body b { color: var(--color-on-surface); font-weight: 600; }
.sec.obsidian .evidence-strip .es-body b { color: #fff; }
.evidence-strip .es-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ============================================================================
   HOST-FRAME — the /mcp 3-beat demo (grounding -> draft -> Seal). Host chrome
   with tabs; beats reveal in sequence; the Seal landing is the screenshot.
   ========================================================================== */
.host-frame { margin-top: clamp(4px, 1vw, 12px); border: 1.5px solid var(--ink-line); background: var(--ink-800); box-shadow: 12px 12px 0 rgba(99,14,212,0.5); }
.hf-bar { display: flex; align-items: center; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--ink-line); background: rgba(0,0,0,0.22); }
.hf-dots { display: flex; gap: 6px; }
.hf-dots span { width: 10px; height: 10px; border: 1px solid var(--ink-line); }
.hf-tabs { display: flex; gap: 4px; }
.hf-tab { appearance: none; background: transparent; border: 1px solid transparent; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 6px 11px; transition: color 160ms var(--ease-standard), border-color 160ms; }
.hf-tab.on { color: #fff; border-color: var(--ink-line); background: rgba(255,255,255,0.05); }
.hf-tab.on::after { content: ""; }
.hf-conn { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #6fe0c4; display: inline-flex; align-items: center; gap: 7px; }
.hf-conn::before { content: "◇"; color: #6fe0c4; }
.hf-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.hf-msg { display: flex; gap: 12px; align-items: flex-start; }
.hf-msg .hf-av { flex: none; width: 26px; height: 26px; border: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,0.7); display: inline-flex; align-items: center; justify-content: center; }
.hf-msg.user .hf-av { border-color: rgba(168,119,240,0.5); color: #c6a2f7; }
.hf-msg .hf-tx { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: #fff; margin: 0; padding-top: 3px; }
.hf-beat { opacity: 0; transform: translateY(8px); transition: opacity 460ms var(--ease-standard), transform 460ms var(--ease-standard); }
.hf-beat.shown { opacity: 1; transform: none; }
.no-js .hf-beat { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hf-beat { opacity: 1 !important; transform: none !important; } }
/* beat 1 — grounding */
.hf-ground { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #6fe0c4; border: 1px solid rgba(0,184,148,0.4); background: rgba(0,184,148,0.06); padding: 9px 13px; }
.hf-ground .sp { width: 7px; height: 7px; background: #6fe0c4; }
/* beat 2 — draft */
.hf-draft { border-left: 2px solid rgba(255,255,255,0.2); padding: 4px 0 4px 16px; }
.hf-draft p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.62; color: rgba(255,255,255,0.86); margin: 0; }
.hf-draft .tick { font-family: var(--font-mono); font-size: 9px; color: #6fe0c4; vertical-align: super; margin-left: 2px; border: 1px solid rgba(0,184,148,0.5); padding: 0 3px; }
/* beat 3 — the Seal lands */
.hf-seal { border: 1.5px solid var(--color-verification); background: rgba(0,184,148,0.08); padding: 15px 18px; display: flex; align-items: center; gap: 16px; box-shadow: 4px 4px 0 rgba(0,184,148,0.28); }
.hf-seal.pulse { animation: sealPing 640ms var(--ease-standard); }
.hf-seal .hs-mark { flex: none; width: 40px; height: 40px; border: 1.5px solid var(--color-verification); color: #6fe0c4; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.hf-seal .hs-main { flex: 1; }
.hf-seal .hs-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6fe0c4; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hf-seal .hs-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 5px; }
.hf-seal .hs-verify { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #a877f0; white-space: nowrap; }
.hf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 13px 22px; border-top: 1px solid var(--ink-line); background: rgba(0,0,0,0.18); }
.hf-foot .sample-tag.on-dark { border-color: var(--ink-line); }
.hf-replay { appearance: none; cursor: pointer; background: transparent; border: 1.5px solid var(--ink-line); color: #fff; padding: 9px 14px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: border-color 160ms var(--ease-standard); }
.hf-replay:hover { border-color: var(--color-primary); }
.hf-replay .rico { display: inline-block; transition: transform 400ms var(--ease-standard); }
.hf-replay.spin .rico { transform: rotate(-360deg); }
.hf-step { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* three-host echo (zero-workflow section) */
.host-echo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(24px,3vw,36px); }
.host-mini { border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); }
.host-mini .hm-bar { padding: 9px 13px; border-bottom: 1px solid var(--receipt-line); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-surface-variant); }
.host-mini .hm-bar .d { width: 6px; height: 6px; background: var(--color-verification); }
.host-mini .hm-body { padding: 14px 15px; }
.host-mini .hm-a { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--color-on-surface); margin: 0 0 10px; }
.host-mini .hm-seal { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-verification); display: inline-flex; align-items: center; gap: 7px; }
.host-mini .hm-seal .sl { width: 14px; height: 14px; border: 1px solid var(--color-verification); font-size: 8px; display: inline-flex; align-items: center; justify-content: center; }
.host-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.host-chips .hc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--color-on-surface-variant); border: 1px solid var(--color-outline-variant); padding: 8px 12px; }
.sec.obsidian .host-chips .hc { color: rgba(255,255,255,0.7); border-color: var(--ink-line); }
.host-chips .hc.soon { color: var(--color-outline); border-style: dashed; }
.big-line { font-family: var(--font-headline); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.02em; line-height: 1.08; color: var(--color-obsidian); margin: 0; }
.sec.obsidian .big-line { color: #fff; }
.big-line .vio { color: var(--color-primary); } .sec.obsidian .big-line .vio { color: #b98cf5; }

/* ============================================================================
   CAPTURE — the idea-engine consent micro-demo (/mcp)
   ========================================================================== */
.capture { max-width: 560px; border: 1.5px solid var(--ink-line); background: var(--ink-800); box-shadow: 8px 8px 0 rgba(99,14,212,0.42); }
.capture .cp-head { padding: 12px 18px; border-bottom: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 9px; }
.capture .cp-head .d { width: 7px; height: 7px; background: #c6a2f7; }
.capture .cp-body { padding: 16px 18px; }
.capture .cp-idea { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0 0 14px; padding-left: 14px; border-left: 2px solid rgba(168,119,240,0.5); }
.capture .cp-offer { font-family: var(--font-body); font-size: 13px; color: #fff; margin: 0 0 14px; }
.capture .cp-actions { display: flex; gap: 10px; }
.capture .cp-btn { appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 10px 16px; border: 1.5px solid var(--color-primary); background: var(--color-primary); color: #fff; transition: background 150ms var(--ease-standard); }
.capture .cp-btn.ghost { background: transparent; border-color: var(--ink-line); color: rgba(255,255,255,0.7); }
.capture .cp-btn:hover { background: var(--color-primary-variant); }
.capture .cp-btn.ghost:hover { background: rgba(255,255,255,0.05); }
.capture .cp-done { display: none; align-items: center; gap: 12px; padding: 4px 0; }
.capture.kept .cp-actions, .capture.kept .cp-offer { display: none; }
.capture.kept .cp-done { display: flex; }
.capture .cp-done .chk { width: 26px; height: 26px; flex: none; border: 1px solid var(--color-verification); color: var(--color-verification); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.capture .cp-done .ct { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #6fe0c4; }
.capture .cp-foot { padding: 12px 18px; border-top: 1px solid var(--ink-line); display: flex; gap: 18px; flex-wrap: wrap; }
.capture .cp-consent { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 7px; }
.capture .cp-consent::before { content: ""; width: 5px; height: 5px; background: var(--color-verification); }

/* ============================================================================
   SEAL — the Assay Seal standalone + the verify receipt-page mock (/mcp #seal)
   ========================================================================== */
.seal-showcase { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.seal-standalone { border: 1.5px solid var(--color-verification); background: var(--ink-800); box-shadow: 8px 8px 0 rgba(0,184,148,0.35); padding: 22px; max-width: 320px; margin: 0 auto; }
.seal-standalone .ss-ring { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-verification); text-align: center; margin-bottom: 14px; }
.seal-standalone .ss-mark { width: 54px; height: 54px; margin: 0 auto 14px; border: 1.5px solid var(--color-verification); color: #6fe0c4; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.seal-standalone .ss-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink-line-soft); }
.seal-standalone .ss-row:last-of-type { border-bottom: none; }
.seal-standalone .ss-k { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.seal-standalone .ss-v { font-family: var(--font-mono); font-size: 10px; color: #fff; text-align: right; }
.seal-standalone .ss-v.grn { color: #6fe0c4; } .seal-standalone .ss-v.vio { color: #a877f0; }
.receipt-page { border: 1.5px solid var(--ink-line); background: rgba(255,255,255,0.028); }
.receipt-page .rp-bar { padding: 10px 16px; border-bottom: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receipt-page .rp-url { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: #6fe0c4; display: inline-flex; align-items: center; gap: 8px; }
.receipt-page .rp-url::before { content: "🔒"; filter: grayscale(1) opacity(0.7); font-size: 10px; }
.receipt-page .rp-eg { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-amber-truth); border: 1px solid var(--color-amber-truth); padding: 3px 8px; }
.receipt-page .rp-body { padding: 20px 22px; }
.receipt-page .rp-h { font-family: var(--font-headline); font-size: 19px; font-weight: 500; color: #fff; letter-spacing: -0.014em; margin: 0 0 4px; }
.receipt-page .rp-claim { font-family: var(--font-body); font-size: 13.5px; color: rgba(255,255,255,0.8); margin: 0 0 16px; }
.receipt-page .rp-row { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ink-line-soft); }
.receipt-page .rp-rk { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.receipt-page .rp-rv { font-family: var(--font-mono); font-size: 11px; color: #fff; }
.receipt-page .rp-rv.grn { color: #6fe0c4; }

/* ============================================================================
   SLASH-ROW + SETUP-PANEL — house rules chips + the real copy-paste setup
   ========================================================================== */
.slash-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.slash { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: #c6a2f7; border: 1px solid rgba(168,119,240,0.5); background: rgba(99,14,212,0.12); padding: 9px 13px; }
.sec.cream .slash { color: var(--color-primary); border-color: var(--color-outline-variant); background: var(--color-primary-soft); }
.setup-panel { margin-top: clamp(24px,3vw,36px); border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); }
.sec.obsidian .setup-panel { border-color: var(--ink-line); background: var(--ink-800); box-shadow: 8px 8px 0 rgba(99,14,212,0.4); }
.setup-panel .sp-tabs { display: flex; flex-wrap: wrap; border-bottom: 1.5px solid var(--color-obsidian); }
.sec.obsidian .setup-panel .sp-tabs { border-color: var(--ink-line); }
.setup-panel .sp-tab { appearance: none; cursor: pointer; background: transparent; border: none; border-right: 1px solid var(--receipt-line); padding: 11px 15px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-surface-variant); }
.sec.obsidian .setup-panel .sp-tab { border-color: var(--ink-line); color: rgba(255,255,255,0.6); }
.setup-panel .sp-tab.on { background: var(--color-obsidian); color: #fff; }
.sec.obsidian .setup-panel .sp-tab.on { background: var(--color-primary); }
.setup-panel .sp-code { padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--color-on-surface); overflow-x: auto; }
.sec.obsidian .setup-panel .sp-code { color: rgba(255,255,255,0.85); }
.setup-panel .sp-code .cmt { color: var(--color-outline); }
.sec.obsidian .setup-panel .sp-code .cmt { color: rgba(255,255,255,0.42); }
.setup-panel .sp-code .key { color: var(--color-primary); }
.sec.obsidian .setup-panel .sp-code .key { color: #c6a2f7; }
.setup-panel .sp-code .str { color: var(--color-verification); }
.setup-panel .sp-foot { padding: 12px 20px; border-top: 1px solid var(--receipt-line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sec.obsidian .setup-panel .sp-foot { border-color: var(--ink-line); }
.copy-btn { appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); border: 1px solid var(--color-primary); background: transparent; padding: 7px 12px; transition: background 150ms; }
.copy-btn:hover { background: var(--color-primary-soft); }
.sec.obsidian .copy-btn { color: #c6a2f7; border-color: rgba(168,119,240,0.5); }
.copy-btn.done { color: var(--color-verification); border-color: var(--color-verification); }

/* ============================================================================
   SECURITY — status row (SOC 2 leads, honest), compliance + vetting, packet
   ========================================================================== */
.status-row { margin-top: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink-line); }
.status-stat { padding: 22px 22px 24px; border-right: 1px solid var(--ink-line-soft); }
.status-stat:last-child { border-right: none; }
.status-stat .st-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.status-stat .st-lbl .d { width: 6px; height: 6px; background: var(--color-verification); }
.status-stat.progress .st-lbl .d { background: var(--color-amber-truth); }
.status-stat .st-val { font-family: var(--font-headline); font-size: clamp(20px, 2vw, 26px); font-weight: 500; color: #fff; letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 8px; }
.status-stat .st-sub { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.6); }
.status-stat .st-sub .amber { color: var(--color-amber-truth); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.compliance-cards { margin-top: clamp(28px,3.5vw,44px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.compliance { border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); padding: 22px 20px; display: flex; flex-direction: column; }
.sec.obsidian .compliance { border-color: var(--ink-line); background: rgba(255,255,255,0.028); box-shadow: none; }
.compliance .cm-name { font-family: var(--font-headline); font-size: 19px; font-weight: 500; color: var(--color-obsidian); letter-spacing: -0.014em; margin: 0 0 12px; }
.sec.obsidian .compliance .cm-name { color: #fff; }
.compliance .cm-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; align-self: flex-start; margin-bottom: 14px; }
.compliance .cm-status.progress { color: var(--color-amber-truth); }
.compliance .cm-status.ready { color: var(--color-verification); }
.compliance .cm-status.mapped { color: var(--color-primary); }
.sec.obsidian .compliance .cm-status.mapped { color: #c6a2f7; }
.compliance .cm-body { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--color-on-surface-variant); margin: 0; }
.sec.obsidian .compliance .cm-body { color: rgba(255,255,255,0.66); }

.vet-grid { margin-top: clamp(28px,3.5vw,44px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--receipt-line); border-bottom: none; }
.sec.obsidian .vet-grid { border-color: var(--ink-line); }
.vet-card { padding: 24px 26px; border-bottom: 1px solid var(--receipt-line); border-right: 1px solid var(--receipt-line); }
.sec.obsidian .vet-card { border-color: var(--ink-line); }
.vet-card:nth-child(2n) { border-right: none; }
.vet-card .vc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-verification); margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.vet-card .vc-k .chk { width: 16px; height: 16px; flex: none; border: 1px solid var(--color-verification); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.vet-card .vc-h { font-family: var(--font-headline); font-size: 18px; font-weight: 500; color: var(--color-obsidian); letter-spacing: -0.012em; margin: 0 0 8px; }
.sec.obsidian .vet-card .vc-h { color: #fff; }
.vet-card .vc-b { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--color-on-surface-variant); margin: 0; }
.sec.obsidian .vet-card .vc-b { color: rgba(255,255,255,0.66); }
.vet-card .vc-b code { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-primary); background: var(--color-primary-soft); padding: 1px 5px; }
.sec.obsidian .vet-card .vc-b code { color: #c6a2f7; background: rgba(99,14,212,0.18); }

/* THE PACKET — the procurement dossier as one tangible, sealed object (signature) */
.packet-grid { margin-top: clamp(30px,4vw,52px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3.5vw,48px); align-items: center; }
.packet {
  position: relative; border: 1.5px solid var(--color-verification); background: var(--ink-800);
  box-shadow: 12px 12px 0 rgba(0,184,148,0.35); padding: 0;
}
.packet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(180deg, rgba(0,184,148,0.5) 0 8px, transparent 8px 16px); }
.packet .pk-head { padding: 20px 26px 18px 30px; border-bottom: 1px solid var(--ink-line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.packet .pk-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6fe0c4; margin-bottom: 8px; }
.packet .pk-name { font-family: var(--font-headline); font-size: 21px; font-weight: 500; color: #fff; letter-spacing: -0.015em; line-height: 1.14; margin: 0; max-width: 320px; }
.packet .pk-seal { flex: none; width: 58px; height: 58px; border: 1.5px solid var(--color-verification); color: #6fe0c4; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); text-align: center; line-height: 1.1; }
.packet .pk-seal .ps-glyph { font-size: 20px; }
.packet .pk-seal .ps-tx { font-size: 6.5px; letter-spacing: 0.1em; margin-top: 2px; }
.packet .pk-list { padding: 8px 30px 12px; }
.packet .pk-item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ink-line-soft); align-items: baseline; }
.packet .pk-item:last-child { border-bottom: none; }
.packet .pk-item .pk-ic { width: 22px; height: 26px; border: 1px solid var(--ink-line); position: relative; }
.packet .pk-item .pk-ic::after { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; height: 1px; background: rgba(255,255,255,0.25); box-shadow: 0 4px 0 rgba(255,255,255,0.18), 0 8px 0 rgba(255,255,255,0.12); }
.packet .pk-item .pk-doc { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: #fff; font-weight: 500; }
.packet .pk-item .pk-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 3px; }
.packet .pk-note .amber { color: var(--color-amber-truth); }
.packet .pk-foot { padding: 16px 30px; border-top: 1px solid var(--ink-line); background: rgba(0,0,0,0.2); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.packet-side .ps-h { margin-bottom: 18px; }

/* DISAMBIGUATION — Trust Center (product) vs this page (our own house) */
.disambig { margin-top: 22px; border: 1.5px solid var(--color-outline-variant); background: var(--cream-2); padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.disambig .da-q { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-outline); flex: none; }
.disambig .da-body { flex: 1; min-width: 240px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--color-on-surface-variant); }
.disambig .da-body b { color: var(--color-on-surface); font-weight: 600; }
.disambig .da-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); white-space: nowrap; }
.disambig.on-dark { border-color: var(--ink-line); background: rgba(255,255,255,0.03); }
.disambig.on-dark .da-q { color: rgba(255,255,255,0.5); }
.disambig.on-dark .da-body { color: rgba(255,255,255,0.7); }
.disambig.on-dark .da-body b { color: #fff; }
.disambig.on-dark .da-cta { color: #a877f0; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .seal-showcase { grid-template-columns: 1fr; gap: 32px; }
  .packet-grid { grid-template-columns: 1fr; gap: 32px; }
  .status-row { grid-template-columns: repeat(2, 1fr); }
  .status-stat:nth-child(2) { border-right: none; }
  .status-stat:nth-child(1), .status-stat:nth-child(2) { border-bottom: 1px solid var(--ink-line-soft); }
  .compliance-cards { grid-template-columns: repeat(2, 1fr); }
  .host-echo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .arch-band { grid-template-columns: 1fr; gap: 8px; }
  .vet-grid { grid-template-columns: 1fr; }
  .vet-card { border-right: none; }
  .status-row { grid-template-columns: 1fr; }
  .status-stat { border-right: none; border-bottom: 1px solid var(--ink-line-soft); }
  .compliance-cards { grid-template-columns: 1fr; }
  .evidence-strip, .disambig { gap: 12px; }
}