/* MerchSignal Pricing – clean CSS to prevent overlapping/mixed text */
:root{ --ms2-card:#0c0f21; --ms2-soft:#121633; --ms2-border:rgba(255,255,255,.1); --ms2-accent:#5468ff; }

.ms2-wrap{ padding:40px 0; }
.ms2-container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.ms2-pricing-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }

.ms2-col-feature{ width:var(--ms2-feature-w,28%); }
.ms2-col-plan{ width: calc((100% - var(--ms2-feature-w,28%)) / var(--ms2-plans,4)); }

thead th, tbody td, tfoot td{ border-bottom:1px solid var(--ms2-border); }
tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.02); }
tbody tr:nth-child(even) td{ background:rgba(255,255,255,.04); }
.ms2-feature-th, .ms2-feature-td{ text-align:left; padding:18px; color:#cdd3f5; font-weight:700; }
.ms2-feature-td{ font-weight:600; }

.ms2-plan-th{ position:relative; padding:18px 18px 24px; background:var(--ms2-card); vertical-align:top; }
.ms2-headerbox{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:140px; }
.ms2-badge{ position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; background:linear-gradient(135deg,#ff6a6a,#ff3d9a); color:#fff; border:1px solid var(--ms2-border); white-space:nowrap; }

.ms2-plan{ font-size:18px; font-weight:900; color:#fff; margin-top:4px; }

.ms2-price{ display:flex; flex-direction:column; gap:8px; }
.ms2-price-row{ display:flex; align-items:flex-end; gap:10px; flex-wrap:nowrap; }
.ms2-num{ font-size:32px; line-height:1; font-weight:900; color:#fff; }
.ms2-per{ font-size:13px; color:#c5c9e6; margin-bottom:2px; }

.ms2-price-promo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ms2-price-old{ text-decoration:line-through; color:#a0a6c4; font-size:14px; opacity:.85; }
.ms2-promo-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid var(--ms2-border); background:linear-gradient(135deg,#ffa46a,#ff5e7a); color:#1b0a12; }

.ms2-deal{ margin-top:6px; }
.ms2-deal-pill{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(34,197,94,.16); color:#d7ffd7; border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:800; letter-spacing:.2px; }

tbody td{ text-align:center; padding:14px 12px; color:#e7e9ff; font-weight:600; }
.ms2-value{ color:#d9defa; }

.ms2-cta-cell{ text-align:center; padding:20px 16px; background:var(--ms2-soft); }
.ms2-cta{ display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:12px 18px; font-weight:900; border-radius:14px; background:linear-gradient(135deg,#5a5dff,#1cc0f0); color:#0a0d1f; text-decoration:none; border:1px solid var(--ms2-border); box-shadow:0 10px 32px rgba(0,0,0,.35); transition:transform .12s ease, box-shadow .12s ease; }
.ms2-cta:hover{ transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.ms2-cta.disabled{ opacity:.55; pointer-events:none; }

/* Tooltip */
.ms2-tip{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:8px; border-radius:50%; font-size:12px; background:#0f1531; color:#9fb0ff; border:1px solid var(--ms2-border); position:relative; }
.ms2-tip::after{ content:attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 8px); white-space:nowrap; background:#101226; color:#fff; border:1px solid rgba(255,255,255,.18); padding:6px 8px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.35); display:none; z-index:20; }
.ms2-tip:hover::after{ display:block; }

/* Sticky CTA on small screens (optional, not overlapping) */
@media (max-width: 840px){
  .ms2-wrap{ padding-bottom:80px; }
  .ms2-pricing-table{ table-layout:auto; }
  .ms2-col-feature{ width:36%; }
  .ms2-num{ font-size:26px; }
}


/* === Badge above plan title (centered) === */
.ms2-plan-th{ overflow:hidden; }
.ms2-headerbox{ padding-top:22px; }
.ms2-headerbox > .ms2-badge{
  position:absolute; left:50%; right:auto; top:-12px; transform:translateX(-50%);
}

/* === Cursor-follow glow on plan headers === */
.ms2-plan-th::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(160px 160px at var(--mx,50%) var(--my,50%), rgba(84,104,255,.35), rgba(28,192,240,0) 60%);
  opacity:0; transition:opacity .16s ease;
}
.ms2-plan-th:hover::before{ opacity:.9; }

/* === Colorful feature chips === */
.ms2-value{ text-align:center; }
.ms2-chip{
  display:inline-block; padding:7px 12px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid var(--ms2-border); box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.ms2-chip--included{ background:linear-gradient(135deg,#34d399,#059669); color:#052d1b; }
.ms2-chip--unlimited{ background:linear-gradient(135deg,#60a5fa,#34d399); color:#04131f; }
.ms2-chip--priority{ background:linear-gradient(135deg,#f472b6,#fb7185); color:#20060e; }
.ms2-chip--quota{ background:linear-gradient(135deg,#a78bfa,#60a5fa); color:#0b0f1f; }
.ms2-chip--none{ background:rgba(255,255,255,.06); color:#cfd4e7; }


/* === Featured (Pro) plan standout === */
.ms2-plan-th--featured{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,163,214,.35), rgba(12,15,33,0) 55%),
    linear-gradient(165deg, #151b3e 0%, #1f2959 45%, #0c0f21 96%);
  outline: none;
  box-shadow: 0 20px 55px rgba(255,133,198,.28);
  transform: translateY(-4px);
}
.ms2-plan-th--featured .ms2-plan{ color:#fff; }
.ms2-plan-th--featured .ms2-headerbox > .ms2-badge{
  background: linear-gradient(135deg,#ff3d9a,#ffa76a);
  color:#fff;
}

/* Make footer CTA of same column pop (2nd plan after feature column -> td:nth-child(3)) */
.ms2-pricing-table tfoot td:nth-child(3) .ms2-cta{
  background: linear-gradient(135deg,#ff7ab6,#ffcc70);
  color:#1a0815;
}


/* === Pro plan standout column === */
.ms2-plan-th.ms2-col-pro{
  background: linear-gradient(180deg, rgba(84,104,255,.20), rgba(28,192,240,.12));
  border: 1px solid rgba(84,104,255,.45);
  box-shadow: 0 16px 50px rgba(84,104,255,.28), inset 0 0 0 1px rgba(255,255,255,.05);
}
tbody td.ms2-col-pro{
  background: rgba(84,104,255,.06) !important;
}
tbody tr:nth-child(even) td.ms2-col-pro{
  background: rgba(84,104,255,.08) !important;
}
tfoot td.ms2-col-pro{
  background: linear-gradient(180deg, rgba(84,104,255,.18), rgba(28,192,240,.10));
}

/* Make chips pop a bit more inside Pro */
tbody td.ms2-col-pro .ms2-chip--quota{ background: linear-gradient(135deg,#8ea2ff,#4fd6ff); color:#081325; }
tbody td.ms2-col-pro .ms2-chip--included{ background: linear-gradient(135deg,#42f3b0,#31c48d); color:#052016; }
tbody td.ms2-col-pro .ms2-chip--unlimited{ background: linear-gradient(135deg,#6fb6ff,#43f3b5); color:#05111c; }
tbody td.ms2-col-pro .ms2-chip--priority{ background: linear-gradient(135deg,#ffa0d1,#ff8aa4); color:#2b0a17; }

/* Stronger CTA for Pro */
tfoot td.ms2-col-pro .ms2-cta{
  background: linear-gradient(135deg,#7b7eff,#25cfff);
  box-shadow: 0 18px 46px rgba(84,104,255,.4);
}


/* === FULL COLUMN highlight for featured (Pro) === */
.ms2-col--featured{ 
  background:
    linear-gradient(180deg, rgba(251,147,246,.08) 0%, rgba(251,147,246,.05) 40%, rgba(14,18,41,.55) 100%);
}
/* Ensure featured column overrides zebra rows */
tbody td.ms2-col--featured{ background:
    linear-gradient(180deg, rgba(251,147,246,.10) 0%, rgba(251,147,246,.06) 38%, rgba(14,18,41,.60) 100%);
}
tfoot td.ms2-col--featured{ background: linear-gradient(180deg, rgba(251,147,246,.12), rgba(14,18,41,.75)); }

/* Add subtle side outline to the whole featured column */
.ms2-col--featured{ box-shadow: inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(255,255,255,.06); }

/* CTA of featured column */
.ms2-col--featured .ms2-cta{
  background: linear-gradient(135deg,#ff7ab6,#ffcc70);
  color:#1a0815;
}

/* Keep header glow + featured look */
.ms2-plan-th--featured{ z-index: 2; }


/* === Billing toggle bar === */
.ms2-bar{display:flex;justify-content:center;align-items:center;margin:12px 0 18px 0}
.ms2-bar-inner{display:flex;gap:12px;align-items:center}
.ms2-toggle{display:inline-flex;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:9999px;padding:4px}
.ms2-toggle button{appearance:none;border:0;background:transparent;padding:6px 14px;border-radius:9999px;font-weight:600;cursor:pointer;opacity:.8}
.ms2-toggle button.active{background:rgba(255,255,255,0.16);opacity:1}
.ms2-toggle button:hover{opacity:1}
@media (max-width: 640px){
  .ms2-bar{justify-content:center}
}


/* === Billing toggle theme tweak (center + accent) === */
.ms2-bar{justify-content:center !important; margin-top:6px; margin-bottom:22px}
.ms2-toggle{background:rgba(82,63,141,0.08); border:1px solid rgba(82,63,141,0.55); box-shadow: inset 0 0 0 1px rgba(82,63,141,0.25), 0 6px 20px rgba(82,63,141,0.15)}
.ms2-toggle button{color:#cfd4ff}
.ms2-toggle button.active{background:rgb(82,63,141); color:#ffffff; opacity:1}
.ms2-toggle button:hover{background:rgba(82,63,141,0.30); color:#fff; opacity:1}


/* === Featured plan header: standout, no outline (safe variant) === */
.ms2-plan-th--featured{
  outline: none !important;
  background:
    radial-gradient(1200px 240px at var(--mx,50%) -20%, rgba(82,63,141,.28), transparent 60%),
    linear-gradient(165deg, #1a1d3b 0%, #23306a 52%, #0c0f21 100%);
  box-shadow: 0 24px 60px rgba(82,63,141,.35);
  transform: translateY(-6px);
}
.ms2-plan-th--featured .ms2-cta{ 
  background: linear-gradient(135deg, #534099, #7b6adf);
  color:#fff;
}


/* === JS-only column highlight === */
td.ms2-col--featured,
.ms2-cta-cell.ms2-col--featured{
  background:
    linear-gradient(180deg, rgba(82,63,141,.10) 0%, rgba(82,63,141,.05) 44%, rgba(12,15,33,.65) 100%);
}
.ms2-cta-cell.ms2-col--featured .ms2-cta{
  background: linear-gradient(135deg, #534099, #7b6adf);
  color:#fff;
  box-shadow: 0 14px 30px rgba(82,63,141,.45);
}
.ms2-cta-cell.ms2-col--featured .ms2-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(82,63,141,.55);
}


/* === Polishing tweaks === */
.ms2-wrap{ padding:50px 0 64px; }
.ms2-plan-th{ 
  position:relative; 
  padding:22px 20px 26px; 
  background:var(--ms2-card);
  border-radius:14px 14px 0 0;
}
thead th{ border-bottom:0; }
tbody td, tfoot td{ border-bottom:1px solid rgba(255,255,255,.08); }
tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.015); }
tbody tr:hover td{ background:rgba(255,255,255,.03); }

/* Header glow refinement */
.ms2-plan-th--featured{
  outline:none !important;
  background:
    radial-gradient(1200px 260px at var(--mx,50%) -20%, rgba(82,63,141,.30), transparent 60%),
    linear-gradient(165deg, #1a1d3b 0%, #23306a 52%, #0c0f21 100%);
  box-shadow: 0 24px 60px rgba(82,63,141,.35);
  transform: translateY(-6px);
}

/* Trial button */
.ms2-trial-wrap{ margin-top:10px; }
.ms2-trial{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:9999px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(135deg, #ffcc70, #ff8a43);
  color:#23120a; text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 10px 28px rgba(255,170,90,.28), inset 0 1px 0 rgba(255,255,255,.45);
  border:0;
}
.ms2-trial:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(255,170,90,.36); }
.ms2-trial:active{ transform:translateY(0); }

/* Keep primary CTA strong */
.ms2-cta{ margin-top:8px; }

/* Toggle micro-polish */
.ms2-toggle{ backdrop-filter:saturate(120%) blur(2px); }
.ms2-toggle button{ font-weight:800; }


/* === Trial button: UI-matching (purple accent, pill) === */
.ms2-trial-wrap{ margin-top:10px; display:flex; justify-content:center; }
.ms2-trial{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 18px; border-radius:9999px;
  font-weight:800; font-size:13px; letter-spacing:.2px;
  background:linear-gradient(135deg, #4e3f92, #6d5bd6); /* purple accent */
  color:#ffffff; text-decoration:none;
  border:1px solid rgba(143,130,255,.28);
  box-shadow:
    0 10px 28px rgba(82,63,141,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.ms2-trial:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(82,63,141,.45); }
.ms2-trial:active{ transform:translateY(0); }

/* Keep hierarchy: trial = secondary, CTA remains primary blue/cyan */
.ms2-cta{ margin-top:8px; }


/* === Extras chips row === */
.ms2-perks-row td{ background:linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.015) 100%); border-top:1px dashed rgba(255,255,255,.08); }
.ms2-perks-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.ms2-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9999px;
  background:rgba(82,63,141,.12); border:1px solid rgba(82,63,141,.28); color:#e9eaff; font-weight:700; font-size:12px; }
.ms2-chip-k{ opacity:.85 }
.ms2-chip-v{ background:rgba(255,255,255,.08); padding:3px 7px; border-radius:9999px; font-weight:800; }

/* === Footer (Buy Now) polish === */
tfoot td{ background:linear-gradient(180deg, rgba(12,15,33,.2) 0%, rgba(12,15,33,.35) 100%); }
.ms2-cta-cell{ padding:18px 12px 24px; border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.ms2-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 18px; border-radius:9999px; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(135deg,#5a5dff,#1cc0f0);
  color:#0b1028; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.ms2-cta:hover{ transform:translateY(-1px); box-shadow:0 18px 45px rgba(0,0,0,.45); }
.ms2-cta:active{ transform:translateY(0); }


/* === Sticky, centered toggle bar & Save badge === */
.ms2-bar{ position: sticky; top: 16px; z-index: 40; }
.ms2-bar-inner{ justify-content: center; }

/* Save badge that appears when Yearly is selected */
.ms2-save{
  display:inline-flex; align-items:center; gap:6px; margin-left:12px;
  padding:6px 10px; border-radius:999px;
  background: rgba(9, 201, 138, 0.14);
  border: 1px solid rgba(14, 209, 146, 0.45);
  color:#a8ffd9; font-weight:800; font-size:12px; letter-spacing:.2px;
  white-space:nowrap; visibility:hidden;
}
.ms2-save .ms2-save-text{ line-height:1; }

/* Slightly elevate the bar's background when sticking without overpowering the design */
.ms2-bar.is-stuck{ backdrop-filter:saturate(120%) blur(6px); -webkit-backdrop-filter:saturate(120%) blur(6px);
  background: rgba(13,16,32,0.65); border-radius:999px; padding:8px 12px; box-shadow:0 6px 24px rgba(0,0,0,.25);
}

/* Ensure sticky can stick inside section */
.ms2-container{overflow:visible!important;}

/* === Left horizontal ribbon style (Most Popular / Power Users) === */
.ms2-headerbox{ position:relative; }
.ms2-badge{
  position:absolute;
  top:10px;
  left:-24px; /* protrude outside the card from the left */
  padding:8px 14px 8px 28px;
  line-height:1;
  background: linear-gradient(90deg, #ff6aa2, #ffb86b);
  color:#0b0e1e;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  border-radius: 0 999px 999px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  text-transform: none;
}
/* small triangular cut at the far left so it "hooks" from the side */
.ms2-badge::before{
  content:"";
  position:absolute;
  left:0;
  top:0; bottom:0;
  width:22px;
  background: inherit;
  clip-path: polygon(0 0, 80% 0, 55% 50%, 80% 100%, 0 100%);
}
/* Variants per badge type */
.ms2-badge--popular{ background: linear-gradient(90deg, #7cf2ff, #6b8bff); color:#00111a; }
.ms2-badge--power{ background: linear-gradient(90deg, #ff8657, #ffc05e); color:#1a0900; }

/* Ensure header spacing so ribbon doesn't overlap title */
.ms2-plan-th .ms2-headerbox{ padding-top:48px; }
@media (max-width: 1024px){
  .ms2-plan-th .ms2-headerbox{ padding-top:56px; }
}

/* overrides to cancel any earlier center/right positions */
.ms2-badge{ right:auto !important; transform:none !important; }

/* === Ribbon text clipping fix & stronger positioning overrides === */
.ms2-table, .ms2-pricing-table, .ms2-plan-th, .ms2-plan-th .ms2-headerbox{ overflow:visible !important; position:relative; }

/* Force left-out horizontal ribbons regardless of earlier rules */
.ms2-plan-th .ms2-headerbox .ms2-badge{
  left:-28px !important;
  right:auto !important;
  top:10px !important;
  transform:none !important;
  border-radius:0 999px 999px 0 !important;
  white-space:nowrap !important;
  z-index:5 !important;
  padding:8px 16px 8px 30px !important;
}

/* Make sure notch shows even outside table cell */
.ms2-plan-th .ms2-headerbox .ms2-badge::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:0 !important; bottom:0 !important;
  width:24px !important;
  background:inherit !important;
  clip-path: polygon(0 0, 80% 0, 55% 50%, 80% 100%, 0 100%) !important;
}

/* Extra breathing room above header so ribbon doesn't cover title */
.ms2-plan-th .ms2-headerbox{ padding-top:60px !important; }
@media (max-width:1024px){
  .ms2-plan-th .ms2-headerbox{ padding-top:66px !important; }
}

/* === Elite plan standout (distinct from Pro) === */
.ms2-plan-th.ms2-col-elite{
  background: linear-gradient(180deg, rgba(255,184,96,.20), rgba(255,124,80,.12));
  border: 1px solid rgba(255,184,96,.40);
  box-shadow: 0 16px 50px rgba(255,184,96,.25), inset 0 0 0 1px rgba(255,255,255,.05);
}
tbody td.ms2-col-elite{
  background: rgba(255,184,96,.06) !important;
}
tbody tr:nth-child(even) td.ms2-col-elite{
  background: rgba(255,184,96,.08) !important;
}
tfoot td.ms2-col-elite{
  background: linear-gradient(180deg, rgba(255,184,96,.18), rgba(255,124,80,.10));
}

/* Chips inside Elite column */
tbody td.ms2-col-elite .ms2-chip--quota{ background: linear-gradient(135deg,#ffd27a,#ff9b6b); color:#201103; }
tbody td.ms2-col-elite .ms2-chip--unlimited{ background: linear-gradient(135deg,#fcd34d,#fb923c); color:#211503; }
tbody td.ms2-col-elite .ms2-chip--priority{ background: linear-gradient(135deg,#f97316,#fb7185); color:#230a04; }

/* === Color redesign: lower features table === */

/* Make feature cell able to host a left accent */
tbody .ms2-feature-td{ position:relative; overflow:visible; }

/* Left gradient accent bar per row (rotating palette) */
tbody tr:nth-child(4n+1) .ms2-feature-td::before{ 
  content:""; position:absolute; left:10px; top:14px; bottom:14px; width:6px; border-radius:999px;
  background: linear-gradient(180deg,#34d399,#22d3ee);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
}
tbody tr:nth-child(4n+2) .ms2-feature-td::before{
  content:""; position:absolute; left:10px; top:14px; bottom:14px; width:6px; border-radius:999px;
  background: linear-gradient(180deg,#8b5cf6,#60a5fa);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
}
tbody tr:nth-child(4n+3) .ms2-feature-td::before{
  content:""; position:absolute; left:10px; top:14px; bottom:14px; width:6px; border-radius:999px;
  background: linear-gradient(180deg,#f59e0b,#fb7185);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
}
tbody tr:nth-child(4n+4) .ms2-feature-td::before{
  content:""; position:absolute; left:10px; top:14px; bottom:14px; width:6px; border-radius:999px;
  background: linear-gradient(180deg,#06b6d4,#3b82f6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
}

/* Soft tinted row backgrounds (keep zebra feel but with color wash) */
tbody tr:nth-child(4n+1) td{ background:
  linear-gradient(90deg, rgba(52,211,153,.06), rgba(34,211,238,.02)) !important; }
tbody tr:nth-child(4n+2) td{ background:
  linear-gradient(90deg, rgba(139,92,246,.06), rgba(96,165,250,.02)) !important; }
tbody tr:nth-child(4n+3) td{ background:
  linear-gradient(90deg, rgba(245,158,11,.06), rgba(251,113,133,.02)) !important; }
tbody tr:nth-child(4n+4) td{ background:
  linear-gradient(90deg, rgba(6,182,212,.06), rgba(59,130,246,.02)) !important; }

/* Hover lift for better readability */
tbody tr:hover td{
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Tighten chip contrast in rows */
tbody .ms2-chip{ border-color: rgba(255,255,255,.12); }


/* === Subtle Mode (v0.1.9-light) — tone down colors and row backgrounds === */

/* Neutral alternating rows (override any colorful gradients) */
.ms2-pricing-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02) !important; }
.ms2-pricing-table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.03) !important; }
.ms2-pricing-table tbody tr:hover td{
  background: rgba(255,255,255,.05) !important;
  filter:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Subtle chips */
.ms2-chip{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:10px;
  font-weight:700; font-size:12px; letter-spacing:.1px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow:none; color:#e5e7eb; white-space:nowrap;
}

/* Variants with muted palettes */
.ms2-chip--included, .ms2-chip--unlimited{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color:#c7f9e7;
}
.ms2-chip--priority{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
  color:#fde68a;
}
.ms2-chip--number, .ms2-chip--quota{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.25);
  color:#e5e7eb;
}
.ms2-chip--dash{
  background: transparent;
  border-color: rgba(148,163,184,.25);
  color:#9ca3af;
}
.ms2-chip--no{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color:#fecaca;
}


/* === Soft Color Mode (v0.1.9-softcolor) — gentle colorful chips like screenshot === */

/* Re-enable small status dot and add soft shadow */
.ms2-chip{
  padding:5px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.15);
}
.ms2-chip .ms2-dot{ 
  display:inline-block;
  width:6px; height:6px; border-radius:50%; margin-right:8px;
}

/* Soft variant palettes */
.ms2-chip--included{
  background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.16)) !important;
  border-color: rgba(16,185,129,.28) !important;
  color:#ecfffa !important;
}
.ms2-chip--included .ms2-dot{ background:#34d399; }

.ms2-chip--unlimited{
  background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(14,165,233,.16)) !important;
  border-color: rgba(59,130,246,.28) !important;
  color:#eef6ff !important;
}
.ms2-chip--unlimited .ms2-dot{ background:#93c5fd; }

.ms2-chip--priority{
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(219,39,119,.16)) !important;
  border-color: rgba(245,158,11,.28) !important;
  color:#fff7ed !important;
}
.ms2-chip--priority .ms2-dot{ background:#fbbf24; }

.ms2-chip--number, .ms2-chip--quota{
  background: linear-gradient(135deg, rgba(99,102,241,.20), rgba(56,189,248,.12)) !important;
  border-color: rgba(148,163,184,.28) !important;
  color:#eef2ff !important;
}
.ms2-chip--dash{
  background: rgba(148,163,184,.08) !important;
  border-color: rgba(148,163,184,.22) !important;
  color:#cbd5e1 !important;
}
.ms2-chip--no{
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(185,28,28,.12)) !important;
  border-color: rgba(239,68,68,.26) !important;
  color:#ffe4e6 !important;
}

/* Keep table rows neutral & soft */
.ms2-pricing-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02) !important; }
.ms2-pricing-table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.03) !important; }
.ms2-pricing-table tbody tr:hover td{ background: rgba(255,255,255,.05) !important; box-shadow:none; filter:none; }


/* === Promo pill next to plan title (soft red) === */
.ms2-planrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ms2-planrow .ms2-plan{ margin:0; } /* keep title tight */

.ms2-promo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 10px; border-radius:9999px;
  font-weight:900; font-size:11px; letter-spacing:.2px;
  border:1px solid rgba(239,68,68,.35);
  background: linear-gradient(135deg, rgba(239,68,68,.90), rgba(244,63,94,.78));
  color:#fff; text-transform:uppercase;
  box-shadow: 0 6px 18px rgba(239,68,68,.25);
}
/* keep monthly/yearly switching handled by JS */

/* === Mini Limited-Time Deal next to old price === */
.ms2-price-promo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ms2-deal-mini{
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; padding:0 8px; border-radius:9999px;
  font-weight:800; font-size:10px; letter-spacing:.2px; text-transform:uppercase;
  border:1px solid rgba(16,185,129,.35);
  background: linear-gradient(135deg, rgba(16,185,129,.85), rgba(5,150,105,.70));
  color:#f5fffb; box-shadow:0 4px 12px rgba(16,185,129,.20);
}
/* Old price spacing when mini pill exists */
.ms2-price-old{ margin-right:2px; }


/* === Mini-fix: tighten old price so Elite aligns === */
.ms2-price-old{ font-size:12px !important; line-height:1 !important; opacity:.85; }

/* === Requested sizing (mini3): old price 8px, mini deal 10px === */
.ms2-price-old{ font-size:8px !important; line-height:1 !important; opacity:.85; }
.ms2-deal-mini{ font-size:10px !important; }


/* === Remove colored left bars on feature labels === */
.ms2-feature-td::before{ display:none !important; content:none !important; }


/* === Tiny arrow + hint under billing toggle === */
.ms2-bar-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ms2-toggle-hint{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:700; color:#c7c9ff; opacity:.85;
}
.ms2-toggle-hint .ms2-arrow{ color:#a78bfa; }
@media (max-width: 680px){
  .ms2-toggle-hint{ font-size:11px; }
}


/* === Toggle Arrow Visibility Fix (v0.1.9-mini6) === */
.ms2-bar-inner{ overflow:visible; }
.ms2-toggle-hint{ position:relative; overflow:visible; gap:8px; }
.ms2-toggle-hint .ms2-arrow{ display:none; } /* hide SVG, use CSS fallback to ensure visibility */
.ms2-toggle-hint::before{
  content:"↰";
  display:inline-block;
  font-size:18px;
  line-height:1;
  transform: translateY(-2px) rotate(-10deg);
  color:#a78bfa;
  margin-right:4px;
}


/* === Move Save pill next to hint text === */
.ms2-bar-inner > .ms2-save{ display:none !important; } /* hide original placement */
.ms2-toggle-hint .ms2-save{ visibility:hidden; } /* JS will show on yearly */
.ms2-toggle-hint .ms2-save .ms2-save-text{ padding-left:0; } /* keep compact */

/* === Inline save pill wording adjustments === */
.ms2-toggle-hint .ms2-save.ms2-inline{
  display:inline-flex; align-items:center; height:18px; padding:0 8px;
  border-radius:9999px; border:1px solid rgba(16,185,129,.35);
  background: linear-gradient(135deg, rgba(16,185,129,.85), rgba(5,150,105,.70));
  color:#f5fffb; font-weight:800; font-size:10px; letter-spacing:.15px; text-transform:none;
  visibility:hidden;
}
.ms2-toggle-hint .ms2-hint-text{ font-weight:800; }


/* === CTA baseline alignment + full-width + micro-line === */
.ms2-plan-th .ms2-headerbox{ display:flex; flex-direction:column; gap:12px; height:100%; }
.ms2-plan-th .ms2-trial-wrap{ margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; }
.ms2-plan-th .ms2-trial{ width:100%; justify-content:center; }
.ms2-plan-th .ms2-cta-micro{ margin-top:6px; font-size:11px; color:#cfd4ff; opacity:.75; text-align:center; }


/* === Promo/Deal gradient update (promo31) === */
.ms2-promo-badge{
  background: linear-gradient(135deg, rgb(239 68 68 / 31%), rgb(244 63 94 / 31%)) !important;
}
.ms2-deal-mini{
  background: linear-gradient(135deg, rgb(16 185 129 / 31%), rgb(5 150 105 / 31%)) !important;
}


/* === Remove Limited-Time Deal pill (all variants) === */
.ms2-deal, .ms2-deal-mini{ display:none !important; }


/* === Old price inline before current price === */
.ms2-old-inline{
  margin-right:8px; 
  font-size:8px !important; 
  line-height:1; 
  opacity:.85; 
  text-decoration: line-through;
  color:#cbd5e1;
  vertical-align:middle;
}


/* === Old price inline visibility/layout fix === */
.ms2-price-wrap{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.ms2-old-inline{ display:inline-flex !important; order:0; margin-right:2px; }
.ms2-price-curr{ order:1; }
.ms2-price{ order:2; }
.ms2-price-per{ order:3; }
.ms2-price-old{ font-size:8px !important; line-height:1; text-decoration:line-through; color:#94a3b8; opacity:.95; }


/* === Inline old price inside .ms2-price-row === */
.ms2-price-row{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.ms2-old-inline{ display:inline-flex !important; font-size:10px !important; line-height:1; text-decoration:line-through; color:#94a3b8; opacity:.95; }


/* === Ensure only one old price shows (monthly vs yearly) === */
.ms2-old-inline.yearly{ display:none !important; } /* default: monthly mode shows only monthly */
html[data-ms2mode="yearly"] .ms2-old-inline.monthly{ display:none !important; }
html[data-ms2mode="yearly"] .ms2-old-inline.yearly{ display:inline-flex !important; }


/* === Price row organization & typography (v0.1.9-organize) === */
.ms2-price-row{
  display:flex; align-items:flex-end; justify-content:center; gap:10px;
  flex-wrap:nowrap; white-space:nowrap;
}
.ms2-price-curr, .ms2-price{
  font-variant-numeric: tabular-nums; /* aligns digits across cards */
  line-height:1;
}
.ms2-price-curr{ margin-right:2px; }
.ms2-price{ letter-spacing:.2px; }
.ms2-price-per{
  margin-left:8px; font-size:12px; line-height:1; opacity:.9; white-space:nowrap;
}
.ms2-old-inline{
  margin-right:6px; font-size:9px !important; line-height:1;
  color:#93a4bd; opacity:.85; text-decoration:line-through;
}
.ms2-price-row > *{ white-space:nowrap; }


/* === Equalize plan headers + CTA uniform size (v0.1.9-equalize) === */
.ms2-plan-th{ height:100%; }
.ms2-plan-th .ms2-headerbox{
  padding-top:56px !important;  /* one consistent value */
  min-height: 320px;             /* make all headers same height */
  display:flex; flex-direction:column;
}
.ms2-plan-th .ms2-trial-wrap{ margin-top:auto !important; width:100%; }
.ms2-plan-th .ms2-trial{
  width:100% !important;
  height:42px !important;
  display:flex; align-items:center; justify-content:center;
  font-size:14px !important; letter-spacing:.2px;
}
/* micro text spacing stays consistent under the CTA */
.ms2-plan-th .ms2-cta-micro{ margin-top:8px !important; }


/* === Compact header + Sleek CTA redesign (v0.1.9-ctaSlim) === */
/* Remove excess top padding and fixed min-height to kill empty space */
.ms2-plan-th .ms2-headerbox{
  padding-top: 32px !important;
  min-height: auto !important;
  gap: 12px;
}

/* Keep CTAs aligned at the bottom */
.ms2-plan-th .ms2-trial-wrap{ margin-top:auto !important; width:100%; }

/* New sleek CTA style */
.ms2-plan-th .ms2-trial{
  width:100% !important;
  height:40px !important;
  border-radius:12px !important;
  font-size:14px !important;
  letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.18), rgba(139, 92, 246, 0.18));
  border:1px solid rgba(167, 139, 250, .45);
  box-shadow: 0 6px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
}
.ms2-plan-th .ms2-trial:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.09);
}
.ms2-plan-th .ms2-trial:active{ transform:none; }

/* Featured plan variant – subtle warm tint without changing size */
.ms2-col--featured .ms2-trial{
  background: linear-gradient(180deg, rgba(255, 192, 203, 0.22), rgba(255, 204, 112, 0.18));
  border-color: rgba(255, 204, 112, .55);
}

/* Microline spacing */
.ms2-plan-th .ms2-cta-micro{ margin-top:8px !important; font-size:11px; opacity:.8; }


/* === Ribbon headroom & uniform card header (v0.1.9-ribbonSpace) === */
.ms2-plan-th .ms2-headerbox{ padding-top:48px !important; }


/* === Equalize plan header height so Elite matches Pro (v0.1.9-equalElite) === */
.ms2-plan-th .ms2-headerbox{
  min-height: 168px !important; /* aligns card height without adding big empty space */
}


/* === Uniform CTA on non-featured plans (Starter, Pro+, Elite) (v0.1.9-ctaUniform) === */
.ms2-col:not(.ms2-col--featured) .ms2-trial{
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.18), rgba(139, 92, 246, 0.18)) !important;
  border:1px solid rgba(167, 139, 250, .45) !important;
  height:40px !important; width:100% !important; border-radius:12px !important;
  display:flex; align-items:center; justify-content:center;
}
.ms2-col:not(.ms2-col--featured) .ms2-trial:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.09);
}
.ms2-col:not(.ms2-col--featured) .ms2-trial:active{ transform:none; }


/* === Uniform CTA inner padding & centering across all plans (v0.1.9-ctaPadFix) === */
.ms2-plan-th .ms2-trial-wrap{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
.ms2-plan-th .ms2-trial{
  box-sizing:border-box !important;
  padding:0 16px !important;
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
}

/* Per-plan CTA hooks (no styles by default) */
.ms2-trial--starter, .ms2-cta--starter {
  /* Starter CTA: distinct trial color so it stands out */
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.22)) !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
}
.ms2-trial--pro, .ms2-cta--pro {}
.ms2-trial--proplus, .ms2-cta--proplus {}
.ms2-trial--elite, .ms2-cta--elite {}

/* --- PayPal compliance helpers --- */
.ms2-hero{ text-align:center; margin: 8px 0 24px; }
.ms2-title{ font-size: clamp(28px, 3.5vw, 40px); line-height:1.2; margin:0; color:#fff; }
.ms2-subtitle{ margin:8px 0 0; color:#cdd3f5; font-size:16px; }

.ms2-cta-micro{ margin-top:8px; opacity:0.9; font-size:12px; }
.ms2-renewal-note{ margin-top:6px; font-size:12px; opacity:.9; }
.ms2-renewal-note .monthly, .ms2-renewal-note .yearly{ display:block; }

.ms2-compliance{ margin-top:28px; border-top:1px solid var(--ms2-border); padding-top:16px; font-size:13px; color:#cdd3f5; }
.ms2-legal-list{ display:grid; gap:6px; padding-left:18px; }
.ms2-legal-list li{ margin-left:12px; }

@media (max-width: 720px){
  .ms2-legal-list{ padding-left:16px; }
}

/* PayPal Modal */
.ms2-pp-modal{ position:fixed; inset:0; z-index:9999; }
.ms2-pp-modal[hidden]{ display:none; }
.ms2-pp-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.ms2-pp-panel{ position:relative; max-width:420px; margin:6vh auto; background:var(--ms2-card,#0c0f21); border:1px solid var(--ms2-border,rgba(255,255,255,.1)); border-radius:16px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.ms2-pp-close{ position:absolute; top:8px; right:10px; font-size:26px; border:none; background:transparent; color:#fff; opacity:.8; cursor:pointer; }
.ms2-pp-title{ margin:0 0 12px; font-size:18px; color:#fff; }
.ms2-pp-buttons{ min-height:100px; display:flex; align-items:center; justify-content:center; }
.ms2-pp-loading{ opacity:.9; font-size:14px; }
.ms2-pp-error{ color:#ff9d9d; font-size:14px; }
.ms2-pp-note{ margin-top:12px; font-size:12px; color:#cdd3f5; opacity:.9; }


/* === Registration Modal (Step 1) === */
.ms2-reg-modal[hidden]{ display:none; }
.ms2-reg-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.ms2-reg-panel{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(520px, 92vw); background:#0b1220; border:1px solid #1e293b; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.45); padding:24px; color:#e2e8f0; }
.ms2-reg-title{ margin:0 0 12px; font-size:20px; font-weight:700; }
.ms2-reg-close{ position:absolute; right:14px; top:10px; font-size:22px; width:34px; height:34px; border-radius:8px; background:#0f172a; border:1px solid #26324a; color:#93a7c6; cursor:pointer; }
.ms2-reg-form{ display:grid; gap:12px; }
.ms2-reg-row label{ display:block; font-size:13px; color:#94a3b8; margin-bottom:6px; }
.ms2-reg-row input{ width:100%; padding:10px 12px; background:#0f172a; border:1px solid #26324a; border-radius:8px; color:#e2e8f0; }
.ms2-reg-row input:focus{ outline:1.5px solid rgb(82 72 247); border-color:#5248f7; }
.ms2-reg-terms{ font-size:12px; color:#94a3b8; margin-top:4px; }
.ms2-reg-actions{ margin-top:8px; display:flex; justify-content:flex-end; gap:10px; }
.ms2-btn{ padding:10px 14px; border-radius:9px; border:1px solid #26324a; background:linear-gradient(180deg,#0f172a,#0b1220); color:#e2e8f0; font-weight:700; cursor:pointer; }
.ms2-btn-primary{ outline:1.5px solid rgb(82 72 247); background:#28237d; }
.ms2-reg-feedback{ min-height:18px; font-size:13px; color:#9ae6b4; }
.ms2-reg-error{ color:#fca5a5; }


/* Ensure registration modal sits above everything */
.ms2-reg-modal{ position:fixed; inset:0; z-index: 999999; }
.ms2-reg-backdrop{ z-index: 999999; }
.ms2-reg-panel{ z-index: 1000000; }