/* /ai-agents/audit · page layout glue only, scoped under body.pg-aud (never the bare class "aud": v4.css styles the frozen bento tile with it).
   The three assets style themselves (.aud-trace, .aud-fields, .aud-sign). Band order and reasons: build/pages/ai-agents-audit/spec.md §2
   (dark while the calls are decided, white once they're on the record, blue at the signature, white answers, dark close).
   Rhythm is v4.css only (--sec, .shead 64, .wrap 1280/24); nothing here adds section padding. */

/* ---------- hero (dark): left-aligned; the H1 runs across the wrap so each tone holds one line at 1440 (526 / 1134px),
   then the sub and CTAs sit left and aud-trace sits right (assets.md §7 item 1). The figure's top is level with the sub. ---------- */
.pg-aud .aud-hero{text-align:left}
.pg-aud .aud-hero .h1{margin:0;max-width:none}
.pg-aud .aud-hero-row{display:grid;grid-template-columns:minmax(0,560px) minmax(420px,1fr);column-gap:64px;align-items:start;margin-top:40px}
.pg-aud .aud-hero-row>*{min-width:0}
.pg-aud .aud-hero .sub{margin:0;max-width:560px}
.pg-aud .aud-hero .ctas{justify-content:flex-start}

/* H2 continuation as its own line box, so text-wrap:balance evens each tone separately when a narrow viewport wraps it
   (without this the close's ".dim" line left "for." alone at 390). At 1440 every tone already holds one line, so nothing moves there. */
.pg-aud .h2 .dim{display:block}

/* A7: the shared .tlink box is 22px tall; 1px of block padding brings every standalone text link on this page to a 24px target */
.pg-aud .tlink{padding-block:1px}

/* ---------- include (white): .shead.stack (eyebrow, H2, definition), the list lead, aud-fields (it owns its grid), then the link 48px below ---------- */
.pg-aud .aud-lead{margin:0 0 24px}
.pg-aud .aud-inc-foot{margin-top:48px}

/* ---------- receipts: the page's one grained-blue field (V2, PLAN R6), white ink only (the .aa-gates-band precedent) ---------- */
.pg-aud .aud-blue{background:var(--field-blue);background-color:#0a3cb0;color:#fff}
.pg-aud .aud-blue .eyebrow{color:rgba(255,255,255,.85)}
.pg-aud .aud-blue .h2{color:#fff}
.pg-aud .aud-blue .h2 .dim{color:rgba(255,255,255,.7)}
.pg-aud .aud-blue .body{color:rgba(255,255,255,.92)}
.pg-aud .aud-blue .tlink{color:#fff}
.pg-aud .aud-blue :focus-visible{outline-color:#fff}
/* body left over the field's darker side (A6), aud-sign right, top-aligned (assets.md §7 item 3) */
.pg-aud .aud-rc-row{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);column-gap:96px;align-items:start}
.pg-aud .aud-rc-row>*{min-width:0}
.pg-aud .aud-rc-copy .tlink{margin-top:20px}

/* ---------- FAQ (white): a wider heading column, the family's rule (authorization), and the text-only Before this / After this pair ---------- */
.pg-aud .faqwrap{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
.pg-aud .aud-spoke{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.pg-aud .aud-spoke p{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pg-aud .aud-spoke-l{font-size:14px;line-height:20px;color:var(--ink-60)}

/* ---------- close (dark, type-only, centred): the pill pair, then the two text links on one row ---------- */
.pg-aud .aud-close .wrap{text-align:center}
.pg-aud .aud-close-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.pg-aud .aud-close-links{display:flex;gap:12px 32px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pg-aud .aud-rc-row{grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:64px}
  .pg-aud .faqwrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:959px){
  /* stacked hero: the figure keeps its wide composition under the CTAs, capped so the track stays near the text */
  .pg-aud .aud-hero-row{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .pg-aud .aud-hero-row>.aud-trace{max-width:560px}
  .pg-aud .aud-rc-row{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .pg-aud .aud-rc-copy .body{max-width:600px}
}
@media (max-width:760px){
  .pg-aud .aud-hero-row{margin-top:24px;row-gap:40px}
  .pg-aud .aud-rc-row{row-gap:40px}
  .pg-aud .aud-inc-foot{margin-top:40px}
  .pg-aud .aud-close-links{flex-direction:column;align-items:center;gap:12px}
}
@media (max-width:400px){
  /* a tlink that wraps (320 phones) keeps its › after the last word, instead of pushed to the far edge of the inline-flex box */
  .pg-aud .tlink{display:inline-block;text-wrap:balance}
  .pg-aud .tlink span{display:inline-block;margin-left:6px}
}