/*
 * /bypass/recaptcha — "The grid never ends".
 *
 * Chrome owned by _shared/chrome.css. Palette: teal #7ADAE6 = passed/verified,
 * red #F0524B = challenged/low-score (semantic), purple #7C4FE8 = band. One
 * purple band (Acts 3-4), one teal closer. Distinct hero: a centered reCAPTCHA
 * widget whose checkbox unfolds into the image grid. is-on-* scoped to topbar;
 * closer CTA fixed contrast.
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.rc-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 checkbox unfolds into the grid. Sticky; centered composition:
   H1 above, the reCAPTCHA widget below (a fresh centered hero vs the last two).
   ═══════════════════════════════════════════════════════════════════════ */
.rc-hero { position: relative; min-height: 300vh; --rc: 0; }
.rc-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 0.92fr; align-items: center; gap: clamp(36px, 6vw, 100px); padding: 92px clamp(20px, 5vw, 80px) clamp(48px, 8vh, 96px); max-width: 1500px; margin-inline: auto; }

.rc-hero-copy { grid-column: 2; grid-row: 1; text-align: right; justify-self: end; max-width: 560px; }
.rc-hero-copy .eyebrow { margin-bottom: 16px; }
.rc-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; }
.rc-hero-h1 .l2 { display: block; }
.rc-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0 auto; max-width: 44ch; }
.rc-hero-cta { margin-top: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.rc-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* The widget — the big left-side visual */
.rc-widget { grid-column: 1; grid-row: 1; width: min(376px, 100%); justify-self: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 12px); overflow: hidden; }
.rc-check-row { display: flex; align-items: center; gap: 14px; padding: 18px 18px; }
.rc-box { width: 26px; height: 26px; border-radius: 4px; border: 2px solid var(--border); flex: none; position: relative; transition: border-color 260ms ease; }
.rc-box .rc-spin { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--text-secondary); opacity: 0; }
.is-checking .rc-box .rc-spin { opacity: 1; animation: rcSpin 0.8s linear infinite; }
@keyframes rcSpin { to { transform: rotate(360deg); } }
.rc-box .rc-tick { position: absolute; inset: 0; opacity: 0; }
.rc-box .rc-tick path { fill: none; stroke: #7ADAE6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-checked .rc-box { border-color: #7ADAE6; }
.is-checked .rc-box .rc-tick { opacity: 1; }
.is-checking .rc-box { border-color: transparent; }
.rc-check-label { font-family: var(--font-base); font-size: 15px; color: var(--text-secondary); }
.rc-check-brand { margin-left: auto; font-family: var(--font-code); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quaternary); text-align: right; line-height: 1.3; }

/* The image-grid challenge, unfolds when escalated */
.rc-grid-wrap { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 520ms cubic-bezier(0.22,1,0.36,1), opacity 400ms ease; border-top: 1px solid transparent; }
/* The full 3x3 challenge unfolds and stays fully visible (no clip). */
.is-challenge .rc-grid-wrap { max-height: 520px; opacity: 1; border-top-color: var(--border-subtle); }
.rc-prompt { padding: 14px 16px; background: color-mix(in srgb, #7C4FE8 88%, #000 12%); color: #fff; }
.rc-prompt-t { font-family: var(--font-base); font-size: 12px; color: rgba(255,255,255,0.72); }
.rc-prompt-b { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: #fff; margin-top: 2px; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 9px; }
.rc-tile { aspect-ratio: 1; border-radius: 3px; position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 8%, transparent), color-mix(in srgb, var(--text-primary) 14%, transparent)); overflow: hidden; }
.rc-tile:nth-child(3n) { background: linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 12%, transparent), color-mix(in srgb, var(--text-primary) 6%, transparent)); }
.rc-tile:nth-child(2n) { background: linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 10%, transparent), color-mix(in srgb, var(--text-primary) 16%, transparent)); }
.rc-tile::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 3px; transition: border-color 200ms ease; }
.rc-tile.is-sel::after { border-color: #7ADAE6; }
.rc-tile .rc-check2 { position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; border-radius: 50%; background: #7ADAE6; display: grid; place-items: center; opacity: 0; transform: scale(0.5); transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34,1.56,0.64,1); }
.rc-tile.is-sel .rc-check2 { opacity: 1; transform: scale(1); }
.rc-tile .rc-check2 svg { width: 9px; height: 9px; }
.rc-tile .rc-check2 path { fill: none; stroke: #0B1416; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-status { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.04em; color: var(--text-tertiary); text-align: center; margin: 4px 0 0; min-height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — v3 scores you invisibly (scrubber 0.0–1.0).
   ═══════════════════════════════════════════════════════════════════════ */
.rc-v3 { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 880px; margin: 0 auto; }
.rc-v3-head { max-width: 620px; margin: 0 auto clamp(44px, 6vh, 72px); text-align: center; }
.rc-v3-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; }
.rc-v3-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; }
.rc-score { position: relative; --s: 0.2; padding: 8px 0 0; touch-action: none; }
.rc-score-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.rc-score-val { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1; color: #F0524B; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.rc-score.is-low .rc-score-val { color: #F0524B; }
.rc-score:not(.is-low) .rc-score-val { color: #7ADAE6; }
.rc-score-verdict { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.04em; color: #F0524B; transition: color 200ms ease; }
.rc-score:not(.is-low) .rc-score-verdict { color: #7ADAE6; }
.rc-score-track { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, #F0524B 34%, transparent), color-mix(in srgb, var(--text-primary) 10%, transparent) 50%, color-mix(in srgb, #7ADAE6 34%, transparent)); }
.rc-score-thresh { position: absolute; top: -8px; bottom: -8px; left: 50%; width: 2px; background: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.rc-score-dot { position: absolute; top: 50%; left: 20%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #F0524B; box-shadow: 0 0 0 4px var(--background); transition: background 200ms ease; }
.rc-score:not(.is-low) .rc-score-dot { background: #7ADAE6; }
.rc-score-ends { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em; color: var(--text-quaternary); }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call, never challenged. SOLID purple band, bloom top-right.
   ═══════════════════════════════════════════════════════════════════════ */
.rc-band { position: relative; background: #7C4FE8; color: #fff; --rise: 0; clip-path: circle(calc(var(--rise) * 150%) at 94% 6%); will-change: clip-path; }
.rc-band-inner { max-width: 1000px; margin: 0 auto; padding: clamp(120px, 18vh, 220px) clamp(20px, 5vw, 80px); text-align: center; }
.rc-band-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: 14px auto 0; text-wrap: balance; max-width: 16ch; }
.rc-band-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(255,255,255,0.9); margin: 20px auto 0; max-width: 48ch; }
.rc-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: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); padding: 18px 6px; }
.rc-run-call .c-cmd { color: #fff; font-weight: 700; }
.rc-run-call .c-arrow { color: rgba(255,255,255,0.6); }
.rc-run-call .c-ok { color: #1D1612; background: #7ADAE6; padding: 3px 10px; border-radius: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. SOLID teal. Fixed contrasting CTA.
   ═══════════════════════════════════════════════════════════════════════ */
.rc-closer { position: relative; background: #7ADAE6; color: #0B1416; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(80px, 12vh, 140px); }
.rc-closer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.rc-closer-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: 0; text-wrap: balance; }
.rc-closer-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 22px auto 0; max-width: 52ch; }
.rc-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rc-closer-tagline { font-family: var(--font-base); font-size: 14px; color: #14494f; }

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

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

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rc-hero { min-height: auto; }
  .rc-hero-stage { position: static; height: auto; overflow: visible; display: block; padding: 120px 20px 64px; }
  .rc-hero-copy { text-align: left; justify-self: auto; max-width: none; }
  .rc-hero-sub { margin-left: 0; }
  .rc-hero-cta { justify-content: flex-start; }
  .rc-widget { margin: 40px 0 0; width: min(360px, 100%); justify-self: auto; }
  .rc-band { clip-path: none !important; }
}