.elementor-2853 .elementor-element.elementor-element-0dfc4fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS */:root { --blue: #004BAD; --blue2: #0cabf3; --dark: #01071A; --panel: #0F172A; --text: #cbd5e1; --muted: #94a3b8; --orange: #F58300; --lime: #9dff00; --ring: rgba(12,171,243,.14); --card: rgba(255,255,255,.04); }

body .howitworks { color: var(--text); background: var(--dark); }

.bg-rings { background: radial-gradient(600px 600px at 20% 20%, var(--ring), transparent 60%), radial-gradient(500px 500px at 80% 30%, rgba(157,255,0,.08), transparent 60%), radial-gradient(800px 800px at 50% 80%, rgba(245,131,0,.07), transparent 70%), var(--dark); }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 14px; text-decoration: none; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(12,171,243,.25); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.12); } .btn-ghost:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); }

.flash-text { animation: flash 1.8s ease-in-out infinite; } @keyframes flash { 0%,100% { filter: brightness(100%); } 50% { filter: brightness(130%); } }

.hiw-card { background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(140deg, rgba(12,171,243,.5), rgba(0,0,0,0), rgba(245,131,0,.5)) border-box; border: 1px solid transparent; border-radius: 18px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.25); } .hiw-card:hover { transform: translateY(-3px); transition: transform .2s ease; }

.panel { background: var(--panel); border-radius: 18px; padding: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.2); } .split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 900px) { .split-cols { grid-template-columns: 1fr; } }

.checklist { list-style: none; padding: 0; margin: 0; } .checklist li { position: relative; padding-left: 28px; margin: 10px 0; } .checklist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--blue2), var(--orange)); mask: radial-gradient(circle at 7px 7px, white 6px, transparent 7px); }

.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue2); } .badge-plan[data-tier="starter"] .dot { background: #7dd3fc; } .badge-plan[data-tier="boost"] .dot { background: #60a5fa; } .badge-plan[data-tier="premium"] .dot { background: #34d399; } .badge-plan[data-tier="elite"] .dot { background: #fbbf24; }

.fit-card { background: var(--panel); border: 1px dashed rgba(255,255,255,.2); border-radius: 16px; padding: 20px; }

.timeline-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--blue2), transparent); opacity: .18; transform: translateX(-50%); display: none; } @media (min-width: 1024px) { .timeline-rail { display: block; } }

.note { background: rgba(255,255,255,.04); border-left: 3px solid var(--blue2); padding: 16px 18px; border-radius: 8px; } .note-accent { border-left-color: var(--orange); }

.small { color: var(--muted); font-size: .95rem; }

/* Slower pulse for the CTA label */
.flash-text { animation-duration: 3s; }  /* try 2.6s–3.5s */
@keyframes flash { 0%,100% { filter: brightness(100%); } 50% { filter: brightness(115%); } }

/* Equal-width hero buttons (desktop) + full-width on mobile */
.hero-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* Each button widget takes the same width (adjust 240px if you want wider/narrower) */
.hero-cta .elementor-widget-button { flex: 0 0 240px; }

/* Make the <a> fill its widget so the gradient spans the full width */
.hero-cta .elementor-button { width: 100%; }

/* Mobile: stack as full-width buttons */
@media (max-width: 767px) {
  .hero-cta .elementor-widget-button { flex: 1 1 100%; }
}

/* Mobile overflow fix for chips */
@media (max-width: 420px){
  .wem-chips-right {            /* the grid in both panels */
    grid-template-columns: 1fr; /* single column on very small screens */
    gap: 10px;
  }
  .wem-chipR{                   /* the pill itself */
    white-space: normal;        /* allow text to wrap to 2 lines */
    min-width: 0;               /* prevent grid item from forcing overflow */
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* -------- Webemerg: section vertical rhythm (page only) -------- */

/* Equal vertical space for every marked section */
.wem-section{
  /* top / bottom space scales with viewport; generous by default */
  padding-top: clamp(72px, 9vw, 112px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* Keep the hero a little tighter below (optional) */
.wem-hero{
  padding-bottom: clamp(40px, 5vw, 56px);
}

/* Remove accidental extra gap when the last widget has its own margin */
.wem-section > *:last-child,
.wem-section :is(.elementor-widget-heading,
                 .elementor-widget-text-editor,
                 .elementor-widget-image,
                 .elementor-widget-html,
                 .elementor-widget-button,
                 .elementor-widget-spacer):last-child{
  margin-bottom: 0 !important;
}

/* Tablet / Mobile fine-tuning (you can tweak these numbers later) */
@media (max-width: 1024px){
  .wem-section{ padding-top: 64px; padding-bottom: 48px; }
}
@media (max-width: 767px){
  .wem-section{ padding-top: 48px; padding-bottom: 36px; }
}

/* 3-track CTA row */
.wem-cta3{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;              /* centers the entire row */
}

/* buttons fill their grid cell and center their label */
.wem-cta3 .elementor-widget-button{ margin:0; width:100%; }
.wem-cta3 .elementor-button{
  width:100%;
  display:inline-flex; justify-content:center; text-align:center;
}

/* Tablet: 2 across; Mobile: 1 across */
@media (max-width:1024px){
  .wem-cta3{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width:767px){
  .wem-cta3{ grid-template-columns: 1fr; }
}/* End custom CSS */