html,body{margin:0;padding:0;background:#07080A;overflow:hidden}
*{box-sizing:border-box}
::selection{background:#04BBFF;color:#07080A}
a{color:#EDEBE6;text-decoration:none}
a:hover{color:#04BBFF}
:focus-visible{outline:2px solid #04BBFF;outline-offset:3px}
[data-scroller]::-webkit-scrollbar{width:0;height:0}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   ELEMENTOR FORM
   Deliberately left unstyled. The form is styled inside Elementor
   on template 993. Do not add form CSS here, or it will fight the
   widget's own settings and you will not know which is winning.
   ============================================================ */

/* ============================================================
   HEADINGS
   OceanWP sets its own h1-h6 colour from the Customizer, which
   overrides the colour inherited from #app and leaves headings
   grey on this dark page. Force them back.
   ============================================================ */
.page-template-page-website-design #app h1,
.page-template-page-website-design #app h2,
.page-template-page-website-design #app h3,
.page-template-page-website-design #app h4,
.page-template-page-website-design #app h5,
.page-template-page-website-design #app h6,
.page-template-page-website-design #app p,
.page-template-page-website-design #app span,
.page-template-page-website-design #app li,
.page-template-page-website-design #app b{
  color:inherit;
}
.page-template-page-website-design #app h1:not([style*="color"]),
.page-template-page-website-design #app h2:not([style*="color"]),
.page-template-page-website-design #app h3:not([style*="color"]),
.page-template-page-website-design #app h4:not([style*="color"]){
  color:#EDEBE6 !important;
}
.page-template-page-website-design #app h1,
.page-template-page-website-design #app h2,
.page-template-page-website-design #app h3,
.page-template-page-website-design #app h4,
.page-template-page-website-design #app p,
.page-template-page-website-design #app a{
  font-family:'Poppins',system-ui,sans-serif;
}

/* ============================================================
   WORD BREAKING
   OceanWP sets overflow-wrap:break-word globally, which snaps
   large headings mid-word ("Clic / ks"). Turn it off inside our
   pages only.
   ============================================================ */
#app, #app *{ overflow-wrap:normal; word-break:normal; hyphens:none; }

/* ============================================================
   CHECKBOXES AND RADIOS
   OceanWP styles every <input>, including checkboxes, so they render
   as full-width bordered boxes. Rather than target one Elementor
   class name, this catches any checkbox or radio anywhere inside our
   templates. Scoped to #app so nothing else on the site is affected.
   ============================================================ */
#app input[type="checkbox"],
#app input[type="radio"]{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(237,235,230,.35) !important;
  background:rgba(237,235,230,.04) !important;
  box-shadow:none !important;
  border-radius:4px !important;
  cursor:pointer !important;
  position:relative !important;
  vertical-align:middle !important;
  float:none !important;
  transition:background .2s ease,border-color .2s ease !important;
}
#app input[type="radio"]{ border-radius:50% !important; }

#app input[type="checkbox"]:hover,
#app input[type="radio"]:hover{ border-color:rgba(237,235,230,.6) !important; }

#app input[type="checkbox"]:checked,
#app input[type="radio"]:checked{
  background:#04BBFF !important;
  border-color:#04BBFF !important;
}
#app input[type="checkbox"]:checked::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important; top:1px !important;
  width:5px !important; height:10px !important;
  border:solid #07080A !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}
#app input[type="radio"]:checked::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important; top:5px !important;
  width:6px !important; height:6px !important;
  border-radius:50% !important;
  background:#07080A !important;
}
#app input[type="checkbox"]:focus-visible,
#app input[type="radio"]:focus-visible{
  outline:2px solid #04BBFF !important;
  outline-offset:2px !important;
}

/* the checkbox and its label sit on one line */
#app .elementor-field-type-acceptance .elementor-field-option,
#app .elementor-field-subgroup .elementor-field-option,
#app .elementor-field-option{
  display:flex !important;
  align-items:flex-start !important;
  gap:11px !important;
}
#app .elementor-field-option label,
#app .elementor-field-type-acceptance label{
  display:inline !important;
  font-family:'Poppins',system-ui,sans-serif !important;
  font-weight:300 !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#7B8088 !important;
  margin:0 !important;
  padding:0 !important;
  cursor:pointer;
}
#app .elementor-field-option label a,
#app .elementor-field-type-acceptance label a{
  color:#EDEBE6 !important;
  border-bottom:1px solid rgba(4,187,255,.5);
  text-decoration:none !important;
}
#app .elementor-field-option label a:hover{ color:#04BBFF !important; }

/* ============================================================
   EMAIL FLOW DEMO, NARROW SCREENS
   Everything in the flow simulator has to be allowed to shrink,
   and the two controls go full width rather than being squeezed
   side by side.
   ============================================================ */
@media(max-width:600px){
  #app [data-demo] h2{ font-size:26px !important; }
  #app [data-demo] > p{ font-size:14.5px !important; }
  #app [data-tabs] button{ flex:1 1 auto !important; text-align:center !important; padding:9px 12px !important; }
  #app [data-flow] button{ padding:12px 13px !important; gap:9px !important; }
  #app [data-flow] button > span{ min-width:0 !important; flex:1 1 auto !important; overflow:hidden !important; }
  #app [data-flow] button > span > span:first-child{ font-size:13px !important; }
  #app [data-flow] button > span:last-child{ flex:0 0 auto !important; font-size:9px !important; }
  #app [data-advance], #app [data-convert]{ flex:1 1 100% !important; justify-content:center !important; padding:14px 18px !important; }
  #app [data-inbox]{ min-height:0 !important; }
  #app [data-inbox] p{ overflow-wrap:break-word !important; }
}

/* ============================================================
   OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, which means a
   track will not shrink below its content. One nowrap subject line
   was therefore pushing a whole column past the right edge on a
   phone. These let things shrink, and stop anything escaping the
   viewport regardless.
   ============================================================ */
#app{ max-width:100vw; overflow-x:hidden; }
#app [data-scroller]{ max-width:100%; }
#app [data-demogrid] > *,
#app [data-svc-grid] > *,
#app [data-legal-grid] > *,
#app [data-stagewrap] > *{ min-width:0 !important; }

@media(max-width:860px){
  /* nothing inside our sections may be wider than the screen */
  #app section > *, #app section > * > *{ max-width:100%; }
  #app [data-flow], #app [data-inbox], #app [data-shots]{ max-width:100% !important; }
  #app [data-flow] button{ width:100% !important; }
}