/*
 * Pricing page — converted from MPower365-Pricing-Standalone.html.
 *
 * Everything is scoped to .mp-pricing. The bundle shipped a global reset
 * (body/a/ul) that would otherwise restyle the theme header and footer, and
 * its design tokens live here rather than on :root for the same reason.
 *
 * The bundle's 44 embedded woff2 files were dropped: the theme already loads
 * DM Sans, which is the same brand face, so every --font-* token points at the
 * theme stack.
 *
 * The design tokens below were transcribed from the bundle's own style guide
 * blocks; the :hover and ::before rules were generated from its style-hover /
 * style-before attributes. Edit this file directly — it is now the source.
 */

.mp-pricing {
  --font-brand: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeral: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* substituted */
  --font-caption: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display-alt: Poppins, "Cera Pro", var(--font-brand);

  /* Main colours */
  --mp-black: #000000;
  --mp-white: #ffffff;
  --mp-dark-purple: #261C2C;   /* brand dark / primary surface */
  --mp-purple: #5C527F;        /* primary action */
  --mp-purple-hover: #6D527E;
  --mp-plum: #3E2C41;
  --mp-blue-grey: #6E85B2;
  --mp-ink: #111118;           /* alternate button family */

  /* Secondary colours */
  --mp-lilac: #BEA0D1;
  --mp-pastel-pink: #F2E8F8;
  --mp-periwinkle: #B9A8F6;
  --mp-pale-blue: #C8D8F7;
  --mp-sky: #94B8FF;           /* gradient stop */

  /* Neutrals & greys (as used in components) */
  --mp-canvas: #F7F7F8;
  --mp-grey-inactive: #9F9F9F;
  --mp-grey-placeholder: #4F4F4F;
  --mp-grey-label: #BDBDBD;
  --mp-grey-caption: #AAAAAA;
  --mp-grey-swatch: #B9C0BE;
  --mp-grey-stroke: #AFAFAF;
  --mp-hairline: #E5E5E5;
  --mp-hairline-strong: #CFCFCF;
  --mp-grey-666: #666666;

  /* Semantic */
  --mp-error: #EB5757;
  --mp-do: #E24B4A;            /* don't-marker stroke */

  /* Logo gradient palette (the "M" mark's vector fills) */
  --mp-logo-blue: #0075DE;
  --mp-logo-blue-deep: #0026BF;
  --mp-logo-navy: #063E71;
  --mp-logo-violet: #662AED;
  --mp-logo-violet-mid: #553DAC;
  --mp-logo-purple: #5A00A9;
  --mp-logo-purple-mid: #9C00BF;
  --mp-logo-orchid: #AE24FE;
  --mp-logo-orchid-light: #AE77FE;
  --mp-logo-magenta: #FF54FF;
  --mp-logo-sky-light: #81BBEF;
  --mp-logo-sky-pale: #BFDCF7;

  /* Gradients */
  --mp-gradient-pastel: linear-gradient(180deg, #F2E8F8 0%, #C8D8F7 100%); /* @kind color */
  --mp-gradient-lilac: linear-gradient(180deg, #BEA0D1 0%, #94B8FF 100%); /* @kind color */

  /* ── Semantic aliases ───────────────────────────── */
  --text-heading: var(--mp-dark-purple);
  --text-title: var(--mp-black);
  --text-body: var(--mp-black);
  --text-inverse: var(--mp-white);
  --text-accent: var(--mp-blue-grey);
  --text-muted: var(--mp-grey-label);
  --text-caption: var(--mp-grey-caption);
  --text-placeholder: var(--mp-grey-placeholder);
  --text-swatch: var(--mp-grey-swatch);
  --text-error: var(--mp-error);

  --surface-canvas: var(--mp-canvas);
  --surface-card: var(--mp-white);
  --surface-dark: var(--mp-dark-purple);
  --surface-black: var(--mp-black);
  --surface-pastel: var(--mp-pastel-pink);

  --action-primary: var(--mp-purple);
  --action-primary-hover: var(--mp-purple-hover);
  --action-primary-pressed: var(--mp-dark-purple);
  --action-disabled: var(--mp-grey-inactive);
  --action-ink: var(--mp-ink);
  --action-label: var(--mp-white);

  --border-input: var(--mp-purple);
  --border-input-idle: var(--mp-grey-label);
  --border-error: var(--mp-error);
  --border-hairline: var(--mp-hairline);

  --text-display: 200px;        /* cover wordmark, DM Sans Regular, line-height 80px */
  --text-display-sub: 36px;     /* cover subtitle */
  --text-section: 96px;         /* numbered section titles, DM Sans Regular */
  --text-h1: 64px;
  --text-h2: 48px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-h5: 16px;              /* content text */
  --text-h6: 14px;              /* input text */
  --text-caption-size: 12px;
  --text-numeral: 32px;         /* section badge numerals */

  --lh-tight: 100%;
  --lh-ui: 1.4; /* @kind other */ /* 22.4px on 16px, 19.6px on 14px */
  --lh-display: 80px;
  --tracking-display: -0.015em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  /* layout measures observed in the guide */
  --gutter-page: 64px;      /* section left inset on a 1440 canvas */
  --gap-section: 236px;     /* gap between button state columns */
  --field-width: 320px;     /* standard input width */
  --field-height: 48px;
  --field-pad-x: 24px;
  --button-width: 251px;
  --button-height: 48px;
  --badge-size: 78px;       /* section number circle */
  --swatch-size: 120px;

  --radius-sm: 4px;      /* bare Input Empty */
  --radius-card: 5px;    /* component group frames */
  --radius-input: 10px;  /* standard form field / text area */
  --radius-swatch: 12px; /* colour swatch tile */
  --radius-lg: 20px;     /* pill-ish field variant */
  --radius-pill: 500px;  /* buttons */
  --radius-round: 50%;   /* section number badge */

  --stroke-input: inset 0 0 0 1px var(--mp-purple);
  --stroke-input-idle: inset 0 0 0 1px var(--mp-grey-label);
  --stroke-error: inset 0 0 0 1px var(--mp-error);
  --stroke-hairline: inset 0 0 0 1px var(--mp-hairline-strong);
  --stroke-width: 1px;
  --elevation-none: none;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */


  --mp-check: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2214.008%22 height%3D%2210.506%22 viewBox%3D%220 0 14.008 10.506%22 fill%3D%22none%22%3E %3Cpath d%3D%22M 2.134 5.816 C 1.894 5.619 1.581 5.512 1.259 5.517 C 0.936 5.521 0.627 5.637 0.394 5.841 C 0.161 6.045 0.021 6.321 0.002 6.615 C -0.017 6.909 0.087 7.199 0.292 7.426 L 3.132 10.145 C 3.251 10.258 3.394 10.349 3.552 10.411 C 3.71 10.473 3.88 10.506 4.053 10.506 C 4.224 10.507 4.394 10.477 4.552 10.417 C 4.71 10.356 4.854 10.268 4.974 10.156 L 13.645 1.988 C 13.762 1.878 13.855 1.748 13.917 1.605 C 13.98 1.462 14.011 1.309 14.008 1.155 C 14.006 1.001 13.97 0.849 13.904 0.708 C 13.837 0.567 13.74 0.439 13.619 0.332 C 13.498 0.224 13.355 0.14 13.199 0.083 C 13.042 0.026 12.875 -0.002 12.706 0 C 12.537 0.002 12.371 0.035 12.216 0.096 C 12.061 0.156 11.921 0.245 11.803 0.355 L 4.065 7.659 L 2.134 5.816 Z%22 fill%3D%22currentColor%22 fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E %3C%2Fsvg%3E");

  font-family: var(--font-brand);
  color: var(--mp-black);
  background: var(--mp-white);
  -webkit-font-smoothing: antialiased;
}

.mp-pricing *,
.mp-pricing *::before,
.mp-pricing *::after { box-sizing: border-box; }

.mp-pricing a { color: var(--mp-purple); text-decoration: none; }
.mp-pricing a:hover { color: var(--mp-purple-hover); }
.mp-pricing ul { margin: 0; padding: 0; list-style: none; }
.mp-pricing img { max-width: 100%; }

/* ---- comparison-table tick ----
   -webkit-mask-* is kept for Safari < 15.4 and Chrome < 120, which do not
   support the unprefixed properties. */
.mp-pricing .mp-tick {
  display: inline-block;
  width: 16px;
  height: 13px;
  background: var(--mp-purple);
  -webkit-mask-image: var(--mp-check);
          mask-image: var(--mp-check);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ---- FAQ accordion (native <details>, no JavaScript) ---- */
.mp-faq {
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.mp-faq:hover { border-color: var(--mp-purple); }
.mp-faq-q { list-style: none; cursor: pointer; }
.mp-faq-q::-webkit-details-marker { display: none; }
.mp-faq-sign {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--mp-purple);
  line-height: 1;
}
.mp-faq-sign::before { content: "+"; }
.mp-faq[open] .mp-faq-sign::before { content: "\2212"; }

/* ---- generated from style-hover ----
   !important is load-bearing here. The markup keeps the bundle's inline
   style attributes for pixel fidelity, and an inline declaration outranks any
   selector — without !important a hover rule that changes colour silently
   loses, which rendered white-on-white and purple-on-purple button labels.
   The bundle's own runtime avoided this by mutating the inline style. */
.mp-pricing [data-mph="mph1"]:hover { background: var(--mp-purple-hover) !important; color: var(--mp-white) !important; }
.mp-pricing [data-mph="mph2"]:hover { background: var(--mp-dark-purple) !important; color: var(--mp-white) !important; }
.mp-pricing [data-mph="mph3"]:hover { border-color: var(--mp-purple) !important; transform: translateY(-4px) !important; }
.mp-pricing [data-mph="mph4"]:hover { background: var(--mp-purple) !important; color: var(--mp-white) !important; }
.mp-pricing [data-mph="mph5"]:hover { transform: translateY(-4px) !important; }
.mp-pricing [data-mph="mph6"]:hover { background: var(--mp-periwinkle) !important; color: var(--mp-dark-purple) !important; }
.mp-pricing [data-mph="mph7"]:hover { background: var(--mp-canvas) !important; }
.mp-pricing [data-mph="mph8"]:hover { background: var(--mp-white) !important; color: var(--mp-dark-purple) !important; }

/* ---- generated from style-before ---- */
.mp-pricing [data-mpb="mpb1"]::before { content: ''; flex: 0 0 auto; width: 15px; height: 12px; margin-top: 5px; background: var(--mp-purple); -webkit-mask-image: var(--mp-check); mask-image: var(--mp-check); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.mp-pricing [data-mpb="mpb2"]::before { content: ''; flex: 0 0 auto; width: 15px; height: 12px; margin-top: 5px; background: var(--mp-periwinkle); -webkit-mask-image: var(--mp-check); mask-image: var(--mp-check); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }

/* ---- Responsive Compare Plans Table ---- */
.mp-pricing .mp-compare-card {
  background: var(--mp-white);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 24px rgba(38, 28, 44, 0.03);
}

.mp-pricing .mp-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
}

.mp-pricing .mp-compare-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
}

/* Header row */
.mp-pricing .mp-compare-table thead tr {
  background: var(--mp-white);
}

.mp-pricing .mp-compare-table thead th {
  padding: 22px 16px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--mp-white);
}

.mp-pricing .mp-compare-table thead th.mp-col-cap {
  text-align: left;
  padding: 22px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mp-grey-placeholder);
  z-index: 10;
}

.mp-pricing .mp-compare-table thead th.mp-plan-1,
.mp-pricing .mp-compare-table thead th.mp-plan-3 {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-dark-purple);
}

.mp-pricing .mp-compare-table thead th.mp-plan-2,
.mp-pricing .mp-compare-table thead th.mp-plan-4 {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-purple);
}

/* Sticky First Column (Capability) */
.mp-pricing .mp-compare-table .mp-col-cap {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--mp-white);
  border-right: 1px solid var(--border-hairline);
  box-shadow: 4px 0 10px -3px rgba(38, 28, 44, 0.06);
}

.mp-pricing tr[data-mph="mph7"]:hover .mp-col-cap {
  background: var(--mp-canvas) !important;
}

/* Category Dividers */
.mp-pricing .mp-compare-table .mp-cat-row td {
  padding: 16px 28px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-purple);
  background: var(--mp-canvas);
  border-bottom: 1px solid var(--border-hairline);
  position: sticky;
  left: 0;
  z-index: 4;
}

.mp-pricing .mp-compare-table .mp-cat-row .mp-cat-sticky-title {
  position: sticky;
  left: 28px;
  display: inline-block;
}

/* Body Cells */
.mp-pricing .mp-compare-table tbody th.mp-col-cap {
  text-align: left;
  padding: 16px 28px;
  font-weight: 500;
  color: var(--mp-plum);
  border-bottom: 1px solid var(--border-hairline);
}

.mp-pricing .mp-compare-table tbody td.mp-col-plan {
  text-align: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--duration-base) var(--ease-standard);
}

.mp-pricing .mp-compare-table .mp-val-muted {
  color: var(--mp-grey-label);
}

.mp-pricing .mp-compare-table .mp-val-num {
  font-size: 14px;
  color: var(--mp-grey-placeholder);
}

.mp-pricing .mp-compare-table .mp-val-num-bold {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-purple);
}

/* Active Column Highlight */
.mp-pricing .mp-compare-table th.mp-col-plan.is-active-col {
  background: rgba(92, 82, 127, 0.07);
}

.mp-pricing .mp-compare-table td.mp-col-plan.is-active-col {
  background: rgba(92, 82, 127, 0.035);
}

/* Mobile Controls: Hidden by default on Desktop */
.mp-pricing .mp-compare-mobile-controls {
  display: none;
}

/* Responsive Breakpoints */
@media (max-width: 860px) {
  .mp-pricing .mp-compare-mobile-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  .mp-pricing .mp-compare-tabs-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mp-pricing .mp-compare-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px;
    gap: 6px;
    background: var(--mp-white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 10px rgba(38, 28, 44, 0.05);
  }

  .mp-pricing .mp-compare-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--mp-plum);
    font-family: var(--font-brand);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }

  .mp-pricing .mp-compare-tab:hover {
    color: var(--mp-dark-purple);
  }

  .mp-pricing .mp-compare-tab.is-active {
    background: var(--mp-purple);
    color: var(--mp-white);
    box-shadow: 0 2px 8px rgba(92, 82, 127, 0.3);
  }

  .mp-pricing .mp-compare-swipe-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mp-grey-placeholder);
    opacity: 0.85;
    transition: opacity var(--duration-base) var(--ease-standard);
  }

  .mp-pricing .mp-compare-swipe-hint svg {
    color: var(--mp-purple);
    flex-shrink: 0;
  }

  .mp-pricing .mp-compare-card {
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mp-pricing .mp-compare-table {
    min-width: 720px;
  }

  .mp-pricing .mp-compare-table thead th.mp-col-cap,
  .mp-pricing .mp-compare-table tbody th.mp-col-cap {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.35;
    word-break: break-word;
  }

  .mp-pricing .mp-compare-table thead th.mp-col-plan,
  .mp-pricing .mp-compare-table tbody td.mp-col-plan {
    width: 135px;
    min-width: 135px;
    padding: 14px 10px;
    font-size: 13.5px;
  }

  .mp-pricing .mp-compare-table .mp-cat-row td {
    padding: 14px 16px 6px;
    font-size: 11.5px;
  }

  .mp-pricing .mp-compare-table .mp-cat-row .mp-cat-sticky-title {
    left: 16px;
  }
}

/* Smartphone screens (<= 640px) */
@media (max-width: 640px) {
  .mp-pricing .mp-compare-tabs {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 14px;
    padding: 6px;
    gap: 6px;
  }

  .mp-pricing .mp-compare-tab {
    border-radius: 9px;
    padding: 8px 6px;
    min-height: 40px;
    font-size: 12.5px;
    white-space: normal;
    word-break: break-word;
  }

  .mp-pricing .mp-compare-table {
    min-width: 650px;
  }

  .mp-pricing .mp-compare-table thead th.mp-col-cap,
  .mp-pricing .mp-compare-table tbody th.mp-col-cap {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .mp-pricing .mp-compare-table thead th.mp-col-plan,
  .mp-pricing .mp-compare-table tbody td.mp-col-plan {
    width: 122px;
    min-width: 122px;
    padding: 12px 6px;
    font-size: 13px;
  }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .mp-pricing *,
  .mp-pricing *::before,
  .mp-pricing *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}