/* Herus — shared site styles for secondary pages (legal, etc.)
   Brand tokens and fonts mirror the homepage bundle exactly so these pages
   are visually consistent with heruscompliance.co. Self-hosted fonts, no
   external calls. See CLAUDE.md for the brand system. */

/* ---- Self-hosted webfonts (latin subset, extracted from the homepage bundle) ---- */
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/dmsans.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/plexmono-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/plexmono-600.woff2") format("woff2"); }

/* ---- Brand tokens (verbatim from the bundle :root) ---- */
:root {
  --bg:#0F1512; --surface:#1A2420; --text:#F5F2EC; --rule:#2A3530;
  --amber:#C4622D; --amber-bright:#d4733c;
  --t70:rgba(245,242,236,0.70); --t60:rgba(245,242,236,0.60);
  --t80:rgba(245,242,236,0.82); --t50:rgba(245,242,236,0.50); --t40:rgba(245,242,236,0.40);
  --serif:"Newsreader",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw:820px;            /* narrower measure for long-form reading */
  --gutter:clamp(20px,5vw,48px);
}

* { margin:0; padding:0; box-sizing:border-box; }
herus-header, herus-footer { display:block; }   /* universal elements defined in /assets/site.js */
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:var(--amber-bright); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:var(--amber); color:var(--bg); }

/* ---- Header ---- */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:24px var(--gutter);
  border-bottom:1px solid var(--rule);
}
.wordmark {
  font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-0.02em;
  color:var(--text); display:inline-flex; align-items:baseline; gap:7px;
}
.wordmark:hover { text-decoration:none; }
.wordmark .dot { width:11px; height:11px; background:var(--amber); display:inline-block; }
.site-header nav { display:flex; gap:28px; align-items:center; }
.site-header nav a {
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t70);
}
.site-header nav a:hover { color:var(--text); text-decoration:none; }
.site-header nav a.cta { color:var(--amber-bright); }

/* ---- Legal / long-form content ---- */
.legal { max-width:var(--maxw); margin:0 auto; padding:56px var(--gutter) 96px; }
.eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--amber70,var(--amber)); color:var(--amber); margin-bottom:16px;
}
.legal h1 {
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,52px);
  line-height:1.08; letter-spacing:-0.02em; margin-bottom:14px;
}
.legal .docmeta { font-family:var(--mono); font-size:13px; color:var(--t60); margin-bottom:32px; }
.legal h2 {
  font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-0.01em;
  margin:44px 0 14px; padding-top:8px;
}
.legal h3 { font-family:var(--sans); font-weight:600; font-size:18px; margin:28px 0 10px; }
.legal p { margin:0 0 16px; color:var(--t80); }
.legal .lead p { font-size:18px; color:var(--text); }
.legal .lead p:first-child { font-family:var(--serif); font-size:20px; line-height:1.55; }
.legal ul, .legal ol { margin:0 0 16px 24px; color:var(--t80); }
.legal li { margin:0 0 8px; }
.legal strong { color:var(--text); font-weight:600; }
.legal a { color:var(--amber-bright); }

/* Placeholder banner — makes clear these are templates pending counsel review */
.placeholder-banner {
  border:1px solid var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, transparent);
  border-radius:8px; padding:16px 18px; margin:0 0 36px;
  font-size:15px; line-height:1.6; color:var(--text);
}
.placeholder-banner strong { color:var(--amber-bright); }

/* Bracketed placeholders for counsel to fill, e.g. [STATE] */
.tbd {
  font-family:var(--mono); font-size:0.9em; color:var(--amber-bright);
  background:color-mix(in srgb, var(--amber) 14%, transparent);
  padding:1px 6px; border-radius:4px; white-space:nowrap;
}

/* Table of contents */
.toc { border:1px solid var(--rule); border-radius:8px; padding:20px 24px; margin:0 0 40px; background:var(--surface); }
.toc p { font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--t60); margin-bottom:10px; }
.toc ol { margin:0 0 0 20px; }
.toc li { margin-bottom:6px; }
.toc a { color:var(--t80); }

/* Wider chrome to match the demo page's wider measure (legal pages keep the
   820px reading measure). */
body.demo-page .site-header, body.demo-page .site-footer { max-width:1060px; }

/* ---- Demo page ----
   Wider than the legal measure: the monitoring surface below needs room.
   The .surface block reproduces the product dashboard's real structure
   (plant card -> condition rows; alert row with escalation tier) so the
   page shows the actual shape of the thing, not a decorative mockup. */
.demo { max-width:1060px; margin:0 auto; padding:56px var(--gutter) 40px; }
.demo-hero { max-width:760px; }
.demo h1 {
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,52px);
  line-height:1.08; letter-spacing:-0.02em; margin-bottom:18px;
}
.demo .lead { font-size:19px; line-height:1.6; color:var(--t80); margin-bottom:8px; }
.demo h2 {
  font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-0.01em;
  margin:0 0 12px;
}
.demo section { margin:72px auto 0; max-width:1060px; }

/* Caption above the surface */
.surface-label {
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline;
  margin-bottom:14px;
}
.surface-label .tag {
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--amber);
}
.surface-label .note { font-size:14px; color:var(--t50); }

/* ---- The monitoring surface ---- */
.surface {
  border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  overflow:hidden;
}
.surface-bar {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.surface-bar .who { font-family:var(--mono); font-size:12px; color:var(--t60); letter-spacing:0.04em; }
.surface-bar .live { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--t70); }
.surface-bar .live::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--amber);
}
.surface-body { padding:20px; display:grid; gap:18px; }

/* Plant card */
.pcard { border:1px solid var(--rule); border-radius:8px; background:color-mix(in srgb, var(--bg) 40%, transparent); }
.pcard-head {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--rule);
}
.pcard-name { font-family:var(--sans); font-weight:600; font-size:16px; }
.pcard-name .code { font-family:var(--mono); font-weight:400; font-size:12px; color:var(--t50); margin-left:8px; }

/* Condition row */
.crow {
  display:grid; grid-template-columns:1fr auto auto; gap:12px 20px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--rule);
}
.crow:last-child { border-bottom:0; }
.crow-title { font-size:15px; font-weight:500; margin-bottom:5px; }
.crow-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--t50); }
.crow-meta .mono { font-family:var(--mono); color:var(--t60); }
.crow-value { font-family:var(--mono); font-size:14px; color:var(--t80); white-space:nowrap; }

/* Status pills — mirror the product's four condition states */
.pill {
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap;
  border:1px solid currentColor;
}
.pill-ok       { color:#6fae86; }
.pill-clearing { color:#c9a227; }
.pill-violation{ color:var(--amber-bright); background:color-mix(in srgb, var(--amber) 16%, transparent); }
.pill-unknown  { color:var(--t50); }

/* Alert row */
.arow {
  border:1px solid color-mix(in srgb, var(--amber) 45%, var(--rule));
  border-radius:8px; padding:16px 18px;
  background:color-mix(in srgb, var(--amber) 7%, transparent);
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-start; justify-content:space-between;
}
.arow-title { font-size:15px; font-weight:600; margin-bottom:6px; }
.arow-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--t60); margin-bottom:10px; }
.arow-meta .mono { font-family:var(--mono); }
.arow-esc { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.arow-esc .tier { color:var(--text); font-weight:500; }
.arow-esc .clock { font-family:var(--mono); color:var(--amber-bright); }
.ack {
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--bg); background:var(--amber); border:0; border-radius:6px;
  padding:10px 16px; cursor:default; white-space:nowrap;
}

/* Annotation callouts under the surface */
.notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }
.note {
  border-left:2px solid var(--amber); padding:2px 0 2px 16px;
}
.note h3 { font-family:var(--sans); font-weight:600; font-size:15px; margin-bottom:6px; }
.note p { font-size:14.5px; line-height:1.6; color:var(--t70); margin:0; }

/* Honest-scope callout */
.scope {
  border:1px solid var(--rule); border-radius:8px; padding:20px 22px;
  background:var(--surface); font-size:15px; line-height:1.65; color:var(--t70);
}
.scope strong { color:var(--text); font-weight:600; }

/* Closing CTA */
.demo-cta {
  border-top:1px solid var(--rule); margin-top:80px; padding-top:48px; text-align:center;
}
.demo-cta h2 { margin-bottom:12px; }
.demo-cta p { color:var(--t70); max-width:560px; margin:0 auto 26px; }
.btn-cta {
  display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--bg); background:var(--amber);
  padding:15px 28px; border-radius:6px;
}
.btn-cta:hover { background:var(--amber-bright); text-decoration:none; }
.demo-cta .fine { font-size:13.5px; color:var(--t50); margin-top:18px; }

@media (max-width:640px) {
  .crow { grid-template-columns:1fr; }
  .crow-value { order:3; }
  .arow { flex-direction:column; }
}

/* ---- Footer ---- */
.site-footer {
  border-top:1px solid var(--rule);
  max-width:var(--maxw); margin:0 auto; padding:40px var(--gutter) 56px;
  display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between;
}
.site-footer .fcol { display:flex; flex-direction:column; gap:6px; }
.site-footer .legalline { font-size:13px; color:var(--t50); }
.site-footer nav { display:flex; gap:24px; flex-wrap:wrap; }
.site-footer nav a {
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--t70);
}
.site-footer nav a:hover { color:var(--text); text-decoration:none; }