/* ============================================================================
   Assay — AGENT PAGES · part 2  (LEADER premium variant + shared new components)
   Loaded AFTER agent.css. Adds only what the earlier three doer pages didn't
   need: the LEADER treatment (AI CMO, AI Legal) and the components their
   signature demos require. Same system, same tokens, same craft — leaders are
   a heavier VARIANT of the one template, never a second design language.

     · .a-hero.leader     heavier hero (eyebrow line + LEADER badge + proof strip)
     · .proof-strip       the leader hero's mono proof row (3 dividers)
     · .statement         a quiet full-width serif statement band (education beats)
     · .rcards / .rcard   an even card row (receipts, trust-center cards)
     · .faq               native <details> accordion (FAQPage GEO surface)
     · .beatcard          the AI Legal demo beats (the veto, then the lifespan)
     · .tc                the Trust Center, operated (tab rail + live queue)
     · .proposal/.ripline the AI CMO Promotions Inbox (propose → promote → ripple)
     · .fanout            the AI CMO which-message-wins node
   ========================================================================== */

/* ============================================================================
   AVAILABILITY — the preview variant (design-partner doers)
   ========================================================================== */
.avail-chip.preview { border-color: #7db1ff; color: #7db1ff; background: rgba(59,130,246,0.10); }
.avail-chip.preview .d { background: #7db1ff; }

/* ============================================================================
   LEADER HERO — the premium variant of the shared hero anatomy
   ========================================================================== */
.a-hero.leader {
  padding-top: clamp(56px, 6.5vw, 104px);
  background:
    radial-gradient(1200px 680px at 84% -10%, rgba(99,14,212,0.34), transparent 60%),
    radial-gradient(720px 520px at 4% 112%, rgba(99,14,212,0.12), transparent 62%),
    var(--ink-900);
}
.a-hero.leader::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent 60%);
  z-index: 2;
}
/* the LEADER badge — a filled mono pill in the kicker row */
.leader-badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  background: var(--color-primary); border: 1.5px solid var(--color-primary);
  padding: 5px 11px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.leader-badge::before { content: ""; width: 5px; height: 5px; background: #c6a2f7; }
/* AI Legal reads governance-green (echoes the homepage legal-leader card) */
.a-kicker.legal .a-mark { border-color: var(--color-verification); color: #4fd6b6; }
.leader-badge.legal { background: var(--color-verification); border-color: var(--color-verification); color: #06231c; }
.leader-badge.legal::before { background: #06231c; }

/* the leader eyebrow line — the ratified positioning sentence above the H1 */
.a-eyebrow {
  font-family: var(--font-headline); font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.55vw, 20px); line-height: 1.4; letter-spacing: -0.01em;
  color: #c6a2f7; margin: 0 0 18px; max-width: 560px;
}
.a-eyebrow.legal { color: #6fe0c4; }
.a-eyebrow.mono {
  font-family: var(--font-mono); font-style: normal; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* leader H1 runs a touch larger and stacks in beats */
.a-hero.leader h1.a-title { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.0; }
.a-title .beat { display: block; }
.a-title .beat.human { color: #b98cf5; }

/* the proof strip under the CTA row — the leader's mono receipt of proof */
.proof-strip {
  margin-top: 30px; display: flex; flex-wrap: wrap;
  border: 1px solid var(--ink-line); width: fit-content; max-width: 100%;
}
.proof-strip .ps-item {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.64); padding: 12px 18px; border-right: 1px solid var(--ink-line);
  display: flex; align-items: center; gap: 9px;
}
.proof-strip .ps-item:last-child { border-right: none; }
.proof-strip .ps-item::before { content: ""; width: 5px; height: 5px; background: var(--color-verification); flex: none; }

/* leader signature visual carries a heavier offset */
.sig.leader { box-shadow: 12px 12px 0 rgba(99,14,212,0.5); }
.sig.leader.legal { box-shadow: 12px 12px 0 rgba(0,184,148,0.42); border-color: rgba(0,184,148,0.4); }

/* ============================================================================
   STATEMENT BAND — a quiet full-width serif statement (education / category)
   ========================================================================== */
.statement {
  margin-top: clamp(38px, 4.5vw, 60px); border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line); padding: clamp(36px, 4.5vw, 60px) 0;
}
.sec.cream .statement { border-color: var(--receipt-line); }
.statement .st-lead {
  font-family: var(--font-headline); font-weight: 400; font-size: clamp(24px, 2.9vw, 39px);
  line-height: 1.22; letter-spacing: -0.018em; color: #fff; max-width: 1000px; margin: 0;
}
.sec.cream .statement .st-lead { color: var(--color-on-surface); }
.statement .st-lead b { color: #b98cf5; font-weight: 500; }
.sec.cream .statement .st-lead b { color: var(--color-primary); }
.statement .st-sub {
  margin: 20px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.66); max-width: 700px;
}
.sec.cream .statement .st-sub { color: var(--color-on-surface-variant); }
.statement .st-sub b { color: #fff; font-weight: 600; }
.sec.cream .statement .st-sub b { color: var(--color-on-surface); }
.statement.big .st-lead { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.14; letter-spacing: -0.022em; }
.statement.big .st-lead .frag { color: #6fe0c4; }
.sec.obsidian .statement.big .st-lead .frag { color: #6fe0c4; }

/* ============================================================================
   RCARDS — an even card row (Trust-Center cards, RevOps receipts)
   ========================================================================== */
.rcards { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rcards.three { grid-template-columns: repeat(3, 1fr); }
.rcard {
  border: 1.5px solid var(--ink-line); background: rgba(255,255,255,0.028); padding: 22px 20px 20px;
  display: flex; flex-direction: column;
}
.sec.cream .rcard { border-color: var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); }
.rcard .rc-ico {
  width: 30px; height: 30px; flex: none; border: 1px solid var(--ink-line); margin-bottom: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: #c6a2f7;
}
.sec.cream .rcard .rc-ico { border-color: var(--color-outline-variant); color: var(--color-primary); }
.rcard.grn .rc-ico { border-color: rgba(0,184,148,0.5); color: #4fd6b6; }
.sec.cream .rcard.grn .rc-ico { border-color: rgba(0,184,148,0.5); color: var(--color-verification); }
.rcard .rc-h {
  font-family: var(--font-headline); font-size: 18.5px; font-weight: 500; letter-spacing: -0.012em;
  line-height: 1.16; color: #fff; margin: 0 0 9px;
}
.sec.cream .rcard .rc-h { color: var(--color-obsidian); }
.rcard .rc-b { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.66); margin: 0; }
.sec.cream .rcard .rc-b { color: var(--color-on-surface-variant); }
.rcard .rc-b b { color: #fff; font-weight: 600; }
.sec.cream .rcard .rc-b b { color: var(--color-on-surface); }
.rcard .rc-tag {
  margin-top: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-verification); display: inline-flex; align-items: center; gap: 7px;
}
.rcard .rc-tag::before { content: ""; width: 5px; height: 5px; background: var(--color-verification); }

/* ============================================================================
   FAQ — native <details> accordion (also the FAQPage schema surface)
   ========================================================================== */
.faq { margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--receipt-line); max-width: 900px; }
.sec.obsidian .faq { border-color: var(--ink-line); }
.faq-item { border-bottom: 1px solid var(--receipt-line); }
.sec.obsidian .faq-item { border-color: var(--ink-line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
  font-family: var(--font-headline); font-size: clamp(18px, 1.75vw, 22px); font-weight: 500;
  letter-spacing: -0.014em; color: var(--color-obsidian);
}
.sec.obsidian .faq-item summary { color: #fff; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .fq-mk {
  font-family: var(--font-mono); font-size: 20px; line-height: 1; color: var(--color-primary);
  flex: none; transition: transform 220ms var(--ease-standard);
}
.sec.obsidian .faq-item summary .fq-mk { color: #b98cf5; }
.faq-item[open] summary .fq-mk { transform: rotate(45deg); }
.faq-a { padding: 0 0 24px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.62; color: var(--color-on-surface-variant); max-width: 780px; margin: 0; }
.sec.obsidian .faq-a { color: rgba(255,255,255,0.68); }
.faq-a b { color: var(--color-on-surface); font-weight: 600; }
.sec.obsidian .faq-a b { color: #fff; }

/* ============================================================================
   BEATCARD — the AI Legal signature demo (the veto, then the lifespan)
   Dark card, violet hard shadow, rows reveal top-to-bottom, receipt lands last.
   ========================================================================== */
.gate-demo { margin-top: clamp(34px, 4.5vw, 52px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.beatcard {
  border: 1.5px solid var(--color-primary); background: var(--ink-800);
  box-shadow: 8px 8px 0 rgba(99,14,212,0.42); display: flex; flex-direction: column;
}
.beatcard.lifespan { border-color: var(--ink-line); box-shadow: 8px 8px 0 rgba(0,184,148,0.3); }
.beatcard .bc-head {
  padding: 13px 20px; border-bottom: 1px solid var(--ink-line); display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.beatcard .bc-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #c6a2f7; display: inline-flex; align-items: center; gap: 9px; }
.beatcard.lifespan .bc-eyebrow { color: #6fe0c4; }
.beatcard .bc-eyebrow .di { width: 7px; height: 7px; background: currentColor; }
.beatcard .bc-verdict {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; color: var(--color-error);
}
.beatcard.lifespan .bc-verdict { color: var(--color-verification); }
.beatcard .bc-body { padding: 6px 20px 8px; }
.beatcard .bc-row {
  padding: 12px 0; border-bottom: 1px solid var(--ink-line-soft);
  display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: start;
  opacity: 0; transform: translateY(7px); transition: opacity 380ms var(--ease-standard), transform 380ms var(--ease-standard);
}
.beatcard .bc-row:last-child { border-bottom: none; }
.beatcard .bc-row.shown { opacity: 1; transform: none; }
.beatcard .bc-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); padding-top: 2px; }
.beatcard .bc-v { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.beatcard .bc-v b { color: #fff; font-weight: 600; }
.beatcard .bc-v .sentence { font-family: var(--font-headline); font-size: 16px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.beatcard .bc-v .flag { text-decoration: line-through; text-decoration-color: var(--color-error); text-decoration-thickness: 2px; color: #ff9a9a; }
.beatcard .bc-v .grn { color: #6fe0c4; }
.beatcard .bc-v .vio { color: #c6a2f7; }
.beatcard .bc-receipt {
  margin: 4px 20px 20px; padding: 12px 16px; background: var(--color-obsidian); border: 1px solid var(--ink-line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  opacity: 0; transform: translateY(7px); transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.beatcard .bc-receipt.shown { opacity: 1; transform: none; }
.beatcard .bc-receipt.pulse { animation: sealPing 620ms var(--ease-standard); }
.beatcard .bc-receipt .rc-chk { width: 18px; height: 18px; border: 1px solid var(--color-verification); color: var(--color-verification); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.beatcard .bc-receipt .rc-tx { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-verification); }
.beatcard .bc-receipt .rc-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-left: auto; }
/* static end-state for no-js / reduced-motion */
.no-js .beatcard .bc-row, .no-js .beatcard .bc-receipt { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .beatcard .bc-row, .beatcard .bc-receipt { opacity: 1 !important; transform: none !important; }
}
.gate-close { margin-top: 26px; }
.gate-close .gc-line { font-family: var(--font-quote); font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.32; color: #fff; max-width: 860px; margin: 0; letter-spacing: 0.005em; }
.gate-close .gc-line b { color: #b98cf5; font-style: normal; font-weight: 500; }
.gate-link { margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #b98cf5; display: inline-flex; align-items: center; gap: 8px; }
.gate-link .ar { transition: transform var(--motion-fast) var(--ease-standard); }
.gate-link:hover { text-decoration: none; }
.gate-link:hover .ar { transform: translateX(4px); }

/* ============================================================================
   TRUST CENTER, OPERATED — tab rail + a live queue (never a badge wall)
   ========================================================================== */
.tc { margin-top: clamp(28px, 3.5vw, 44px); border: 1.5px solid var(--color-primary); background: var(--ink-800); box-shadow: 8px 8px 0 rgba(99,14,212,0.42); display: grid; grid-template-columns: 210px 1fr; }
.tc-rail { border-right: 1px solid var(--ink-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.tc-rail .tc-rl-cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.38); padding: 4px 12px 10px; }
.tc-tab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 11px 12px; border-left: 2px solid transparent; display: flex; align-items: center; gap: 9px; }
.tc-tab .tt-d { width: 5px; height: 5px; background: rgba(255,255,255,0.3); flex: none; }
.tc-tab.on { color: #fff; background: rgba(99,14,212,0.2); border-left-color: var(--color-primary); }
.tc-tab.on .tt-d { background: var(--color-verification); }
.tc-panel { padding: 20px 22px 22px; }
.tc-ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.tc-ph .live { color: var(--color-verification); display: inline-flex; align-items: center; gap: 7px; }
.tc-ph .live .d { width: 6px; height: 6px; background: var(--color-verification); }
.tc-row { padding: 15px 0; border-bottom: 1px solid var(--ink-line-soft); display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; }
.tc-row:last-child { border-bottom: none; }
.tc-row .tr-item { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.9); }
.tc-row .tr-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 4px; }
.tc-state { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; white-space: nowrap; }
.tc-state.awaiting { color: #c6a2f7; }
.tc-state.approved { color: var(--color-verification); }
.tc-state.review { color: var(--color-amber-truth); }
.tc-row.clearing .tc-state { transition: color 500ms var(--ease-standard); }

/* ============================================================================
   AI CMO — PROMOTIONS INBOX (propose → promote → the 48h ripple)
   Reuses .calib-card + .promote from home2.css; adds the 3-way action + ripple.
   ========================================================================== */
.promote .pm-actions { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.promote .pm-btn2 { appearance: none; cursor: pointer; border: 1.5px solid var(--color-outline-variant); background: #fff; color: var(--color-on-surface-variant); padding: 13px 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; transition: background 150ms var(--ease-standard), color 150ms; }
.promote .pm-btn2:hover { background: var(--cream-2); color: var(--color-obsidian); }
.promote.parked .pm-note, .promote.killed .pm-note { display: block; }
.promote .pm-note { display: none; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--color-on-surface-variant); border-top: 1px solid var(--receipt-line); padding-top: 12px; }
.ripline { margin-top: 16px; }
.ripline .rl-cap { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-surface-variant); margin-bottom: 10px; }
.ripline .rl-step { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--receipt-line); opacity: 0.32; transition: opacity 300ms var(--ease-standard); }
.ripline .rl-step:last-of-type { border-bottom: none; }
.ripline .rl-step.lit { opacity: 1; }
.ripline .rl-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-primary); }
.ripline .rl-tx { font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--color-on-surface); }
.ripline .rl-tx b { color: var(--color-primary); font-weight: 600; }
.no-js .ripline .rl-step, .no-js .promote .pm-progress { opacity: 1 !important; }

/* ============================================================================
   FANOUT — the AI CMO "which message wins" node (one message, many touches)
   ========================================================================== */
.fanout { margin-top: clamp(28px, 3.5vw, 44px); border: 1.5px solid var(--ink-line); background: rgba(255,255,255,0.028); padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.4fr) minmax(0,0.7fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.fo-node { border: 1.5px solid var(--color-primary); background: rgba(99,14,212,0.16); padding: 16px; }
.fo-node .fn-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #c6a2f7; margin-bottom: 9px; }
.fo-node .fn-msg { font-family: var(--font-headline); font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.012em; line-height: 1.2; }
.fo-node .fn-id { margin-top: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); border-top: 1px solid var(--ink-line); padding-top: 9px; }
.fo-mid { display: flex; flex-direction: column; gap: 10px; }
.fo-touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fo-touch { border: 1px solid var(--ink-line); background: rgba(255,255,255,0.02); padding: 9px 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); display: flex; flex-direction: column; gap: 4px; }
.fo-touch .ft-k { color: rgba(255,255,255,0.42); }
.fo-touch .ft-v { color: rgba(255,255,255,0.82); font-size: 10px; }
.fo-cap { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); text-align: center; }
.fo-meter { text-align: center; border-left: 1px solid var(--ink-line); padding-left: clamp(12px, 2vw, 28px); }
.fo-meter .fm-big { font-family: var(--font-headline); font-size: clamp(34px, 4vw, 52px); font-weight: 500; color: var(--color-verification); letter-spacing: -0.02em; line-height: 1; }
.fo-meter .fm-lbl { margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .gate-demo { grid-template-columns: 1fr; }
  .tc { grid-template-columns: 1fr; }
  .tc-rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--ink-line); }
  .tc-rail .tc-rl-cap { width: 100%; padding-bottom: 4px; }
  .rcards, .rcards.three { grid-template-columns: repeat(2, 1fr); }
  .fanout { grid-template-columns: 1fr; gap: 22px; }
  .fo-meter { border-left: none; border-top: 1px solid var(--ink-line); padding-left: 0; padding-top: 18px; }
  .proof-strip { width: 100%; }
}
@media (max-width: 720px) {
  .promote .pm-actions { grid-template-columns: 1fr; }
  .proof-strip .ps-item { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--ink-line); }
  .proof-strip .ps-item:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .rcards, .rcards.three { grid-template-columns: 1fr; }
  .beatcard .bc-row { grid-template-columns: 1fr; gap: 5px; }
  .fo-touches { grid-template-columns: repeat(2, 1fr); }
}