/* ═══════════════════════════════════════════════════════════════════════
   /bypass/geetest — "Slide the piece. The tell is your hand."
   Signature mechanic: a horizontal slide-puzzle. The piece travels the track
   on scroll and snaps teal into the gap. Purple band, teal closer.
   Colour budget: teal = the fit/verified signal; purple = the mid band.
   Chrome owned by _shared/chrome.css.
   ═══════════════════════════════════════════════════════════════════════ */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.gt-main { position: relative; }

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 620ms cubic-bezier(0.22,1,0.36,1), transform 620ms 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; transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 1 — slide-to-fit hero (sticky stage, scrubber piece)
   ═══════════════════════════════════════════════════════════════════════ */
.gt-hero { position: relative; min-height: 270vh; --gt: 0; }
.gt-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(16px, 2.8vh, 38px); padding: 84px clamp(20px, 5vw, 80px) 44px; max-width: 1180px; margin-inline: auto; }

.gt-hero-copy { text-align: left; max-width: 640px; }
.gt-hero-copy .eyebrow { margin-bottom: 16px; }
.gt-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: var(--leading-display-large, 1.04); letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); margin: 0; text-wrap: balance; }
.gt-hero-h1 .l2 { display: block; }
.gt-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: 48ch; }
.gt-hero-cta { margin-top: 26px; display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
.gt-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* The puzzle: a wide frame with a gap, a piece that slides to fit, a track. */
.gt-puzzle { width: 100%; max-width: 760px; align-self: stretch; margin-inline: auto; }
.gt-frame { position: relative; width: 100%; height: clamp(150px, 26vh, 288px); border: 1px solid var(--border-subtle); border-radius: var(--radius-default, 12px); overflow: hidden; }
/* faint schematic scan lines (borders, not gradients) suggest the "image" */
.gt-scan { position: absolute; inset: 0; }
.gt-scan i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); opacity: 0.5; }
.gt-scan i:nth-child(1) { left: 25%; } .gt-scan i:nth-child(2) { left: 50%; } .gt-scan i:nth-child(3) { left: 75%; }

.gt-shape { width: clamp(46px, 8vw, 62px); height: clamp(46px, 8vw, 62px); }
.gt-shape path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.gt-gap { position: absolute; top: 40%; left: 68%; transform: translate(-50%, -50%); }
.gt-gap path { stroke: color-mix(in srgb, var(--text-primary) 24%, transparent); stroke-dasharray: 4 5; }

.gt-piece { position: absolute; top: 40%; left: calc(10% + var(--gt, 0) * 58%); transform: translate(-50%, -50%); transition: filter 240ms ease; }
.gt-piece path { fill: color-mix(in srgb, var(--background) 68%, #000 32%); stroke: var(--text-secondary); }
.is-fit .gt-piece { filter: drop-shadow(0 0 14px color-mix(in srgb, #7ADAE6 55%, transparent)); }
.is-fit .gt-piece path { fill: color-mix(in srgb, #7ADAE6 20%, var(--background)); stroke: #7ADAE6; }
.is-fit .gt-gap path { stroke: color-mix(in srgb, #7ADAE6 60%, transparent); }

/* The slide track under the frame */
.gt-track { position: relative; margin-top: 18px; height: 44px; border: 1px solid var(--border-subtle); border-radius: 999px; display: flex; align-items: center; touch-action: none; }
.gt-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--gt, 0) * 100%); border-radius: 999px; background: color-mix(in srgb, #7ADAE6 14%, transparent); transition: background 240ms ease; }
.is-fit .gt-track-fill { background: color-mix(in srgb, #7ADAE6 22%, transparent); }
.gt-track-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quaternary); pointer-events: none; }
.is-fit .gt-track-hint { opacity: 0; }
.gt-handle { position: absolute; top: 50%; left: clamp(23px, calc(var(--gt, 0) * 100%), calc(100% - 23px)); transform: translate(-50%, -50%); width: 46px; height: 36px; border-radius: 999px; background: var(--background); border: 1px solid var(--text-tertiary); display: grid; place-items: center; transition: border-color 240ms ease, background 240ms ease; }
.gt-handle svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.gt-handle .arw path { fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gt-handle .chk { opacity: 0; }
.gt-handle .chk path { fill: none; stroke: #1D1612; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-fit .gt-handle { background: #7ADAE6; border-color: #7ADAE6; }
.is-fit .gt-handle .arw { opacity: 0; }
.is-fit .gt-handle .chk { opacity: 1; }

.gt-status { margin-top: 16px; font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.05em; color: var(--text-tertiary); transition: color 300ms ease; }
.is-fit .gt-status { color: #7ADAE6; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — the trajectory tell. Three masks, one signal underneath.
   ═══════════════════════════════════════════════════════════════════════ */
.gt-tell { padding: clamp(90px, 12vh, 160px) clamp(20px, 5vw, 80px); max-width: 1120px; margin-inline: auto; }
.gt-tell-head { max-width: 760px; margin-left: auto; text-align: right; }
.gt-tell-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin: 14px 0 0; }
.gt-tell-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0 auto; max-width: 52ch; }

.gt-masks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(40px, 6vh, 72px); }
.gt-mask { border: 1px solid var(--border-subtle); border-radius: var(--radius-default, 12px); padding: 22px 20px 24px; transition: transform 300ms cubic-bezier(0.22,1,0.36,1), border-color 300ms ease; }
.gt-mask.is-lift { transform: translateY(-6px); border-color: color-mix(in srgb, var(--text-primary) 26%, var(--border-subtle)); }
.gt-mask-tag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quaternary); }
.gt-mask-name { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 24px); color: var(--text-primary); margin: 10px 0 6px; }
.gt-mask-desc { font-family: var(--font-base); font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }
.gt-mask-ico { display: block; width: 56px; height: 44px; margin-bottom: 18px; overflow: visible; }
.gt-mask-ico path, .gt-mask-ico rect, .gt-mask-ico circle { fill: none; stroke: var(--text-tertiary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 300ms ease; }
.gt-mask-ico .fill { fill: var(--text-tertiary); stroke: none; transition: fill 300ms ease; }
.gt-mask.is-lift .gt-mask-ico path, .gt-mask.is-lift .gt-mask-ico rect, .gt-mask.is-lift .gt-mask-ico circle { stroke: var(--text-secondary); }
.gt-mask.is-lift .gt-mask-ico .fill { fill: var(--text-secondary); stroke: none; }

/* the trajectory strip: human curve vs bot line */
.gt-traj { margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--border-subtle); padding-top: clamp(28px, 4vh, 44px); }
.gt-traj-svg { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }
.gt-traj-svg .bot { fill: none; stroke: #F0524B; stroke-width: 2; stroke-dasharray: 10 9; vector-effect: non-scaling-stroke; }
.gt-traj-svg .human { fill: none; stroke: #7ADAE6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gt-traj-svg .dot { fill: #7ADAE6; }
.gt-traj-svg .bot-dot { fill: #F0524B; }
.gt-traj-legend { display: flex; gap: 28px; margin-top: 16px; font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); }
.gt-traj-legend b { font-weight: 400; }
.gt-traj-legend .k-bot { color: #F0524B; } .gt-traj-legend .k-human { color: #7ADAE6; }
.gt-traj-note { font-family: var(--font-base); font-size: 14px; color: var(--text-secondary); margin: 22px 0 0; max-width: 60ch; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 3 — one call fits every piece (SOLID purple band, bloom curtain left)
   ═══════════════════════════════════════════════════════════════════════ */
.gt-band { --rise: 0; position: relative; background: #7C4FE8; clip-path: circle(calc(var(--rise) * 150%) at 12% 0%); padding: clamp(96px, 16vh, 200px) clamp(20px, 5vw, 80px); }
@media (prefers-reduced-motion: reduce) { .gt-band { clip-path: none; } }
.gt-band-inner { max-width: 1120px; margin-inline: auto; text-align: left; }
.gt-band-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.04; letter-spacing: -0.022em; color: #fff; margin: 0; max-width: 16ch; }
.gt-band-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #F3ECFF; margin: 22px 0 0; max-width: 54ch; }
.gt-run-call { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 38px 0 0; padding: 14px 22px; border: 1px solid rgba(255,255,255,0.34); border-radius: 999px; font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 14.5px); color: #fff; }
.gt-run-call .c-cmd { font-weight: 600; }
.gt-run-call .c-arrow { color: #EBDDFF; }
.gt-run-call .c-ok { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 4 — closer (SOLID teal). Fixed purple CTA (contrast, never scrolled).
   ═══════════════════════════════════════════════════════════════════════ */
.gt-closer { position: relative; background: #7ADAE6; padding: clamp(100px, 18vh, 220px) clamp(20px, 5vw, 80px); }
.gt-closer-inner { max-width: 940px; margin-inline: auto; text-align: center; }
.gt-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero); line-height: 1.0; letter-spacing: -0.026em; color: #1D1612; margin: 0; text-wrap: balance; }
.gt-closer-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #10474E; margin: 22px auto 0; max-width: 52ch; }
.gt-closer-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gt-closer-tagline { font-family: var(--font-code); font-size: 13px; letter-spacing: 0.04em; color: #10474E; }

/* is-on-* topbar inversion is scoped to the floating topbar only (never
   the in-content closer CTA, which holds its fixed contrast). */

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gt-hero { min-height: auto; }
  .gt-hero-stage { position: static; height: auto; overflow: visible; max-width: none; padding: 120px 20px 64px; gap: 40px; }
  .gt-puzzle { max-width: 100%; }
  .gt-tell-head { text-align: left; }
  .gt-tell-lead { margin-left: 0; }
  .gt-masks { grid-template-columns: 1fr; }
  .gt-band { clip-path: none !important; }
}