/*
 * /bypass/perimeterx — "Press and hold".
 *
 * Chrome owned by _shared/chrome.css. On-brand palette only: purple #7C4FE8
 * marks "rejected / watched", teal #7ADAE6 marks "verified / clean". No red.
 * Two SOLID regions: teal band (Acts 3-4), purple closer. No gradients on
 * act backgrounds.
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.px-main { position: relative; z-index: 1; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), transform 720ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 1 — press & hold. Sticky stage; a big radial hold-ring is the central
   artifact (distinct from the other pages' side-anchored heroes). Scroll
   fills the ring; it rejects a script mid-hold, then verifies with Zenrows.
   ═══════════════════════════════════════════════════════════════════════ */
.px-hero { position: relative; min-height: 300vh; --hold: 0; }
.px-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(68px, 11vh, 128px); padding: 92px clamp(20px, 5vw, 72px) clamp(48px, 8vh, 96px); }

.px-hold { position: relative; width: clamp(168px, 20vh, 236px); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.px-hold-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.px-hold-track { fill: none; stroke: color-mix(in srgb, var(--text-primary) 12%, transparent); stroke-width: 5; }
.px-hold-fill { fill: none; stroke: var(--text-secondary); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; pathLength: 1; stroke-dashoffset: calc(1 - var(--hold, 0)); transition: stroke 300ms ease; }
/* Rejected = a script's hold: danger red (semantic, allowed here per Pablo). */
.is-rejected .px-hold-fill { stroke: #F0524B; }
/* Verified = the hold completed: close the ring fully so no track gap shows. */
.is-verified .px-hold-fill { stroke: #7ADAE6; stroke-dashoffset: 0; }
.px-hold-core { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border-subtle); display: grid; place-items: center; text-align: center; transition: border-color 300ms ease; }
.is-rejected .px-hold-core { border-color: color-mix(in srgb, #F0524B 55%, transparent); }
.is-verified .px-hold-core { border-color: color-mix(in srgb, #7ADAE6 60%, transparent); }
.px-hold-core span { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 12px; transition: color 300ms ease; }
.is-rejected .px-hold-core span { color: #F0524B; }
.is-verified .px-hold-core span { color: #7ADAE6; }

.px-hero-copy { text-align: center; max-width: 720px; }
.px-hero-copy .eyebrow { margin-bottom: 16px; }
.px-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-xlarge); line-height: var(--leading-display-xlarge, 1.02); letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); margin: 0; text-wrap: balance; }
.px-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px auto 0; max-width: 50ch; }
.px-hero-cta { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.px-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — human vs script. A two-column comparison: the sensor's read of an
   organic session vs a scripted one. Hover replays each trace (Pattern E).
   ═══════════════════════════════════════════════════════════════════════ */
.px-watch { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 72px); max-width: 1120px; margin: 0 auto; }
.px-watch-head { max-width: 640px; margin: 0 0 clamp(48px, 6vh, 80px); }
.px-watch-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin: 12px 0 0; text-wrap: balance; }
.px-watch-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 52ch; }
.px-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.px-col { background: var(--background); padding: 32px 30px 34px; }
.px-col-tag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quaternary); }
.px-col-name { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); color: var(--text-primary); margin: 10px 0 0; letter-spacing: -0.01em; }
.px-col-viz { margin: 22px 0 18px; height: 150px; border: 1px solid var(--border-subtle); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.px-col-viz svg { width: 92%; height: 82%; }
.px-col-viz path { fill: none; stroke-width: 1.8; stroke-dasharray: 1; }
.px-col--human .px-col-viz path { stroke: #7ADAE6; stroke-dashoffset: 0; }
.px-col--script .px-col-viz path { stroke: #F0524B; stroke-dashoffset: 0; }
.px-col:hover .px-col-viz path { animation: pxDraw 1500ms cubic-bezier(0.22,1,0.36,1); }
@keyframes pxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .px-col:hover .px-col-viz path { animation: none; } }
.px-col-verdict { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.04em; }
.px-col--human .px-col-verdict { color: #7ADAE6; }
.px-col--script .px-col-verdict { color: #F0524B; }
.px-col-desc { font-family: var(--font-base); font-size: 14px; line-height: 1.5; color: var(--text-tertiary); margin: 12px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call, it holds. SOLID teal band spanning both acts, bloom
   from the top-left corner.
   ═══════════════════════════════════════════════════════════════════════ */
.px-band { position: relative; background: #7ADAE6; color: #0B1416; --rise: 0; clip-path: circle(calc(var(--rise) * 150%) at 8% 0%); will-change: clip-path; }
.px-band-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.px-hold-act { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(120px, 18vh, 220px) 0 clamp(90px, 12vh, 150px); }
.px-hold-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #0B1416; margin: 14px 0 0; text-wrap: balance; }
.px-hold-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 20px 0 0; max-width: 44ch; }
.px-code { border: 1px solid rgba(11,20,22,0.28); border-radius: var(--radius-lg, 12px); background: transparent; overflow: hidden; }
.px-code-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(11,20,22,0.18); }
.px-code-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,20,22,0.28); }
.px-code-tag { margin-left: auto; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #14494f; }
.px-code pre { margin: 0; padding: 20px 18px; font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.7; color: #0B1416; overflow-x: auto; }
.px-code .tok-cmd { color: #0B1416; font-weight: 700; }
.px-code .tok-flag { color: #0E5B63; }
.px-code .tok-str { color: #14494f; }
.px-code-out { border-top: 1px dashed rgba(11,20,22,0.28); padding: 14px 18px; font-family: var(--font-code); font-size: 12.5px; color: #0E5B63; }
.px-code-out b { color: #0B1416; }

/* Act 4 — the "held" proof: a horizontal verified-session strip. */
.px-held { padding: clamp(20px, 4vh, 60px) 0 clamp(120px, 18vh, 220px); border-top: 1px solid rgba(11,20,22,0.18); }
.px-held-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: 1.06; letter-spacing: -0.02em; color: #0B1416; margin: 0 0 clamp(28px, 4vh, 48px); max-width: 22ch; }
.px-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.px-check { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(11,20,22,0.24); border-radius: 999px; padding: 10px 18px; font-family: var(--font-base); font-size: 14px; color: #0B1416; }
.px-check svg { width: 15px; height: 15px; flex: none; }
.px-check svg path { fill: none; stroke: #0E5B63; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.px-held-note { font-family: var(--font-base); font-size: 13.5px; color: #14494f; margin: 24px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. SOLID purple.
   ═══════════════════════════════════════════════════════════════════════ */
.px-closer { position: relative; background: #7C4FE8; color: #fff; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 72px) clamp(80px, 12vh, 140px); }
.px-closer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.px-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #fff; margin: 0; text-wrap: balance; }
.px-closer-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(255,255,255,0.9); margin: 22px auto 0; max-width: 52ch; }
.px-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.px-closer-tagline { font-family: var(--font-base); font-size: 14px; color: rgba(255,255,255,0.82); }
.px-siblings { max-width: 900px; margin: clamp(56px, 8vh, 96px) auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.24); }
.px-siblings-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0 0 16px; text-align: center; }
.px-siblings-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.px-sibling { font-family: var(--font-base); font-size: 13.5px; color: #fff; border: 1px solid rgba(255,255,255,0.36); border-radius: 999px; padding: 8px 15px; transition: background 200ms ease, border-color 200ms ease; }
.px-sibling:hover, .px-sibling:focus-visible { background: rgba(255,255,255,0.14); border-color: #fff; outline: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Topbar adaptation (incl. the CTA — purple button on teal, teal on purple).
   ═══════════════════════════════════════════════════════════════════════ */

/* The hold ring is a scroll-driven visual, not a control: default cursor
   (no portal, no cursor:none) so it never reads as a button to press. */

/* Wide tiers */
@media (min-width: 1600px) { .px-band-inner { max-width: 1400px; } .px-hero-copy { max-width: 820px; } }
@media (min-width: 1920px) { .px-band-inner { max-width: 1560px; } }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .px-hero { min-height: auto; }
  .px-hero-stage { position: static; height: auto; overflow: visible; display: block; padding: 120px 20px 64px; }
  .px-hold { margin: 0 auto 48px; align-self: auto; }
  .px-hero-copy { max-width: none; }
  .px-compare { grid-template-columns: 1fr; }
  .px-hold-act { grid-template-columns: 1fr; gap: 32px; padding: 96px 0 64px; }
  .px-band { clip-path: none !important; }
}

/* Closer CTA: fixed contrast for the closer background, never scroll-dependent. */