/* ============================================================
   MSM Price — Public CSS v1.0.0
   Theme-aware: uses CSS vars with theme fallbacks
   ============================================================ */

/* ── CSS Variables (set inline per-table via PHP) ───────────── */
.msm-price-wrap,
.msm-ft-wrap {
  /* Design tokens — overridden per-table via inline style */
  --msm-primary:          #0A1F44;
  --msm-accent:           #D4AF37;
  --msm-accent-rgb:       212,175,55;
  --msm-plan-accent:      #D4AF37;
  --msm-plan-accent-rgb:  212,175,55;
  --msm-popular-glow-rgb: 212,175,55;
  --msm-popular-bg:       var(--msm-plan-accent);
  --msm-popular-text:     #ffffff;
  --msm-card-bg:          #ffffff;
  --msm-radius:           14px;
  --msm-plan-name-color:  #0A1F44;
  --msm-currency-color:   #D4AF37;
  --msm-price-color:      #D4AF37;
  --msm-btn-text:         #0A1F44;
  --msm-btn-bg:           #D4AF37;
  --msm-btn-hover-text:   #ffffff;
  --msm-btn-hover-bg:     #0A1F44;
  --msm-btn-radius:       8px;
  /* Expand-button tokens */
  --msm-exp-text:         #0A1F44;
  --msm-exp-bg:           #ffffff;
  --msm-exp-border:       #dde3ed;
  --msm-exp-hover-text:   #0A1F44;
  --msm-exp-hover-bg:     #f4f6fb;
  --msm-exp-hover-border: #D4AF37;
  --msm-exp-radius:       8px;
  /* Period-badge tokens */
  --msm-pb-text:          #0A1F44;
  --msm-pb-bg:            #E8ECF3;
  --msm-pb-border:        #E8ECF3;
  --msm-pb-bw:            0px;
  --msm-pb-radius:        100px;
  /* Stable tokens */
  --msm-text:             #1a2332;
  --msm-subtext:          #5a6a7e;
  --msm-border:           #dde3ed;
  --msm-yes-bg:           #edfaf1;
  --msm-yes-color:        #16a34a;
  --msm-no-bg:            #f3f5f8;
  --msm-no-color:         #9aaab8;
  --msm-sale-color:       #d4371d;
  --msm-trans:            0.24s cubic-bezier(.4,0,.2,1);
  font-family: inherit; /* Follow theme font */
  color: var(--msm-text);
  box-sizing: border-box;
}
.msm-price-wrap *, .msm-price-wrap *::before, .msm-price-wrap *::after,
.msm-ft-wrap *,    .msm-ft-wrap *::before,    .msm-ft-wrap *::after { box-sizing: inherit; }

.msm-price-error { padding:16px; background:#fff5f5; border:1px solid #fecaca; border-radius:8px; color:#991b1b; font-size:14px; }

/* ════════════════════════════════════════════════════════════
   CONTROLS
   ════════════════════════════════════════════════════════════ */
.msm-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 16px; margin-bottom: 24px;
}

/* Per-currency notice strip — sits between the controls and the plan grid.
 * Multiple <span> elements render side by side in HTML; CSS shows only the
 * one matching the wrapper's data-currency attribute. Wrapper gets bottom
 * margin only when visible (one currency active), so layout stays tight
 * when no currency has a notice. */
.msm-currency-notice {
  display:flex; justify-content:center;
  margin: 0 auto 28px;
  padding: 0 16px;
}
.msm-currency-notice__msg {
  display: none;
  align-items: center; gap: 8px;
  background: #E6F1FB; color: #0C447C;
  border: 1px solid #B5D4F4;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px; line-height: 1.45;
  max-width: 720px; font-family: inherit;
  text-align: left;
}
.msm-currency-notice__icon { flex-shrink: 0; opacity: .85; }
.msm-currency-notice__text { flex: 1; }
/* Visibility driven by JS: the same currency-swap logic that flips
 * .msm-price-active on price blocks also flips .msm-currency-notice--active
 * on the matching notice message. Pure class swap — no per-currency CSS rules. */
.msm-currency-notice__msg.msm-currency-notice--active { display: inline-flex; }

/* Period pill */
.msm-period-switcher { display: inline-flex; background: #eef1f7; border-radius: 100px; padding: 4px; gap: 2px; }
.msm-period-btn {
  background: transparent; border: none; border-radius: 100px;
  padding: 9px 22px; font-size: 14px; font-weight: 600;
  color: var(--msm-subtext); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background var(--msm-trans), color var(--msm-trans), box-shadow var(--msm-trans);
}
.msm-period-btn.active { background: var(--msm-primary); color: #fff; box-shadow: 0 2px 8px rgba(10,31,68,.28); }
.msm-badge { background: var(--msm-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 100px; letter-spacing: .02em; }

/* Currency switcher — UX-improved */
.msm-currency-switcher-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  background: #f4f6fb; border: 1.5px solid var(--msm-border);
  border-radius: 100px; padding: 7px 16px;
  transition: border-color var(--msm-trans);
}
.msm-currency-switcher-wrap:focus-within { border-color: var(--msm-accent); box-shadow: 0 0 0 3px rgba(var(--msm-accent-rgb),.15); }
.msm-currency-switcher-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--msm-subtext); white-space: nowrap;
}
.msm-globe-icon { flex-shrink: 0; color: var(--msm-primary); }
.msm-currency-switcher { display: flex; flex-direction: column; gap: 2px; }
.msm-currency-select {
  appearance: none; -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235a6a7e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 4px center;
  border: none; padding: 0 18px 0 0; font-size: 14px; font-weight: 700;
  color: var(--msm-primary); cursor: pointer; font-family: inherit;
  outline: none;
}
.msm-currency-hint { font-size: 10px; color: var(--msm-subtext); line-height: 1; }

/* ════════════════════════════════════════════════════════════
   PLAN CARDS
   ════════════════════════════════════════════════════════════ */
.msm-plans { display: grid; gap: 28px; align-items: start; }
.msm-cols-2 { grid-template-columns: repeat(2,1fr); }
.msm-cols-3 { grid-template-columns: repeat(3,1fr); }
.msm-cols-4 { grid-template-columns: repeat(4,1fr); }

.msm-plan {
  background: var(--msm-card-bg); border: 1.5px solid var(--msm-border);
  border-radius: var(--msm-radius); padding: 34px 28px 28px;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--msm-trans), box-shadow var(--msm-trans), border-color var(--msm-trans);
}
.msm-plan:hover { transform: translateY(-5px); }
.msm-plan--popular { border-color: var(--msm-plan-accent); border-width: 2px; transform: translateY(-7px); }
.msm-plan--popular:hover { transform: translateY(-12px); }

.msm-popular-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--msm-popular-bg); color: var(--msm-popular-text);
  font-size: 11px; font-weight: 700; padding: 5px 20px;
  border-radius: 0 0 12px 12px; white-space: nowrap;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(var(--msm-popular-glow-rgb),.4);
}
/* Glow toggle — admin can switch off the soft halo behind both popular badges.
 * !important is intentional: a user-chosen "off" must never be re-enabled by
 * a per-card style attribute, theme override, or future cascade tweak. */
.msm-no-popular-glow .msm-popular-badge,
.msm-no-popular-glow .msm-ft__popular-badge { box-shadow: none !important; }
.msm-sale-ribbon {
  position: absolute; top: 16px; right: -28px;
  background: var(--msm-sale-color); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 36px;
  transform: rotate(45deg); white-space: nowrap; letter-spacing: .04em;
}

/* Shadows */
.msm-shadow-sm .msm-plan { box-shadow: 0 2px 6px rgba(10,31,68,.07); }
.msm-shadow-md .msm-plan { box-shadow: 0 4px 20px rgba(10,31,68,.09), 0 1px 4px rgba(10,31,68,.05); }
.msm-shadow-lg .msm-plan { box-shadow: 0 8px 36px rgba(10,31,68,.13), 0 2px 8px rgba(10,31,68,.06); }

/* Period badge — soft tinted pill above the plan name. Both monthly and yearly
 * spans render in HTML; CSS shows only the one matching the wrapper's
 * data-period attribute (same declarative pattern as the price blocks). */
.msm-period-badge-wrap { display:flex; justify-content:center; margin-bottom:10px; }
.msm-period-badge {
  display:none; align-items:center; gap:5px;
  background: var(--msm-pb-bg); color: var(--msm-pb-text);
  border: var(--msm-pb-bw) solid var(--msm-pb-border);
  border-radius: var(--msm-pb-radius);
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px;
  font-family: inherit;
  transition: background var(--msm-trans), color var(--msm-trans),
              border-color var(--msm-trans), transform var(--msm-trans),
              box-shadow var(--msm-trans);
}
.msm-period-badge__icon { flex-shrink:0; opacity:.85; }
.msm-price-wrap[data-period="monthly"] .msm-period-badge--monthly,
.msm-price-wrap[data-period="yearly"]  .msm-period-badge--yearly { display: inline-flex; }

/* Period-badge hover-effect modifiers — same vocabulary as button + expand-button. */
.msm-pb-effect-lift:hover      { transform: translateY(-2px); }
.msm-pb-effect-scale:hover     { transform: scale(1.06); }
.msm-pb-effect-glow:hover      { box-shadow: 0 4px 14px rgba(var(--msm-accent-rgb),.35); }
.msm-pb-effect-underline:hover { text-decoration: underline; }

.msm-plan-top  { margin-bottom: 20px; }
.msm-plan-icon { display: block; font-size: 34px; margin-bottom: 10px; line-height: 1; }
.msm-plan-name { font-size: 21px; font-weight: 800; color: var(--msm-plan-name-color); margin: 0 0 7px; line-height: 1.2; font-family: inherit; }
.msm-plan-desc { font-size: 14px; color: var(--msm-subtext); margin: 0; line-height: 1.65; }

/* ── Price ──────────────────────────────────────────────────── */
.msm-plan-price { margin-bottom: 26px; min-height: 62px; }
.msm-price-item { display: none; }
.msm-price-item.msm-price-active { display: block; }
.msm-price-item__monthly, .msm-price-item__yearly { display: none; }
.msm-price-wrap[data-period="monthly"] .msm-price-item__monthly { display: block; }
.msm-price-wrap[data-period="yearly"]  .msm-price-item__yearly  { display: block; }

.msm-price-amount { font-size: 50px; font-weight: 900; color: var(--msm-price-color); line-height: 1; letter-spacing: -.03em; font-family: inherit; }
.msm-price-sup    { font-size: 22px; font-weight: 700; vertical-align: super; line-height: 0; color: var(--msm-currency-color); }
.msm-price-suffix { font-size: 13px; color: var(--msm-subtext); font-weight: 500; margin-left: 3px; }
.msm-price-custom { font-size: 26px; font-weight: 700; color: var(--msm-price-color); }

/* Sale price */
.msm-price-sale-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.msm-price-original {
  font-size: 22px; font-weight: 600; color: var(--msm-subtext);
  text-decoration: line-through; text-decoration-color: var(--msm-sale-color);
  text-decoration-thickness: 2px; opacity: .75;
}
.msm-price-original sup { font-size: 13px; vertical-align: super; line-height: 0; }

/* ── CTA Button ─────────────────────────────────────────────── */
.msm-plan-cta { margin-bottom: 26px; }

.msm-btn {
  display: block; width: 100%; text-align: center;
  padding: 13px 20px; border-radius: var(--msm-btn-radius);
  font-size: 15px; font-weight: 700; text-decoration: none !important;
  cursor: pointer; letter-spacing: .02em; font-family: inherit;
  transition: background var(--msm-trans), color var(--msm-trans),
              transform var(--msm-trans), box-shadow var(--msm-trans),
              filter var(--msm-trans), border-color var(--msm-trans);
}

/* Filled */
.msm-btn--filled  { background: var(--msm-btn-bg); color: var(--msm-btn-text) !important; border: 2px solid var(--msm-btn-bg); }
.msm-btn--filled:hover  { background: var(--msm-btn-hover-bg); color: var(--msm-btn-hover-text) !important; border-color: var(--msm-btn-hover-bg); }
/* Outline */
.msm-btn--outline { background: transparent; color: var(--msm-btn-bg) !important; border: 2px solid var(--msm-btn-bg); }
.msm-btn--outline:hover { background: var(--msm-btn-hover-bg); color: var(--msm-btn-hover-text) !important; border-color: var(--msm-btn-hover-bg); }
/* Ghost */
.msm-btn--ghost   { background: transparent; color: var(--msm-btn-bg) !important; border: 2px solid transparent; }
.msm-btn--ghost:hover   { background: var(--msm-btn-hover-bg); color: var(--msm-btn-hover-text) !important; border-color: var(--msm-btn-hover-bg); }

/* Button hover effects */
.msm-btn-effect-lift .msm-btn:hover,
.msm-btn-effect-lift.msm-ft__plan-btn:hover  { transform: translateY(-2px); }
.msm-btn-effect-glow .msm-btn:hover          { box-shadow: 0 6px 20px rgba(var(--msm-accent-rgb),.45); }
.msm-btn-effect-scale .msm-btn:hover         { transform: scale(1.04); }
.msm-btn-effect-underline .msm-btn:hover     { text-decoration: underline !important; }

/* Button shadows */
.msm-btn-shadow-sm .msm-btn { box-shadow: 0 1px 4px rgba(10,31,68,.15); }
.msm-btn-shadow-md .msm-btn { box-shadow: 0 3px 10px rgba(10,31,68,.20); }
.msm-btn-shadow-lg .msm-btn { box-shadow: 0 6px 20px rgba(10,31,68,.28); }

/* ── Feature lists ──────────────────────────────────────────── */
.msm-feature-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--msm-border); padding-top:20px; }
.msm-feature-list--hidden { border-top:none; padding-top:0; }
.msm-feature-item { display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:14px; color:var(--msm-text); line-height:1.5; font-family:inherit; }
.msm-feature-icon { flex-shrink:0; margin-top:2px; color:var(--msm-yes-color); display:flex; align-items:center; }

.msm-expandable { margin-top:4px; }
.msm-expand-btn {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  background:var(--msm-exp-bg); border:1.5px solid var(--msm-exp-border);
  border-radius:var(--msm-exp-radius);
  padding:9px 16px; font-size:13px; font-weight:600; color:var(--msm-exp-text);
  cursor:pointer; margin-top:12px; font-family:inherit;
  transition: background var(--msm-trans), border-color var(--msm-trans),
              color var(--msm-trans), transform var(--msm-trans),
              box-shadow var(--msm-trans);
}
.msm-expand-btn:hover {
  background:var(--msm-exp-hover-bg);
  border-color:var(--msm-exp-hover-border);
  color:var(--msm-exp-hover-text);
}
.msm-expand-btn__arrow { font-size:11px; transition:transform var(--msm-trans); }
.msm-expand-btn[aria-expanded="true"] .msm-expand-btn__arrow { transform:rotate(180deg); }

/* ── Animations ─────────────────────────────────────────────── */
.msm-anim-fade  .msm-plan { opacity:0; animation:msmFade  .5s ease forwards; }
.msm-anim-slide .msm-plan { opacity:0; transform:translateY(26px); animation:msmSlide .5s ease forwards; }
.msm-anim-fade  .msm-plan:nth-child(1),.msm-anim-slide .msm-plan:nth-child(1){animation-delay:0s}
.msm-anim-fade  .msm-plan:nth-child(2),.msm-anim-slide .msm-plan:nth-child(2){animation-delay:.10s}
.msm-anim-fade  .msm-plan:nth-child(3),.msm-anim-slide .msm-plan:nth-child(3){animation-delay:.20s}
.msm-anim-fade  .msm-plan:nth-child(4),.msm-anim-slide .msm-plan:nth-child(4){animation-delay:.30s}
@keyframes msmFade  { to{opacity:1} }
@keyframes msmSlide { to{opacity:1;transform:translateY(0)} }
.msm-anim-fade  .msm-plan--popular{animation-name:msmFadePop}
.msm-anim-slide .msm-plan--popular{animation-name:msmSlidePop}
@keyframes msmFadePop  { to{opacity:1;transform:translateY(-7px)} }
@keyframes msmSlidePop { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(-7px)} }

/* ════════════════════════════════════════════════════════════
   FEATURE COMPARISON TABLE
   ════════════════════════════════════════════════════════════ */
.msm-ft-wrap { margin:44px 0; }
.msm-ft-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1.5px solid var(--msm-border); box-shadow:0 4px 28px rgba(10,31,68,.08); }
.msm-ft { width:100%; border-collapse:collapse; font-size:14px; color:var(--msm-text); font-family:inherit; }

.msm-ft__feature-col { width:220px; min-width:180px; background:#f4f6fb; border-right:2px solid var(--msm-border); padding:20px 20px 14px; vertical-align:bottom; }
.msm-ft__heading-block { display:flex; flex-direction:column; gap:4px; }
.msm-ft__heading { font-size:22px; font-weight:600; color:var(--msm-plan-name-color); line-height:1.15; font-family:inherit; }
.msm-ft__heading-subtitle { font-size:12px; color:#888780; font-weight:400; font-family:inherit; }

.msm-ft__plan-head { padding:22px 20px 16px; text-align:center; vertical-align:bottom; background:#fff; border-bottom:3px solid transparent; min-width:140px; }
.msm-ft__plan-head--popular { background:linear-gradient(160deg,rgba(var(--msm-plan-accent-rgb),.06) 0%,rgba(10,31,68,.03) 100%); border-bottom-color:var(--msm-plan-accent); }
.msm-ft__popular-badge { display:inline-block; background:var(--msm-popular-bg); color:var(--msm-popular-text); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 12px; border-radius:100px; margin-bottom:9px; box-shadow:0 2px 8px rgba(var(--msm-popular-glow-rgb),.4); }
.msm-ft__plan-icon { display:block; font-size:22px; margin-bottom:6px; line-height:1; }
.msm-ft__plan-name { font-size:15px; font-weight:800; color:var(--msm-plan-name-color); margin-bottom:10px; font-family:inherit; }
.msm-ft__plan-btn { display:inline-block !important; width:auto !important; padding:7px 16px !important; font-size:12px !important; white-space:nowrap; }

.msm-ft__group-label { background:#eef1f7; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#5a6a7e; padding:8px 20px; border-top:1px solid var(--msm-border); border-bottom:1px solid var(--msm-border); }
.msm-ft__row { transition:background .15s; }
.msm-ft__row:hover { background:#f8f9fd; }
.msm-ft__row:last-child td { border-bottom:none; }
.msm-ft__feature-name { padding:13px 20px; font-size:13.5px; font-weight:500; color:#2d3c52; background:#f9fafc; border-right:2px solid var(--msm-border); border-bottom:1px solid #edf0f5; vertical-align:middle; display:flex; align-items:center; gap:7px; font-family:inherit; }
.msm-ft__cell { padding:13px 20px; text-align:center; border-bottom:1px solid #edf0f5; vertical-align:middle; }
.msm-ft__cell--popular { background:rgba(var(--msm-plan-accent-rgb),.04); border-left:1px solid rgba(var(--msm-plan-accent-rgb),.15); border-right:1px solid rgba(var(--msm-plan-accent-rgb),.15); }
.msm-ft__empty { text-align:center; padding:40px 20px; color:var(--msm-subtext); font-style:italic; font-family:inherit; }

.msm-ft__icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; }
.msm-ft__icon--yes { background:var(--msm-yes-bg); color:var(--msm-yes-color); }
.msm-ft__icon--no  { background:var(--msm-no-bg);  color:var(--msm-no-color); }
.msm-ft__text-val  { font-size:13px; font-weight:700; color:var(--msm-plan-accent); font-family:inherit; }

.msm-ft__tooltip-wrap  { position:relative; display:inline-flex; }
.msm-ft__tooltip-icon  { width:16px; height:16px; border-radius:50%; background:#b0bece; color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; cursor:help; flex-shrink:0; }
.msm-ft__tooltip-text  { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--msm-primary); color:#fff; font-size:12px; padding:7px 11px; border-radius:7px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s; z-index:200; font-family:inherit; }
.msm-ft__tooltip-wrap:hover .msm-ft__tooltip-text { opacity:1; }
.msm-ft__tooltip-text::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--msm-primary); }

.msm-ft__expand-wrap { text-align:center; margin-top:22px; }
.msm-ft__expand-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--msm-exp-bg); border:1.5px solid var(--msm-exp-border);
  border-radius:var(--msm-exp-radius);
  padding:11px 30px; font-size:14px; font-weight:700; color:var(--msm-exp-text);
  cursor:pointer; font-family:inherit;
  transition: background var(--msm-trans), border-color var(--msm-trans),
              color var(--msm-trans), transform var(--msm-trans),
              box-shadow var(--msm-trans);
}
.msm-ft__expand-btn:hover {
  background:var(--msm-exp-hover-bg);
  border-color:var(--msm-exp-hover-border);
  color:var(--msm-exp-hover-text);
}
.msm-ft__expand-icon { font-size:11px; transition:transform .25s; }
.msm-ft__expand-btn[aria-expanded="true"] .msm-ft__expand-icon { transform:rotate(180deg); }

/* Expand-button effect modifiers (apply to both card + table expand buttons) */
.msm-exp-effect-lift:hover      { transform: translateY(-2px); }
.msm-exp-effect-scale:hover     { transform: scale(1.04); }
.msm-exp-effect-glow:hover      { box-shadow: 0 6px 20px rgba(var(--msm-accent-rgb),.45); }
.msm-exp-effect-underline:hover { text-decoration: underline; }

/* Expand-button shadow modifiers */
.msm-exp-shadow-sm { box-shadow: 0 1px 4px rgba(10,31,68,.08); }
.msm-exp-shadow-md { box-shadow: 0 3px 10px rgba(10,31,68,.14); }
.msm-exp-shadow-lg { box-shadow: 0 6px 20px rgba(10,31,68,.20); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1024px){.msm-cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .msm-cols-3,.msm-cols-2{grid-template-columns:1fr}
  .msm-plan--popular{transform:translateY(0)}
  .msm-plan--popular:hover{transform:translateY(-5px)}
  .msm-plan{padding:30px 22px 24px}
  /* Currency switcher: stay horizontal on mobile so the globe + label + select read
     left-to-right; bumping padding gives the pill enough breathing room. */
  .msm-currency-switcher-wrap{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    padding:12px 16px;
    gap:8px;
  }
  .msm-currency-switcher-label{flex-wrap:wrap;justify-content:center}
}
@media (max-width:640px){
  .msm-cols-4{grid-template-columns:1fr}
  .msm-ft__feature-col,.msm-ft__feature-name{min-width:120px;width:120px;padding:10px 12px;font-size:12px}
  .msm-ft__plan-head{min-width:110px;padding:14px 10px 12px}
  .msm-ft__cell{padding:10px 12px}
}