/* Security page (security.php). Every class starts with scp-. Design: Figma "Site: security page". */
@font-face { font-family: "SX Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/archivo-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "SX Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/archivo-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SX Text"; font-weight: 400; font-display: swap; src: url(../fonts/inter-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F; }
@font-face { font-family: "SX Text"; font-weight: 400; font-display: swap; src: url(../fonts/inter-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: "SX Text"; font-weight: 600; font-display: swap; src: url(../fonts/inter-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F; }
@font-face { font-family: "SX Text"; font-weight: 600; font-display: swap; src: url(../fonts/inter-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF; }

html body.scpg .wrap.main:empty{ display: none; }
html body.scpg footer.foot{ margin-top: 0; }
html body .scp{ --bg: #000; --r1: #141619; --r2: #0e1012; --ln: #212328; --g: #1bd96a; --gh: #3be283; --ink: #0b1f13; --hi: #ecf9fb; --tx: #b0bac5; --mu: #8a939d;
  --disp: "SX Display", "Arial Black", Impact, sans-serif; --text: "SX Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: transparent; color: var(--tx); font: 400 16px/1.6 var(--text); text-align: left; -webkit-font-smoothing: antialiased; overflow-x: clip; }
html body .scp *,html body .scp *::before,html body .scp *::after{ box-sizing: border-box; }
html body .scp :where(h1,h2,h3,p,ul,ol,dl,dd,dt){ margin: 0; padding: 0; }
html body .scp :where(ul,ol){ list-style: none; }
html body .scp :where(h1,h2){ color: var(--hi); font-family: var(--disp); font-weight: 900; text-transform: none; letter-spacing: -.01em; text-shadow: none; }
html body .scp :where(h3){ color: var(--hi); font: 600 18px/1.35 var(--text); text-transform: none; letter-spacing: 0; text-shadow: none; }
html body .scp a{ color: inherit; }
html body .scp :is(a,button):focus-visible{ outline: 2px solid var(--gh); outline-offset: 3px; }

html body .scp-in{ width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
html body .scp-sec{ padding-block: 96px; }
html body .scp-band{ background: var(--r2); padding-block: 88px 96px; }
html body .scp h2{ font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; max-width: 900px; }
html body .scp-date{ margin-top: 8px; color: var(--mu); font-size: 14px; }
html body .scp-sub{ margin-top: 14px; max-width: 760px; font-size: 18px; line-height: 1.5; }

/* hero */
html body .scp-hero{ display: grid; grid-template-columns: minmax(0, 840px); gap: 44px; padding-block: 72px 88px; }
html body .scp-crumb{ display: flex; gap: 8px; margin-bottom: 36px; font-size: 14px; color: var(--mu); }
html body .scp-crumb a{ text-decoration: none; }
html body .scp-crumb a:hover{ color: var(--hi); text-decoration: underline; }
html body .scp-kick{ color: var(--g); font-weight: 600; font-size: 15px; }
html body .scp h1{ margin-top: 20px; max-width: 840px; font-size: clamp(38px, 5vw, 64px); line-height: 1.04; }
html body .scp-lead{ margin-top: 24px; max-width: 600px; font-size: 19px; line-height: 1.55; }
html body .scp-btns{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
html body .scp-b{ display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none !important; transition: background-color .15s, border-color .15s; }
html body .scp-b1{ background: var(--g); color: var(--ink) !important; }
html body .scp-b1:hover{ background: var(--gh); }
html body .scp-b2{ border: 1.5px solid var(--ln); color: var(--hi) !important; }
html body .scp-b2:hover{ border-color: var(--mu); }
html body .scp-b3{ background: var(--ink); color: var(--hi) !important; }
html body .scp-b3:hover{ background: #000; }
html body .scp-live{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(10,12,14,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html body .scp-live-h{ grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--mu); font-size: 13px; font-weight: 600; }
html body .scp-live-h::before{ content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(27,217,106,.5); animation: scp-pulse 2s infinite; }
@keyframes scp-pulse{ 70%{ box-shadow: 0 0 0 8px rgba(27,217,106,0); } 100%{ box-shadow: 0 0 0 0 rgba(27,217,106,0); } }
html body .scp-live div{ display: grid; align-content: start; gap: 4px; padding: 16px 20px 18px; }
html body .scp-live div + div{ border-left: 1px solid rgba(255,255,255,.08); }
html body .scp-live b{ color: var(--hi); font: 900 30px/1.1 var(--disp); }
html body .scp-live span{ font-size: 14px; line-height: 1.4; }
body.skin-poster.pa-security{ --pz-art: url("../img/shader/security.webp"); --pz-art-m: url("../img/shader/security-m.webp"); }

/* the request path: the one thing to remember */
html body .scp-path{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 48px; counter-reset: none; }
html body .scp-path li{ position: relative; padding-right: 16px; }
html body .scp-path li::before{ content: ""; position: absolute; top: 19px; left: 40px; right: 0; height: 2px; background: var(--g); opacity: .45; }
html body .scp-path li:last-child::before{ display: none; }
html body .scp-n{ position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--g); border-radius: 50%; background: var(--r2); color: var(--g); font-weight: 600; font-size: 15px; }
html body .scp-path li:last-child .scp-n{ background: var(--g); color: var(--ink); }
html body .scp-path b{ display: block; margin-top: 16px; color: var(--hi); font-size: 17px; font-weight: 600; }
html body .scp-path p{ margin-top: 6px; font-size: 14px; line-height: 1.45; }
html body .scp-pass{ display: inline-block; margin-top: 40px; padding: 14px 18px; border-radius: 10px; background: rgba(27,217,106,.12); color: var(--gh); font-size: 15px; font-weight: 600; }

/* layers */
html body .scp-layers{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin-top: 40px; }
html body .scp-layers li{ padding-block: 24px 28px; border-top: 1px solid var(--ln); }
html body .scp-layers h3{ display: flex; align-items: center; gap: 10px; }
html body .scp-layers h3::before{ content: ""; flex: none; width: 8px; height: 8px; background: var(--g); }
html body .scp-layers p{ margin-top: 8px; font-size: 15px; line-height: 1.5; }

/* tests */
html body .scp-tests{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 40px; }
html body .scp-tests dt{ color: var(--g); font: 900 72px/1 var(--disp); }
html body .scp-tests dd{ margin-top: 12px; max-width: 330px; font-size: 17px; line-height: 1.5; }
html body .scp-share{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ln); color: var(--mu); font-size: 15px; }
html body .scp-share img{ display: block; height: 55px; width: auto; }
html body .scp-sh{ padding: 14px 18px; border: 1px solid var(--ln); border-radius: 8px; color: var(--hi) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
html body .scp-sh:hover{ border-color: var(--mu); }

/* offer */
html body #contact{ scroll-margin-top: 80px; }
html body .scp-offer{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px; border-radius: 22px; background: var(--g); color: var(--ink); }
html body .scp-offer h2{ color: var(--ink); max-width: 560px; }
html body .scp-offer p{ margin-top: 18px; max-width: 540px; font-size: 18px; line-height: 1.5; }
html body .scp-offer .scp-btns{ margin-top: 28px; }
html body .scp-mail{ color: var(--ink) !important; font-weight: 600; }
html body .scp-offer ul{ display: grid; gap: 14px; }
html body .scp-offer li{ display: flex; align-items: baseline; gap: 12px; font-size: 17px; font-weight: 600; }
html body .scp-offer li::before{ content: ""; flex: none; width: 8px; height: 8px; background: var(--ink); transform: translateY(-2px); }

/* faq */
html body .scp-faq{ padding-top: 16px; padding-bottom: 112px; }
html body .scp-qs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 32px; }
html body .scp-qs p{ margin-top: 8px; font-size: 16px; line-height: 1.55; }


/* trust row */
html body .scp-trust{ border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); background: rgba(0,0,0,.6); }
html body .scp-trust ul{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 22px; }
html body .scp-trust li{ display: flex; align-items: center; gap: 10px; color: var(--hi); font-size: 15px; font-weight: 600; }
html body .scp-trust li::before{ content: ""; flex: none; width: 8px; height: 8px; background: var(--g); }

/* this week */
html body .scp-wk{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; margin-top: 36px; }
html body .scp-chart,html body .scp-types,html body .scp-cats{ margin: 0; padding: 24px 28px; border: 1px solid var(--ln); border-radius: 14px; background: var(--r1); }
html body .scp-chart figcaption{ display: flex; align-items: baseline; gap: 8px; color: var(--mu); font-size: 14px; font-weight: 600; }
html body .scp-chart figcaption span:first-child{ margin-right: auto; }
html body .scp-chart figcaption b{ color: var(--hi); font: 900 22px/1 var(--disp); }
html body .scp-chart ol{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; height: 240px; margin-top: 20px; }
html body .scp-chart li{ display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 8px; min-width: 0; text-align: center; }
html body .scp-chart i{ display: block; border-radius: 4px 4px 0 0; background: rgba(27,217,106,.5); }
html body .scp-chart li.on i{ background: var(--g); }
html body .scp-bv{ color: var(--mu); font-size: 13px; font-weight: 600; }
html body .scp-chart li.on .scp-bv{ color: var(--hi); }
html body .scp-bd{ color: var(--mu); font-size: 12px; }
html body .scp-types h3,html body .scp-cats h3{ color: var(--mu); font-size: 14px; }
html body .scp-types dl{ margin-top: 8px; }
html body .scp-types dl div{ display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-top: 1px solid var(--ln); }
html body .scp-types dt{ font-size: 15px; }
html body .scp-types dd{ color: var(--hi); font-weight: 600; font-size: 15px; }
html body .scp-types p{ margin-top: 12px; font-size: 14px; }
html body .scp-in-ok{ color: var(--gh); font-weight: 600; }
html body .scp-cats{ margin-top: 24px; }
html body .scp-cats ul{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
html body .scp-cats li{ display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--ln); border-radius: 999px; font-size: 14px; }
html body .scp-cats b{ color: var(--hi); }

/* threats table */
html body .scp-tw{ margin-top: 36px; overflow-x: auto; }
html body .scp-tt{ width: 100%; min-width: 720px; border-collapse: collapse; background: none; font-size: 15px; line-height: 1.45; }
html body .scp-tt :is(th,td){ padding: 16px 24px 16px 0; border: 0; border-top: 1px solid var(--ln); background: none; text-align: left; vertical-align: top; }
html body .scp-tt thead th{ color: var(--mu); font-size: 13px; font-weight: 600; }
html body .scp-tt tbody th{ width: 24%; color: var(--hi); font-weight: 600; }
html body .scp-tt td{ width: 38%; color: var(--tx); }
html body .scp-tt td:last-child{ color: var(--hi); }

/* decoder */
html body .scp-dec{ display: grid; gap: 12px; margin-top: 36px; }
html body .scp-dec li{ display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid var(--ln); border-radius: 12px; background: var(--r1); }
html body .scp-dec code{ overflow-wrap: anywhere; padding: 0; border: 0; background: none; font: 400 14px/1.5 var(--m-mono, ui-monospace, Consolas, monospace); }
html body .scp-raw{ color: var(--mu); }
html body .scp-read{ color: var(--hi); }
html body .scp-as{ color: var(--mu); font-size: 13px; }
html body .scp-no{ padding: 6px 12px; border-radius: 999px; background: rgba(255,90,90,.13); color: #ff7b7b; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* bots */
html body .scp-bots{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
html body .scp-bots li{ display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--ln); border-radius: 999px; color: var(--hi); font-size: 14px; font-weight: 600; }
html body .scp-bots li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g); }
html body .scp-fake{ display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; border-radius: 999px; background: rgba(255,90,90,.12); color: #ff7b7b; font-size: 14px; font-weight: 600; }
html body .scp-fake::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; }

/* abuse report */
html body .scp-rep{ margin-top: 48px; }
html body .scp-rep h3{ font-size: 20px; }
html body .scp-rep p{ margin-top: 8px; max-width: 760px; }
html body .scp-rep pre{ margin: 20px 0 0; padding: 22px 26px; overflow-x: auto; border: 1px solid var(--ln); border-radius: 12px; background: var(--r1); color: var(--tx); font: 400 14px/1.75 var(--m-mono, ui-monospace, Consolas, monospace); white-space: pre; }

/* accounts and data */
html body .scp-safe{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 36px; }
html body .scp-safe li{ padding-block: 20px 24px; border-top: 1px solid var(--ln); }
html body .scp-safe p{ margin-top: 6px; font-size: 15px; line-height: 1.5; }

/* setup steps */
html body .scp-setup{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
html body .scp-setup span{ display: block; color: var(--g); font: 900 40px/1 var(--disp); }
html body .scp-setup h3{ margin-top: 12px; }
html body .scp-setup p{ margin-top: 6px; font-size: 15px; line-height: 1.5; }

/* disclosure */
html body .scp-disc{ padding-top: 0; }
html body .scp-dd{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 28px; }
html body .scp-dd ul{ display: grid; gap: 8px; margin-top: 12px; }
html body .scp-dd li{ position: relative; padding-left: 18px; font-size: 15px; }
html body .scp-dd li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--g); }
html body .scp-dd div + div li::before{ background: #ff5a5a; }
html body .scp-warn{ margin-top: 16px; padding: 12px 16px; border-left: 3px solid #ff5a5a; background: rgba(255,90,90,.08); color: #ffb3b3; font-size: 14px; line-height: 1.5; }
html body .scp-law{ margin-top: 10px; color: var(--mu); font-size: 13px; line-height: 1.5; }
html body .scp-disc .scp-btns{ margin-top: 28px; }


/* team */
html body .scp-team{ display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 64px; align-items: start; }
html body .scp-roles{ margin-top: 28px; }
html body .scp-roles div{ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding-block: 18px; border-top: 1px solid var(--ln); }
html body .scp-roles dt{ color: var(--hi); font-size: 17px; font-weight: 600; }
html body .scp-roles dd{ font-size: 15px; line-height: 1.5; }
html body .scp-team .scp-btns{ margin-top: 24px; }
html body .scp-work{ padding: 26px 30px 14px; border: 1px solid var(--ln); border-radius: 16px; background: var(--r1); }
html body .scp-work h3{ display: flex; align-items: center; gap: 10px; color: var(--mu); font-size: 15px; }
html body .scp-work h3::before{ content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
html body .scp-work ul{ margin-top: 12px; }
html body .scp-work li{ position: relative; padding: 14px 0 14px 20px; border-top: 1px solid var(--ln); color: var(--hi); font-size: 15px; font-weight: 500; line-height: 1.45; }
html body .scp-work li::before{ content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; background: var(--g); }

@media (max-width: 1000px){
  html body .scp-team{ grid-template-columns: 1fr; gap: 40px; }
  html body .scp-wk{ grid-template-columns: 1fr; }
  html body .scp-dec li{ grid-template-columns: 1fr; gap: 8px; }
  html body .scp-dec .scp-no{ justify-self: start; }
  html body .scp-safe,html body .scp-setup{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .scp-hero{ grid-template-columns: 1fr; gap: 40px; padding-block: 48px 72px; }
  html body .scp-path{ grid-template-columns: 1fr; gap: 0; }
  html body .scp-path li{ display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 0 0 24px; }
  html body .scp-path li::before{ top: 40px; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; }
  html body .scp-path .scp-n{ grid-row: 1 / span 2; }
  html body .scp-path b{ margin-top: 8px; }
  html body .scp-layers{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .scp-tests{ grid-template-columns: 1fr; gap: 32px; }
  html body .scp-offer{ grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
}
@media (max-width: 640px){
  html body .scp-roles div{ grid-template-columns: 1fr; gap: 4px; }
  html body .scp-work{ padding: 22px 18px 10px; }
  html body .scp-tt{ min-width: 0; }
  html body .scp-tt thead{ display: none; }
  html body .scp-tt :is(tbody,tr,th,td){ display: block; width: auto; }
  html body .scp-tt tr{ padding-block: 16px; border-top: 1px solid var(--ln); }
  html body .scp-tt :is(th,td){ padding: 0; border: 0; }
  html body .scp-tt td{ margin-top: 6px; }
  html body .scp-safe,html body .scp-setup,html body .scp-dd{ grid-template-columns: 1fr; }
  html body .scp-trust ul{ flex-direction: column; }
  html body .scp-chart{ padding: 20px 16px; }
  html body .scp-chart ol{ gap: 6px; height: 200px; }
  html body .scp-bv{ font-size: 11px; }
  html body .scp-live{ grid-template-columns: 1fr; }
  html body .scp-live div + div{ border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  html body .scp-in{ padding-inline: 16px; }
  html body .scp-sec{ padding-block: 64px; }
  html body .scp-band{ padding-block: 64px; }
  html body .scp-layers,html body .scp-qs{ grid-template-columns: 1fr; }
  html body .scp-tests dt{ font-size: 56px; }
  html body .scp-offer{ padding: 32px 22px; border-radius: 16px; }
  html body .scp-b{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){ html body .scp-live-h::before{ content: ""; flex: none;  animation: none; } }