/* ==========================================================================
   Zetect — homepage and legal-page additions.

   Loaded AFTER site.css by the pages that need it, so the rest of the site is
   untouched. Everything here is either a new component or a v2-scoped
   variation; nothing redefines a shared class.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.v2-hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(760px 420px at 12% -10%, rgba(53,227,199,.16), transparent 62%),
    radial-gradient(680px 400px at 88% 0%, rgba(139,124,246,.14), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.v2-hero-inner { max-width: 880px; }
.v2-hero h1 { margin-bottom: 1.3rem; }
.v2-hero .lede { max-width: 58ch; }
.v2-hero .eyebrow { margin-bottom: 1.1rem; }

.v2-trust {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
}
.v2-trust li {
  position: relative; padding-left: 1.5rem;
  font-size: .92rem; font-weight: 500; color: var(--body-text);
}
.v2-trust li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--am);
}

/* ── Logo strip ──────────────────────────────────────────────────────── */
.v2-logos { padding: clamp(2.2rem, 4vw, 3rem) 0; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.v2-logos-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 1.2rem;
}
.v2-logo-row { margin-bottom: 1.2rem; }
.v2-logo-row li { background: #fff; }
.v2-logos-more { margin: 0; }

/* ── Problem cards ───────────────────────────────────────────────────── */
.v2-problems { gap: 1.1rem; }
.v2-problem {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem; border-top: 3px solid var(--pam);
}
.v2-problem-n {
  display: block; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; color: var(--pam); margin-bottom: .7rem;
}
.v2-problem h3 { font-size: 1.05rem; margin: 0 0 .5rem; letter-spacing: -.012em; }
.v2-problem p { margin: 0; font-size: .92rem; line-height: 1.6; }

/* ── Platform figure ─────────────────────────────────────────────────── */
.v2-figure {
  margin: 0; padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r);
}
.v2-figure svg { display: block; width: 100%; height: auto; font-family: var(--sans); }

.v2-figure .v2-src rect, .v2-figure .v2-chip rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-figure .v2-src text { font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.v2-figure .v2-wire path { fill: none; stroke: #C9D3E2; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v2-figure .v2-fabric { fill: rgba(14,158,136,.045); stroke: rgba(14,158,136,.22); stroke-width: 1; }
.v2-figure .v2-fabric-l {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; fill: var(--am);
}
.v2-figure .v2-chip-t { font-size: 14px; font-weight: 700; fill: var(--ink); }
.v2-figure .v2-chip-s { font-size: 11.5px; fill: var(--muted); }
.v2-figure .v2-dot.am { fill: var(--am); }
.v2-figure .v2-dot.iga { fill: var(--iga); }
.v2-figure .v2-dot.pam { fill: var(--pam); }
.v2-figure .v2-mod rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-figure .v2-mod rect.am  { stroke: rgba(14,158,136,.35); }
.v2-figure .v2-mod rect.iga { stroke: rgba(93,75,214,.32); }
.v2-figure .v2-mod rect.pam { stroke: rgba(181,114,12,.35); }
.v2-figure .v2-rule.am  { fill: var(--am); }
.v2-figure .v2-rule.iga { fill: var(--iga); }
.v2-figure .v2-rule.pam { fill: var(--pam); }
.v2-figure .v2-mod-t { font-size: 15px; font-weight: 700; fill: var(--ink); letter-spacing: -.01em; }
.v2-figure .v2-mod-i text { font-size: 12.5px; fill: var(--body-text); }

/* ── Pillar cards ────────────────────────────────────────────────────── */
.v2-pillar {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.v2-pillar:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.v2-pillar.am:hover  { border-color: rgba(14,158,136,.45); }
.v2-pillar.iga:hover { border-color: rgba(93,75,214,.4); }
.v2-pillar.pam:hover { border-color: rgba(181,114,12,.45); }
.v2-pillar h3 { font-size: 1.25rem; margin: 1rem 0 .55rem; letter-spacing: -.018em; }
.v2-pillar > p { margin: 0; font-size: .95rem; line-height: 1.6; }
.v2-pillar .ticks { margin: 1.2rem 0 1.5rem; }
.v2-pillar .ticks li { font-size: .92rem; }
.v2-pillar .arrow-link { margin-top: auto; }

/* ── Outcomes band (dark) ────────────────────────────────────────────── */
.v2-outcomes {
  background:
    radial-gradient(800px 380px at 50% 0%, rgba(53,227,199,.13), transparent 65%),
    var(--ink);
  color: #fff; padding: clamp(3.2rem, 7vw, 5rem) 0;
  border-block: 1px solid var(--ink);
}
.v2-outcomes .eyebrow.am { color: var(--am-bright); }
.v2-outcomes .stats-h { color: #fff; max-width: 24ch; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.v2-outcomes .stat-l { color: #B9C2D4; }
.v2-outcomes .stat-icon { color: var(--am-bright); }

/* ── CTA doors ───────────────────────────────────────────────────────── */
.v2-doors { margin: clamp(2.2rem, 5vw, 3rem) 0 0; text-align: left; }
.v2-door {
  display: flex; flex-direction: column; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r); padding: 1.5rem 1.4rem;
  transition: background .18s, border-color .18s, transform .18s;
}
.v2-door:hover {
  text-decoration: none; background: rgba(255,255,255,.08);
  border-color: var(--am-bright); transform: translateY(-2px);
}
.v2-door-i {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-content: center;
  background: rgba(53,227,199,.12); color: var(--am-bright); margin-bottom: .9rem;
}
.v2-door-i svg { width: 20px; height: 20px; }
.v2-door h3 { color: #fff; font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.012em; }
.v2-door p { color: #B9C2D4; font-size: .9rem; line-height: 1.55; margin: 0; max-width: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .v2-problems { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .v2-problems { grid-template-columns: 1fr; }
  .v2-trust { gap: .5rem 1.2rem; }
  .v2-figure { padding: 1rem .8rem; }
}

/* The shared `.cta-final p` rule zeroes the top margin; restore breathing room
   under the door cards. */
.cta-final .v2-doors + .cta-contact { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* ── On-page contents ────────────────────────────────────────────────
   A second, page-level nav under the site header. It tells a first-time
   reader how long the page is and lets them jump — the main reason a long
   page feels navigable rather than endless. */
.v2-toc {
  position: sticky; top: 72px; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.v2-toc-inner { display: flex; align-items: center; gap: 1.2rem; height: 52px; }
.v2-toc-label {
  flex: 0 0 auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.v2-toc ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.v2-toc ul::-webkit-scrollbar { display: none; }
.v2-toc a {
  display: block; white-space: nowrap; padding: .25rem 0;
  font-size: .87rem; font-weight: 500; color: var(--body-text);
  border-bottom: 2px solid transparent;
}
.v2-toc a:hover { color: var(--ink); text-decoration: none; }
.v2-toc a.here { color: var(--am); border-bottom-color: var(--am); }

/* Anchor offset has to clear both bars once the contents nav is sticky. */
html:has(.v2-toc) { scroll-padding-top: 136px; }

/* ── Long-form prose ─────────────────────────────────────────────────── */
.v2-prose { max-width: 68ch; }
.v2-prose p { margin: 0 0 1.15rem; font-size: 1.02rem; line-height: 1.72; }
.v2-prose p:last-child { margin-bottom: 0; }
.v2-prose strong { color: var(--ink); font-weight: 650; }

/* ── Key-takeaway callout ────────────────────────────────────────────── */
.v2-key {
  margin-top: clamp(1.8rem, 4vw, 2.6rem); max-width: 72ch;
  background: rgba(14,158,136,.055); border-left: 3px solid var(--am);
  border-radius: 0 var(--r) var(--r) 0; padding: 1.2rem 1.5rem;
}
.v2-key-l {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--am); font-weight: 700; margin: 0 0 .45rem;
}
.v2-key p:last-child { margin: 0; font-size: .97rem; line-height: 1.65; }

/* ── Comparison table ────────────────────────────────────────────────── */
.v2-compare { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.v2-compare .mapping th[scope="col"] {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--bg-alt);
}
.v2-compare .mapping th[scope="col"]:last-child { color: var(--am); }
.v2-compare .mapping th[scope="row"] { font-weight: 700; color: var(--ink); width: 22%; vertical-align: top; font-size: .93rem; }
.v2-compare .mapping td { font-size: .93rem; line-height: 1.6; vertical-align: top; }
.v2-compare .mapping td:last-child { color: var(--ink); background: rgba(14,158,136,.04); }
.v2-compare .mapping tr:last-child th, .v2-compare .mapping tr:last-child td { border-bottom: 0; }

/* ── Fabric explainer columns ────────────────────────────────────────── */
.v2-explain { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.v2-explain h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 .6rem; }
.v2-explain p { margin: 0; font-size: .95rem; line-height: 1.65; }
.v2-dotl { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.v2-dotl.am { background: var(--am); }
.v2-dotl.iga { background: var(--iga); }
.v2-dotl.pam { background: var(--pam); }

/* ── Pillars: what it replaces ───────────────────────────────────────── */
.v2-replaces {
  margin: 0 0 1.3rem; padding-top: 1rem; border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--muted); line-height: 1.55;
}
.v2-replaces strong { color: var(--ink); font-weight: 650; }

/* ── Scenarios ───────────────────────────────────────────────────────── */
.v2-scenarios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.v2-scenario {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
}
.v2-scenario-when {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--am); font-weight: 700; margin: 0 0 .6rem;
}
.v2-scenario h3 { font-size: 1.15rem; margin: 0 0 .7rem; letter-spacing: -.015em; }
.v2-scenario p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.68; }
.v2-scenario-was {
  margin: 0; padding: .9rem 1.1rem; border-radius: 10px; background: var(--bg-alt);
  font-size: .89rem; line-height: 1.6; color: var(--muted);
}
.v2-scenario-was strong { color: var(--pam); font-weight: 700; }

/* ── Glossary ────────────────────────────────────────────────────────── */
.v2-glossary { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 3rem; }
.v2-glossary > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.v2-glossary dt { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: .35rem; letter-spacing: -.01em; }
.v2-glossary dd { margin: 0; font-size: .94rem; line-height: 1.65; }

.v2-faq-more { margin: 2rem 0 0; font-size: .95rem; color: var(--muted); }

@media (max-width: 900px) {
  .v2-scenarios, .v2-glossary { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .v2-toc { top: 0; }
  .v2-toc-label { display: none; }
  html:has(.v2-toc) { scroll-padding-top: 120px; }
}

/* ── Hero product shot ───────────────────────────────────────────────── */
.v2-hero-shot { margin-top: clamp(2.4rem, 5vw, 3.6rem); }

/* ── Problem cards (icon-led, one line of copy) ──────────────────────── */
.v2-probs { gap: 1.1rem; }
.v2-prob { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.4rem; }
.v2-prob-i {
  display: grid; place-content: center; width: 42px; height: 42px; border-radius: 11px;
  background: rgba(181,114,12,.11); color: var(--pam); margin-bottom: 1rem;
}
.v2-prob-i svg { width: 21px; height: 21px; }
.v2-prob h3 { font-size: 1.02rem; margin: 0 0 .45rem; letter-spacing: -.012em; }
.v2-prob p { margin: 0; font-size: .91rem; line-height: 1.6; }

/* ── Mini scenario cards ─────────────────────────────────────────────── */
.v2-mini { gap: 1.1rem; }
.v2-minicard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.3rem; }
.v2-mini-when {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--am); font-weight: 700; margin-bottom: .6rem;
}
.v2-minicard h3 { font-size: 1rem; margin: 0 0 .4rem; letter-spacing: -.012em; }
.v2-minicard p { margin: 0; font-size: .9rem; line-height: 1.6; }

@media (max-width: 1000px) { .v2-probs, .v2-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .v2-probs, .v2-mini { grid-template-columns: 1fr; } }

/* ── Inline illustrations ────────────────────────────────────────────
   Used where the product screenshot would be an empty state. These read
   as diagrams, not as screenshots — they must never be mistaken for UI. */
.v2-ill {
  margin: 0; padding: clamp(1rem, 2.5vw, 1.6rem);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r);
}
.v2-ill svg { display: block; width: 100%; height: auto; font-family: var(--sans); }

.v2-ill .i-card rect, .v2-ill .i-chip rect, .v2-ill .i-tile rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-ill .i-panel { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-ill .i-wire path { fill: none; stroke: #C9D3E2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-ill .i-ic { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-ill .i-ic.am { stroke: var(--am); }
.v2-ill .i-ic.iga { stroke: var(--iga); }
.v2-ill .i-ic.pam { stroke: var(--pam); }
.v2-ill .i-ic.core { stroke: var(--muted); }
.v2-ill .i-t { font-size: 13px; font-weight: 700; fill: var(--ink); }
.v2-ill .i-s { font-size: 11px; fill: var(--body-text); text-anchor: middle; }
.v2-ill .i-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; fill: var(--muted); font-weight: 700; }
.v2-ill .i-dot.am circle { fill: rgba(14,158,136,.35); }

/* PAM timeline */
.v2-ill .i-rail { fill: none; stroke: var(--line); stroke-width: 2; }
.v2-ill .i-node circle { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.v2-ill .i-t2 { font-size: 12.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.v2-ill .i-s2 { font-size: 10.5px; fill: var(--muted); text-anchor: middle; }
.v2-ill .i-s3 { font-size: 10.5px; fill: var(--muted); }
.v2-ill .i-s3.end { fill: var(--pam); font-weight: 600; }
.v2-ill .i-s4 { font-size: 11.5px; fill: var(--body-text); }
.v2-ill .i-bar-bg { fill: var(--line-soft); }
.v2-ill .i-bar { fill: rgba(14,158,136,.35); }
.v2-ill .i-rec rect { fill: var(--bg-alt); stroke: var(--line); stroke-width: 1; }
.v2-ill .i-rec circle { fill: #C0392B; }
.v2-ill .i-labels rect { fill: var(--line-soft); }

/* ── Illustration: console overview (hero) ───────────────────────────── */
.v2-ill .i-rail-bg { fill: var(--ink); }
.v2-ill .i-navline rect { fill: rgba(255,255,255,.22); }
.v2-ill .i-navsel { fill: rgba(53,227,199,.18); }
.v2-ill .i-kpi text { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: var(--muted); font-weight: 700; }
.v2-ill .i-bignum rect { fill: rgba(10,15,30,.16); }
.v2-ill .i-kpi-sub rect { fill: var(--line-soft); }
.v2-ill .i-bars rect { fill: rgba(14,158,136,.38); }
.v2-ill .i-bars-fail rect { fill: rgba(181,114,12,.55); }
.v2-ill .i-row rect { fill: var(--bg-alt); }
.v2-ill .i-line rect { fill: var(--line); }
.v2-ill .i-pill.live rect { fill: rgba(14,158,136,.18); }
.v2-ill .i-pill.done rect { fill: var(--line-soft); }
.v2-ill .i-trail { fill: none; stroke: var(--line); stroke-width: 2; }
.v2-ill .i-ev circle.am { fill: var(--am); }
.v2-ill .i-ev circle.iga { fill: var(--iga); }
.v2-ill .i-ev circle.pam { fill: var(--pam); }
.v2-ill .i-evl text { font-size: 11px; fill: var(--muted); text-anchor: middle; }

/* ── Illustration: certification review ──────────────────────────────── */
.v2-ill .i-bar.iga { fill: rgba(93,75,214,.35); }
.v2-ill .i-s5 { font-size: 12px; font-weight: 700; fill: var(--ink); }
.v2-ill .i-av circle { fill: rgba(93,75,214,.14); }
.v2-ill .i-ent rect { fill: var(--line-soft); }
.v2-ill .i-verdict.keep rect { fill: rgba(14,158,136,.12); }
.v2-ill .i-verdict.revoke rect { fill: rgba(192,57,43,.10); }
.v2-ill .i-verdict.pend rect { fill: var(--line-soft); }
.v2-ill .i-v { font-size: 11px; font-weight: 700; text-anchor: middle; }
.v2-ill .i-v.keep { fill: var(--am); }
.v2-ill .i-v.revoke { fill: #C0392B; }
.v2-ill .i-v.pend { fill: var(--muted); }
.v2-ill .i-warn { fill: rgba(181,114,12,.08); }
.v2-ill .i-warn.ok { fill: rgba(14,158,136,.07); }

/* ── Illustration: correlated audit trail ────────────────────────────── */
.v2-ill .i-spine { fill: none; stroke: var(--line); stroke-width: 2; }
.v2-ill .i-ev-row rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-ill .i-ev-node circle.am { fill: var(--am); }
.v2-ill .i-ev-node circle.iga { fill: var(--iga); }
.v2-ill .i-ev-node circle.pam { fill: var(--pam); }
.v2-ill .i-time text { font-family: var(--mono); font-size: 11px; fill: var(--muted); font-weight: 600; }
.v2-ill .i-ev-t text { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.v2-ill .i-ev-s text { font-size: 10.5px; fill: var(--muted); }
.v2-ill .i-tag.am rect { fill: rgba(14,158,136,.12); }
.v2-ill .i-tag.iga rect { fill: rgba(93,75,214,.12); }
.v2-ill .i-tag.pam rect { fill: rgba(181,114,12,.13); }
.v2-ill .i-tg { font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.v2-ill .i-tg.am { fill: var(--am); }
.v2-ill .i-tg.iga { fill: var(--iga); }
.v2-ill .i-tg.pam { fill: var(--pam); }

/* `.v2-ill { margin: 0 }` is declared later than `.v2-hero-shot`, so restate. */
.v2-ill.v2-hero-shot { margin-top: clamp(2.6rem, 5vw, 4rem); }
.v2-ill .i-dot.iga circle { fill: var(--iga); }
.v2-ill .i-dot.pam circle { fill: var(--pam); }

/* ── Legal pages ─────────────────────────────────────────────────────
   Privacy policy, terms, disclaimer. Long-form, numbered, scannable. */
.legal-draft {
  background: rgba(181,114,12,.10); border: 1px solid rgba(181,114,12,.35);
  border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 0 0 2.2rem;
}
.legal-draft p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink); }
.legal-draft strong { color: var(--pam); }

.legal-todo {
  background: rgba(181,114,12,.16); color: #7A4C05; font-weight: 650;
  padding: .05em .4em; border-radius: 4px;
  /* long review notes must wrap; box-decoration-break keeps the highlight tidy */
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.legal-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 2rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.legal-meta strong { color: var(--ink); font-weight: 650; }

.legal-toc { margin: 0 0 2.6rem; padding: 1.3rem 1.5rem; background: var(--bg-alt); border-radius: var(--r); }
.legal-toc p {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 .8rem;
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: .4rem; font-size: .92rem; break-inside: avoid; }

.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.015em;
  margin: 2.6rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; letter-spacing: -.01em; }
.legal p { margin: 0 0 1rem; font-size: .97rem; line-height: 1.72; }
.legal ul, .legal ol.legal-list { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .5rem; font-size: .97rem; line-height: 1.68; }
.legal .lede { margin-bottom: 1.6rem; }
.legal dl { margin: 0 0 1.2rem; }
.legal dt { font-weight: 700; color: var(--ink); margin-top: .9rem; font-size: .97rem; }
.legal dd { margin: .25rem 0 0; font-size: .97rem; line-height: 1.68; }
.legal .table-scroll { margin: 0 0 1.4rem; }
.legal .mapping th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg-alt); }
.legal .mapping td { font-size: .92rem; line-height: 1.6; vertical-align: top; }

@media (max-width: 700px) { .legal-toc ol { columns: 1; } }



/* Conspicuous all-caps clause (disclaimers, liability limits). Kept legible:
   slightly smaller, looser tracking and leading than body copy, in a boxed
   block so it reads as deliberately prominent rather than shouted. */
.legal-caps {
  font-size: .87rem !important; line-height: 1.75; letter-spacing: .012em;
  color: var(--ink); background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem 1.4rem; margin: 0 0 1.2rem;
}

/* ── Capability pages ────────────────────────────────────────────────
   One page per capability: hero, features, benefits. Generated by
   scripts/build-capabilities.mjs — edit the data file, not the pages. */
.cap-hero { padding-bottom: clamp(2.6rem, 5vw, 4rem); }
.cap-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 20ch; }
.cap-hero .lede { max-width: 60ch; margin-bottom: 1.2rem; }
.cap-intro { max-width: 66ch; font-size: 1rem; line-height: 1.72; margin: 0 0 2rem; }

.cap-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--muted); margin-bottom: 1.2rem;
}
.cap-crumb a { color: var(--muted); }
.cap-crumb a:hover { color: var(--am); }
.cap-crumb [aria-current] { color: var(--ink); font-weight: 600; }

.cap-fig { max-width: 660px; margin: 0 auto clamp(2rem, 4vw, 2.8rem); }

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.cap-features { gap: 1.1rem; }
.cap-feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.5rem;
}
.cap-feature h3 { font-size: 1.05rem; margin: 0 0 .5rem; letter-spacing: -.012em; }
.cap-feature p { margin: 0; font-size: .95rem; line-height: 1.65; }

.cap-benefits { gap: 1.1rem; }
.cap-benefit {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.3rem; border-top: 3px solid var(--am);
}
.cap-benefit-for {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--am); font-weight: 700; margin: 0 0 .5rem;
}
.cap-benefit h3 { font-size: 1rem; margin: 0 0 .4rem; letter-spacing: -.012em; }
.cap-benefit p { margin: 0; font-size: .91rem; line-height: 1.6; }

.cap-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.cap-chip {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: .92rem; font-weight: 600; transition: border-color .15s, box-shadow .15s;
}
.cap-chip:hover { text-decoration: none; border-color: var(--am); box-shadow: var(--shadow); }

/* Diagram primitives used only by the generated pages */
.v2-ill .i-rowbox { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-ill .i-ev-t2 { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.v2-ill .i-ev-s2 { font-size: 10.5px; fill: var(--muted); }
.v2-ill .i-ev-rowbox rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.v2-ill .i-ev-node-c.am { fill: var(--am); }
.v2-ill .i-ev-node-c.iga { fill: var(--iga); }
.v2-ill .i-ev-node-c.pam { fill: var(--pam); }
.v2-ill .i-time-t { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); font-weight: 600; }
.v2-ill .i-ev-t3 { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.v2-ill .i-ev-s3 { font-size: 10.5px; fill: var(--muted); }
.v2-ill .i-tile-t { font-size: 11.5px; font-weight: 600; fill: var(--ink); }

@media (max-width: 1000px) { .cap-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-2, .cap-features, .cap-benefits { grid-template-columns: 1fr; } }
/* The older diagrams put `.i-dot` on a <g>; the generated ones put it on the
   <circle> itself, so match both forms. */
.v2-ill circle.i-dot.am  { fill: var(--am); }
.v2-ill circle.i-dot.iga { fill: var(--iga); }
.v2-ill circle.i-dot.pam { fill: var(--pam); }