/* ============================================================================
   site-content.css — the redesigned marketing document's CONTENT typography.

   The companion to site.css: that sheet is CHROME (top bar, menu, gutter,
   footer); this sheet is the <main> interior every marketing page composes —
   the first screen, section rhythm, ledes and prose, counted figures, matchup
   tables, the attack chain, method rows, the to-scale charts, and the two
   family devices (reference Q&A + command block, legal prose rhythm). Values
   resolve against static/marketing-tokens.css, which SiteMarketingLayout links
   before site.css and this sheet; the roster is monochrome (every channel
   spread 0), so nothing here introduces a colour.

   Moved from the approved evidence exemplar (page-benchmark.html, itself the
   AutoAttack design system extracted from lander-APPROVED-2026-09-07) and the
   design-system reference (.body, .h3). Selectors site.css already owns — the
   reset, main, .wrap, footer and its grid — are NOT repeated here; each
   selector has exactly one home.

   FREEZE PROTOCOL. The five Phase-4 exemplars seed this vocabulary
   (evidence/benchmark first, then narrative/platform, reference/faq,
   commercial/pricing, legal/privacy). Once they pass, this sheet is FROZEN: a
   Phase-5 sibling composes from these rules with new markup and adds no rule.
   A sibling that needs a rule this sheet lacks is a spec change to escalate,
   never a quiet append.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   SHARED VOCABULARY — seeded by the evidence exemplar (/benchmark)
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- section rhythm ---------- */
section.blk{padding-block:clamp(60px,8vh,110px);border-bottom:1px solid var(--line)}
:target{scroll-margin-top:96px}
.shead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px;margin-bottom:clamp(26px,3.4vh,44px)}
.shead .idx{font-family:var(--fm);font-size:11px;letter-spacing:.24em;color:var(--ink);text-transform:uppercase}
.shead h2{font-size:clamp(29px,3.2vw,44px);font-weight:400;letter-spacing:-.03em;line-height:1.1;}
.shead .sub{font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.lede{color:var(--mute);font-size:18px;line-height:1.65;max-width:62ch;}
.lede b{color:var(--ink);font-weight:500}
.lede a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.lede a:hover{text-decoration-color:var(--ink)}

/* ---------- prose + mono subhead (design-system .body / .h3) ---------- */
.body{color:var(--mute);font-size:17px;line-height:1.72;max-width:64ch;margin-top:18px}
.body b{color:var(--ink);font-weight:500}
.body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.body a:hover{text-decoration-color:var(--ink)}
.h3{font-family:var(--fm);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-top:clamp(44px,5.6vh,72px);font-weight:400}
.h3 + .body,.h3 + .lede{margin-top:14px}

/* ---------- first screen: eyebrow, headline, lede, provenance ---------- */
.leadact{min-height:720px;display:flex;flex-direction:column;padding-block:172px 0;}
.leadin{margin-block:0 auto;;padding-bottom:68px;}
/* Reference, legal and hub pages reach their content sooner: body.reading-page
   (set by the marketing shell on those exact routes) tightens the lead's top pad
   and the lede's bottom pad. More-specific scoped variants of the two canonical
   lead rules above, not overrides of the same selector. The ≤700px values track
   the draft's reading-page result there (the draft reaches them through a broader
   body.marketing:not(.landing) rule; scoping to reading-page matches that result
   without changing the non-reference marketing leads, which are out of scope). */
body.reading-page .leadact{min-height:0;padding-top:150px}
body.reading-page .leadin{padding-bottom:54px}
@media (max-width:700px){
  body.reading-page .leadact{padding-top:135px}
  body.reading-page .leadin{padding-bottom:44px}
}
.eyebrow{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:26px;}
h1{font-size:clamp(43px,6.3vw,90px);line-height:1.025;font-weight:400;letter-spacing:-.045em;margin:0;max-width:19ch;}
.leadin .lede{margin-top:28px;}
.stampline{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  padding:18px 0 20px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:12px;letter-spacing:0;color:var(--dim);line-height:1.7;
}
.stampline span{display:block}
.stampline b{color:var(--mute);font-weight:400;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- hero graphic: two-column lead (copy | figure) ---------- */
/* The lead's H1 + lede sit beside the page's signature figure, which carries a
   mono uppercase micro-label (.figcap). The COMPACT figure variant (chart-m) is
   shown at every width here — the wide chart-d is drawn for a full-width section,
   not a half-width lead column, where its text would shrink below legibility — so
   the graphic stays readable in the narrow figure column. Stacks to one column
   (figure below the copy) at 900px; the H1 stays the lead's first heading, since
   .figcap is not one. */
.lead-split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(40px,5vw,72px);align-items:start;width:100%}
/* /alternatives widens the graphic side to fit the capability matrix's full
   headers (the approved prototype's proportion); it still collapses to one
   column at 900px via the base .lead-split rule, which follows this. */
.lead-split--wide{grid-template-columns:.92fr 1.08fr}
.lead-split > *{min-width:0}
.lead-split figure{margin:0}
.figcap{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:18px}
.lead-split .chart-d{display:none}
.lead-split .chart-m{display:block;max-width:100%}
/* Ambient hero SCENE canvas (static/scene.js) — the animated counterpart to the
   static svg.chart in a lead figure, on the network/estate pages. Fills the
   figure column at a fixed block size (the engine caps DPR and repaints on
   resize); shorter on the stacked layout so the copy stays first-screen, shorter
   again on small phones. width:100% + max-width:100% keeps it from overflowing. */
.hero-scene{display:block;width:100%;max-width:100%;height:440px}
@media (max-width:900px){.lead-split{grid-template-columns:1fr;gap:36px}}
@media (max-width:900px){.hero-scene{height:340px}}
@media (max-width:520px){.hero-scene{height:300px}}

/* ---------- on-this-page section jumps (lead nav) ---------- */
/* A horizontal nav of the page's own section headings, spliced into the lead by
   the marketing shell on a reference/content page with more than two id-bearing
   section.blk headings. Colours via var() tokens only — monochrome. */
.section-jumps{display:flex;flex-wrap:wrap;gap:18px 38px;padding:20px 0 24px;font:13px var(--fd);border-top:1px solid var(--line)}
.section-jumps a{display:flex;gap:18px;align-items:center;color:var(--mute)}
.section-jumps a:hover{color:var(--ink)}
.section-jumps span{font-size:15px;color:var(--dim)}
@media (max-width:700px){.section-jumps{gap:14px 24px;font-size:12px}}

/* ---------- counted figures ---------- */
.figrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 44px;margin-top:52px}
.figrow.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.figrow .v{font-family:var(--fm);font-size:clamp(22px,2.6vw,28px);font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.figrow .k{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:12px;line-height:1.5}

/* ---------- matchups + tables ---------- */
.match{margin-top:56px}
.mhead{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline}
.mhead .tag2{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.mhead h3{font-size:clamp(19px,2.1vw,28px);font-weight:400;letter-spacing:-.025em}
.mhead .who{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.mnote{color:var(--mute);font-size:15px;line-height:1.6;margin-top:16px;max-width:66ch}
.tscroll{overflow-x:auto;margin-top:30px}
.tscroll.tight{max-width:840px}
/* .tbl-wrap is the legal-body wide-table scroll container — the sibling of
   .tscroll for the one <table> in frag/dpa_body.html, so a wide table scrolls in
   its own box and never drags the page sideways (responsive law). Canonical rule,
   moved from app.css when /dpa cut over to the shipped SiteMarketingLayout shell. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--fm);font-variant-numeric:tabular-nums}
table.pricing-bands{min-width:0}
caption{caption-side:bottom;text-align:left;font-family:var(--fd);font-size:13px;color:var(--dim);line-height:1.55;padding:14px 2px 0;max-width:96ch}
th,td{text-align:left;padding:11px 18px 11px 0;font-size:13px;vertical-align:baseline}
th:not(:first-child),td:not(:first-child){padding-left:34px}
thead th{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:400;padding-bottom:13px}
thead tr{border-bottom:1px solid var(--line2)}
tbody tr:first-child th,tbody tr:first-child td{padding-top:15px}
tbody th{font-weight:400;color:var(--mute);font-size:13px;letter-spacing:.02em}
td.them{color:var(--steel)}
td.us{color:var(--ink);font-weight:500}
td.us b{color:var(--ink);font-weight:700;font-size:15px;letter-spacing:-.01em}
td.us .k{color:var(--dim);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
tbody tr:hover td,tbody tr:hover th{background:rgba(255,255,255,.035)}
.fig{display:inline-block;min-width:7ch;text-align:right;font-variant-numeric:tabular-nums}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
tr.sum{border-top:1px solid var(--line2)}
tr.sum th,tr.sum td{color:var(--ink);font-weight:700;padding-top:15px}
.tnote{font-family:var(--fd);font-size:13px;color:var(--dim);line-height:1.55;margin-top:14px;max-width:96ch}
.tnote b{color:var(--mute);font-weight:400}
.blink{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:3px}
.blink:hover{border-bottom-color:var(--ink)}
.blinks{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:38px}

/* VERSUS reflow (mobile): the comparison tables carry min-width:520px, which on a
   phone forces a horizontal scroll inside .tscroll that hid the winning AutoAttack
   (.us) column on first paint — the reader saw only the competitor's losing values.
   Stack each metric into a card showing BOTH values, competitor then AutoAttack
   (win emphasised), so the winning column is visible with no scroll, and let the
   caption wrap to the viewport. The selector is table:has(td.us): the .us cell is the
   AutoAttack column and exists only in a versus table, so this catches every one of
   them (the landing's .match tables AND the /compare tables' bare .tscroll.tight
   table) while leaving the pricing and legal tables on this shell untouched. Value
   labels come from the .them/.us classes (mirroring the thead th text, hidden here)
   so no per-cell markup is needed; a NodeZero table carries .vs-b for its label. */
@media (max-width:700px){
  .tscroll:has(table td.us){overflow-x:visible}
  table:has(td.us){display:block;min-width:0;width:100%}
  table:has(td.us) thead{display:none}
  table:has(td.us) tbody{display:block}
  table:has(td.us) tbody tr{display:block;padding:15px 16px;margin-bottom:14px;border:1px solid var(--line2)}
  table:has(td.us) tbody tr:hover td,table:has(td.us) tbody tr:hover th{background:none}
  table:has(td.us) tbody th{display:block;width:auto;padding:0 0 10px;border:0;color:var(--ink);font-size:14px;letter-spacing:.02em;text-transform:none}
  table:has(td.us) tbody td{display:flex;align-items:baseline;gap:10px;padding:6px 0;border:0;text-align:left}
  table:has(td.us) tbody td::before{flex:0 0 46%;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left}
  table:has(td.us) tbody td.them::before{content:"Nessus Professional"}
  table.vs-b:has(td.us) tbody td.them::before{content:"NodeZero"}
  table:has(td.us) tbody td.us{margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.045);border-left:2px solid var(--ink)}
  table:has(td.us) tbody td.us::before{content:"AutoAttack";color:var(--ink)}
  table:has(td.us) caption{display:block;max-width:none;padding-top:14px}
}

/* /alternatives capability matrix — the HTML twin of the versus tables, ONE
   canonical block (grep before adding a second). Monochrome save the AutoAttack
   column's "does it" marks, which carry the --proven green (the page's point: it
   proves every row) — the M1 channel-spread exemption for --proven. Full headers,
   table-layout:fixed + min-width:0 so it never scrolls the page at 390px; the
   decorative squares are aria-hidden and each cell carries visually-hidden text
   (.capmatrix-sr) for assistive tech. */
table.capmatrix{min-width:0;table-layout:fixed}
.capmatrix th,.capmatrix td{text-align:center;padding:14px 6px;font-size:12px;vertical-align:middle;overflow-wrap:break-word;border-bottom:1px solid var(--line)}
.capmatrix th:first-child,.capmatrix td:first-child{text-align:left;width:38%;color:var(--dim)}
.capmatrix thead th{color:var(--steel);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:none;line-height:1.3;vertical-align:bottom;padding-bottom:13px;border-bottom:1px solid var(--line2)}
.capmatrix thead th.capmatrix-us{color:var(--ink)}
.capmatrix tbody tr:hover td,.capmatrix tbody tr:hover th{background:none}
.capmatrix-m{display:inline-block;width:11px;height:11px}
.capmatrix-yes{background:var(--ink)}
.capmatrix-mk{background:var(--proven)}
.capmatrix-part{border:1px solid var(--dim)}
.capmatrix-no{color:var(--steel)}
.capmatrix-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.capmatrix-legend{margin-top:16px;font-family:var(--fm);font-size:11px;color:var(--steel);display:flex;flex-wrap:wrap;gap:12px 22px}
.capmatrix-legend > span{display:inline-flex;align-items:center;gap:7px}
/* mobile: the 5-column matrix keeps full-size intact headers in a scoped scroll (sanctioned table exception); scoped to .lead-split--wide (alternatives only) so the platform mesh's off-canvas edges are never clipped. */
@media (max-width:640px){.lead-split--wide figure{overflow-x:auto}.capmatrix{min-width:408px}.capmatrix th,.capmatrix td{font-size:10px;padding:12px 4px}.capmatrix thead th{font-size:10px;overflow-wrap:normal;word-break:keep-all}.capmatrix th:first-child,.capmatrix td:first-child{width:26%}}

/* ---------- charts drawn to scale (paint via classes only — M1) ---------- */
.chartbox{margin-top:44px}
.chartcap{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.chart{display:block;width:100%;height:auto;font-family:var(--fm);stroke-width:1}
.chart .c-ink{fill:var(--ink)}
.chart .c-mute{fill:var(--mute)}
.chart .c-dim{fill:var(--dim)}
.chart .c-steel{fill:var(--steel)}
.chart .c-band{fill:rgba(255,255,255,.055)}
.chart .f-ground{fill:var(--ground)}
.chart .s-line{stroke:var(--line)}
.chart .s-line2{stroke:var(--line2)}
.chart .s-ink{stroke:var(--ink)}
.chart .s-mute{stroke:var(--mute)}
.chart .s-steel{stroke:var(--steel)}
.chart-d{max-width:1080px}
.chart-m{display:none;max-width:400px}
@media (max-width:800px){.chart-d{display:none}.chart-m{display:block}}

/* ---------- the attack chain (milestone marked by form, never colour) ---------- */
.chain{margin-top:44px}
.chain li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:0 0 26px}
.chain li:last-child{padding-bottom:0}
.chain .ct{font-family:var(--fm);font-size:14px;font-weight:700;color:var(--mute);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.chain .cn{font-size:16px;color:var(--ink);letter-spacing:-.012em;line-height:1.35}
.chain .cd{display:block;font-family:var(--fm);font-size:12px;color:var(--dim);line-height:1.6;margin-top:6px;letter-spacing:.01em}
.chain .cm{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.chain li.da .ct{color:var(--ink)}
.chain li.da .cm{color:var(--ink);display:flex;align-items:center;gap:9px}
.chain li.da .cm::before{content:"";width:6px;height:6px;background:var(--ink);flex:0 0 6px}

/* ---------- key/value rows ---------- */
.rows{margin-top:8px}
.rows > div{display:grid;grid-template-columns:minmax(150px,.24fr) 1fr;gap:12px 40px;padding:0 0 30px}
.rows > div:last-child{padding-bottom:0}
.rows dt,.rows .rk{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.rows dd,.rows .rv{margin:0;color:var(--mute);font-size:15px;line-height:1.6;max-width:78ch}
.rows a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.rows a:hover{text-decoration-color:var(--ink)}

/* ---------- close ---------- */
.closeline{margin-top:clamp(38px,5vh,64px)}
.closeline h2{font-size:clamp(30px,5vw,66px);font-weight:400;letter-spacing:-.036em;line-height:1}
.closeline p{color:var(--mute);font-size:15px;line-height:1.6;max-width:60ch;margin-top:16px}
.closeline .deploy{margin-top:30px;padding:14px 22px;font-size:12px}

/* ---------- content responsive ---------- */
@media (max-width:860px){
  .leadact{padding-block:110px 0;min-height:100svh}
  .figrow,.figrow.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rows > div{grid-template-columns:1fr;gap:10px}
  .chain li{grid-template-columns:64px minmax(0,1fr);row-gap:6px}
  .chain .cm{grid-column:1/-1}
}
@media (max-width:520px){
  h1{max-width:none}
  .figrow{grid-template-columns:1fr}
  .mhead .who{margin-left:0}
}

/* ─────────────────────────────────────────────────────────────────────────
   REFERENCE FAMILY — appended by the reference exemplar (/faq)
   Q&A grouped under .h3 subheads with a deep-link; plus the monospace
   COMMAND-BLOCK device. /faq renders the Q&A only; the command block is built
   here so /docs (Phase 5) adds markup, never a rule — a <pre> of the deploy
   command with cap-drop ALL and the two open ports it needs.
   ───────────────────────────────────────────────────────────────────────── */
.qa{padding:0 0 34px;max-width:80ch}
.qa:last-child{padding-bottom:0}
.q{font-size:clamp(17px,1.5vw,21px);color:var(--ink);letter-spacing:-.015em;line-height:1.32}
.qa .body{margin-top:12px}
.qa .blink{margin-top:16px}
.cmdcap{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.cmd{background:var(--panel2);max-width:760px;margin-top:24px}
.cmd pre{margin:0;overflow-x:auto;padding:20px 18px;font-family:var(--fm);font-size:12.5px;line-height:1.6;color:var(--mute);white-space:pre;tab-size:2}
.cmd .tok{color:var(--ink);font-weight:500}

/* ─────────────────────────────────────────────────────────────────────────
   LEGAL FAMILY — appended by the legal exemplar (/privacy)
   Recomposed by argument (not the source's 12-section ladder): thematic groups
   of prose. .prose gives evenly-spaced block rhythm to stacked paragraphs and
   definition rows within a group. /terms and /dpa (Phase 5) pour into this.
   ───────────────────────────────────────────────────────────────────────── */
.prose > * + *{margin-top:16px}
.prose .rows{margin-top:22px}

/* ─────────────────────────────────────────────────────────────────────────
   PRICING — annual-estimate composition (/pricing)
   The proposition and the estimate share one two-column grid; the estimate is a
   bordered card that works the graduated per-host bands. Moved from the approved
   draft. Monochrome (var tokens + a neutral #565656 field hairline). Collapses
   to one column at 1000px.
   ───────────────────────────────────────────────────────────────────────── */
.pricing-intro-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:70px;align-items:start}
.pricing-intro-copy h1{font-size:clamp(43px,5.8vw,84px)}
.pricing-intro-copy .lede{max-width:51ch}
.pricing-intro-grid .cost-calculator{margin-top:8px}
.cost-calculator{border:1px solid var(--line2);padding:30px 32px;background:var(--panel)}
.cost-calculator>label{font-size:16px;display:block;color:var(--ink)}
.host-input{display:flex;align-items:center;border-bottom:1px solid #565656;gap:16px;margin-top:22px;padding-bottom:12px}
.host-input input{min-width:0;width:100%;background:none;color:var(--ink);border:0;font:34px var(--fd);letter-spacing:-.04em}
.host-input>span{font:12px var(--fm);color:var(--mute)}
.cost-calculator output{display:block;font:clamp(38px,4vw,56px) var(--fd);letter-spacing:-.045em;line-height:1.1;margin-top:34px}
.cost-period{display:block;color:var(--mute);font:12px var(--fm);margin-top:8px}
.cost-calculator .cost-formula{font:12px/1.65 var(--fm);color:var(--mute);margin-top:22px}
.cost-calculator .deploy{margin-top:28px}
.cost-calculator .calc-note{font-size:13px;line-height:1.6;color:var(--dim);margin-top:20px}
@media (max-width:1000px){.pricing-intro-grid{grid-template-columns:1fr;gap:32px}.pricing-intro-grid .cost-calculator{max-width:560px}}
@media (max-width:700px){.cost-calculator{padding:26px}}