/* ==========================================================================
   MEW Offers - opening popup, exit-intent popup, and the annual-plan ticker.
   Everything is namespaced under .mewo-* and never touches global elements,
   because this file loads on every page alongside the site's other CSS.
   ========================================================================== */

.mewo-ticker, .mewo-ticker *,
.mewo-modal,  .mewo-modal *  { box-sizing: border-box; }

:root{
  --mewo-teal:#05ADA3;
  --mewo-teal-d:#0B6E64;
  --mewo-teal-deep:#0A6259;
  --mewo-mint:#E7F7F4;
  --mewo-mint-2:#EAF8F5;
  --mewo-bd:#CDEBE6;
  --mewo-ink:#0F2B26;
  --mewo-ink-2:#334155;
  --mewo-muted:#64748B;
  --mewo-line:#E4EBEA;
  --mewo-pink:#E11D48;
  --mewo-pink-bg:#FFE4EC;
  --mewo-amber:#F59E0B;
  --mewo-amber-bg:#FDEEE2;
  --mewo-shadow:0 28px 70px -24px rgba(8,42,38,.45);
}

/* ==========================================================================
   1. TICKER BAR
   Sticks to the very top and stays there; the site's own sticky navbar is
   pushed down by exactly the bar's height so the two stack instead of
   overlapping. --mewo-ticker-h is measured in JS; 44px is the fallback used
   before that runs (and if JS never does).
   ========================================================================== */
.mewo-ticker{
  display:block; width:100%;
  color:#fff;
  font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  position:sticky; top:0; z-index:1002; overflow:hidden;
  /* a slow drift across teal shades - movement the eye catches without the bar
     ever looking like it is flashing */
  background:linear-gradient(100deg,#0A6259 0%,#0B7168 26%,#13998C 50%,#0B7168 74%,#0A6259 100%);
  background-size:220% 100%;
  animation:mewo-ticker-flow 14s linear infinite;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.mewo-ticker[hidden]{ display:none; }

/* a light sweeping across the bar every few seconds */
.mewo-ticker::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:mewo-ticker-sheen 7s ease-in-out infinite;
}
@keyframes mewo-ticker-flow{
  0%  { background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
@keyframes mewo-ticker-sheen{
  0%,72%{ transform:translateX(-120%); }
  100%  { transform:translateX(120%); }
}

/* Offset every navbar variant the site uses (mnav on the v2 pages, the older
   .navbar, and its .fixed states) only while the bar is actually on screen. */
html.mewo-has-ticker .navbar,
html.mewo-has-ticker .navbar.mnav,
html.mewo-has-ticker .navbar.fixed,
html.mewo-has-ticker .navbar.fixed-color{ top:var(--mewo-ticker-h,44px); }
/* the content sits above the sheen */
.mewo-ticker-inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:9px 52px 9px 20px; text-align:center;
}
.mewo-ticker-msg{
  font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.94); margin:0;
}
/* the saving is the hook, so it gets the warm accent rather than more white */
.mewo-ticker-msg b{ font-weight:800; color:#FFD37A; letter-spacing:.005em; }
.mewo-ticker-cta{
  position:relative; flex:none; display:inline-flex; align-items:center;
  background:#fff; color:var(--mewo-teal-deep);
  font-size:13px; font-weight:700; line-height:1;
  padding:8px 16px; border-radius:100px; border:0;
  text-decoration:none; cursor:pointer;
  transition:background .16s, transform .16s;
  animation:mewo-cta-ring 2.8s ease-out infinite;
}
.mewo-ticker-cta:hover{
  background:var(--mewo-mint); transform:translateY(-1px); color:var(--mewo-teal-deep);
  animation-play-state:paused;   /* stop nagging once they are on it */
}
/* an expanding ring, so the button reads as the thing to press */
@keyframes mewo-cta-ring{
  0%  { box-shadow:0 0 0 0 rgba(255,255,255,.5); }
  70% { box-shadow:0 0 0 11px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.mewo-ticker-x{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:3;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.75); transition:background .16s, color .16s;
}
.mewo-ticker-x:hover{ background:rgba(255,255,255,.14); color:#fff; }
.mewo-ticker-mobile{ display:none; }

@media(max-width:760px){
  .mewo-ticker-inner{ padding:9px 46px 9px 16px; gap:10px; justify-content:space-between; text-align:left; }
  .mewo-ticker-desktop{ display:none; }
  .mewo-ticker-mobile{ display:block; font-size:14px; font-weight:700; color:#fff; }
  .mewo-ticker-cta{ padding:7px 14px; font-size:12.5px; }
  .mewo-ticker-x{ right:10px; }
}

/* ==========================================================================
   2. SHARED MODAL SHELL  (both popups)
   ========================================================================== */
.mewo-modal{
  position:fixed; inset:0; z-index:100000;
  display:none; align-items:center; justify-content:center;
  padding:24px 16px;
  font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.mewo-modal.mewo-open{ display:flex; }
.mewo-scrim{
  position:absolute; inset:0;
  background:rgba(12,38,35,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.mewo-modal.mewo-in .mewo-scrim{ opacity:1; }
.mewo-card{
  position:relative; width:100%; max-width:468px;
  background:#fff; border-radius:22px; padding:30px 30px 24px;
  box-shadow:var(--mewo-shadow);
  max-height:calc(100vh - 48px); overflow-y:auto;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1);
}
.mewo-modal.mewo-in .mewo-card{ opacity:1; transform:none; }
.mewo-x{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
  color:#94A3B8; transition:background .16s, color .16s;
}
.mewo-x:hover{ background:#F1F5F9; color:var(--mewo-ink); }

.mewo-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--mewo-mint); border-radius:100px;
  padding:6px 13px; margin-bottom:16px;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mewo-teal-d);
}
.mewo-pill.mewo-pill-offer{ background:var(--mewo-amber-bg); color:#B45309; animation:mewo-blink 1.4s ease-in-out infinite; }
.mewo-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--mewo-amber); flex:none; }
.mewo-pill-offer .mewo-pill-dot{ animation:mewo-dot-pulse 1.4s ease-in-out infinite; }

/* The label fades rather than hard-switching - it reads as urgent without the
   flicker of a true on/off blink. Only `color` animates, so the pill's amber
   background stays put. Keyframes carry the tool prefix so they cannot collide
   with anything else on the site. */
@keyframes mewo-blink{
  0%,100%{ color:#B45309; }
  50%    { color:rgba(180,83,9,.32); }
}
@keyframes mewo-dot-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.3; transform:scale(.82); }
}

.mewo-head{
  font-size:27px; line-height:1.22; font-weight:800; letter-spacing:-.02em;
  color:var(--mewo-ink); margin:0 0 18px;
}
.mewo-head .mewo-teal{ color:var(--mewo-teal-d);font-weight: 700; display: block; margin-top: 4px;}

/* ---- price box (shared by both popups) ---- */
.mewo-price{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--mewo-mint-2); border:1px solid var(--mewo-bd);
  border-radius:14px; padding:16px 18px; margin-bottom:18px;
}
.mewo-price-now{ display:flex; align-items:baseline; gap:6px; }
.mewo-price-amt{ font-size:32px; font-weight:800; letter-spacing:-.03em; color:var(--mewo-ink); line-height:1; }
.mewo-price-per{ font-size:14px; font-weight:500; color:var(--mewo-ink-2); }
.mewo-price-plan{ font-size:13px; color:var(--mewo-muted); margin:6px 0 0; }
.mewo-price-right{ text-align:right; flex:none; }
.mewo-price-was{ font-size:13.5px; color:#94A3B8; text-decoration:line-through; display:block; margin-bottom:6px; }
.mewo-badge{
  display:inline-block; background:#D9F2EE; color:var(--mewo-teal-d);
  font-size:12px; font-weight:700; border-radius:7px; padding:4px 9px;
}
.mewo-badge.mewo-badge-save{ background:var(--mewo-pink-bg); color:var(--mewo-pink); font-size: 16px; }

/* ---- checkmark list (opening popup) ---- */
.mewo-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:11px; }
.mewo-list li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--mewo-ink-2); }
.mewo-list svg{ flex:none; color:var(--mewo-teal); }

/* ---- CTA ---- */
.mewo-cta{
  display:block; width:100%; text-align:center;
  background:var(--mewo-teal-d); color:#fff;
  font-size:15.5px; font-weight:700; font-family:inherit;
  padding:15px 18px; border:0; border-radius:12px; cursor:pointer;
  text-decoration:none; transition:background .16s, transform .16s, box-shadow .16s;
}
.mewo-cta:hover{ background:var(--mewo-teal-deep); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(11,110,100,.7); }
.mewo-compare{
  display:block; text-align:center; margin:14px 0 0;
  font-size:14px; font-weight:600; color:var(--mewo-ink-2);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.mewo-compare:hover{ color:var(--mewo-teal-d); }
.mewo-foot{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-top:1px solid var(--mewo-line); margin-top:18px; padding-top:16px;
  font-size:13px; color:var(--mewo-muted);
}
.mewo-foot svg{ flex:none; color:var(--mewo-teal); }
.mewo-micro{
  text-align:center; margin:13px 0 0;
  font-size:12.5px; line-height:1.55; color:var(--mewo-muted);
}

/* ==========================================================================
   3. EXIT POPUP - the three risk-free steps
   ========================================================================== */
.mewo-card-exit{ max-width:560px; }
.mewo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.mewo-step{
  background:#fff; border:1px solid var(--mewo-line); border-radius:12px;
  padding:14px 14px 16px;
}
.mewo-step-n{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mewo-teal); color:#fff;
  font-size:12px; font-weight:800; margin-bottom:10px;
}
.mewo-step:last-child .mewo-step-n{ background:var(--mewo-pink); }
.mewo-step-t{ font-size:14px; font-weight:700; color:var(--mewo-ink); margin:0 0 5px; }
.mewo-step-d{ font-size:13px; line-height:1.5; color:var(--mewo-muted); margin:0; }
.mewo-step-d s{ color:#A6B2B0; }

@media(max-width:560px){
  .mewo-card{ padding:26px 20px 20px; border-radius:18px; }
  .mewo-head{ font-size:23px; }
  .mewo-price{ flex-direction:column; align-items:flex-start; gap:10px; }
  .mewo-price-right{ text-align:left; }
  .mewo-price-was{ display:inline-block; margin:0 10px 0 0; }
  .mewo-steps{ grid-template-columns:1fr; gap:10px; }
  .mewo-step{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; }
  .mewo-step-n{ margin-bottom:0; }
}

@media(prefers-reduced-motion:reduce){
  .mewo-scrim, .mewo-card, .mewo-cta, .mewo-ticker-cta{ transition:none !important; }
  .mewo-card{ transform:none !important; }
  .mewo-pill.mewo-pill-offer, .mewo-pill-offer .mewo-pill-dot{ animation:none !important; }
  .mewo-ticker, .mewo-ticker::after, .mewo-ticker-cta{ animation:none !important; }
  .mewo-ticker{ background:var(--mewo-teal-deep) !important; }
  .mewo-ticker::after{ display:none; }
}