/* =====================================================================
   MM4I Gate Videos — frontend
   The gate form's parent becomes .mpv-gate (only while the form exists).
   Layout (desktop):  Reel 01 | Heading + Form + Note | Reel 02
===================================================================== */

.mpv-gate{
  --mpv-green:#3DFF51;
  --mpv-green-2:#22CF3A;
  --mpv-green-deep:#1B6B2A;
  --mpv-blue:#216890;
  --mpv-navy:#123B50;
  --mpv-navy-2:#0B2A39;
  --mpv-text:#1A1A1A;
  --mpv-muted:#64707D;
  --mpv-line:#E3E9ED;
  --mpv-soft:#F6F8F9;
  --mpv-head:'Fraunces', Georgia, 'Times New Roman', serif;
  --mpv-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mpv-gate-w:min(1240px, calc(100vw - 48px));
  --mpv-side-w:300px;
  --mpv-pad:46px;
  --mpv-sticky-top:110px;

  /* Break out of the narrow boxed Elementor container, centred */
  position:relative;
  width:var(--mpv-gate-w) !important;
  max-width:none !important;
  margin-left:calc(50% - var(--mpv-gate-w) / 2) !important;
  margin-right:calc(50% - var(--mpv-gate-w) / 2) !important;

  display:grid !important;
  grid-template-columns:minmax(0,var(--mpv-side-w)) minmax(0,1fr) minmax(0,var(--mpv-side-w));
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:
    "load load  load"
    "left head  right"
    "left main  right"
    "left note  right";

  background:#fff;
  border-radius:28px;
  overflow:hidden;
  overflow:clip;
  box-shadow:
    0 40px 90px -40px rgba(11,42,57,.45),
    0 0 0 1px rgba(18,59,80,.08);
  font-family:var(--mpv-body);
  color:var(--mpv-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.mpv-gate *,.mpv-gate *::before,.mpv-gate *::after{box-sizing:border-box;}

.mpv-gate.mpv--v1{
  --mpv-gate-w:min(1000px, calc(100vw - 48px));
  grid-template-columns:minmax(0,var(--mpv-side-w)) minmax(0,1fr);
  grid-template-areas:
    "load load"
    "left head"
    "left main"
    "left note";
}

/* GPSA loading holder + anything else the host already had */
.mpv-gate > *{grid-column:1 / -1;}
.mpv-gate > [id^="gpsa-document-loading"]{grid-area:load;}
.mpv-gate > .mpv__side--left{grid-area:left;}
.mpv-gate > .mpv__side--right{grid-area:right;}
.mpv-gate > .mpv-gate__head{grid-area:head;}
.mpv-gate > .mpv-gate__main{grid-area:main;}
.mpv-gate > .mpv-gate__note{grid-area:note;}

/* ---------- Centre column ---------- */
.mpv-gate .mpv-gate__head{
  position:relative;
  padding:56px var(--mpv-pad) 6px;
}
.mpv-gate .mpv-gate__head::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--mpv-pad);
  right:var(--mpv-pad);
  height:4px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--mpv-green), var(--mpv-green-deep));
}

.mpv-gate .mpv-gate__main{
  min-width:0;
  margin:0 !important;
  padding:20px var(--mpv-pad) 0;
}
.mpv-gate:not(:has(.mpv-gate__head)) .mpv-gate__main{padding-top:52px;}

.mpv-gate .mpv-gate__note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  padding:18px var(--mpv-pad) 42px;
  font-size:12.5px;
  color:var(--mpv-muted);
  text-align:center;
}
.mpv-gate .mpv-gate__note svg{flex:none; color:var(--mpv-green-deep);}
.mpv-gate:not(:has(.mpv-gate__note)) .mpv-gate__main{padding-bottom:42px;}

.mpv-gate .mpv-gate__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mpv-green-deep);
}
.mpv-gate .mpv-gate__eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--mpv-green-deep);
}

.mpv-gate .mpv-gate__title{
  margin:0 0 10px;
  padding:0;
  font-family:var(--mpv-head);
  font-size:clamp(25px, 2.4vw, 32px);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--mpv-navy);
}
.mpv-gate .mpv-gate__desc{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.6;
  color:var(--mpv-muted);
}

.mpv-gate .mpv-gate__perks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.mpv-gate .mpv-gate__perks li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:6px 12px 6px 9px;
  list-style:none;
  border-radius:999px;
  background:rgba(61,255,81,.12);
  border:1px solid rgba(27,107,42,.18);
  font-size:12.5px;
  font-weight:600;
  color:var(--mpv-green-deep);
}
.mpv-gate .mpv-gate__perks li svg{flex:none;}

/* "Access to this content requires submission of a form." */
.mpv-gate .mpv-gate__msg{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--mpv-soft);
  border:1px solid var(--mpv-line);
  font-size:13.5px;
  font-weight:500;
  color:var(--mpv-navy);
}
.mpv-gate .mpv-gate__msg::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mpv-green-2);
  box-shadow:0 0 0 4px rgba(61,255,81,.2);
}

/* ---------- Side panels ---------- */
.mpv-gate .mpv__side{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  overflow:clip;
  display:block;
  padding:40px 24px;
  background:
    radial-gradient(110% 70% at 0% 0%, rgba(61,255,81,.24) 0%, transparent 55%),
    linear-gradient(165deg, var(--mpv-blue) 0%, var(--mpv-navy) 62%, var(--mpv-navy-2) 100%);
}
.mpv-gate .mpv__side--right{
  background:
    radial-gradient(110% 70% at 100% 100%, rgba(61,255,81,.22) 0%, transparent 55%),
    linear-gradient(195deg, var(--mpv-blue) 0%, var(--mpv-navy) 62%, var(--mpv-navy-2) 100%);
}
.mpv-gate .mpv__side::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 75%);
}
.mpv-gate .mpv__side::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px solid rgba(61,255,81,.2);
  box-shadow:0 0 0 40px rgba(61,255,81,.04), 0 0 0 80px rgba(61,255,81,.025);
  top:-120px;
  left:-120px;
}
.mpv-gate .mpv__side--right::after{top:auto; left:auto; bottom:-120px; right:-120px;}

/* =====================================================================
   REEL (9:16) — sticks while the (tall, multi-step) form scrolls
===================================================================== */
.mpv-gate .mpv-reel{
  position:sticky;
  top:var(--mpv-sticky-top);
  isolation:isolate;
  width:min(100%, 252px);
  margin:0 auto;
  aspect-ratio:9/16;
  border-radius:24px;
  overflow:hidden;
  background:#061A24;
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.14),
    0 0 0 7px rgba(255,255,255,.04);
  opacity:0;
  translate:0 18px;
  transition:opacity .55s ease .1s, translate .65s cubic-bezier(.2,.8,.2,1) .1s;
}
.mpv-gate.is-in .mpv-reel{opacity:1; translate:0 0;}
.mpv-gate .mpv__side--right .mpv-reel{transition-delay:.22s;}

/* Top + bottom shade for controls legibility */
.mpv-gate .mpv-reel::before,
.mpv-gate .mpv-reel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:3;
  pointer-events:none;
}
.mpv-gate .mpv-reel::before{top:0; height:22%; background:linear-gradient(180deg, rgba(0,0,0,.35), transparent);}
.mpv-gate .mpv-reel::after{bottom:0; height:34%; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);}

.mpv-gate .mpv-reel__poster,
.mpv-gate .mpv-reel__player{
  position:absolute;
  inset:0;
}
.mpv-gate .mpv-reel__poster img,
.mpv-gate .mpv-reel__poster video{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.mpv-gate .mpv-reel__ph{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(61,255,81,.45), transparent 60%),
    linear-gradient(160deg, var(--mpv-green-deep), var(--mpv-blue) 55%, var(--mpv-navy));
}

.mpv-gate .mpv-reel__player{
  z-index:1;
  opacity:0;
  transition:opacity .5s ease;
  background:#000;
}
.mpv-gate .mpv-reel.is-ready .mpv-reel__player{opacity:1;}
.mpv-gate .mpv-reel__player iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  max-width:none;
  border:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.mpv-gate .mpv-reel__player video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

/* Loader */
.mpv-gate .mpv-reel__loader{
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--mpv-green);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.mpv-gate.is-in .mpv-reel:not(.is-ready) .mpv-reel__loader{
  opacity:1;
  animation:mpvSpin .8s linear infinite;
}
@keyframes mpvSpin{to{transform:rotate(360deg);}}

/* Tap area: play / pause */
.mpv-gate .mpv-reel__tap{
  all:unset;
  position:absolute;
  inset:0;
  z-index:4;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mpv-gate .mpv-reel__tap:focus-visible{outline:3px solid var(--mpv-green); outline-offset:-3px; border-radius:24px;}

/* Paused indicator */
.mpv-gate .mpv-reel__state{
  position:absolute;
  top:50%;
  left:50%;
  z-index:5;
  width:66px;
  height:66px;
  margin:-33px 0 0 -33px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--mpv-navy);
  background:linear-gradient(135deg, var(--mpv-green), var(--mpv-green-2));
  box-shadow:0 14px 30px -8px rgba(0,0,0,.55);
  opacity:0;
  transform:scale(.8);
  pointer-events:none;
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mpv-gate .mpv-reel__state svg{margin-left:3px;}
.mpv-gate .mpv-reel.is-paused .mpv-reel__state{opacity:1; transform:scale(1);}

/* Sound button */
.mpv-gate .mpv-reel__sound{
  position:absolute;
  left:50%;
  bottom:16px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 15px 9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font:600 12.5px/1 var(--mpv-body);
  letter-spacing:.01em;
  text-transform:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  transform:translateX(-50%);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), padding .25s ease;
}
.mpv-gate .mpv-reel__sound::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:2px solid rgba(61,255,81,.55);
  animation:mpvRing 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes mpvRing{
  0%{opacity:.9; transform:scale(.92);}
  100%{opacity:0; transform:scale(1.18);}
}
.mpv-gate .mpv-reel__sound:hover{background:rgba(0,0,0,.68); border-color:var(--mpv-green);}
.mpv-gate .mpv-reel__sound svg{flex:none;}
.mpv-gate .mpv-reel__sound .mpv-i-on{display:none;}

/* Unmuted: compact green icon, bottom-right */
.mpv-gate .mpv-reel__sound.is-on{
  left:auto;
  right:14px;
  padding:0;
  width:42px;
  height:42px;
  justify-content:center;
  background:var(--mpv-green);
  border-color:var(--mpv-green);
  color:var(--mpv-navy);
  transform:none;
}
.mpv-gate .mpv-reel__sound.is-on::before{display:none;}
.mpv-gate .mpv-reel__sound.is-on .mpv-i-on{display:block;}
.mpv-gate .mpv-reel__sound.is-on .mpv-i-muted,
.mpv-gate .mpv-reel__sound.is-on .mpv-reel__hint{display:none;}

/* =====================================================================
   Gravity Forms styling (toggle in plugin → General)
===================================================================== */
.mpv-gate--gf .mpv-gate__main .gform_wrapper{
  margin:0 !important;
  max-width:none !important;
}
.mpv-gate--gf .mpv-gate__main .gform_heading{display:none;}

.mpv-gate--gf .mpv-gate__main .gfield_label,
.mpv-gate--gf .mpv-gate__main .gform-field-label,
.mpv-gate--gf .mpv-gate__main legend.gfield_label{
  margin-bottom:6px;
  font-family:var(--mpv-body);
  font-size:13px;
  font-weight:600;
  color:var(--mpv-navy);
}
.mpv-gate--gf .mpv-gate__main .gfield_required{color:#C2410C;}

.mpv-gate--gf .mpv-gate__main input[type="text"],
.mpv-gate--gf .mpv-gate__main input[type="email"],
.mpv-gate--gf .mpv-gate__main input[type="tel"],
.mpv-gate--gf .mpv-gate__main input[type="number"],
.mpv-gate--gf .mpv-gate__main input[type="url"],
.mpv-gate--gf .mpv-gate__main input[type="password"],
.mpv-gate--gf .mpv-gate__main select,
.mpv-gate--gf .mpv-gate__main textarea{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:1px solid #DCE3E8;
  border-radius:12px;
  background:#F7F9FA;
  font-family:var(--mpv-body);
  font-size:15px;
  color:var(--mpv-text);
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mpv-gate--gf .mpv-gate__main textarea{min-height:110px;}
.mpv-gate--gf .mpv-gate__main input:focus,
.mpv-gate--gf .mpv-gate__main select:focus,
.mpv-gate--gf .mpv-gate__main textarea:focus{
  outline:none;
  border-color:var(--mpv-green-deep);
  background:#fff;
  box-shadow:0 0 0 4px rgba(61,255,81,.2);
}
.mpv-gate--gf .mpv-gate__main input::placeholder,
.mpv-gate--gf .mpv-gate__main textarea::placeholder{color:#9AA5AF;}

.mpv-gate--gf .mpv-gate__main .gf_progressbar_wrapper{margin-bottom:22px;}
.mpv-gate--gf .mpv-gate__main .gf_progressbar_title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mpv-muted);
}

.mpv-gate--gf .mpv-gate__main .gform_footer,
.mpv-gate--gf .mpv-gate__main .gform_page_footer{
  margin-top:18px;
  padding:0;
}
.mpv-gate--gf .mpv-gate__main .gform_footer input[type="submit"],
.mpv-gate--gf .mpv-gate__main .gform_footer button,
.mpv-gate--gf .mpv-gate__main .gform_page_footer .gform_next_button,
.mpv-gate--gf .mpv-gate__main .gform_page_footer input[type="submit"],
.mpv-gate--gf .mpv-gate__main .gform_button{
  min-height:52px;
  margin:0 !important;
  padding:14px 30px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, var(--mpv-green), var(--mpv-green-2)) !important;
  color:var(--mpv-navy) !important;
  font-family:var(--mpv-body) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 16px 30px -12px rgba(61,255,81,.7) !important;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.mpv-gate--gf .mpv-gate__main .gform_footer input[type="submit"]:hover,
.mpv-gate--gf .mpv-gate__main .gform_footer button:hover,
.mpv-gate--gf .mpv-gate__main .gform_page_footer .gform_next_button:hover,
.mpv-gate--gf .mpv-gate__main .gform_button:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 20px 36px -12px rgba(61,255,81,.8) !important;
}
.mpv-gate--gf .mpv-gate__main .gform_page_footer .gform_previous_button{
  min-height:52px;
  margin:0 10px 0 0 !important;
  padding:14px 26px !important;
  border:1px solid var(--mpv-line) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--mpv-navy) !important;
  font-family:var(--mpv-body) !important;
  font-size:15px !important;
  font-weight:600 !important;
  cursor:pointer;
}

.mpv-gate--gf .mpv-gate__main .gform_validation_errors{
  border-radius:12px;
  box-shadow:none;
}

/* =====================================================================
   RESPONSIVE
===================================================================== */

/* Tablet: heading + form on top, both reels side-by-side below */
@media (max-width:1080px){
  .mpv-gate{
    --mpv-gate-w:min(760px, calc(100vw - 32px));
    --mpv-pad:36px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "load load"
      "head head"
      "main main"
      "note note"
      "left right";
  }
  .mpv-gate.mpv--v1{
    --mpv-gate-w:min(760px, calc(100vw - 32px));
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"load" "head" "main" "note" "left";
  }

  .mpv-gate .mpv__side,
  .mpv-gate .mpv__side--right{
    display:flex;
    align-items:center;
    padding:30px 22px 34px;
    background:linear-gradient(180deg, var(--mpv-navy) 0%, var(--mpv-navy-2) 100%);
  }
  .mpv-gate .mpv__side::after{display:none;}

  /* Pull the two reels together toward the centre */
  .mpv-gate.mpv--v2 .mpv__side--left{justify-content:flex-end; padding-right:9px;}
  .mpv-gate.mpv--v2 .mpv__side--right{justify-content:flex-start; padding-left:9px;}

  .mpv-gate .mpv-reel{
    position:relative;
    top:auto;
    width:min(100%, 250px);
    margin:0;
  }
  .mpv-gate.mpv--v1 .mpv__side{justify-content:center;}
}

/* Mobile */
@media (max-width:640px){
  .mpv-gate,
  .mpv-gate.mpv--v1{
    --mpv-gate-w:calc(100vw - 20px);
    --mpv-pad:20px;
    border-radius:20px;
  }

  .mpv-gate .mpv-gate__head{padding-top:40px;}
  .mpv-gate:not(:has(.mpv-gate__head)) .mpv-gate__main{padding-top:36px;}
  .mpv-gate .mpv-gate__note{padding-bottom:26px;}

  .mpv-gate .mpv__side,
  .mpv-gate .mpv__side--right{padding:22px 14px 26px;}
  .mpv-gate.mpv--v2 .mpv__side--left{padding-right:6px;}
  .mpv-gate.mpv--v2 .mpv__side--right{padding-left:6px;}

  .mpv-gate .mpv-reel{width:100%; max-width:220px; border-radius:18px;}
  .mpv-gate.mpv--v1 .mpv-reel{max-width:240px;}
  .mpv-gate .mpv-reel__tap:focus-visible{border-radius:18px;}

  .mpv-gate .mpv-reel__sound{bottom:12px; padding:8px 12px 8px 10px; font-size:11.5px;}
  .mpv-gate .mpv-reel__sound.is-on{right:10px; width:38px; height:38px; padding:0;}
  .mpv-gate .mpv-reel__state{width:54px; height:54px; margin:-27px 0 0 -27px;}

  .mpv-gate .mpv-gate__title{font-size:24px;}
  .mpv-gate .mpv-gate__desc{font-size:14.5px;}

  .mpv-gate--gf .mpv-gate__main .gform_footer input[type="submit"],
  .mpv-gate--gf .mpv-gate__main .gform_footer button,
  .mpv-gate--gf .mpv-gate__main .gform_page_footer .gform_next_button,
  .mpv-gate--gf .mpv-gate__main .gform_button{width:100% !important;}
}

/* Very narrow phones: shorter hint text */
@media (max-width:360px){
  .mpv-gate .mpv-reel__hint{display:none;}
  .mpv-gate .mpv-reel__sound{padding:9px;}
}

@media (prefers-reduced-motion:reduce){
  .mpv-gate .mpv-reel,
  .mpv-gate .mpv-reel__player,
  .mpv-gate .mpv-reel__state{transition:none !important;}
  .mpv-gate .mpv-reel__sound::before{animation:none;}
}