/* security.css — page-scoped styles for security.html (POP-113).
   Reuses the shared system in styles.css; adds only what this page needs. */

/* Hero — single-column, centered (no phone collage) */
.sec-hero{padding:78px 0 60px;text-align:center;position:relative;overflow:hidden}
.sec-hero .eyebrow{margin-bottom:22px}
.sec-hero h1{font-size:clamp(38px,5vw,58px);margin:0 auto 20px;max-width:15ch;letter-spacing:-.03em}
.sec-hero p.sub{font-size:18px;color:var(--g500);max-width:56ch;margin:0 auto 30px;font-weight:600}
.sec-hero .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Posture note under the hero — plain-language summary line */
.sec-note{font-size:13px;color:var(--g400);font-weight:700;margin-top:26px}

/* Responsible-disclosure contact card (sits on the lime trust band) */
.sec-contact{position:relative;max-width:640px;margin:0 auto;background:#fff;border:var(--bd);border-radius:22px;padding:38px 34px;box-shadow:var(--sh-lg);text-align:center}
.sec-contact .ic{width:56px;height:56px;border-radius:18px;background:var(--plum);display:grid;place-items:center;margin:0 auto 20px;border:var(--bd);box-shadow:var(--sh-sm);transform:rotate(-4deg)}
.sec-contact .ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.sec-contact h3{font-size:23px;margin-bottom:10px}
.sec-contact p{color:var(--g500);font-size:15.5px;font-weight:600;max-width:48ch;margin:0 auto 22px}
.sec-mail{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;background:var(--lime);border:var(--bd);border-radius:14px;padding:11px 20px;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.sec-mail:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.sec-mail:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.sec-mail svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:880px){
  .sec-hero{padding:56px 0 44px}
  .sec-contact{padding:30px 22px}
}