/*
 * /bypass/aws-waf — "The verdict".
 *
 * Chrome owned by _shared/chrome.css. Palette: teal #7ADAE6 = Allow, red
 * #F0524B = Block/tripped (semantic), purple #7C4FE8 = band. One teal band
 * (Acts 3-4), one purple closer. Distinct architecture: an action-router hero
 * + a rate-based-rule scrubber. is-on-* scoped to topbar; closer CTA fixed.
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.aw-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 — the action router. Sticky; H1 left, a branching router right.
   ═══════════════════════════════════════════════════════════════════════ */
.aw-hero { position: relative; min-height: 260vh; --route: 0; }
.aw-hero-stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 0.95fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding: 100px clamp(20px, 5vw, 80px) clamp(48px, 8vh, 96px); max-width: 1520px; margin-inline: auto; overflow: hidden; }

.aw-hero-copy { max-width: 600px; }
.aw-hero-copy .eyebrow { margin-bottom: 16px; }
.aw-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; }
.aw-hero-h1 .l2 { display: block; }
.aw-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0; max-width: 46ch; }
.aw-hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.aw-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* Router: a Web ACL node at top, four action nodes below, wires fanning down. */
.aw-router { justify-self: end; width: min(460px, 100%); }
.aw-acl { border: 1px solid var(--border-subtle); border-radius: var(--radius-default, 10px); padding: 16px 20px; text-align: center; }
.aw-acl-t { font-family: var(--font-code); font-size: 13px; letter-spacing: 0.04em; color: var(--text-primary); }
.aw-acl-s { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em; color: var(--text-quaternary); margin-top: 4px; }
.aw-wires { width: 100%; height: 72px; display: block; }
.aw-wires path { fill: none; stroke: var(--border-subtle); stroke-width: 1.4; }
.aw-wires .aw-wire-block { stroke: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle)); stroke-dasharray: 1; pathLength: 1; stroke-dashoffset: calc(1 - var(--route, 0)); }
.is-blocked .aw-wires .aw-wire-block { stroke: #F0524B; }
.aw-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aw-action { text-align: center; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 6px; font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-tertiary); transition: border-color 260ms ease, color 260ms ease, background 260ms ease; }
.aw-action[data-a="block"] { }
.is-blocked .aw-action[data-a="block"] { border-color: #F0524B; color: #F0524B; background: color-mix(in srgb, #F0524B 12%, transparent); }
.aw-verdict { margin-top: 16px; text-align: center; font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-secondary); transition: color 260ms ease; }
.is-blocked .aw-verdict { color: #F0524B; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — the rate-based rule (scrubber). Drag the request rate; over the
   configured limit the rule trips to Block.
   ═══════════════════════════════════════════════════════════════════════ */
.aw-rate-sec { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 900px; margin: 0 auto; }
.aw-rate-head { max-width: 620px; margin: 0 auto clamp(44px, 6vh, 72px); text-align: center; }
.aw-rate-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; }
.aw-rate-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px auto 0; max-width: 52ch; }
.aw-rate { position: relative; --rate: 0.4; padding: 8px 0 0; }
.aw-rate-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.aw-rate-val { font-family: var(--font-code); font-size: var(--mkt-h4); color: var(--text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.aw-rate-verdict { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.04em; color: #7ADAE6; transition: color 200ms ease; }
.is-tripped .aw-rate-verdict { color: #F0524B; }
.aw-rate-track { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 10%, transparent); overflow: visible; }
.aw-rate-fill { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 999px; background: #7ADAE6; transition: background 200ms ease; }
.is-tripped .aw-rate-fill { background: #F0524B; }
.aw-rate-thresh { position: absolute; top: -8px; bottom: -8px; left: 62%; width: 2px; background: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.aw-rate-thresh::after { content: "limit"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quaternary); white-space: nowrap; }
.aw-rate-hint { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.05em; color: var(--text-quaternary); margin: 16px 0 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call routes to Allow. SOLID teal band, bloom from left.
   ═══════════════════════════════════════════════════════════════════════ */
.aw-band { position: relative; background: #7ADAE6; color: #0B1416; --rise: 0; clip-path: circle(calc(var(--rise) * 150%) at 6% 40%); will-change: clip-path; }
.aw-band-inner { max-width: 1000px; margin: 0 auto; padding: clamp(120px, 18vh, 220px) clamp(20px, 5vw, 80px); text-align: center; }
.aw-band-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 auto 0; text-wrap: balance; max-width: 16ch; }
.aw-band-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 20px auto 0; max-width: 48ch; }
.aw-run-call { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin: clamp(40px, 5vh, 64px) auto 0; font-family: var(--font-code); font-size: var(--mkt-body-sm); color: #103a40; border-top: 1px solid rgba(11,20,22,0.3); border-bottom: 1px solid rgba(11,20,22,0.3); padding: 18px 6px; }
.aw-run-call .c-cmd { color: #0B1416; font-weight: 700; }
.aw-run-call .c-arrow { color: #14494f; }
.aw-run-call .c-ok { color: #0B1416; background: rgba(11,20,22,0.12); padding: 3px 10px; border-radius: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. SOLID purple. Fixed contrasting CTA.
   ═══════════════════════════════════════════════════════════════════════ */
.aw-closer { position: relative; background: #7C4FE8; color: #fff; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(80px, 12vh, 140px); }
.aw-closer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.aw-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; }
.aw-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; }
.aw-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aw-closer-tagline { font-family: var(--font-base); font-size: 14px; color: rgba(255,255,255,0.82); }

/* Topbar adaptation (scoped) + fixed closer CTA. */

@media (min-width: 1920px) { .aw-band-inner { max-width: 1120px; } }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .aw-hero { min-height: auto; }
  .aw-hero-stage { position: static; height: auto; display: block; padding: 120px 20px 64px; }
  .aw-router { width: 100%; margin-top: 40px; justify-self: auto; }
  .aw-band { clip-path: none !important; }
}