/* ============================================================
   FIRMA AI: SITE STYLESHEET
   Depends on tokens.css. Component classes follow the
   design system (firma-design-system.html).
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink-body);background:var(--surface);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:var(--ls-tight);line-height:var(--lh-head)}
p{margin:0}
a{color:var(--firma-teal)}
ul{margin:0;padding:0}
code{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:3px solid var(--firma-teal);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.stack{display:grid;gap:var(--s5)}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.measure{max-width:var(--measure-body)}
.measure-lead{max-width:var(--measure-lead)}
.center{text-align:center}

/* ---------- Surfaces ---------- */
.surf-light{background:var(--surface)}
.surf-tint{background:var(--firma-teal-tint-2)}
.surf-teal{background:linear-gradient(135deg,var(--firma-teal-deep),var(--firma-teal) 60%,#256F7B);color:#fff}
.surf-teal h1,.surf-teal h2,.surf-teal h3,.surf-teal h4,.surf-teal p,.surf-teal li{color:#fff}
.surf-teal .eyebrow{color:rgba(255,255,255,.72)}
.surf-teal a{color:#fff}
/* light islands on a teal band keep their own colours */
.surf-teal .card,.surf-teal .frame,.surf-teal .namecard,.surf-teal .form-panel{color:var(--ink-body)}
.surf-teal .card h3,.surf-teal .card h4,.surf-teal .frame h4,.surf-teal .namecard b,
.surf-teal .form-panel h3,.surf-teal .form-panel label{color:var(--ink)}
.surf-teal .card p,.surf-teal .form-panel p{color:var(--ink-body)}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--firma-teal);margin-bottom:var(--s3);display:block}
.display{font-size:var(--fs-display);font-weight:600;line-height:var(--lh-tight)}
.h2{font-size:var(--fs-h2);font-weight:400}
.h2 b,.h2 strong{font-weight:700}
.h3{font-size:var(--fs-h3);font-weight:600}
.lead{font-size:var(--fs-lead);line-height:1.55}
.small{font-size:var(--fs-small)}
.caption{font-size:var(--fs-caption);color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.surf-teal .lead{color:rgba(255,255,255,.92)}
.surf-teal .caption,.surf-teal .muted{color:rgba(255,255,255,.7)}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo img{width:32px;height:32px}
.logo .wordmark{font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--firma-teal);line-height:1}
.footer .logo .wordmark{color:#fff}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:72px}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a{color:var(--ink-body);text-decoration:none;font-size:var(--fs-small);font-weight:500;padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--firma-teal)}
.nav-actions{display:flex;align-items:center;gap:var(--s3)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}


/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);border-radius:var(--r-pill);
  padding:13px 24px;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:600;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap}
.btn-primary{background:var(--firma-teal);color:#fff}
.btn-primary:hover{background:var(--firma-teal-deep)}
.btn-ghost{background:transparent;color:var(--firma-teal);border-color:var(--firma-teal)}
.btn-ghost:hover{background:var(--firma-teal-tint)}
.btn-lg{padding:16px 30px;font-size:16px}
.surf-teal .btn-primary{background:#fff;color:var(--firma-teal)}
.surf-teal .btn-primary:hover{background:var(--firma-teal-tint)}
.surf-teal .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.surf-teal .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}

/* ---------- Chevron list ---------- */
.f-list{list-style:none;display:grid;gap:var(--s5)}
.f-list li{display:grid;grid-template-columns:30px 1fr;gap:var(--s4);align-items:start}
.chev{width:30px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--firma-teal);color:#fff;font-size:15px;font-weight:600;line-height:1}
.surf-teal .chev{background:#fff;color:var(--firma-teal)}
.f-list p{font-size:var(--fs-small)}
.f-list b{font-weight:600}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1)}
.card h3,.card h4{font-size:var(--fs-h4);font-weight:600;margin-bottom:var(--s2)}
.card p{font-size:var(--fs-small)}
.card-grey{background:var(--surface-grey);border-color:transparent;box-shadow:none}
.card-num{font-family:var(--font-mono);font-size:12px;color:var(--firma-teal);margin-bottom:var(--s2);display:block}

/* ---------- Stats ---------- */
.stat .n{font-size:clamp(44px,6vw,58px);font-weight:700;color:var(--firma-teal);
  line-height:1;letter-spacing:var(--ls-tight)}
.stat p{margin-top:var(--s3);font-size:var(--fs-small);max-width:26ch}
.surf-teal .stat .n{color:#fff}

/* ---------- Badges & chips ---------- */
.badge{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-sm);text-transform:uppercase}
.b-allow{background:var(--allow-bg);color:var(--allow)}
.b-deny{background:var(--deny-bg);color:var(--deny)}
.b-hitl{background:var(--hitl-bg);color:var(--hitl)}
.chip{font-family:var(--font-mono);font-size:13px;background:var(--surface-alt);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:2px 8px;color:var(--firma-teal);
  display:inline-block;white-space:nowrap}
.surf-teal .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}

/* ---------- Product frame ---------- */
.frame{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  overflow:hidden;border:1px solid var(--line-soft)}
.frame-bar{display:flex;gap:6px;padding:12px var(--s4);border-bottom:1px solid var(--line-soft);
  background:var(--surface-alt)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.frame-body{padding:var(--s5);background:var(--surface-alt)}

/* audit table mock */
.audit{display:grid;gap:8px;font-family:var(--font-mono);font-size:12px}
.audit-row{display:grid;grid-template-columns:1.4fr 1fr 1.3fr auto;gap:var(--s4);align-items:center}
.audit-row .t{color:var(--ink-muted)}
.audit-row .a{color:var(--ink)}
.audit-row .x{color:var(--firma-teal)}
.audit-head{border-bottom:1px solid var(--line-soft);padding-bottom:8px;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.06em;font-size:10px}

/* ---------- Terminal ---------- */
.term{background:var(--firma-teal-dark);color:#DDEBEE;border-radius:var(--r-md);
  padding:var(--s5);font-family:var(--font-mono);font-size:13px;line-height:1.9;overflow:auto}
.term .ok{color:var(--live)}.term .no{color:#FCA5A5}.term .dim{opacity:.55}

/* ---------- Tabs (Screen 3) ---------- */
.tabs{display:grid;grid-template-columns:270px 1fr;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.tablist{background:var(--firma-teal-tint-2);padding:var(--s4);display:grid;gap:4px;align-content:start}
.tab{padding:14px var(--s4);border-radius:var(--r-md);font-size:var(--fs-small);font-weight:500;
  color:var(--ink-body);cursor:pointer;border:none;background:transparent;text-align:left;
  font-family:inherit;transition:.15s ease}
.tab:hover{background:rgba(33,112,125,.08)}
.tab[aria-selected="true"]{background:var(--firma-teal);color:#fff;font-weight:600}
.tabpanel{padding:var(--s6);min-width:0}
.tabpanel[hidden]{display:none}
.tabpanel h3{margin-bottom:var(--s4)}
.tabpanel p + p{margin-top:var(--s4)}
.tab-figure{margin-top:var(--s6)}

/* ---------- Diagram primitives ---------- */
.node{background:var(--firma-teal);color:#fff;border-radius:var(--r-md);padding:12px 18px;
  font-weight:600;font-size:var(--fs-small);display:inline-flex;align-items:center;gap:10px;text-align:center}
.node-light{background:var(--firma-teal-tint);color:var(--firma-teal);border:1px solid rgba(33,112,125,.2)}
.node-neutral{background:var(--surface-grey);color:var(--ink);font-weight:500}
.panel{background:var(--firma-teal-tint-2);border-radius:var(--r-xl);padding:var(--s6)}
.flow{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center}
.arrow{color:var(--line);font-size:22px;line-height:1}
.surf-teal .arrow{color:rgba(255,255,255,.5)}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.split-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* ---------- Video ---------- */
.video-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);background:#000;
  aspect-ratio:16/9;position:relative}
.video-frame iframe,.video-frame video{width:100%;height:100%;border:0;display:block}
.video-placeholder{position:absolute;inset:0;display:grid;place-items:center;gap:var(--s4);
  background:linear-gradient(135deg,var(--firma-teal-deep),var(--firma-teal-dark));
  color:#fff;text-align:center;padding:var(--s6);align-content:center}
.play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;font-size:20px}

/* ---------- Form ---------- */
.form-panel{background:#fff;border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--sh-3)}
.field{display:grid;gap:6px;margin-bottom:var(--s4)}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.field input,.field textarea,.field select{font-family:inherit;font-size:var(--fs-small);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  color:var(--ink);width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--firma-teal);outline:none;
  box-shadow:0 0 0 3px rgba(33,112,125,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form-note{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:var(--s3)}

/* ---------- Resource cards ---------- */
.res-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.res-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--sh-1);transition:.2s ease}
.res-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.res-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--firma-teal-deep),var(--firma-teal));
  display:grid;place-items:center;color:#fff;position:relative}
.res-thumb .play{width:52px;height:52px;font-size:16px}
.res-body{padding:var(--s5);display:grid;gap:10px;align-content:start;flex:1}
.res-type{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--firma-teal)}
.res-card h3{font-size:var(--fs-h4);font-weight:600}
.res-card p{font-size:var(--fs-small);color:var(--ink-body)}
.res-date{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:auto;padding-top:var(--s3)}

/* ---------- Prose (resource + about body) ---------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:var(--s5)}
.prose h2{font-size:var(--fs-h3);font-weight:600;margin-top:var(--s7)}
.prose p{font-size:17px}
.prose ul{padding-left:1.2em;display:grid;gap:10px}
.prose li{font-size:17px}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:var(--fs-caption);color:var(--ink-muted);margin-bottom:var(--s4)}
.crumb a{color:var(--ink-muted);text-decoration:none}
.crumb a:hover{color:var(--firma-teal)}

/* ---------- Callout ---------- */
.callout{border-left:3px solid var(--firma-teal);background:var(--firma-teal-tint-2);
  padding:var(--s4) var(--s5);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-small)}

/* ---------- Namecard ---------- */
.contact-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.namecard{background:#fff;border-radius:var(--r-md);padding:12px 18px;box-shadow:var(--sh-1);min-width:220px}
.namecard b{display:block;color:var(--ink);font-size:var(--fs-small)}
.namecard span{font-size:var(--fs-caption);color:var(--ink-muted)}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(135deg,var(--firma-teal-deep),var(--firma-teal));color:#fff;
  padding:var(--s8) 0 var(--s6)}
.footer a{color:rgba(255,255,255,.85);text-decoration:none;font-size:var(--fs-small)}
.footer a:hover{color:#fff;text-decoration:underline}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6);align-items:start}
.footer h4{font-size:12px;font-family:var(--font-mono);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--s3)}
.footer ul{list-style:none;display:grid;gap:10px}
.footer-tag{font-size:var(--fs-small);color:rgba(255,255,255,.75);max-width:38ch;margin-top:var(--s4)}
.footer-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.18);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--fs-caption);color:rgba(255,255,255,.7)}
.footer-bottom a{font-size:var(--fs-caption)}

/* ---------- Motion ---------- */

/* ============================================================
   ADDITIONS: hero diagram, donut stats, normalizer table,
   agent grid, HITL mock
   ============================================================ */

/* ---------- Hero ---------- */
.hero-copy{max-width:60ch}
.hero-figure{margin-top:var(--s8)}

/* ---------- Org diagram (hero + tabs) ---------- */
.org-wrap{background:#fff;border-radius:var(--r-xl);padding:var(--s7);box-shadow:var(--sh-3)}
.org{display:grid;grid-template-columns:minmax(150px,1fr) 28px minmax(300px,2fr) 28px minmax(150px,1fr);
  gap:var(--s3);align-items:center}
.org-arrow{color:var(--line);font-size:22px;text-align:center;line-height:1}

.org-agents{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);text-align:center;box-shadow:var(--sh-1)}
.org-agents::before,.org-agents::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);z-index:-1}
.org-agents::before{transform:translate(7px,-7px)}
.org-agents::after{transform:translate(14px,-14px)}
.org-agents b{display:block;color:var(--ink);font-size:var(--fs-small);line-height:1.35}
.org-agents svg{margin:0 auto var(--s3);color:var(--ink)}

.org-panel{background:var(--firma-teal-tint);border-radius:var(--r-xl);padding:var(--s5);
  display:grid;gap:var(--s3);justify-items:center}
.org-node{background:var(--firma-teal);color:#fff;border-radius:var(--r-lg);padding:14px var(--s5);
  font-weight:700;font-size:var(--fs-small);display:flex;align-items:center;gap:12px;width:100%}
.org-node img{width:26px;height:26px;flex:none}
.org-down{color:var(--ink-muted);font-size:20px;line-height:1}

.org-sidecar{position:relative;background:var(--firma-teal);color:#fff;border-radius:var(--r-lg);
  padding:var(--s5);width:100%}
.org-sidecar::before,.org-sidecar::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--firma-teal-deep);z-index:-1}
.org-sidecar::before{transform:translate(7px,7px)}
.org-sidecar::after{transform:translate(14px,14px)}
.org-sidecar > b{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);margin-bottom:var(--s4)}
.org-sidecar img{width:26px;height:26px;flex:none}
.org-sidecar ul{list-style:none;display:grid;gap:12px}
.org-sidecar li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:14px;line-height:1.4;color:#fff}
.org-sidecar li i{width:22px;height:22px;border-radius:50%;background:#fff;color:var(--firma-teal);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}

.org-res{background:var(--surface-grey);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:10px}
.org-res b{color:var(--ink);text-align:center;display:block;margin-bottom:var(--s2)}
.org-res span{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:10px 14px;font-size:14px;font-weight:600;color:var(--ink);text-align:center}


/* ---------- Donut stats ---------- */
.donut-row{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:var(--s7);
  align-items:center;max-width:820px}
.donut-item{display:flex;align-items:center;gap:var(--s5)}
.donut{position:relative;width:132px;height:132px;margin:0;flex:none}
.donut svg{width:132px;height:132px;transform:rotate(-90deg)}
.donut .track{fill:none;stroke:var(--firma-teal-tint);stroke-width:12}
.donut .val{fill:none;stroke:var(--firma-teal);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.9,.3,1)}
.donut figcaption{position:absolute;inset:0;display:grid;place-items:center;
  font-size:26px;font-weight:700;color:var(--firma-teal);letter-spacing:var(--ls-tight)}
.donut-item p{font-size:var(--fs-small);max-width:26ch;margin:0}
.source-note{font-size:11px;line-height:1.5;color:var(--ink-muted)}

/* ---------- Normalizer table ---------- */
.normtable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.normtable th{background:var(--surface-alt);text-align:left;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);
  padding:12px var(--s4);font-weight:500;border-bottom:1px solid var(--line-soft)}
.normtable td{padding:14px var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:top;
  font-size:13px;font-family:var(--font-mono);color:var(--ink-body)}
.normtable tr:last-child td{border-bottom:0}
.normtable .cls{color:var(--firma-teal);font-weight:500}
.normtable .src{color:var(--ink)}
.normtable .res{color:var(--ink-muted);font-size:12px}
.table-scroll{overflow-x:auto}

/* ---------- Agent grid (central policy management) ---------- */
.agentmap{display:grid;gap:var(--s5);justify-items:center}
.agentmap .org-node{max-width:420px}
.agentmap .fanout{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.agentcard{border:1px solid rgba(33,112,125,.28);border-radius:var(--r-lg);overflow:hidden;
  background:var(--firma-teal-tint);display:grid;grid-template-rows:1fr auto}
.agentcard .who{display:grid;place-items:center;padding:var(--s5) var(--s3);text-align:center;
  font-weight:700;font-size:14px;color:var(--ink);min-height:78px}
.agentcard .who em{font-weight:400;font-style:italic;color:var(--ink-body)}
.agentcard .sc{background:var(--firma-teal);color:#fff;font-size:12px;font-weight:600;
  padding:9px var(--s3);display:flex;align-items:center;gap:8px;justify-content:center}
.agentcard .sc img{width:16px;height:16px}
.resbar{width:100%;background:var(--surface-grey);border-radius:var(--r-lg);padding:var(--s4);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center}
.resbar b{color:var(--ink)}
.resbar span{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink)}

/* ---------- HITL mock ---------- */
.hitl{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--s5)}
.hitl h4{font-size:16px;font-weight:600;margin-bottom:var(--s3)}
.appr{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:var(--s4);margin-bottom:var(--s3)}
.appr-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start;margin-bottom:10px}
.appr .scope{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);display:block;margin-bottom:3px}
.appr .cls{font-family:var(--font-mono);font-size:14px;color:var(--ink);font-weight:500}
.appr-meta{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:12px}
.appr-meta div{display:grid;gap:2px}
.appr-meta dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.appr-meta dd{margin:0;font-family:var(--font-mono);font-size:12px;color:var(--ink-body)}
.appr-act{display:flex;gap:8px;flex-wrap:wrap}
.mini{font-size:12px;font-weight:600;border-radius:var(--r-sm);padding:7px 12px;border:1px solid transparent;
  font-family:var(--font-sans)}
.mini-ok{background:var(--allow-bg);color:var(--allow);border-color:rgba(21,128,61,.25)}
.mini-no{background:var(--deny-bg);color:var(--deny);border-color:rgba(153,27,27,.2)}
.mini-alt{background:#fff;color:var(--ink-body);border-color:var(--line)}
.ttl{font-family:var(--font-mono);font-size:11px;background:var(--hitl-bg);color:var(--hitl);
  padding:3px 9px;border-radius:var(--r-sm);white-space:nowrap}
.side-panel{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s4)}
.active-item{border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:12px}
.active-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.active-item .cls{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);font-weight:500;
  display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}
.active-item .kv{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);
  font-size:11px;color:var(--ink-muted)}
.active-item .kv span:last-child{color:var(--ink-body)}
.bar{height:4px;border-radius:2px;background:var(--line-soft);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--firma-teal)}

/* ============================================================
   ROUND 2 ADDITIONS
   ============================================================ */

/* ---------- Compact org diagram (hero) ---------- */
.org.is-compact{grid-template-columns:minmax(96px,1fr) 18px minmax(150px,1.6fr) 18px minmax(96px,.95fr);gap:10px}
.org.is-compact .org-wrap{padding:var(--s5)}
.org.is-compact .org-agents{padding:var(--s4) 10px}
.org.is-compact .org-agents b{font-size:12px}
.org.is-compact .org-agents svg{width:34px;height:34px;margin-bottom:8px}
.org.is-compact .org-panel{padding:var(--s4);gap:10px}
.org.is-compact .org-node{padding:10px 12px;font-size:12px;gap:8px;border-radius:var(--r-md)}
.org.is-compact .org-node img{width:20px;height:20px}
.org.is-compact .org-sidecar{padding:var(--s4);border-radius:var(--r-md)}
.org.is-compact .org-sidecar > b{font-size:12px;margin-bottom:0;gap:8px}
.org.is-compact .org-sidecar img{width:20px;height:20px}
.org.is-compact .org-sidecar::before{transform:translate(5px,5px)}
.org.is-compact .org-sidecar::after{transform:translate(10px,10px)}
.org.is-compact .org-res{padding:var(--s4) 10px;gap:7px}
.org.is-compact .org-res b{font-size:13px;margin-bottom:4px}
.org.is-compact .org-res span{padding:7px 8px;font-size:12px}
.org.is-compact .org-arrow{font-size:17px}
.org.is-compact .org-down{font-size:16px}

/* ---------- Dashboard shell (product mocks) ---------- */
.frame-flush{padding:0}
.dash{display:grid;grid-template-columns:186px 1fr;background:var(--surface)}
/* Grid children refuse to shrink below their content unless told to.
   Without this a wide table drags the whole page sideways. */
.dash > *{min-width:0}
.dash-side{background:#fff;border-right:1px solid var(--line-soft);padding:var(--s4)}
.dash-brand{font-weight:700;font-size:15px;color:var(--ink);line-height:1}
.dash-brand span{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted);
  font-weight:400;margin-top:4px}
.dash-navlabel{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin:var(--s5) 0 8px}
.dash-nav{list-style:none;display:grid;gap:2px}
.dash-nav li{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-body)}
.dash-nav li.on{background:var(--firma-teal-tint-2);color:var(--firma-teal);font-weight:600;
  box-shadow:inset 2px 0 0 var(--firma-teal)}
.dash-nav .pill{background:var(--hitl-bg);color:var(--hitl);font-family:var(--font-mono);
  font-size:9.5px;padding:1px 6px;border-radius:var(--r-pill)}
.dash-main{background:var(--surface-alt);padding:var(--s5)}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5)}
.dash-crumb{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted)}
.dash-crumb b{color:var(--ink);font-weight:600}
.roleswitch{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-muted)}
.roleswitch span{padding:5px 10px;border-radius:var(--r-sm);border:1px solid transparent}
.roleswitch span.on{background:#fff;border-color:var(--line);color:var(--allow);font-weight:600}
.dash-h{font-size:22px;font-weight:600;color:var(--ink);margin-bottom:6px}
.dash-sub{font-size:12.5px;color:var(--ink-body);margin-bottom:var(--s5);max-width:70ch}
.dash-sectitle{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;font-weight:600;color:var(--ink);margin-bottom:var(--s3)}
.dash-sectitle em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted);font-weight:400}

/* ---------- Agents grid ---------- */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--s4)}
.agent{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s4)}
.agent-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.agent-logo{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:#fff;border:1px solid var(--line-soft);color:var(--firma-teal);overflow:hidden}
.agent-logo img,.agent-logo svg{width:20px;height:20px;display:block;object-fit:contain}
.agent-name{min-width:0;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);font-weight:600;
  line-height:1.25;overflow-wrap:anywhere}
.agent-idline{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted);
  margin:6px 0 12px;padding-left:40px}
.dot{font-family:var(--font-mono);font-size:9.5px;padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.dot-on{background:var(--allow-bg);color:var(--allow)}
.dot-idle{background:var(--surface-grey);color:var(--ink-muted)}
.agent-kv{display:grid;gap:7px;border-top:1px solid var(--line-soft);padding-top:10px}
.agent-kv div{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px}
.agent-kv dt{color:var(--ink-muted)}
.agent-kv dd{margin:0;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-body)}
.tag{font-family:var(--font-mono);font-size:9.5px;padding:2px 7px;border-radius:var(--r-sm)}
.tag-strict{background:var(--firma-teal-tint);color:var(--firma-teal);font-weight:600}
.tag-dev{background:var(--hitl-bg);color:var(--hitl);font-weight:600}
.tag-none{background:var(--surface-grey);color:var(--ink-muted)}
.tag-pending{background:var(--hitl-bg);color:var(--hitl);font-weight:600}

/* ---------- Normalizer UI table ---------- */
.norm{width:100%;border-collapse:collapse;background:#fff}
.norm th,.norm td{text-align:left;padding:11px var(--s4);vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.norm thead .grp th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;padding-top:12px;padding-bottom:8px;border-bottom:0}
.norm .grp .in{color:var(--ink-muted)}
.norm .grp .out{color:var(--firma-teal);background:var(--firma-teal-tint-2);
  border-top-left-radius:var(--r-sm);border-top-right-radius:var(--r-sm)}
.norm .grp .out i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.norm .grp .out img{width:13px;height:13px}
.norm thead .col th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:400;padding-top:0;padding-bottom:8px}
.norm td.f{background:var(--firma-teal-tint-2)}
.norm thead .col th.f{background:var(--firma-teal-tint-2)}
.norm .call{font-family:var(--font-mono);font-size:12px;color:var(--ink);line-height:1.5}
.norm .call em{font-style:normal;color:var(--ink-muted)}
.norm .cls{font-family:var(--font-mono);font-size:12px;color:var(--firma-teal);font-weight:500}
.norm .res{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted);line-height:1.6}
.norm tr:last-child td{border-bottom:0}
.norm-note{display:flex;align-items:center;gap:8px;padding:11px var(--s4);
  background:var(--firma-teal-tint-2);font-size:11.5px;color:var(--ink-body)}
.norm-note b{color:var(--firma-teal)}
.norm-scroll{overflow-x:auto}

/* ============================================================
   ROUND 3
   ============================================================ */

/* ---------- Hero: headline capped to 3 lines ---------- */
.split-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s7);align-items:center}
.hero-h1{font-size:clamp(32px,3.7vw,46px);font-weight:600;line-height:1.12;letter-spacing:var(--ls-tight);
  text-wrap:balance;max-width:15ch}

/* ---------- Hero diagram, directly on the teal band ---------- */
.hd{display:grid;grid-template-columns:1fr 20px 1.45fr 20px 1fr;gap:10px;align-items:center}
.hd-arrow{color:rgba(255,255,255,.55);font-size:19px;text-align:center;line-height:1}

/* the two matched outer blocks */
.hd-side{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r-lg);padding:var(--s4) 12px;text-align:center;color:#fff}
.hd-side b{display:block;font-size:13px;line-height:1.35;color:#fff}
.hd-side svg{margin:0 auto 8px;color:#fff}
.hd-side .hd-list{display:grid;gap:6px;margin-top:10px}
.hd-side .hd-list span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);padding:6px 8px;font-size:12px;color:#fff}

/* the Firma group */
.hd-firma{position:relative;border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-xl);
  padding:var(--s5) var(--s4) var(--s4);display:grid;gap:8px;justify-items:center;
  background:rgba(255,255,255,.06)}
.hd-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--firma-teal);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hd-tag img{width:12px;height:12px}
.hd-block{width:100%;background:#fff;color:var(--firma-teal);border-radius:var(--r-md);
  padding:11px 12px;font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:9px;
  justify-content:center;text-align:center;line-height:1.3}
.hd-block img{width:19px;height:19px;flex:none}
.hd-block-soft{background:rgba(255,255,255,.86)}
.hd-down{color:rgba(255,255,255,.7);font-size:15px;line-height:1}

/* ---------- Tab 1: guardrail diagram (left to right) ---------- */
.gr{display:grid;gap:var(--s4);justify-items:center}
.gr-flow{display:grid;grid-template-columns:auto 26px minmax(150px,.85fr);align-items:center;gap:var(--s3);width:100%}
.gr-box{position:relative;border:1.6px solid var(--firma-teal);border-radius:var(--r-xl);
  background:var(--firma-teal-tint-2);padding:var(--s6) var(--s5) var(--s5);
  display:grid;grid-template-columns:1fr 26px 1.15fr;align-items:center;gap:var(--s3)}
.gr-tag{position:absolute;top:-11px;left:24px;background:var(--firma-teal);color:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px}
.gr-tag img{width:12px;height:12px}
.gr-agent{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 14px;display:grid;justify-items:center;gap:8px;text-align:center;
  font-weight:600;color:var(--ink);font-size:14px}
.gr-firma{background:var(--firma-teal);color:#fff;border-radius:var(--r-md);
  padding:16px 14px;display:grid;justify-items:center;gap:8px;text-align:center;font-weight:700;font-size:14px;line-height:1.3}
.gr-firma img{width:22px;height:22px}
.gr-ext{background:var(--surface-grey);border-radius:var(--r-md);padding:16px 14px;
  display:grid;justify-items:center;gap:8px;text-align:center;font-weight:600;color:var(--ink);font-size:14px;line-height:1.35}
.gr-arrow{color:var(--line);font-size:20px;line-height:1;text-align:center}
.gr-blocked{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--deny);
  background:var(--deny-bg);border-radius:var(--r-pill);padding:5px 12px;font-weight:600}
.gr-blocked s{text-decoration:none;font-family:var(--font-mono);font-size:13px}

/* ---------- Tab 3: dashboard without sidebar ---------- */
.dash-solo{grid-template-columns:1fr}

/* ============================================================
   ROUND 5
   ============================================================ */

/* ---------- Hero diagram: three blocks on one row, authority above ---------- */
.hd{grid-template-columns:minmax(96px,1fr) 18px minmax(170px,1.5fr) 18px minmax(96px,1fr);
  grid-template-rows:auto 12px auto;row-gap:0}
.hd > *{position:relative;z-index:1}
.hd-box{grid-column:3;grid-row:1 / 4;z-index:0;
  border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-xl);
  background:rgba(255,255,255,.06);margin:-16px -14px}
.hd-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--firma-teal);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;z-index:2}
.hd-tag img{width:12px;height:12px}
.hd-auth{grid-column:3;grid-row:1}
.hd-link{grid-column:3;grid-row:2;display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:14px}
.hd-agents{grid-column:1;grid-row:3}
.hd-a1{grid-column:2;grid-row:3}
.hd-int{grid-column:3;grid-row:3}
.hd-a2{grid-column:4;grid-row:3}
.hd-res{grid-column:5;grid-row:3}

/* ---------- Shared dashboard header: title left, meta right ---------- */
.dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s5)}
.dash-head h4{font-size:22px;font-weight:600;color:var(--ink);margin:0}
.dash-head em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted)}

/* ---------- Table screens: white card on the grey canvas ---------- */
.table-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
/* When a table is too wide to fit, let it scroll sideways rather than be
   silently chopped off. .table-card's overflow:hidden would otherwise win,
   because it is declared later than .norm-scroll. */
.table-card.norm-scroll{overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-card .norm{border-radius:0}

/* ============================================================
   ROUND 6
   ============================================================ */

/* 1. Hero boundary must fill the middle column, not collapse to a line.
      .hd sets align-items:center, so the box needs an explicit stretch. */
.hd-box{align-self:stretch}

/* 2. Matched side blocks: same column width already, now same height too. */
.hd-agents,.hd-res{align-self:stretch}
.hd-side{display:grid;align-content:center;justify-items:center;gap:6px}
.hd-side .hd-list{width:100%}

/* ============================================================
   ROUND 7: hero diagram alignment
   ============================================================ */
.hd{
  /* row 1 authority · row 2 longer connector · row 3 interception · row 4 inner padding */
  grid-template-rows:auto 34px auto 14px;
}
/* 1. all three bottoms land on the same line (end of row 4) */
.hd-box{grid-row:1 / 5;margin:-16px -14px 0;align-self:stretch}
.hd-agents,.hd-res{grid-row:3 / 5;align-self:end}
.hd-a1,.hd-a2{grid-row:3}

/* 3. longer connector from authority down to interception */
.hd-link{grid-row:2;align-self:stretch;display:grid;place-items:center;position:relative}
.hd-link::before{content:"";position:absolute;top:2px;bottom:14px;width:1.5px;
  background:rgba(255,255,255,.5)}
.hd-link span{position:relative;z-index:1;align-self:end;line-height:1}

/* 4. the two Firma blocks share one height */
.hd-block{min-height:62px}

/* 2. Resources sits lower: tighter chips, natural height, bottom aligned */
.hd-res{padding:var(--s3) 10px}
.hd-res .hd-list{gap:5px;margin-top:8px}
.hd-res .hd-list span{padding:5px 8px;font-size:11.5px}
.hd-agents{padding:var(--s4) 10px}


/* ============================================================
   ROUND 8
   ============================================================ */

/* Audit table (tab 5): one line per cell, timestamp is the only wrapper. */
#p5 .norm th,#p5 .norm td{white-space:nowrap}
#p5 .norm td,#p5 .norm thead .col th{padding-left:11px;padding-right:11px}
#p5 .norm .call,#p5 .norm .cls{font-size:11.5px}
#p5 .norm .res{font-size:10px}
#p5 .norm .badge{white-space:nowrap}
/* first column may break across lines so the rest stay on one */
#p5 .norm thead .col th:first-child,#p5 .norm td:first-child{
  white-space:normal;width:74px}

/* Hero diagram
   5. more air between the authority block and the top of the Firma boundary
   4. taller connector, centred on the column
   3. Resources trimmed to the height of the AI agents block */
.hd{grid-template-rows:auto 46px auto 14px}
.hd-box{margin:-30px -14px 0}
.hd-link{justify-items:center}
.hd-link::before{top:0;bottom:13px;left:50%;transform:translateX(-50%)}
.hd-res{padding:10px 10px;align-content:center}
.hd-res .hd-list{gap:4px;margin-top:6px}
.hd-res .hd-list span{padding:3px 7px;font-size:11px}


/* Legal pages: privacy, terms, cookies */
.legal-date{margin-top:var(--s5);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.06em;color:rgba(255,255,255,.75)}
.legal{max-width:74ch}
.legal h2{margin-top:var(--s7);font-size:20px}
.legal h2 + p,.legal h2 + ul{margin-top:var(--s4)}
.legal p,.legal li{color:var(--ink-muted)}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal a{color:var(--firma-teal);text-decoration:underline;text-underline-offset:3px}
.legal-todo{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
  color:var(--firma-teal);background:var(--firma-teal-tint-2);
  border:1px dashed var(--firma-teal);border-radius:var(--r-md);padding:10px 14px}
.legal-table{width:100%;border-collapse:collapse;background:#fff}
.legal-table th,.legal-table td{text-align:left;padding:12px var(--s4);
  border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14px;
  color:var(--ink-muted)}
.legal-table th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);background:var(--surface-alt)}
.legal-table tr:last-child td{border-bottom:0}
.legal .mono{font-family:var(--font-mono);font-size:.92em;color:var(--firma-teal)}

/* ============================================================
   ROUND 9: hero diagram
   ============================================================ */

/* 1. AI agents and Resources are one and the same height. Both fill the
      full block row, so whichever has more content sets the height and the
      other follows. Content stays optically centred inside. */
.hd-agents,.hd-res{align-self:stretch;align-content:center}

/* 2. No connector line. A single arrow, centred in the gap. */
.hd-link::before{content:none}
.hd-link{align-content:center}
.hd-link span{align-self:center;font-size:19px;color:rgba(255,255,255,.7)}

/* ============================================================
   ROUND 10
   ============================================================ */

/* Header: GitHub and Book a demo live in the buttons on the right, so the
   inline nav does not repeat them. Below 900px the buttons are hidden and
   the nav becomes the burger menu, so there they come back. */
.nav .nav-only-mobile{display:none}


@media(prefers-reduced-motion:reduce){
  #cc{transition:none}
}

@media(max-width:1100px){.hero-h1{max-width:none}}

@media(max-width:980px){.split-hero{grid-template-columns:1fr;gap:var(--s6)}}

@media(max-width:980px){.hd{grid-template-columns:1fr;gap:var(--s4)}.hd .hd-arrow{transform:rotate(90deg)}}

@media(max-width:980px){
  .hd{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s4)}
  .hd > *{grid-column:1 !important;grid-row:auto !important}
  .hd-box{display:none}
  .hd-tag{position:static;transform:none;justify-self:center}
  .hd-a1,.hd-a2{transform:rotate(90deg)}
}

@media(max-width:980px){
  .hd{grid-template-rows:none}
  .hd-agents,.hd-res,.hd-a1,.hd-a2{grid-row:auto !important;align-self:auto}
  .hd-link::before{display:none}
}

@media(max-width:980px){
  /* Hero diagram is desktop-only.
     Once it stacks it reads top to bottom as authority, agents, interception,
     resources, which looks like a four-step sequence. The architecture is not
     a sequence: agents pass through interception to reach resources, and the
     authority governs that from above. A diagram that says the wrong thing is
     worse than no diagram, so it is hidden rather than reflowed. The hero
     keeps its headline, subhead and both buttons. */
  .hd{display:none}
}

@media(max-width:980px){
  .hd-box{margin:0}
}

@media(max-width:980px){
  .hd-agents,.hd-res{min-height:0}
}

@media(max-width:960px){
  .org{grid-template-columns:1fr;gap:var(--s4)}
  .org-arrow{transform:rotate(90deg)}
  .org-agents::before,.org-agents::after{display:none}
  .org-wrap{padding:var(--s5)}
}

@media(max-width:960px){.org.is-compact{grid-template-columns:1fr}}

@media(max-width:920px){.split,.split-rev{grid-template-columns:1fr;gap:var(--s6)}}

@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:var(--s3) var(--gutter) var(--s5);
    border-bottom:1px solid var(--line-soft);display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .nav-actions{display:none}
}

@media(max-width:900px){
  .nav .nav-only-mobile{display:block}
}

@media(max-width:860px){
  .tabs{grid-template-columns:1fr}
  .tablist{display:flex;overflow-x:auto;gap:8px;padding:var(--s3)}
  .tab{white-space:nowrap;padding:10px 16px}
  .tabpanel{padding:var(--s5)}
}

@media(max-width:820px){.hitl{grid-template-columns:1fr}}

@media(max-width:820px){.norm{min-width:720px}}

@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:var(--s5)}}

@media(max-width:760px){.agentmap .fanout{grid-template-columns:repeat(2,1fr)}}

@media(max-width:760px){
  .gr-flow,.gr-box{grid-template-columns:1fr}
  .gr-arrow{transform:rotate(90deg)}
}

@media(max-width:720px){.normtable{min-width:640px}}

@media(max-width:720px){.dash{grid-template-columns:1fr}.dash-side{display:none}}

@media(max-width:640px){.audit-row{grid-template-columns:1fr auto}.audit-row .t,.audit-row .a{display:none}}

@media(max-width:640px){.donut-row{grid-template-columns:1fr;gap:var(--s6)}}

@media(max-width:640px){
  #cc .cc-inner{gap:var(--s4)}
  #cc .cc-actions{width:100%}
  #cc .cc-actions .btn{flex:1;min-width:0}
}

@media(max-width:600px){.form-row{grid-template-columns:1fr}}

@media(max-width:420px){.donut-item{flex-direction:column;align-items:flex-start;gap:var(--s3)}}

@media(max-width:420px){.agent-idline{padding-left:0}}

/* Demo form: failure message. Hidden until form.js has something to say. */
.form-status{margin-top:var(--s4);padding:12px 14px;border-radius:var(--r-md);
  background:var(--deny-bg);color:var(--deny);font-size:var(--fs-small);line-height:1.5}
.form-status[hidden]{display:none}