/*
 * MarbleMap Pricing page — Zendesk-style 3-family layout.
 * Scoped entirely under .mmp-page so nothing here can collide with the Bexon theme's
 * global classes (Bootstrap ships a .card class, for instance) — every selector below is
 * prefixed with .mmp-page.
 */
.mmp-page {
  --mmp-stone: #f4f3f8;
  --mmp-paper: #ffffff;
  --mmp-ink: #1c1945;
  --mmp-ink-2: #2d2a57;
  --mmp-accent: #3b348c;
  --mmp-accent-deep: #2a2560;
  --mmp-gold: #3b348c;
  --mmp-gold-soft: #d9d4f2;
  --mmp-line: #e5e3ef;
  --mmp-line-2: #d9d6e6;
  --mmp-muted: #6b6786;
  --mmp-muted-2: #928ea8;
  --mmp-good: #2f9e6a;
  --mmp-radius: 16px;
  --mmp-shadow: 0 1px 2px rgba(28, 25, 69, .04), 0 8px 28px rgba(28, 25, 69, .06);
  --mmp-shadow-lift: 0 4px 10px rgba(28, 25, 69, .08), 0 24px 60px rgba(28, 25, 69, .16);
  color: var(--mmp-ink);
  background: var(--mmp-stone);
}
.mmp-page * { box-sizing: border-box; }
.mmp-page .mmp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.mmp-page .mmp-hero { background: var(--tj-color-common-white, #ffffff); color: var(--tj-color-heading-primary, #1c1945); }
.mmp-page .mmp-hero .mmp-wrap { position: relative; padding: 172px 24px 40px; text-align: center; }
.mmp-page .mmp-eyebrow { color: var(--tj-color-theme-primary, #3b348c); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.mmp-page .mmp-hero h1 { color: var(--tj-color-heading-primary, #1c1945); font-size: clamp(30px, 5vw, 48px); font-weight: 800; line-height: 1.08; margin: 14px 0; letter-spacing: -.02em; }
.mmp-page .mmp-hero .mmp-lead { color: var(--tj-color-text-body, #454363); max-width: 600px; margin: 0 auto; font-size: 16.5px; }

/* ---------- Controls (tabs + billing toggle) ---------- */
.mmp-page .mmp-controls {
  background: rgba(244, 243, 248, .92);
  border-bottom: 1px solid var(--mmp-line);
  /* Non-sticky: theme wraps content in GSAP ScrollSmoother (#smooth-content, transform scroll);
     native position:sticky is unreliable there — same reason matrix thead sticky was skipped.
     Proper sticky needs ScrollTrigger pin (separate task). */
}
.mmp-page .mmp-controls .mmp-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 18px 24px;
}

/* Full-width descriptive family tabs — mirrors PricingCatalog.vue's .pc-tabs/.pc-tab. */
.mmp-page .mmp-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  max-width: 48rem; width: 100%;
}
.mmp-page .mmp-tabs button {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  border: 1px solid var(--mmp-line-2); background: #fff; border-radius: 14px;
  padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .2rem;
  transition: border-color .15s, background .15s;
}
.mmp-page .mmp-tabs button:hover { border-color: var(--mmp-muted-2); }
.mmp-page .mmp-tab-name { font-weight: 700; color: var(--mmp-ink); font-size: 1rem; }
.mmp-page .mmp-tab-desc { font-size: .78125rem; color: var(--mmp-muted-2); }
.mmp-page .mmp-tabs button.mmp-tab-active {
  border: 2px solid var(--mmp-accent); background: #eef0ff; padding: calc(1rem - 1px) calc(1.25rem - 1px);
}
.mmp-page .mmp-tabs button.mmp-tab-active .mmp-tab-desc { color: var(--mmp-accent-deep); }
.mmp-page .mmp-tabs button:focus-visible { outline: 2px solid var(--mmp-accent); outline-offset: 2px; }

.mmp-page .mmp-billing { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.mmp-page .mmp-billing button {
  appearance: none; border: 1px solid var(--mmp-line-2); cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--mmp-muted);
  padding: 7px 16px; border-radius: 999px; background: #fff; transition: .18s;
}
.mmp-page .mmp-billing button.mmp-toggle-active { background: var(--mmp-ink); color: #fff; border-color: var(--mmp-ink); }
.mmp-page .mmp-billing button:focus-visible { outline: 2px solid var(--mmp-accent); outline-offset: 2px; }
.mmp-page .mmp-save {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--mmp-gold);
  background: #eeecf6; border: 1px solid var(--mmp-gold-soft); padding: 3px 9px; border-radius: 999px;
}

/* ---------- Cards ---------- */
.mmp-page .mmp-section { padding: 40px 0 20px; }
.mmp-page .mmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }

.mmp-page .mmp-card {
  position: relative; background: var(--mmp-paper); border: 1px solid var(--mmp-line);
  border-radius: var(--mmp-radius); padding: 24px 22px 26px; display: flex; flex-direction: column;
  box-shadow: var(--mmp-shadow);
}
.mmp-page .mmp-card-reco { border-color: var(--mmp-accent); box-shadow: var(--mmp-shadow-lift); }
.mmp-page .mmp-reco-pill {
  position: absolute; top: -12px; left: 22px;
  background: linear-gradient(135deg, var(--mmp-ink), var(--mmp-accent-deep)); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(66, 58, 155, .35);
}
.mmp-page .mmp-card-name { font-size: 19px; font-weight: 750; margin: 4px 0 0; }
.mmp-page .mmp-card-desc { font-size: 13px; color: var(--mmp-muted); margin-top: 4px; min-height: 34px; }

.mmp-page .mmp-card-price { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 4px; }
.mmp-page .mmp-card-amount { font-size: 32px; font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 3px; }
.mmp-page .mmp-card-cur { font-size: 18px; font-weight: 700; }
.mmp-page .mmp-card-per { font-size: 13px; color: var(--mmp-muted); font-weight: 600; }
.mmp-page .mmp-card-billed { font-size: 12px; color: var(--mmp-muted-2); margin: 0 0 6px; }
.mmp-page .mmp-card-limit { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--mmp-ink-2); margin: 6px 0 0; }
.mmp-page .mmp-card-limit .mmp-check { color: var(--mmp-good); }

.mmp-page .mmp-card-feats { list-style: none; margin: 16px 0 20px; padding: 16px 0 0; border-top: 1px dashed var(--mmp-line-2); display: grid; gap: 10px; flex: 1 1 auto; }
.mmp-page .mmp-card-feats li { display: flex; gap: 9px; font-size: 13.5px; color: var(--mmp-ink-2); }
.mmp-page .mmp-card-feats .mmp-check { flex: none; margin-top: 3px; color: var(--mmp-accent); }

.mmp-page .mmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto;
  font-family: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  padding: 12px 16px; border-radius: 11px; border: 1px solid var(--mmp-ink); background: #fff; color: var(--mmp-ink);
  text-decoration: none; transition: .16s; width: 100%; text-align: center;
}
.mmp-page .mmp-btn:hover { transform: translateY(-1px); color: var(--mmp-ink); }
.mmp-page .mmp-btn:focus-visible { outline: 2px solid var(--mmp-accent); outline-offset: 2px; }
.mmp-page .mmp-btn-reco { background: var(--mmp-accent); border-color: var(--mmp-accent); color: #fff; }
.mmp-page .mmp-btn-reco:hover { color: #fff; }

/* ---------- Comparison matrix ---------- */
.mmp-page .mmp-matrix-head { text-align: center; padding: 44px 0 6px; }
.mmp-page .mmp-matrix-head h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0; }
.mmp-page .mmp-matrix-head p { color: var(--mmp-muted); margin-top: 8px; }
.mmp-page .mmp-matrix-scroll { overflow-x: auto; padding-bottom: 8px; }
.mmp-page table.mmp-matrix { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--mmp-paper); border-radius: var(--mmp-radius); overflow: hidden; box-shadow: var(--mmp-shadow); }
.mmp-page table.mmp-matrix th, .mmp-page table.mmp-matrix td { padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--mmp-line); }
.mmp-page table.mmp-matrix thead th { border-bottom: 2px solid var(--mmp-line-2); background: #f6f5fa; font-weight: 700; font-size: 13px; }
.mmp-page table.mmp-matrix .mmp-matrix-feat { text-align: left; font-weight: 500; color: var(--mmp-ink-2); font-size: 14px; width: 34%; }
.mmp-page table.mmp-matrix thead .mmp-matrix-feat { color: var(--mmp-muted); text-transform: uppercase; letter-spacing: .02em; font-size: 12px; }
.mmp-page table.mmp-matrix .mmp-matrix-reco { color: var(--mmp-accent); background: rgba(91, 79, 196, .045); }
.mmp-page .mmp-matrix-dash { color: var(--mmp-muted-2); }
.mmp-page .mmp-check { color: var(--mmp-good); }

/* ---------- FAQ ---------- */
.mmp-page .mmp-faq { padding: 46px 0 20px; }
.mmp-page .mmp-faq h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; text-align: center; margin: 0 0 26px; }
.mmp-page .mmp-acc { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.mmp-page details.mmp-faq-item {
  background: var(--mmp-paper); border: 1px solid var(--mmp-line); border-radius: 14px; padding: 4px 20px;
  box-shadow: var(--mmp-shadow);
}
.mmp-page details.mmp-faq-item[open] { border-color: var(--mmp-line-2); }
.mmp-page details.mmp-faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 650; font-size: 15.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.mmp-page details.mmp-faq-item summary::-webkit-details-marker { display: none; }
.mmp-page details.mmp-faq-item summary .mmp-chev { flex: none; transition: transform .2s; color: var(--mmp-accent); }
.mmp-page details.mmp-faq-item[open] summary .mmp-chev { transform: rotate(45deg); }
.mmp-page details.mmp-faq-item p { padding: 0 0 18px; color: var(--mmp-muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ---------- Fallback (catalog unavailable) ---------- */
.mmp-page .mmp-fallback {
  max-width: 640px; margin: 0 auto; padding: 60px 24px; text-align: center;
}
.mmp-page .mmp-fallback h2 { font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.mmp-page .mmp-fallback p { color: var(--mmp-muted); margin: 0 0 20px; }

@media (max-width: 720px) {
  /* Spec asked for 88px here, but live-boot verification measured a real overlap: the
     site's own .h11-header.header-area.header-absolute sits at top:20px with height:80px
     at every width <= 991px (main.css line ~28738-28744), i.e. its bottom edge is at 100px,
     not 80px like the desktop-derived assumption. 88px left the eyebrow's top ~8-12px
     underneath the header. Kept at 104px (the pre-existing, already-tested value) so the
     header is reliably cleared — flagged to the manager as a deviation from the verbatim
     spec for this one value; every other CSS value below is applied as given. */
  .mmp-page .mmp-hero .mmp-wrap { padding: 104px 24px 32px; }
  .mmp-page .mmp-controls .mmp-wrap { flex-direction: column; }
  .mmp-page .mmp-tabs { grid-template-columns: 1fr; max-width: 22rem; }
  /* visual promotion only; DOM order stays meaningful (WCAG 1.3.2 OK) */
  .mmp-page .mmp-card-reco { order: -1; }
}