/* The /security page: what never changes hands, how each step is proven, what is kept, and how links are locked down.
   Written for a client's IT team. Reuses the home page's section type, the points list and the password visual. */

/* Hero */
.sx-hero{position:relative;isolation:isolate;padding:calc(var(--nav-h) + clamp(40px,7vh,96px)) 0 clamp(56px,8vh,96px)}
.sx-hero::before{content:"";position:absolute;z-index:-1;width:1100px;height:1100px;right:-420px;top:-520px;background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.sx-h1{font-size:clamp(2.6rem,4.8vw,4.6rem);text-wrap:balance}
.sx-hero .lede{max-width:34em}
.sx-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.sx-actions .ico{width:18px;height:18px}

/* Never */
.sx-never{background:var(--bg-alt);border-block:1px solid var(--line);padding:clamp(36px,5vw,56px) 0}
.never{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.never li{display:grid;gap:6px;align-content:start}
.never-k{font:600 .75rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-text)}
.never b{font-family:var(--f-display);font-weight:740;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;letter-spacing:-.03em}
.never li>span:last-child{color:var(--muted);font-size:.9375rem;max-width:34ch}

/* How each step is proven */
.methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.method{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-md),inset 0 1px 0 var(--hi)}
.method h3{margin-top:18px}
.method p{margin-top:10px;color:var(--muted);font-size:.9375rem;line-height:1.6}
.method .method-eg{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.method p+.method-eg{margin-top:18px}

/* What we keep */
.sx-keep{background:var(--bg-alt);border-block:1px solid var(--line)}
.sx-keep .intro a{color:var(--ink)}
.keep{border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-md);overflow:hidden}
.keep-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:24px;padding:18px clamp(18px,2.4vw,28px);font-size:.9375rem;line-height:1.5}
.keep-row+.keep-row{border-top:1px solid var(--line)}
.keep-row span{color:var(--muted)}
.keep-row b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.keep-head{background:var(--surface-2)}
.keep-head span{font:600 .75rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .keep-row{grid-template-columns:1fr;gap:8px}
  .keep-head{display:none}
  .keep-row span[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink-2)}
}

/* Links, Porter, and who runs it */
.sx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.sx-two h2{max-width:20ch}
.sx-two .intro a{color:var(--ink)}
.sx-runs{margin-top:40px}
.runs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.runs li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:.9375rem}
.runs span{color:var(--muted)}

/* Report */
.sec.sx-report{padding-top:0}
.sx-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(26px,4vw,44px);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-md),inset 0 1px 0 var(--hi)}
.sx-band .intro{margin-top:12px}
.sx-band .intro a{color:var(--ink)}

@media (max-width:1000px){.methods{grid-template-columns:1fr}.never{grid-template-columns:1fr}}
@media (max-width:900px){.sx-two{grid-template-columns:1fr}.sx-hero .pw{order:2}}
@media (max-width:520px){.sx-actions .btn{width:100%}.runs li{grid-template-columns:1fr;gap:2px}.sx-band .btn{width:100%}}