/* cta.css — giga home CTA block. Every number measured: reference/TOKENS.md §2 (CTA H2/p),
   §4 "CTA form pill", frames/measure/styles-{1440,390}.json, raw/index.html utility classes.
   Breakpoints are giga's own: md=768, news-tablet=810, lg=1024, 1680. */

/* ---- block frame (giga: .mt-16.md:mt-24 > .pt-16.max-md:pt-12.lg:pt-24.min-h-[min(540px,72vh)]) ---- */
/* own stacking context at z:1 so the block's internal z-10 content cannot outrank the
   footer-reveal panel (z:5), which slides in over the CTA when the footer is pushed up. */
.cta{position:relative;isolation:isolate;z-index:1;overflow:hidden;margin-top:64px}
.cta-inner{position:relative;overflow:hidden;padding-top:48px;min-height:min(540px,72vh)}
.cta-body{position:relative;z-index:10;padding-bottom:48px}
@media (min-width:768px){
  .cta{margin-top:96px}
  .cta-inner{padding-top:64px}
  .cta-body{padding-bottom:64px}
}
@media (min-width:1024px){
  .cta-inner{padding-top:96px}
  .cta-body{padding-bottom:96px}
}

/* ---- field canvas (JS-RECON §6.2; mask quoted verbatim from the inline style) ---- */
.cta-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cta-field-canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgb(0,0,0) 11%,rgb(0,0,0) 100%),linear-gradient(to right,transparent 0,rgb(0,0,0) 4%,rgb(0,0,0) 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgb(0,0,0) 11%,rgb(0,0,0) 100%),linear-gradient(to right,transparent 0,rgb(0,0,0) 4%,rgb(0,0,0) 96%,transparent 100%)}

/* ---- copy stack (giga: flex-col gap-5 px-5 py-16 text-left md:items-center md:px-11 md:text-center lg:py-20) ---- */
.cta-copy{position:relative;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;padding:64px 20px;text-align:left}
@media (min-width:768px){.cta-copy{align-items:center;justify-content:center;padding-left:44px;padding-right:44px;text-align:center}}
@media (min-width:1024px){.cta-copy{padding-top:80px;padding-bottom:80px}}

/* eyebrow — measured 12px/15px mono, white 60%, currentColor dot (NOT the accent dot: giga's CTA
   eyebrow uses bg-current with --pulse-color:currentColor). base.css .is-dim kills the pulse; giga
   keeps it, so it is restored here. */
.cta-eyebrow{font-size:12px;line-height:15px;letter-spacing:normal;gap:8px;justify-content:flex-start;color:rgba(255,255,255,.6)}
.eyebrow.cta-eyebrow::before{background:currentColor;--pulse-color:currentColor;animation:pulse-dot-colored 2s ease-out infinite}
@media (min-width:768px){.cta-eyebrow{justify-content:center}}

/* H2 — geistPixelLine 48px/57.6/-1.44px @1440-1300, 44px/52.8/-1.32 @1024-390.
   NOTE: tokens.css --text-headline is clamp(2.5rem,4vw,3rem), which yields 40px at 1024 where the
   reference measures 44px. giga's own CSS ships both values; the painted one is 2.75rem/3.8vw. */
.cta-h2{font-family:var(--font-pixel);font-weight:400;font-size:var(--text-headline);line-height:1.2;letter-spacing:var(--tracking-display);color:#fff;max-width:56rem;text-wrap:balance}
@media (min-width:768px){.cta-h2{margin-inline:auto}}
@media (min-width:810px){.cta-h2{max-width:64rem}}

/* lede — 16px/25.6px, white 70%, max 900, mb-10 */
.cta-lede{font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.6;color:rgba(255,255,255,.7);max-width:900px;text-wrap:balance;margin-bottom:40px}

/* ---- form pill (TOKENS §4: 460x52, r9999, pad 6/6/6/20, blur 28, inset ring 15%) ---- */
.cta-form{width:100%;max-width:460px;margin-inline:auto}
.cta-pill{display:flex;align-items:center;border-radius:var(--radius-full);background:rgba(255,255,255,.07);padding:6px 6px 6px 20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
.cta-pill:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 3px rgba(255,255,255,.1)}
.cta-input{min-width:0;flex:1 1 auto;align-self:stretch;border:0;background:transparent;font-family:var(--font-sans);font-size:14px;line-height:1.4;color:#fff;outline:none}
.cta-input::placeholder{color:rgba(255,255,255,.55)}
.cta-input:focus-visible{outline:none}
/* submit: white circle -> Gnar accent on hover; ink on accent is --accent-ink, never white (DIALECT) */
.cta-submit{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-full);background:#fff;color:#000;transition:background-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.cta-submit:hover{background:var(--accent);color:var(--accent-ink)}
.cta-submit svg{width:16px;height:16px}

/* status line — giga keeps this sr-only; we render it so the submit has a visible result. */
.cta-status{min-height:0;font-family:var(--font-mono);font-size:11px;line-height:16.5px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);margin-top:0}
.cta-form.is-sent .cta-status{opacity:1;transform:translateY(0);margin-top:12px}

@media (prefers-reduced-motion:reduce){
  .eyebrow.cta-eyebrow::before{animation:none}
  .cta-status{transition:none}
}

/* giga: submit button keeps cursor:default (hover census) */
.cta-submit{cursor:default}