/* /security v5 (2026-10-04) · trust-center archetype (.claude/skills/hawcx-page-layouts), sized to Hawcx: a centred title with the
   three painted zero cards under it; three failures as name-many-explain-one, each a painted cover with one word or mark;
   every document with its status; the FAQ; the close. Assets: _assets/sec/sec-type (painted typography, the user's pick). v1 is kept as security.v1.css. */

/* hero: the drawing, then the centred title */
body.elv .sec-hero{padding:88px 0 104px}
body.elv .sec-centre{display:flex;flex-direction:column;align-items:center;text-align:center}
body.elv .sec-h1{max-width:820px}
body.elv .sec-h1 span{display:block;color:rgba(255,255,255,.55)}
body.elv .sec-lede{max-width:560px;margin-top:22px}
body.elv .sec-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px}


/* documents: three groups of rows; the document, its status, the one action */
body.elv .sec-groups{display:grid;gap:48px;margin-top:56px}
body.elv .sec-group{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:32px;align-items:start}
body.elv .sec-group h3{margin:0;padding-top:18px;font-size:14px;line-height:20px;font-weight:400;letter-spacing:.01em;color:var(--ink-60)}
body.elv .sec-rows{margin:0;padding:0;list-style:none;border-top:1px dotted var(--ink-15)}
body.elv .sec-rows li{display:grid;grid-template-columns:minmax(0,1fr) 200px 96px;align-items:center;column-gap:24px;padding:16px 0;border-bottom:1px dotted var(--ink-15)}
body.elv .sec-doc{font-size:17px;line-height:25px;color:var(--ink)}
body.elv .sec-st{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:2px 10px 2px 9px;border-radius:999px;background:var(--stone);font-size:13px;line-height:20px;color:var(--ink-80)}
body.elv .sec-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-40)}
body.elv .sec-st--pub{background:#ecf6ee;color:#1d6b28}
body.elv .sec-st--pub::before{background:var(--ok)}
body.elv .sec-act{justify-self:end;font-size:15px;line-height:22px;color:var(--ink)}
body.elv .sec-act:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  body.elv .sec-group{grid-template-columns:minmax(0,1fr);row-gap:8px}
  body.elv .sec-group h3{padding-top:0}
}
@media (max-width:760px){
  body.elv .sec-hero{padding:48px 0 64px}
  body.elv .sec-rows li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  body.elv .sec-st{grid-column:1;grid-row:2}
  body.elv .sec-act{grid-column:2;grid-row:1 / 3}
}

/* compliance: the status under each cell */
body.elv .sec-comp-grid{margin-top:56px}
body.elv .sec-chip{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:2px 10px 2px 9px;border-radius:999px;background:var(--stone);font-size:13px;line-height:20px;color:var(--ink-80)}
body.elv .sec-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
body.elv .sec-comp-grid>.cl-icol:nth-child(3n+1){padding-left:0}
body.elv .sec-comp-grid>.cl-icol:nth-child(3n){padding-right:0}
@media (max-width:1100px){
  body.elv .sec-comp-grid>.cl-icol{padding-left:32px;padding-right:32px}
  body.elv .sec-comp-grid>.cl-icol:nth-child(odd){padding-left:0}
}
@media (max-width:600px){body.elv .sec-comp-grid>.cl-icol{padding-left:0;padding-right:0}}