/* ============================================================================
   VibeArmory site: the one stylesheet.

   One dark theme, defined as tokens on :root. Rules below the tokens read tokens only.
   Fonts are the system's (no webfont requests, CSP font-src 'self').

   Sections:
     1. Tokens        2. Base          3. Layout and bar   4. Buttons
     5. Hero          6. Sections      7. Feature rows     8. Cards and grids
     9. Requirements  10. FAQ          11. Forms           12. Prose pages
     13. App illustrations (.app-*): the screenshot slots. Each slot is a <figure data-shot="…">
         in index.html; screenshots/README.md says how to swap one for a PNG.
     14. Terminal     15. Footer       16. Motion and small screens
   ========================================================================= */

/* ---------- 1. Tokens */
:root {
  --bg: #0a0a0b;          /* page */
  --bg-1: #101012;        /* raised surfaces */
  --bg-2: #16161a;        /* app window panes */
  --bg-3: #1d1d22;        /* hovered / selected rows */
  --line: #232328;        /* hairlines */
  --line-2: #303037;      /* stronger borders */
  --text: #f5f5f6;        /* headings, primary type: 18.6:1 on --bg */
  --text-2: #b4b4bb;      /* body: 9.9:1 */
  --text-3: #8c8c95;      /* captions, labels: 6.0:1 */
  --accent: #6ee7b7;      /* restrained mint, used sparingly */
  --accent-ink: #052e1f;  /* text on the accent */
  --accent-dim: rgba(110, 231, 183, .12);
  --tower-glow: rgba(143, 255, 101, .16); /* the lit windows of the logo mark, as a halo behind the hero tower */
  --high: #f87171; --high-bg: rgba(248, 113, 113, .13);
  --med: #fbbf24;  --med-bg: rgba(251, 191, 36, .12);
  --low: #93c5fd;  --low-bg: rgba(147, 197, 253, .12);
  --ok: #6ee7b7;   --ok-bg: rgba(110, 231, 183, .12);

  --fs: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fm: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --r: 8px;
  --r-lg: 14px;
  --sp: clamp(80px, 11vw, 136px); /* vertical rhythm between sections */
  color-scheme: dark;
}

/* ---------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text-2);
  font: 16px/1.6 var(--fs); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { color: var(--text); margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
code, kbd, pre { font-family: var(--fm); font-size: .92em; }
:not(pre) > code { background: var(--bg-2); white-space: nowrap; border: 1px solid var(--line); border-radius: 5px; padding: .08em .38em; color: var(--text); }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Layout and bar */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.bar { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 11, .82); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; letter-spacing: -.01em; }
.brand img { flex: none; display: block; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav .lnk { color: var(--text-2); text-decoration: none; font-size: .9rem; padding: 6px 10px; border-radius: 6px; }
.nav .lnk:hover { color: var(--text); background: var(--bg-2); }

/* ---------- 4. Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r); font: 500 .93rem/1 var(--fs); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-sm { height: 34px; padding: 0 12px; font-size: .86rem; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #ffffff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- 5. Hero */
.hero { padding: clamp(56px, 9vw, 112px) 0 0; position: relative; }
.hero::before { /* faint grid behind the headline */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 640px; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero-top { /* the tower to the left of the title block; stacked on phones (section 16) */
  position: relative; display: grid; grid-template-columns: clamp(220px, 30vw, 380px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px); max-width: 1080px; margin: 0 auto;
}
.hero-copy { min-width: 0; }
/* The guard tower, cropped to the drawing (tower-hero.svg), spans the title block: top of the title to the bottom of
   the buttons. Its column has a set width, so the text's height doesn't depend on the tower; the wrapper stretches to
   the row the text sets, and the absolutely placed image fills it (contain keeps the shape). */
.hero-tower { position: relative; }
.hero-mark {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 48px var(--tower-glow));
}
.facts { /* the at-a-glance strip under the hero: short facts, no numbers */
  position: relative; list-style: none; padding: 0; margin: clamp(40px, 6vw, 56px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; color: var(--text-2); font-size: .92rem;
}
.facts li::before { content: "✓"; color: var(--accent); margin-right: 8px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.045em; line-height: 1.02; font-weight: 700; }
.hero h1 .dim { color: var(--text-3); }
.hero .sub { font-size: clamp(1.05rem, 1.9vw, 1.25rem); max-width: 600px; margin: 20px 0 28px; color: var(--text-2); }
.hero .cta { justify-content: flex-start; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .hero-shot { position: relative; margin: clamp(32px, 5vw, 56px) auto 0; max-width: 1080px; }
.hero-shot::after { /* the window rises out of a soft glow */
  content: ""; position: absolute; inset: 10% 8% -4% 8%; z-index: -1; background: radial-gradient(closest-side, rgba(110, 231, 183, .12), transparent); filter: blur(30px);
}

/* ---------- 6. Sections */
.section { padding: var(--sp) 0 0; }
.section:last-of-type { padding-bottom: var(--sp); }
.eyebrow { font: 500 .78rem/1 var(--fm); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 16px; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.035em; }
.section-head p { margin-top: 18px; font-size: 1.08rem; }
.rule-top { border-top: 1px solid var(--line); }

.questions { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); }
.questions > div { padding: 28px; border-right: 1px solid var(--line); }
.questions > div:last-child { border-right: 0; }
.questions h3 { font-size: 1.05rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.questions p { margin: 0; font-size: .95rem; }
.num { font: 500 .75rem/1 var(--fm); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 6px; }

/* ---------- 7. Feature rows: copy beside an illustration */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip > .feature-copy { order: 2; }
.feature:last-child { padding-bottom: 0; }
.feature h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -.03em; margin-bottom: 16px; }
.feature-copy > p { font-size: 1.02rem; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.note { margin-top: 20px; font-size: .86rem; color: var(--text-3); border-left: 2px solid var(--line-2); padding-left: 12px; }
.badge { display: inline-block; white-space: nowrap; font: 600 .68rem/1 var(--fs); letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 8px; vertical-align: middle; }
.badge-soon { color: var(--med); background: var(--med-bg); }
.badge-req { color: var(--low); background: var(--low-bg); }

/* ---------- 8. Cards and grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.card p { margin: 0; font-size: .93rem; }
.card .k { font: 500 .74rem/1 var(--fm); color: var(--text-3); margin-bottom: 14px; display: block; }

/* How it works: four components with arrows in between */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.flow .card { position: relative; }
.flow .card::before { counter-increment: step; content: "0" counter(step); font: 500 .74rem/1 var(--fm); color: var(--accent); display: block; margin-bottom: 14px; }
.flow .where { display: block; margin-top: 14px; font: .76rem/1.4 var(--fm); color: var(--text-3); }

/* ---------- 10. FAQ */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; color: var(--text); font-weight: 550; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 1.5rem/1 var(--fs); color: var(--text-3); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 22px; max-width: 700px; }
.faq details > div p:last-child { margin: 0; }

/* Closing band */
.closing { text-align: center; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(40px, 7vw, 80px) var(--gutter); background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(110, 231, 183, .08), transparent), var(--bg-1); }
.closing h2 { margin-bottom: 16px; }
.closing p { max-width: 560px; margin: 0 auto 28px; }

/* ---------- 11. Forms */
.page { padding: clamp(48px, 8vw, 96px) 0 var(--sp); }
.page-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.page-copy h1 { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.04em; margin-bottom: 20px; }
.page-copy ul { padding-left: 1.2em; }
.page-copy li { margin-bottom: 6px; }
.form-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 32px); }
.field { margin-bottom: 20px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; color: var(--text); font-size: .9rem; font-weight: 550; margin-bottom: 8px; padding: 0; }
.field label span, .field legend span { color: var(--text-3); font-weight: 400; }
input[type=text], input[type=email], select, textarea {
  width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 16px var(--fs);
}
textarea { display: block; height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text-3); box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--high); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 12px; font-size: .9rem; color: var(--text-2); cursor: pointer; }
.checks input { accent-color: var(--accent); margin: 0; }
.checks label:has(input:checked) { border-color: var(--text-3); color: var(--text); background: var(--bg-2); }
.err { color: var(--high); font-size: .84rem; margin: 6px 0 0; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r); font-size: .92rem; }
.status.good { background: var(--ok-bg); color: var(--text); border: 1px solid rgba(110, 231, 183, .3); }
.status.bad { background: var(--high-bg); color: var(--text); border: 1px solid rgba(248, 113, 113, .35); }
.form-note { margin: 18px 0 0; font-size: .84rem; color: var(--text-3); }

/* ---------- 12. Prose pages (privacy, 404) */
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(2rem, 4.6vw, 2.8rem); letter-spacing: -.04em; margin-bottom: 20px; }
.prose h2 { font-size: 1.25rem; margin: 40px 0 12px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 8px 0 16px; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 8px 10px 0; vertical-align: top; }
.prose th { color: var(--text); font-weight: 550; }
.meta { color: var(--text-3); font-size: .88rem; }
.prose table.doc-facts th { width: 7.5rem; color: var(--text-3); font-weight: 500; }

/* ---------- 13. App illustrations: the screenshot slots
   A drawing of the VibeArmory window built from HTML, so the page has the product in it before real captures exist.
   Every slot is <figure class="shot" data-shot="NAME">; the drawing inside is aria-hidden and the <figcaption> plus
   the figure's aria-label carry the meaning. Sample data only: example.* hosts, generic project names. */
.shot { margin: 0; min-width: 0; }
.shot figcaption { margin-top: 12px; font-size: .8rem; color: var(--text-3); text-align: center; }
.app { --row: 30px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02) inset; font: 12px/1.35 var(--fs); color: var(--text-2); text-align: left; user-select: none; }
.app-title { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #131317; }
.lights { display: inline-flex; gap: 7px; flex: none; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a40; display: block; }
.lights i:nth-child(1) { background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.app-title .t { font-weight: 600; color: var(--text); font-size: 12.5px; }
.app-title .tools { margin-left: auto; display: flex; gap: 6px; }
.tool { border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.tool.on { color: var(--accent); border-color: rgba(110, 231, 183, .35); }
.app-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 380px; }
.app-side { border-right: 1px solid var(--line); background: #121215; padding: 10px 8px; }
.app-side h5 { margin: 12px 8px 4px; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.app-side h5:first-child { margin-top: 2px; }
.app-side span { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 6px; color: var(--text-2); }
.app-side span.sel { background: var(--bg-3); color: var(--text); }
.app-side em { font-style: normal; font-size: 10px; background: var(--line-2); color: var(--text); border-radius: 999px; padding: 0 6px; }
.app-main { padding: 14px; min-width: 0; }
.app-main.flush { padding: 0; }
.app-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.app-h b { color: var(--text); font-size: 14px; font-weight: 650; margin-right: auto; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.seg span { padding: 3px 9px; font-size: 11px; border-right: 1px solid var(--line-2); white-space: nowrap; }
.seg span:last-child { border-right: 0; }
.seg span.sel { background: var(--bg-3); color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.chip.h { color: var(--high); background: var(--high-bg); }
.chip.m { color: var(--med); background: var(--med-bg); }
.chip.l { color: var(--low); background: var(--low-bg); }
.chip.ok { color: var(--ok); background: var(--ok-bg); }
.chip.n { color: var(--text-2); background: var(--bg-3); }
.mono { font-family: var(--fm); font-size: 11px; }
.dim { color: var(--text-3); }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* rows and tables inside the app */
.rows { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rows .r { display: grid; align-items: center; gap: 10px; min-height: var(--row); padding: 5px 10px; border-bottom: 1px solid var(--line); }
.rows .r:last-child { border-bottom: 0; }
.rows .r.hd { min-height: 0; padding: 6px 10px; font-size: 10.5px; color: var(--text-3); background: #131317; }
.rows .r.sel { background: var(--bg-3); }
.rows .r.flash { background: linear-gradient(90deg, rgba(110, 231, 183, .10), transparent 70%); }
.rows .r > * { min-width: 0; }

/* Summary tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: #131317; min-width: 0; }
.tile b { display: block; color: var(--text); font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.tile .big { font-size: 20px; font-weight: 650; color: var(--text); letter-spacing: -.02em; display: block; margin-bottom: 8px; }
.tile .chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* Split view: list + inspector / drawer */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 380px; }
.split > div { padding: 14px; min-width: 0; }
.split > div + div { border-left: 1px solid var(--line); background: #131317; }
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 10px; font-family: var(--fm); font-size: 11px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.masked { color: var(--med); }
.box-h { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.box-h:first-child { margin-top: 0; }
.code { font-family: var(--fm); font-size: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Agents tree */
.tree { font-family: var(--fm); font-size: 11px; display: grid; gap: 3px; }
.tree div { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 5px; white-space: nowrap; min-width: 0; }
.tree div > span:nth-of-type(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree .i1 { padding-left: 22px; } .tree .i2 { padding-left: 40px; }
.tree .k { flex: none; width: 46px; color: var(--text-3); font-size: 10px; text-transform: uppercase; }
.tree .chip { margin-left: auto; flex: none; }
.tree .hl { background: var(--high-bg); }

/* Fence ask banner (Blocks illustration) */
.ask { border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); border-radius: 9px; padding: 11px 12px; margin-bottom: 10px; }
.ask p { margin: 0 0 8px; color: var(--text); font-size: 12px; }
.ask .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.abtn { border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 9px; font-size: 11px; color: var(--text); background: var(--bg-3); white-space: nowrap; }
.abtn.pri { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Insight detail */
.finding { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; margin-bottom: 8px; background: #131317; }
.finding.sel { border-color: var(--line-2); background: var(--bg-3); }
.finding b { color: var(--text); font-weight: 600; display: block; margin: 5px 0 2px; }

/* ---------- 14. Terminal */
.term { border: 1px solid var(--line-2); border-radius: 12px; background: #070708; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.term .app-title { background: #0e0e10; }
.term pre { margin: 0; padding: 16px 18px 20px; font: 12.5px/1.6 var(--fm); color: var(--text-2); overflow-x: auto; white-space: pre; }
.term .p { color: var(--accent); }
.term .c { color: var(--text); }
.term .h { color: var(--high); } .term .m { color: var(--med); } .term .l { color: var(--low); } .term .d { color: var(--text-3); }

/* ---------- 15. Footer */
footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: .86rem; color: var(--text-3); }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--text-3); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot-legal { display: flex; flex-direction: column; gap: 6px; max-width: 64ch; }
.foot .tm { margin: 0; font-size: .9em; line-height: 1.5; }

/* ---------- 16. Motion and small screens */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 980px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip > .feature-copy { order: 0; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .page-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nav .lnk { display: none; }
  .hero-top { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; text-align: center; }
  .hero-mark { position: static; width: auto; height: 128px; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero .cta { justify-content: center; }
  .questions { grid-template-columns: 1fr; }
  .questions > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .questions > div:last-child { border-bottom: 0; }
  .grid-3, .grid-2, .flow { grid-template-columns: minmax(0, 1fr); }
  /* the app drawings: drop the sidebar and the second pane, keep the list */
  .app-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-side { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-title .tools .tool:not(.keep) { display: none; }
  .hide-sm { display: none !important; }
  .term pre { font-size: 11px; }
}

/* ---------- 13b. Illustration details: column layouts per list, small helpers (no inline styles: CSP style-src 'self') */
.cols-live { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) 34px 64px 108px; }
.cols-dom  { grid-template-columns: minmax(0, 1fr) 64px; }
.cols-req  { grid-template-columns: 42px minmax(0, 1fr) 34px; }
.cols-ses  { grid-template-columns: minmax(0, 1fr) 64px; }
.cols-blk  { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 54px 80px; }
.cols-rule { grid-template-columns: minmax(0, 2fr) 70px minmax(0, 1.1fr) 64px; }
.hostline { color: var(--text); margin: 0 0 10px; }
.st-bad { color: var(--high); }
.ses-name { color: var(--text); font-weight: 600; }
.push { margin-left: auto; }
.rec { margin: 0 0 12px; color: var(--text); }
.box-h.mt { margin-top: 14px; }
.acts, .ask-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ask-acts { margin-top: 14px; }
.menu-pop { display: inline-flex; flex-direction: column; margin: 10px 0 0 40%; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); padding: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.menu-pop span { padding: 4px 10px; border-radius: 5px; color: var(--text); }
.menu-pop span:first-child { background: rgba(110, 231, 183, .16); }
@media (max-width: 760px) {
  .cols-live { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 64px; }
  .cols-blk  { grid-template-columns: minmax(0, 1fr) 54px; }
  .cols-rule { grid-template-columns: minmax(0, 1fr) 70px 64px; }
  .menu-pop { margin-left: 20%; }
}
.split.wide-right { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); }
@media (max-width: 760px) { .split.wide-right { grid-template-columns: minmax(0, 1fr); } }