/* ============================================================================
 * Global Data — Product Overview / Pricing-Guide CTA  ( .gd-overview-cta )
 * A reusable, on-brand CTA band that wraps a GRAVITY FORM.
 *
 * Visual system MATCHES the redesigned product pages (ADC, Caspar, WatchEye…):
 * the canonical dark "Request access" CTA panel — navy #0b1220→#0f1b2e with a
 * green glow, a green-on-dark pill badge, white heading, and the bright-green
 * ad-btn-primary button (#13ec80, dark text, 12px radius). Manrope throughout.
 *
 * Two layers of styling live here:
 *   1. The section shell — navy panel, badge, heading, supporting line, layout.
 *   2. Gravity Forms overrides — everything scoped under .gd-overview-cta so it
 *      ONLY restyles the form inside this block, never other forms on the site.
 * Targets the Gravity Forms 2.5+ "gravity-theme" markup. The button arrow is an
 * inline SVG background (no icon font required).
 * ========================================================================== */

.gd-overview-cta{
  --gd-oc-ink1:#0b1220;        /* navy panel — top-left (matches product CTA) */
  --gd-oc-ink2:#0f1b2e;        /* navy panel — bottom-right */
  --gd-oc-green:#13ec80;
  --gd-oc-green-dark:#0eb561;
  --gd-oc-green-soft:#6ee7b7;  /* badge text on dark */
  --gd-oc-btn-ink:#06281a;     /* dark text on the green button */
  --gd-oc-line:rgba(255,255,255,.26);
  --gd-oc-line-strong:rgba(255,255,255,.6);
  --gd-oc-place:rgba(255,255,255,.6);
  --gd-oc-sub:rgba(255,255,255,.66);
  --gd-oc-err:#fda4af;

  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:#fff;
}
.gd-overview-cta *{ box-sizing:border-box; }

/* ---- panel (canonical product-page dark CTA) ---- */
.gd-oc-panel{
  position:relative; overflow:hidden;
  border-radius:28px;
  padding:clamp(40px,5vw,76px) clamp(24px,5vw,84px);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(19,236,128,.16), transparent 46%),
    radial-gradient(120% 130% at 0% 100%, rgba(19,236,128,.08), transparent 50%),
    linear-gradient(160deg, var(--gd-oc-ink1), var(--gd-oc-ink2));
  box-shadow:0 34px 80px -34px rgba(2,8,20,.8), inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;
}
/* faint grid for depth (subtle, fades upward) */
.gd-oc-panel::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:62px 62px; mask-image:radial-gradient(120% 120% at 50% 0%, #000, transparent 72%);
}
.gd-oc-glow{
  position:absolute; width:520px; height:520px; right:-130px; top:-200px; z-index:-1;
  border-radius:9999px; filter:blur(64px); pointer-events:none;
  background:radial-gradient(circle, rgba(19,236,128,.26), transparent 60%);
}
.gd-oc-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

/* ---- badge (green-on-dark pill, exactly like the product pages) ---- */
.gd-oc-badge{
  display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gd-oc-green-soft); background:rgba(19,236,128,.12); border:1px solid rgba(19,236,128,.25);
  border-radius:100px; padding:7px 15px; margin:0 0 22px;
}
.gd-oc-badge .gd-oc-dot{ width:7px; height:7px; border-radius:50%; background:var(--gd-oc-green); box-shadow:0 0 0 0 rgba(19,236,128,.55); }
@media (prefers-reduced-motion: no-preference){ .gd-oc-badge .gd-oc-dot{ animation:gd-oc-pulse 1.8s infinite; } }
@keyframes gd-oc-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

/* ---- heading — product scale, with room to breathe ---- */
.gd-oc-title{
  margin:0; max-width:24ch;
  text-align:center; font-weight:800; letter-spacing:-.02em; line-height:1.16;
  font-size:clamp(27px,3.4vw,42px); color:#fff; text-wrap:balance;
}
.gd-oc-title .hl{ color:var(--gd-oc-green); }

/* ---- supporting line (relieves the heading; matches product body-on-dark) ---- */
.gd-oc-sub{
  margin:16px auto 0; max-width:60ch;
  text-align:center; font-size:clamp(15px,1.4vw,17px); font-weight:500; line-height:1.6;
  color:var(--gd-oc-sub); text-wrap:pretty;
}

/* spacing between the header block and the form */
.gd-oc-formwrap{ width:100%; margin-top:clamp(32px,4vw,48px); }

/* =========================================================================
 * GRAVITY FORMS — layout + field styling (scoped to this block only)
 * ========================================================================= */

/* strip Gravity's chrome */
.gd-overview-cta .gform_wrapper.gravity-theme,
.gd-overview-cta .gform_wrapper{ margin:0; }
.gd-overview-cta .gform_heading,
.gd-overview-cta .gform_required_legend{ display:none; }
.gd-overview-cta .gform_wrapper form{ margin:0; }

/* the form becomes: [ fields block ]  [ submit ] */
.gd-overview-cta .gform_wrapper form{
  display:grid; 
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:clamp(24px,3.5vw,56px);
}
.gd-overview-cta .gform_body,
.gd-overview-cta .gform-body{ min-width:0; }

/* the 2-column field grid (overrides Gravity's 12-col grid) */
.gd-overview-cta .gform_fields{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px clamp(24px,4vw,56px);
}

@media (max-width: 640px) {
/* the 1-column field grid (overrides Gravity's 12-col grid) */
  .gd-overview-cta .gform_fields{
  display:grid !important;
  grid-template-columns:repeat(1,minmax(0,1fr)) !important;
  gap:20px clamp(24px,4vw,56px);
 }
}


/* let admins still force a full-width row with the half/full width classes */
.gd-overview-cta .gfield{ grid-column:auto / span 1 !important; min-width:0; margin:0; padding:0; }
.gd-overview-cta .gfield.gfield--width-full,
.gd-overview-cta .gfield.gf_full,
.gd-overview-cta .gfield--span-2{ grid-column:1 / -1 !important; }

/* labels: kept for screen-readers, hidden visually (the placeholder carries the name) */
.gd-overview-cta .gfield_label,
.gd-overview-cta .gfield_required{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* if an admin prefers visible labels, add .gd-oc-show-labels on the section */
.gd-overview-cta.gd-oc-show-labels .gfield_label{
  position:static !important; width:auto; height:auto; clip:auto; margin:0 0 8px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

/* inputs — underline only, on the navy */
.gd-overview-cta .ginput_container input,
.gd-overview-cta .ginput_container select,
.gd-overview-cta .ginput_container textarea,
.gd-overview-cta .gform_wrapper input[type="text"],
.gd-overview-cta .gform_wrapper input[type="email"],
.gd-overview-cta .gform_wrapper input[type="tel"],
.gd-overview-cta .gform_wrapper input[type="number"],
.gd-overview-cta .gform_wrapper input[type="url"],
.gd-overview-cta .gform_wrapper textarea,
.gd-overview-cta .gform_wrapper select{
  -webkit-appearance:none; appearance:none;
  width:100%; margin:0; padding:10px 2px; border:none; border-radius:0;
  background-color:transparent; color:#fff;
  font-family:inherit; font-size:clamp(15px,1.4vw,16px); font-weight:500; line-height:1.4;
  /* static faint baseline + a green line that grows on focus */
  border-bottom:1px solid var(--gd-oc-line);
  background-image:linear-gradient(var(--gd-oc-green), var(--gd-oc-green));
  background-repeat:no-repeat; background-position:left 100%; background-size:0% 2px;
  transition:background-size .35s cubic-bezier(.4,0,.2,1), border-color .25s;
  outline:none;
}
.gd-overview-cta .gform_wrapper input::placeholder,
.gd-overview-cta .gform_wrapper textarea::placeholder{ color:var(--gd-oc-place); opacity:1; font-weight:500; }
.gd-overview-cta .gform_wrapper input:hover,
.gd-overview-cta .gform_wrapper textarea:hover,
.gd-overview-cta .gform_wrapper select:hover{ border-bottom-color:var(--gd-oc-line-strong); }
.gd-overview-cta .gform_wrapper input:focus,
.gd-overview-cta .gform_wrapper textarea:focus,
.gd-overview-cta .gform_wrapper select:focus{
  border-bottom-color:transparent; background-size:100% 2px;
  box-shadow: 0 0 0 0px transparent !important;
}
/* kill autofill's white box on the dark panel */
.gd-overview-cta .gform_wrapper input:-webkit-autofill{
  -webkit-text-fill-color:#fff; transition:background-color 9999s; caret-color:#fff;
}
.gd-overview-cta .ginput_container{ position:relative; }
.gd-overview-cta .gfield_description,
.gd-overview-cta .gform_fields .gfield_description{ color:rgba(255,255,255,.5); font-size:12px; margin-top:6px; }

/* ---- submit button (canonical ad-btn-primary) ---- */
.gd-overview-cta .gform_footer{
  margin:0; padding:0; display:flex; align-items:center; justify-content:center;
}

.gd-overview-cta .gform_footer .gform_button, .gd-overview-cta .gform_button.button, .gd-overview-cta .btn {
    cursor: pointer !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    color: var(--gd-oc-btn-ink) !important;
    background: var(--gd-oc-green) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 16px 52px 16px 24px !important;
    min-width: 218px !important;
    min-height: 54px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2306281a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    box-shadow: 0 8px 22px -8px rgba(19, 236, 128, .6) !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s, background-position .2s !important;
}
.gd-overview-cta .gform_footer .btn:hover,
.gd-overview-cta .btn:hover{
  background-color:var(--gd-oc-green-dark); transform:translateY(-2px) !important;
  background-position:right 16px center !important;
  box-shadow:0 14px 30px -8px rgba(19,236,128,.7) !important;
}
.gd-overview-cta .gform_footer .btn:active{ transform:translateY(0); }
.gd-overview-cta .gform_footer .btn:focus-visible{ outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }

/* spinner shown while AJAX-submitting */
.gd-overview-cta .gform_ajax_spinner{ margin-left:12px; filter:brightness(0) saturate(100%); }

/* =========================================================================
 * Validation states
 * ========================================================================= */
.gd-overview-cta .gform_validation_errors{
  background:rgba(255,255,255,.07); border:1px solid rgba(253,164,175,.55);
  border-radius:12px; padding:14px 18px; margin:0 0 26px; color:#fff; box-shadow:none;
}
.gd-overview-cta .gform_validation_errors h2,
.gd-overview-cta .gform_submission_error{ color:#fff !important;  background: transparent !important; font-size:15px !important; font-weight:700 !important; margin:0 !important; }
.gd-overview-cta .gfield_error input,
.gd-overview-cta .gfield_error textarea,
.gd-overview-cta .gfield_error select{ border-bottom-color:var(--gd-oc-err) !important; }
.gd-overview-cta .gfield_validation_message,
.gd-overview-cta .validation_message{
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(253, 164, 175, .55) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 0 0 26px !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* confirmation message after submit */
.gd-overview-cta .gform_confirmation_message{
    color: #fff !important;
    font-size: clamp(17px, 1.8vw, 21px) !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    max-width: 46ch !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
}

/* =========================================================================
 * Responsive — stack fields, then drop the button below full-width
 * ========================================================================= */
@media (max-width:880px){
  .gd-overview-cta .gform_wrapper form{ grid-template-columns:1fr; gap:28px; }
  .gd-overview-cta .gform_footer{ justify-content:stretch; }
  .gd-overview-cta .gform_footer .gform_button{ width:100%; }
}
@media (max-width:560px){
  .gd-overview-cta .gform_fields{ grid-template-columns:1fr; }
}

/* =========================================================================
 * Background presets (set via an extra class from ACF)
 *   default = navy (ink, matches product pages) · emerald · royal
 * ========================================================================= */
.gd-overview-cta.gd-oc--emerald .gd-oc-panel{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(19,236,128,.26), transparent 48%),
    radial-gradient(120% 130% at 0% 100%, rgba(6,40,26,.5), transparent 52%),
    linear-gradient(155deg,#065f46,#022c22);
}
.gd-overview-cta.gd-oc--royal .gd-oc-panel{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(19,236,128,.2), transparent 46%),
    radial-gradient(120% 130% at 0% 100%, rgba(99,130,255,.34), transparent 50%),
    linear-gradient(150deg,#3a45e6,#262fbe);
}