/* ===== Market Boxx – Add-on CSS for Gutenberg+Blocksy (safe) ===== */

/* ==========================
   GLOBAL / LAYOUT
========================== */

:root {
  --mbx-accent: #ffd600;
  --mbx-accent-text: #111827;
  --mbx-text: #111827;
  --mbx-text-soft: #4b5563;
  --mbx-border: #e5e7eb;
  --mbx-border-soft: #f3f4f6;
  --mbx-radius-lg: 18px;
  --mbx-radius-xl: 24px;
  --mbx-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.06);
}

body {
  background: #ffffff;
  color: var(--mbx-text);
}

/* Constrain wide/full sections on this page */
.mbx-hero.alignfull,
.mbx-paths.alignwide,
.mbx-proof.alignwide,
.mbx-lift.alignwide,
.mbx-pricing-teaser.alignwide,
.mbx-cases.alignwide,
.mbx-faq.alignwide,
.mbx-final-cta.alignfull {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical rhythm between sections */
section[class*="mbx-"] {
  padding: 4rem 1.5rem;
  border-bottom: 1px solid var(--mbx-border-soft);
}

/* Eyebrow / label text */
.mbx-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--mbx-text-soft);
  margin-bottom: 1rem;
}

/* ==========================
   BUTTONS
========================== */

.wp-block-button .wp-block-button__link {
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-width: 1px;
  border-style: solid;
  transition: all 0.15s ease-out;
}

/* yellow filled */
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--mbx-accent);
  color: var(--mbx-accent-text);
  border-color: var(--mbx-accent);
}

/* outline / ghost */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: #ffffff;
  color: var(--mbx-text);
  border-color: var(--mbx-border);
}

.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

/* ==========================
   HERO
========================== */

.mbx-hero {
  padding-top: 6rem;
  padding-bottom: 3.5rem;
}

.mbx-hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.mbx-hero > p {
  max-width: 34rem;
  font-size: 1.05rem;
  color: var(--mbx-text-soft);
}

/* main CTA row */
.mbx-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
  margin-bottom: 0.5rem;
}

/* small copy under main CTAs */
.mbx-microcopy {
  font-size: 0.85rem;
  color: var(--mbx-text-soft);
  margin-bottom: 1.4rem;
}

/* row with “Watch OS” + BOXX LIFT button */
.mbx-hero + .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ==========================
   QUOTES STRIP
   (What clients say…)
========================== */

.mbx-quotes {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--mbx-border-soft);
  border-bottom: 1px solid var(--mbx-border-soft);
}

.mbx-quotes h3 {
  margin-bottom: 1.5rem;
}

.mbx-quotes__track {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-size: 0.9rem;
  color: var(--mbx-text-soft);
}

.mbx-quote,
.mbx-quote--cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mbx-quote figcaption {
  font-style: normal;
  opacity: 0.7;
}

.mbx-quote--cta {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
}

/* ==========================
   CHOOSE YOUR STARTING POINT
========================== */

.mbx-paths h3 {
  margin-bottom: 1.8rem;
}

/* 3 cards */
.mbx-cards-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.mbx-cards-3 .wp-block-column {
  background: #ffffff;
  border: 1px solid var(--mbx-border);
  border-radius: var(--mbx-radius-lg);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--mbx-shadow-soft);
}

.mbx-cards-3 h4 {
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.mbx-cards-3 p {
  font-size: 0.95rem;
  color: var(--mbx-text-soft);
}

/* small yellow line inside some cards */
.mbx-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 214, 0, 0.14);
  color: var(--mbx-accent-text);
  font-size: 0.78rem;
}

/* ==========================
   PROOF / DASHBOARD
========================== */

.mbx-proof {
  background: #f9fafb;
  border-radius: var(--mbx-radius-xl);
  padding: 3rem 2.3rem;
  box-shadow: var(--mbx-shadow-soft);
}

.mbx-proof h2 {
  margin-bottom: 0.8rem;
}

.mbx-proof > p {
  margin-bottom: 1.6rem;
  color: var(--mbx-text-soft);
}

/* KPI pills */
.mbx-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

.mbx-kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--mbx-border-soft);
  font-size: 0.82rem;
  color: var(--mbx-text-soft);
}

.mbx-kpi strong {
  color: #16a34a;
}

/* “This month at a glance” card etc */
.mbx-exec {
  margin-top: 1.5rem;
  padding: 1.6rem 1.8rem;
  border-radius: var(--mbx-radius-lg);
  background: #ffffff;
  border: 1px solid var(--mbx-border);
}

/* ==========================
   BOXX LIFT (Launch in 6 weeks)
========================== */

.mbx-lift {
  background: #fffbeb;
  border-radius: var(--mbx-radius-xl);
  padding: 3rem 2.3rem;
  box-shadow: var(--mbx-shadow-soft);
}

.mbx-lift p {
  color: var(--mbx-text-soft);
}

/* timeline list */
ul.mbx-timeline {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

ul.mbx-timeline li {
  font-size: 0.88rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #facc15;
}

/* ==========================
   PRICING CARDS
========================== */

.mbx-pricing-teaser h3 {
  margin-bottom: 1.8rem;
}

/* re-use .mbx-cards-3 styles – just tweak headings */
.mbx-pricing-teaser .mbx-cards-3 h4 {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

/* ==========================
   MINI CASES
========================== */

.mbx-cases h3 {
  margin-bottom: 1.8rem;
}

.mbx-cases .mbx-cards-3 h4 {
  margin-bottom: 0.35rem;
}

.mbx-cases .mbx-cards-3 p strong {
  color: var(--mbx-text);
}

/* ==========================
   FAQ / QUICK ANSWERS
========================== */

.mbx-faq {
  padding-bottom: 3rem;
}

.mbx-faq h3 {
  margin-bottom: 1.4rem;
}

.mbx-faq ul {
  padding-left: 1.1rem;
  color: var(--mbx-text-soft);
  font-size: 0.95rem;
}

.mbx-faq li + li {
  margin-top: 0.45rem;
}

/* ==========================
   FINAL CTA STRIP
========================== */

.mbx-final-cta {
  border-top: 1px solid var(--mbx-border-soft);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.mbx-final-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 900px) {
  section[class*="mbx-"] {
    padding-inline: 1.25rem;
  }

  .mbx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mbx-proof,
  .mbx-lift {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 700px) {
  .mbx-hero {
    padding-top: 4.5rem;
  }

  .mbx-hero-ctas,
  .mbx-hero + .wp-block-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .mbx-cards-3 {
    grid-template-columns: 1fr;
  }

  .mbx-kpis {
    grid-template-columns: 1fr;
  }
}


/* General spacing helpers */
.mbx-hero, .mbx-quotes, .mbx-paths, .mbx-proof, .mbx-os-compare, .mbx-lift,
.mbx-outcomes, .mbx-pricing-teaser, .mbx-cases, .mbx-faq, .mbx-final-cta {
  margin-block: clamp(2rem, 3vw, 4rem);
}
.mbx-eyebrow {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  opacity: .8;
  margin-bottom: .5rem;
}

/* Hero specifics */
.mbx-hero .mbx-hero-ctas .wp-block-button { margin-right: .5rem; }
.mbx-microcopy { font-size: .95rem; opacity: .85; margin-top: .5rem; }

/* Quote marquee */
.mbx-quotes { overflow: hidden; }
.mbx-quotes__track {
  display: flex; gap: 2rem; white-space: nowrap;
  will-change: transform; animation: mbx-marquee 40s linear infinite;
}
.mbx-quote { display: inline-flex; align-items: center; gap: .5rem; opacity: .95; }
.mbx-quote figcaption { opacity: .7; font-style: italic; margin-left: .25rem; }
.mbx-quote--cta { font-weight: 600; text-decoration: underline; }
@keyframes mbx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cards 3-up (paths/pricing/cases) */
.mbx-cards-3 .wp-block-column {
  border: 1px solid var(--theme-border-color, #e5e7eb);
  border-radius: 12px; padding: 1.25rem;
  background: var(--paletteColor7, #fff);
}
.mbx-chip {
  display: inline-block; font-size: .8rem; padding: .25rem .5rem; border-radius: 999px;
  background: var(--paletteColor2, #eef2ff); color: var(--paletteColor3, #111827);
}

/* Proof dashboard */
.mbx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.mbx-kpi { background: var(--paletteColor7, #fff); border: 1px solid var(--theme-border-color, #e5e7eb); border-radius: 12px; padding: .75rem; display:flex; justify-content:space-between; align-items:center; }
.mbx-views h4, .mbx-ops h4 { margin-top: 1.5rem; }
.mbx-funnel, .mbx-channels { display: flex; gap: .5rem; flex-wrap: wrap; padding-left: 0; list-style: none; }
.mbx-funnel li, .mbx-channels li {
  border: 1px dashed var(--theme-border-color, #e5e7eb); border-radius: 999px; padding: .25rem .6rem; font-size: .9rem;
}
.mbx-exec-card { border: 2px solid var(--theme-border-color, #e5e7eb); border-radius: 14px; padding: 1.25rem; background: var(--paletteColor7, #fff); position: sticky; top: 2rem; }

/* BOXX LIFT timeline */
.mbx-timeline { list-style: none; padding-left: 0; }
.mbx-timeline li { padding: .25rem 0; }
.mbx-timeline strong { width: 2.2rem; display: inline-block; }

/* Final CTA bar */
.mbx-final-cta { padding-block: 1.5rem; border-top: 1px solid var(--theme-border-color, #e5e7eb); }

/* Accessible modal */
.mbx-modal[aria-hidden="true"] { display: none; }
.mbx-modal { position: fixed; inset: 0; z-index: 9999; }
.mbx-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.mbx-modal__dialog {
  position: relative; margin: 5vh auto; max-width: 960px; background: #000; border-radius: 12px; overflow: hidden;
}
.mbx-modal__content { padding: 0; }
.mbx-modal__content video { width: 100%; height: auto; display: block; }
.mbx-modal__close {
  position: absolute; top: .5rem; right: .5rem; background: rgba(255,255,255,.15);
  color: #fff; border: 0; border-radius: 8px; padding: .25rem .5rem; cursor: pointer;
}

/* Small screens */
@media (max-width: 782px) {
  .mbx-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mbx-exec-card { position: static; }
}