/*
 * redesign.css — Comoe Networks marketing shell (base_marketing.html + pub/index.html)
 *
 * Loaded AFTER Bootstrap. Custom classes are namespaced (.mbtn*, .mnav, .rline) so they
 * never collide with Bootstrap's own .btn / .nav / .row. Theme tokens drive light + dark;
 * the viewer's toggle stamps data-theme on <html> and wins over the media query.
 */

:root{
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --bg: #eaf0f7;
  --surface: #ffffff;
  --surface-2: #f3f7fc;
  --ink: #0f1c2e;
  --muted: #566579;
  --faint: #8695a8;
  --brand: #2f6dac;
  --brand-strong: #1e4f83;
  --brand-soft: rgba(47,109,172,.10);
  --accent: #ef7d3a;
  --accent-strong: #d9631f;
  --accent-soft: rgba(239,125,58,.12);
  --line: #d3deea;
  --line-strong:#c0cfe0;
  --good:#1f9d6b;
  --warn:#e0a52a;
  --crit:#d5563f;
  --shadow: 0 1px 2px rgba(15,28,46,.06), 0 12px 32px rgba(15,28,46,.08);
  --shadow-sm: 0 1px 2px rgba(15,28,46,.06), 0 4px 12px rgba(15,28,46,.06);
  --grid: rgba(47,109,172,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#08131f; --surface:#0e1f2f; --surface-2:#12283b; --ink:#e7eef8;
    --muted:#9aabc0; --faint:#66788d; --brand:#6aa8e2; --brand-strong:#93c1f0;
    --brand-soft: rgba(106,168,226,.12); --accent:#ff8c4d; --accent-strong:#ffa876;
    --accent-soft: rgba(255,140,77,.14); --line:#1c3348; --line-strong:#274566;
    --good:#3fbd8a; --warn:#e6b84e; --crit:#ef7358;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
    --grid: rgba(106,168,226,.07);
  }
}
:root[data-theme="light"]{
  --bg:#eaf0f7; --surface:#ffffff; --surface-2:#f3f7fc; --ink:#0f1c2e;
  --muted:#566579; --faint:#8695a8; --brand:#2f6dac; --brand-strong:#1e4f83;
  --brand-soft: rgba(47,109,172,.10); --accent:#ef7d3a; --accent-strong:#d9631f;
  --accent-soft: rgba(239,125,58,.12); --line:#d3deea; --line-strong:#c0cfe0;
  --good:#1f9d6b; --warn:#e0a52a; --crit:#d5563f;
  --shadow: 0 1px 2px rgba(15,28,46,.06), 0 12px 32px rgba(15,28,46,.08);
  --shadow-sm: 0 1px 2px rgba(15,28,46,.06), 0 4px 12px rgba(15,28,46,.06);
  --grid: rgba(47,109,172,.06);
}
:root[data-theme="dark"]{
  --bg:#08131f; --surface:#0e1f2f; --surface-2:#12283b; --ink:#e7eef8;
  --muted:#9aabc0; --faint:#66788d; --brand:#6aa8e2; --brand-strong:#93c1f0;
  --brand-soft: rgba(106,168,226,.12); --accent:#ff8c4d; --accent-strong:#ffa876;
  --accent-soft: rgba(255,140,77,.14); --line:#1c3348; --line-strong:#274566;
  --good:#3fbd8a; --warn:#e6b84e; --crit:#ef7358;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
  --grid: rgba(106,168,226,.07);
}

/* base */
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:17px; }
.mkt-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
/* Links: colored but keep the browser/Bootstrap underline so migrated content
   pages stay readable. The nav/footer/buttons set their own text-decoration:none. */
.mkt a{ color:var(--brand); }
.mkt a:hover{ color:var(--brand-strong); }
/* keep Bootstrap button text color on .btn anchors (so .mkt a{} doesn't wash out
   white text on .btn-primary etc.) — needed on redesign shells that set body.mkt */
.mkt a.btn{ color:var(--bs-btn-color); }
/* text-wrap only -- no margin:0 reset, so migrated pages keep Bootstrap heading spacing.
   The homepage's own headings (.hero-title/.feat h2/...) set their margins explicitly. */
.mkt h1,.mkt h2,.mkt h3{ text-wrap:balance; }
.mkt :focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); font-weight:600;
  display:inline-flex; align-items:center; gap:.55em; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--brand); opacity:.6; }
.mono{ font-family:var(--mono); }
.tnum{ font-variant-numeric:tabular-nums; }

/* buttons (namespaced to avoid Bootstrap .btn) */
.mbtn{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--sans); font-weight:650; font-size:.98rem; border-radius:9px;
  padding:.62em 1.05em; border:1px solid transparent;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-decoration:none; white-space:nowrap; line-height:1.2; }
.mbtn:active{ transform:translateY(1px); }
.mbtn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 18px var(--accent-soft); }
.mbtn-primary:hover{ background:var(--accent-strong); color:#fff; }
.mbtn-ghost{ background:transparent; color:var(--brand); border-color:var(--line-strong); }
.mbtn-ghost:hover{ color:var(--brand-strong); border-color:var(--brand); background:var(--brand-soft); }
.mbtn-lg{ font-size:1.05rem; padding:.8em 1.35em; }

/* header / nav */
header.site{ position:sticky; top:0; z-index:1030;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.mnav{ display:flex; align-items:center; gap:16px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:750;
  letter-spacing:-.01em; text-decoration:none; }
.brand:hover{ color:var(--ink); }
.brand .mark{ flex:0 0 auto; }
.brand small{ display:block; font-family:var(--mono); font-weight:500; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:1px; }
.mnav .spacer{ flex:1; }
.mnav .links{ display:flex; gap:2px; align-items:center; }
.mnav .links > a, .mnav .navlink{
  color:var(--muted); font-size:.95rem; font-weight:550; padding:.5em .7em; border-radius:8px;
  display:inline-flex; align-items:center; gap:.3em; cursor:pointer; text-decoration:none;
  background:none; border:0; font-family:var(--sans); white-space:nowrap; }
.mnav .links > a:hover, .mnav .navlink:hover{ color:var(--ink); background:var(--brand-soft); }
.mnav .links a.active{ color:var(--brand); }
.mnav .navitem{ position:relative; }
/* themed Bootstrap dropdowns */
.mnav .dropdown-menu{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:7px; margin-top:8px; min-width:212px; }
.mnav .dropdown-item{ color:var(--muted); border-radius:8px; font-size:.92rem; padding:.5em .7em; }
.mnav .dropdown-item:hover, .mnav .dropdown-item:focus{ background:var(--brand-soft); color:var(--ink); }
.mnav .dropdown-toggle::after{ vertical-align:.14em; opacity:.55; margin-left:.15em; }
/* Protocols mega-menu: category columns instead of one long list. Grid is
   applied only on .show so Bootstrap's base display:none still hides it. */
.mnav .dropdown-menu.proto-mega{ min-width:0; }
.mnav .dropdown-menu.proto-mega.show{ display:grid;
  grid-template-columns:repeat(3, minmax(148px, 1fr)); gap:0 10px;
  width:max-content; max-width:min(92vw, 600px); }
.mnav .proto-mega .proto-col{ display:flex; flex-direction:column; min-width:0; }
.mnav .proto-mega .proto-col + .proto-col{ border-left:1px solid var(--line); padding-left:6px; }
.mnav .proto-mega .proto-col-title{ font-size:.68rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); opacity:.65; padding:.5em .7em .25em; white-space:nowrap; }

.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:9px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--muted);
  cursor:pointer; flex:0 0 auto; }
.theme-toggle:hover{ color:var(--ink); border-color:var(--brand); }

.mnav-burger{ display:none; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:9px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  cursor:pointer; flex:0 0 auto; }
.mnav-mobile{ display:none; }

/* hero */
.hero{ position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 30%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 30%, #000 30%, transparent 78%); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:52px; align-items:center; padding:74px 0 66px; }
h1.hero-title{ font-size:clamp(2.5rem, 5.4vw, 4.05rem); font-weight:820; line-height:1.02;
  letter-spacing:-.025em; margin:.5rem 0 0; }
h1.hero-title .hl{ color:var(--brand); white-space:nowrap; }
.hero-sub{ color:var(--muted); font-size:1.14rem; max-width:34ch; margin:1.1rem 0 0; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8rem; }
.trust{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:1.15rem;
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap; }
.trust b{ color:var(--good); font-weight:600; }
.chips{ display:flex; gap:8px; margin-top:.85rem; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:.74rem; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:6px; padding:.28em .6em; background:var(--surface); }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; }
.panel .bar{ display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2); }
.panel .bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-strong); display:inline-block; }
.panel .bar i:nth-child(1){ background:#e5705f; }
.panel .bar i:nth-child(2){ background:#e6b84e; }
.panel .bar i:nth-child(3){ background:#4fb083; }
.panel .bar .addr{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-left:8px;
  padding:.2em .6em; border:1px solid var(--line); border-radius:6px; background:var(--bg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-canvas-wrap{ position:relative; height:172px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border-bottom:1px solid var(--line); }
#signal{ display:block; width:100%; height:100%; }
.hero-canvas-wrap .cap{ position:absolute; left:14px; top:12px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero-canvas-wrap .cap.r{ left:auto; right:14px; color:var(--brand); }

.readout{ padding:14px 16px 16px; }
.readout .rline{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  font-family:var(--mono); font-size:.78rem; padding:7px 0; border-bottom:1px dashed var(--line); }
.readout .rline:last-child{ border-bottom:0; }
.readout .proto{ font-weight:600; color:var(--ink); }
.readout .desc{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag{ font-family:var(--mono); font-size:.68rem; padding:.18em .5em; border-radius:5px; font-weight:600; }
.tag.ok{ color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent); }
.tag.warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent); }
.tag.crit{ color:var(--crit); background:color-mix(in srgb, var(--crit) 15%, transparent); }
.tag.info{ color:var(--brand); background:var(--brand-soft); }

/* pillars */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); margin:8px 0 20px; }
.pillar{ padding:20px 22px; border-right:1px solid var(--line); }
.pillar:last-child{ border-right:0; }
.pillar .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.pillar h4{ margin:.5rem 0 .3rem; font-size:1.05rem; font-weight:700; }
.pillar p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; }
.pillar .ico{ color:var(--brand); }

/* sections */
.mkt section.block{ padding:60px 0; border-top:1px solid var(--line); }
.interlude{ text-align:center; padding:40px 0; border-top:1px solid var(--line);
  font-family:var(--mono); color:var(--brand); font-size:clamp(1.05rem,2vw,1.35rem); letter-spacing:-.01em; }
.interlude::before{ content:"// "; color:var(--accent); }
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.feat.rev .copy{ order:2; }
.feat h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:780; letter-spacing:-.02em; margin:.7rem 0 0; line-height:1.08; }
.feat p.lead{ color:var(--muted); margin:1rem 0 1.2rem; font-size:1.06rem; max-width:46ch; }
.flist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.flist li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.flist .fi{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); }
.flist b{ color:var(--ink); font-weight:680; }
.flist span.t{ color:var(--muted); font-size:.97rem; }

.viz{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.viz .vhead{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px;
  border-bottom:1px solid var(--line); background:var(--surface-2); }
.viz .vhead .t{ font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.viz .vbody{ padding:16px; }

.protorow{ display:grid; grid-template-columns:70px 1fr 54px; gap:12px; align-items:center; padding:8px 0;
  font-family:var(--mono); font-size:.8rem; }
.protorow .lbl{ color:var(--ink); font-weight:600; }
.protorow .bar{ height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.protorow .bar > i{ display:block; height:100%; border-radius:5px; }
.protorow .pct{ color:var(--muted); text-align:right; }

.check{ display:flex; flex-direction:column; gap:9px; }
.check .item{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.check .dot{ width:10px; height:10px; border-radius:50%; }
.check .nm{ font-size:.92rem; }
.check .nm small{ display:block; color:var(--muted); font-family:var(--mono); font-size:.72rem; }

.tree{ font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.crumbs{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-family:var(--mono); font-size:.76rem; }
.crumbs a{ color:var(--brand); } .crumbs span{ color:var(--faint); }
.tree .tn{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; }
.tree .tn.sel{ background:var(--brand-soft); color:var(--ink); }
.tree .tn.ind{ margin-left:22px; }
.tree .tn.ind2{ margin-left:44px; }
.tree .tn .c{ color:var(--accent); }

.cta-band{ padding:70px 0; border-top:1px solid var(--line); }
.cta-inner{ position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--brand-strong), var(--brand));
  border-radius:18px; padding:48px 44px; color:#fff; box-shadow:var(--shadow); }
.cta-inner::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(90% 120% at 90% 0%, #000, transparent 70%);
  mask-image:radial-gradient(90% 120% at 90% 0%, #000, transparent 70%); }
.cta-inner .in{ position:relative; z-index:1; max-width:640px; }
.cta-inner .eyebrow{ color:#cfe1f5; } .cta-inner .eyebrow::before{ background:#cfe1f5; }
.cta-inner h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:800; letter-spacing:-.02em; margin:.6rem 0 0; }
.cta-inner p{ color:#dbe8f6; margin:.9rem 0 1.6rem; }
.cta-inner .mbtn-primary{ box-shadow:0 10px 24px rgba(0,0,0,.22); }
.cta-inner .mbtn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.cta-inner .mbtn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }

/* back-to-top button + toast width (were inline in base.html) */
#TopPageButton{ display:none; position:fixed; bottom:20px; right:30px; z-index:99;
  border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:6px 8px;
  box-shadow:var(--shadow-sm); cursor:pointer; }
#TopPageButton img{ width:22px; height:22px; display:block; }
.toast{ --bs-toast-max-width: 400px; }

footer.site{ border-top:1px solid var(--line); padding:34px 0 46px; color:var(--muted); background:var(--bg); }
.foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot .spacer{ flex:1; }
.foot a{ color:var(--muted); font-size:.9rem; text-decoration:none; } .foot a:hover{ color:var(--ink); }
.foot .cr{ font-family:var(--mono); font-size:.78rem; }

/* ============================================================
   Interior landing-page components (About / FAQ / use-cases /
   Capture Library / legal docs). Token-driven, Bootstrap-safe.
   ============================================================ */

/* interior page hero — lighter than the homepage .hero */
.phero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.phero::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 85% 0%, #000 18%, transparent 74%);
  mask-image:radial-gradient(120% 100% at 85% 0%, #000 18%, transparent 74%); }
.phero .mkt-wrap{ position:relative; z-index:1; }
.phero-inner{ padding:54px 0 40px; }
.phero-title{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:800; letter-spacing:-.022em;
  line-height:1.05; margin:.5rem 0 0; display:flex; align-items:center; gap:.4em; flex-wrap:wrap; }
.phero-title .bi{ color:var(--brand); font-size:.9em; }
.phero-lead{ color:var(--muted); font-size:1.14rem; max-width:62ch; margin:1rem 0 0; }
.phero-by{ color:var(--muted); font-family:var(--mono); font-size:.8rem; margin:.45rem 0 0; }
.phero .chips{ margin-top:1rem; }
.phero.center{ text-align:center; }
.phero.center .phero-title{ justify-content:center; }
.phero.center .phero-lead{ margin-left:auto; margin-right:auto; }
.phero.center .cta-row,.phero.center .chips{ justify-content:center; }

/* centered section header */
.section-head{ text-align:center; margin:0 0 28px; }
.section-head .eyebrow{ justify-content:center; margin-bottom:.5rem; }
.section-head h2{ font-size:clamp(1.5rem,2.7vw,2.05rem); font-weight:780; letter-spacing:-.02em; margin:0; }
.section-head p{ color:var(--muted); margin:.6rem auto 0; max-width:58ch; }
.mkt section.block.alt{ background:var(--surface-2); }

/* icon-card grid */
.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.cardgrid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.cardgrid.cols-4{ grid-template-columns:repeat(4, 1fr); }
.ucard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.45rem; }
.ucard .ico{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-size:1.35rem; margin-bottom:.5rem; }
.ucard.good .ico{ background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
.ucard.warn .ico{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); }
.ucard.crit .ico{ background:color-mix(in srgb,var(--crit) 15%,transparent); color:var(--crit); }
.ucard.accent .ico{ background:var(--accent-soft); color:var(--accent); }
.ucard h5,.ucard h3{ margin:0; font-size:1.08rem; font-weight:700; }
.ucard p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.ucard .card-foot{ margin-top:auto; padding-top:.7rem; }
.ucard a.card-cta{ font-family:var(--mono); font-size:.8rem; color:var(--brand); font-weight:600;
  display:inline-flex; align-items:center; gap:.3em; text-decoration:none; }
.ucard a.card-cta:hover{ color:var(--brand-strong); }

/* Data tables on any redesign shell: horizontal-scroll wrapper + readable theming.
   base_capture also scopes equivalent rules under .cap-main; this .cap-table-scoped
   copy lives here so base_marketing pages (dashboard, analysis index) get readable,
   theme-aware tables (Bootstrap's default dark text would be invisible on the dark body). */
.cap-table{ overflow-x:auto; }
.cap-table .table{ --bs-table-color:var(--ink); --bs-table-bg:transparent; color:var(--ink); margin-bottom:0; }
.cap-table .table thead th{ color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); white-space:nowrap; }
.cap-table .table td, .cap-table .table th{ border-color:var(--line); vertical-align:middle; }
.cap-table .table a{ color:var(--brand); text-decoration:none; }

/* Empty-state panel (general_macros.empty_state) — friendly "nothing here" block */
.empty-state{ text-align:center; padding:34px 20px; color:var(--muted); }
.empty-state .empty-ico{ width:54px; height:54px; border-radius:14px; display:inline-grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-size:1.7rem; margin-bottom:12px; }
.empty-state.good .empty-ico{ background:color-mix(in srgb, var(--good) 15%, transparent); color:var(--good); }
.empty-state.warn .empty-ico{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.empty-state .empty-title{ font-weight:650; color:var(--ink); font-size:1.02rem; }
.empty-state .empty-sub{ font-size:.9rem; color:var(--muted); margin-top:4px; max-width:48ch; margin-inline:auto; }

/* themed FAQ / Q&A accordion (drives Bootstrap's own CSS variables) */
.faq-acc{
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 12px;
  --bs-accordion-inner-border-radius: 12px;
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-active-color: var(--brand-strong);
  --bs-accordion-active-bg: var(--brand-soft);
  --bs-accordion-btn-focus-border-color: var(--brand);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--brand-soft);
  --bs-accordion-body-color: var(--muted);
  display:flex; flex-direction:column; gap:10px;
}
.faq-acc .accordion-item{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-acc .accordion-button{ font-weight:600; font-size:1rem; }
.faq-acc .accordion-button:not(.collapsed){ box-shadow:none; }
.faq-acc .accordion-button .bi{ color:var(--brand); }
.faq-acc .accordion-body{ color:var(--muted); }
.faq-acc .accordion-body a{ color:var(--brand); }
.faq-acc .accordion-body code{ font-family:var(--mono); background:var(--surface-2);
  padding:.1em .4em; border-radius:5px; color:var(--ink); }
/* brighten Bootstrap's dark chevron SVG on dark grounds */
:root[data-theme="dark"] .faq-acc .accordion-button::after{ filter:brightness(2.6); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .faq-acc .accordion-button::after{ filter:brightness(2.6); }
}

/* Google Charts tooltips — Google's tooltip box is always a light popover, but the
   .cap-main table theming would tint its text near-white (invisible in dark mode).
   Force a light box + dark text in BOTH themes so tooltips stay legible; keep the
   semantic alert colors. !important beats the non-important .cap-main .table rules. */
.google-visualization-tooltip{
  background:#ffffff !important;
  border:1px solid #c9d3e0 !important;
  border-radius:8px !important;
  box-shadow:0 4px 14px rgba(8,19,31,.28) !important;
  padding:6px 9px !important;
}
.google-visualization-tooltip,
.google-visualization-tooltip .table{
  color:#1c2b3d !important;
  --bs-table-color:#1c2b3d !important;
  --bs-table-bg:transparent !important;
}
.google-visualization-tooltip .table td,
.google-visualization-tooltip .table th{
  color:#1c2b3d !important;
  border-color:#e2e8f1 !important;
}
.google-visualization-tooltip .text-danger{ color:#d5563f !important; }
.google-visualization-tooltip .text-warning{ color:#b8860b !important; }

/* two-column use-case layout + sticky rail */
.uc-grid{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; padding:52px 0; }
.uc-main{ display:flex; flex-direction:column; gap:34px; }
.uc-main section{ scroll-margin-top:88px; }
.uc-sec-title{ font-size:1.35rem; font-weight:740; letter-spacing:-.01em; margin:0 0 .7rem;
  display:flex; align-items:center; gap:.5em; }
.uc-sec-title .bi{ color:var(--brand); }
.uc-main p{ color:var(--muted); }
.uc-main ul,.uc-main ol{ color:var(--muted); padding-left:1.3rem; margin:.3rem 0 0; }
.uc-main li{ margin:.35rem 0; }
.uc-main li b,.uc-main li strong{ color:var(--ink); }
.uc-main code{ font-family:var(--mono); background:var(--surface-2); padding:.12em .4em;
  border-radius:5px; color:var(--ink); font-size:.9em; }
.uc-rail{ position:sticky; top:88px; }
.rail-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;
  box-shadow:var(--shadow-sm); }
.rail-card + .rail-card{ margin-top:16px; }
.rail-card h3{ font-size:1.05rem; font-weight:700; margin:0 0 .7rem; display:flex; align-items:center; gap:.45em; }
.rail-card h3 .bi{ color:var(--accent); }
.rail-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.rail-card li{ color:var(--muted); font-size:.93rem; display:flex; gap:.5em; align-items:flex-start; }
.rail-card li .bi{ color:var(--good); margin-top:.15em; flex:0 0 auto; }
.rail-card li::before{ content:"✓"; color:var(--good); font-weight:700; flex:0 0 auto; }
.uc-related ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:.4rem 0 0; }
.uc-related a{ font-family:var(--mono); font-size:.82rem; color:var(--brand); border:1px solid var(--line-strong);
  border-radius:7px; padding:.4em .7em; text-decoration:none; background:var(--surface); }
.uc-related a:hover{ border-color:var(--brand); background:var(--brand-soft); }

/* incident lifecycle / step cards (IR article extra) */
.stepgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:.6rem; }

/* readable document layout (legal pages) */
.doc{ max-width:74ch; margin:0 auto; padding:8px 0 48px; color:var(--ink); }
.doc h1{ font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.02em; margin:.2rem 0 .3rem; }
.doc .doc-meta{ font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-bottom:1.4rem; }
.doc h2,.doc .subtitle{ font-size:1.28rem; font-weight:720; margin:2rem 0 .6rem; padding-top:1.3rem;
  border-top:1px solid var(--line); letter-spacing:-.01em; color:var(--ink); }
.doc h3{ font-size:1.06rem; font-weight:680; margin:1.4rem 0 .5rem; color:var(--ink); }
.doc p{ color:var(--ink); margin:0 0 1rem; }
.doc ul,.doc ol{ color:var(--ink); margin:0 0 1rem; padding-left:1.4rem; }
.doc li{ margin:.35rem 0; }
.doc a{ color:var(--brand); }
.doc address{ font-style:normal; color:var(--muted); font-family:var(--mono); font-size:.9rem; }

/* responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; padding:52px 0 44px; }
  .feat{ grid-template-columns:1fr; gap:30px; }
  .feat.rev .copy{ order:0; }
  .uc-grid{ grid-template-columns:1fr; gap:30px; padding:40px 0; }
  .uc-rail{ position:static; }
  .cardgrid.cols-3,.cardgrid.cols-4{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .pillar:nth-child(2){ border-right:0; }
  .pillar:nth-child(1),.pillar:nth-child(2){ border-bottom:1px solid var(--line); }
  .mnav .links{ display:none; }
  .mnav-burger{ display:inline-flex; }
  .mnav-mobile{ display:block; max-height:0; overflow:hidden; transition:max-height .28s ease;
    border-top:1px solid var(--line); background:var(--surface); }
  .mnav-mobile.open{ max-height:82vh; overflow:auto; }
  .mnav-mobile a{ display:block; padding:.72em 24px; color:var(--ink); text-decoration:none;
    border-bottom:1px solid var(--line); font-size:.98rem; }
  .mnav-mobile a:hover{ background:var(--brand-soft); }
  .mnav-mobile .grp{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
    letter-spacing:.12em; color:var(--muted); padding:.9em 24px .2em; }
  .mnav-mobile .sub{ padding-left:38px; color:var(--muted); }
}
@media (max-width: 520px){
  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:0; border-bottom:1px solid var(--line); }
  .pillar:last-child{ border-bottom:0; }
  body{ font-size:16px; }
  .brand small{ display:none; }
  .nav-cta-text{ display:none; }
  .cardgrid,.cardgrid.cols-3,.cardgrid.cols-4{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .mnav-mobile{ transition:none; }
}