/* ──────────────────────────────────────────────────────────
   CoZone · Membership landing page
   Editorial layout, layered surfaces, offer-led hierarchy.
   Scoped to .mb-* so service.css / home.css stay untouched.
   ────────────────────────────────────────────────────────── */

:root {
  --mb-gutter:    clamp(20px, 5vw, 72px);
  --mb-section:   clamp(72px, 9vw, 148px);
  --mb-card-r:    18px;
  --mb-shadow-sm: 0 1px 2px rgba(7,32,31,.06), 0 4px 12px rgba(7,32,31,.05);
  --mb-shadow-md: 0 2px 4px rgba(7,32,31,.06), 0 12px 32px rgba(7,32,31,.09);
  --mb-shadow-lg: 0 4px 8px rgba(7,32,31,.08), 0 28px 64px rgba(7,32,31,.16);
}

/* The site-wide --sub (0.56 alpha) measures 4.22:1 on cream — under WCAG AA
   for normal text. Darkened for this page only; the global token is untouched
   so home/contact/service pages keep their existing look. */
body { --sub: rgba(23,19,16,0.70); }

/* ── Skip link ───────────────────────────────────────────── */
.mb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 700;
}
.mb-skip:focus { left: 0; }

/* ── Nav ─────────────────────────────────────────────────── */
.mb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--mb-gutter);
  transition: background var(--dur-mid), backdrop-filter var(--dur-mid),
              border-color var(--dur-mid);
  border-bottom: 1px solid transparent;
}
.mb-nav img { height: 30px; width: auto; }
.mb-nav .mb-logo-light { display: block; }
.mb-nav .mb-logo-dark  { display: none; }

.mb-nav.solid {
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(23,19,16,.10);
}
.mb-nav.solid .mb-logo-light { display: none; }
.mb-nav.solid .mb-logo-dark  { display: block; }

.mb-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid);
}
.mb-nav-cta:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-md); }
.mb-nav-cta:active { transform: translateY(0); }

/* ── Hero ────────────────────────────────────────────────── */
.mb-hero {
  position: relative;
  background: var(--dark-teal);
  color: var(--ink-inv);
  padding: clamp(120px, 15vw, 190px) var(--mb-gutter) clamp(150px, 17vw, 240px);
  overflow: hidden;
  isolation: isolate;
}

/* Photographic ground, dimmed so type always wins contrast */
.mb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hero-space.jpg") center 38% / cover no-repeat;
  opacity: .22;
}
/* Directional scrim: darkest where the headline sits */
.mb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, var(--dark-teal) 30%, rgba(7,32,31,.72) 62%, rgba(7,32,31,.42) 100%),
    linear-gradient(to bottom, rgba(7,32,31,.5), transparent 30%, var(--dark-teal));
}

.mb-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.mb-hero-eyebrow { color: var(--accent-dark); display: block; margin-bottom: 22px; }

.mb-headline {
  font-size: clamp(2.9rem, 7.2vw, 6.1rem);
  color: var(--ink-inv);
  text-wrap: balance;
}
.mb-headline em { color: var(--accent-dark); }

.mb-hero-sub {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.62;
  color: var(--sub-dark);
}

.mb-hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 16px);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid), background var(--dur-mid),
              border-color var(--dur-mid), color var(--dur-mid);
}
.mb-btn-primary { background: var(--accent); color: #fff; }
.mb-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(14,158,153,.34);
  background: var(--accent-dark);
  color: var(--dark-teal);
}
.mb-btn-ghost {
  background: transparent;
  color: var(--ink-inv);
  border-color: rgba(233,243,242,.34);
}
.mb-btn-ghost:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.mb-btn:active { transform: translateY(0); }
.mb-btn-lg { padding: 18px 34px; font-size: clamp(16px, 1.2vw, 17px); }

.mb-hero-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--sub-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hero side panel: the offer, stated as a ladder */
.mb-hero-aside {
  border: 1px solid rgba(233,243,242,.18);
  background: rgba(233,243,242,.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--mb-card-r);
  padding: clamp(22px, 2.4vw, 30px);
}
.mb-hero-aside h2 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 700;
  margin-bottom: 20px;
}
.mb-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mb-ladder li { display: grid; gap: 8px; }
.mb-ladder-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.mb-ladder-name { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.mb-ladder-val { color: var(--ink-inv); font-weight: 600; }
.mb-ladder-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(233,243,242,.13);
  overflow: hidden;
}
.mb-ladder-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.in .mb-ladder-bar span, .mb-ladder-bar.in span { transform: scaleX(1); }
.mb-ladder-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(233,243,242,.14);
  font-size: 12.5px;
  color: var(--sub-dark);
  line-height: 1.5;
}

/* ── Trust strip ─────────────────────────────────────────── */
.mb-trust {
  background: var(--stage-dark);
  color: var(--ink-inv);
  padding: 20px var(--mb-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 4vw, 54px);
  font-size: 14px;
}
.mb-trust-item { display: inline-flex; align-items: center; gap: 10px; }
.mb-trust-item svg { width: 17px; height: 17px; color: var(--accent-dark); flex: none; }

/* ── Section scaffolding ─────────────────────────────────── */
.mb-section { padding: var(--mb-section) var(--mb-gutter); }
.mb-inner { max-width: 1180px; margin: 0 auto; }

.mb-section-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 66px); }
.mb-section-head.center { margin-inline: auto; text-align: center; }
.mb-section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  margin-top: 16px;
  text-wrap: balance;
}
.mb-section-lede {
  margin-top: 18px;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.65;
  color: var(--sub);
  max-width: 56ch;
}
.mb-section-head.center .mb-section-lede { margin-inline: auto; }

/* ── Pricing ─────────────────────────────────────────────── */
.mb-pricing { background: var(--cream); padding-top: 0; }

/* Cards ride up over the hero: layering, not a flat stack */
.mb-pricing-lift { margin-top: clamp(-190px, -13vw, -110px); position: relative; z-index: 5; }

.mb-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

.mb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--mb-card-r);
  padding: clamp(26px, 2.6vw, 36px);
  box-shadow: var(--mb-shadow-sm);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid), border-color var(--dur-mid);
}
.mb-plan:hover { transform: translateY(-4px); box-shadow: var(--mb-shadow-md); }

/* The recommended tier earns scale, elevation and colour */
.mb-plan.featured {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: var(--mb-shadow-lg);
  padding-top: clamp(38px, 3.4vw, 48px);
}
@media (min-width: 900px) {
  .mb-plan.featured { transform: translateY(-18px) scale(1.022); }
  .mb-plan.featured:hover { transform: translateY(-24px) scale(1.022); }
}

.mb-plan-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(14,158,153,.32);
}

.mb-plan-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent);
}
.mb-plan-for { margin-top: 10px; font-size: 14px; color: var(--sub); line-height: 1.5; min-height: 42px; }

.mb-plan-price { margin-top: 22px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mb-plan-amount {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -.035em;
  font-size: clamp(2.7rem, 4.6vw, 3.7rem);
  line-height: .9;
}
.mb-plan-cur { font-weight: 700; font-size: 1rem; color: var(--sub); }
.mb-plan-per { width: 100%; font-size: 14px; color: var(--sub); margin-top: 8px; }

/* The differentiator, given its own surface */
.mb-plan-hero-feature {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(14,158,153,.07);
  border: 1px solid rgba(14,158,153,.18);
}
.mb-plan.featured .mb-plan-hero-feature { background: rgba(14,158,153,.12); }
.mb-plan-hf-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mb-plan-hf-value {
  margin-top: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.15rem, 1.75vw, 1.45rem);
  line-height: 1.15;
}
.mb-plan-hf-note { margin-top: 6px; font-size: 12.5px; color: var(--sub); }

.mb-plan-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; flex: 1; }
.mb-plan-list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.mb-plan-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

.mb-plan-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background var(--dur-mid), color var(--dur-mid),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid);
}
.mb-plan-cta:hover { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--mb-shadow-md); }
.mb-plan-cta.solid { background: var(--accent); color: #fff; }
.mb-plan-cta.solid:hover { background: var(--accent-dark); color: var(--dark-teal); }
.mb-plan-cta:active { transform: translateY(0); }

.mb-price-foot {
  margin-top: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.6;
}

/* ── Included in every membership ────────────────────────── */
.mb-included { background: var(--stage); }
.mb-incl-grid {
  display: grid;
  /* 9 amenities: only 3 and 9 columns divide evenly, so step between those
     two rather than using auto-fit, which strands a ragged final row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(23,19,16,.13);
  border: 1px solid rgba(23,19,16,.13);
  border-radius: var(--mb-card-r);
  overflow: hidden;
}
.mb-incl-item {
  background: var(--stage);
  padding: clamp(22px, 2.4vw, 30px) 18px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  transition: background var(--dur-mid);
}
.mb-incl-item:hover { background: #EDE6DA; }
.mb-incl-item svg { width: 27px; height: 27px; color: var(--accent); }
.mb-incl-item span { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.mb-incl-item small { font-size: 11.5px; color: var(--sub); font-weight: 500; }

@media (min-width: 1080px) {
  .mb-incl-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .mb-incl-item { padding-inline: 10px; }
  .mb-incl-item span { font-size: 12.5px; }
}

/* ── Meeting-room comparison ─────────────────────────────── */
.mb-rooms { background: var(--cream); }
.mb-rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.mb-rooms-media {
  position: relative;
  border-radius: var(--mb-card-r);
  overflow: hidden;
  box-shadow: var(--mb-shadow-md);
  aspect-ratio: 4 / 3;
}
.mb-rooms-media img { width: 100%; height: 100%; object-fit: cover; }
.mb-rooms-tag {
  position: absolute;
  left: 18px; bottom: 18px;
  background: rgba(7,32,31,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-inv);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--r-pill);
}

.mb-compare { display: grid; gap: 14px; }
.mb-compare-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  transition: border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.mb-compare-row:hover { border-color: rgba(14,158,153,.42); box-shadow: var(--mb-shadow-sm); }
.mb-compare-row.is-best { border-color: var(--accent); background: rgba(14,158,153,.05); }
.mb-compare-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mb-compare-bar { height: 10px; border-radius: 99px; background: rgba(23,19,16,.09); overflow: hidden; }
.mb-compare-bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s var(--ease-out);
}
.in .mb-compare-bar span { transform: scaleX(1); }
.mb-compare-val { font-size: 14px; font-weight: 700; white-space: nowrap; }
.mb-compare-val small { display: block; font-weight: 500; font-size: 11.5px; color: var(--sub); }
.mb-rooms-note { margin-top: 20px; font-size: 12.5px; color: var(--sub); line-height: 1.6; }

/* ── Testimonials ────────────────────────────────────────── */
.mb-testi { background: var(--stage); }
.mb-testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.mb-testi-card {
  background: var(--cream);
  border-radius: var(--mb-card-r);
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: var(--mb-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.mb-testi-card:hover { transform: translateY(-4px); box-shadow: var(--mb-shadow-md); }
.mb-testi-quote { font-size: 15.5px; line-height: 1.65; flex: 1; }
.mb-testi-quote::before { content: "\201C"; color: var(--accent); font-weight: 700; }
.mb-testi-quote::after  { content: "\201D"; color: var(--accent); font-weight: 700; }
.mb-testi-attr { display: flex; align-items: center; gap: 13px; }
.mb-testi-attr img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid rgba(14,158,153,.24);
}
.mb-testi-name { display: block; font-weight: 700; font-size: 14.5px; }
.mb-testi-role { display: block; font-size: 12.5px; color: var(--sub); }

/* ── Partner wall ────────────────────────────────────────── */
.mb-partners { background: var(--cream); padding-block: clamp(52px, 6vw, 86px); }
.mb-partners-label {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 34px;
}
.mb-partners-grid {
  display: grid;
  /* 8 logos: 4 or 8 per row, never auto-fit — 7+1 strands an orphan */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  justify-items: center;
}
.mb-partners-grid img {
  max-height: 40px;
  width: auto;
  /* .48 rendered the lighter marks almost invisible against cream */
  opacity: .66;
  filter: grayscale(1) contrast(1.15);
  transition: opacity var(--dur-mid), filter var(--dur-mid);
}
.mb-partners-grid img:hover { opacity: 1; filter: grayscale(0); }

@media (min-width: 1080px) {
  .mb-partners-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.mb-faq { background: var(--stage); }
.mb-faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.mb-faq-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.mb-faq-item[open] { border-color: rgba(14,158,153,.42); box-shadow: var(--mb-shadow-sm); }
.mb-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-weight: 700;
  font-size: 15.5px;
  transition: color var(--dur-mid);
}
.mb-faq-item summary::-webkit-details-marker { display: none; }
.mb-faq-item summary:hover { color: var(--accent); }
.mb-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mb-faq-icon { flex: none; width: 15px; height: 15px; color: var(--accent); transition: transform var(--dur-mid) var(--ease-out); }
.mb-faq-item[open] .mb-faq-icon { transform: rotate(45deg); }
.mb-faq-body { padding: 0 24px 22px; font-size: 15px; line-height: 1.68; color: var(--sub); }

/* ── Conversion block ────────────────────────────────────── */
.mb-convert { background: var(--dark-teal); color: var(--ink-inv); }
.mb-convert .mb-section-title { color: var(--ink-inv); }
.mb-convert .mb-section-lede  { color: var(--sub-dark); }
.mb-convert-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: start;
}
.mb-convert-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.mb-convert-points li { display: flex; gap: 13px; font-size: 15px; line-height: 1.55; color: var(--ink-inv); }
.mb-convert-points svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--accent-dark); }

.mb-form-card {
  background: rgba(233,243,242,.05);
  border: 1px solid rgba(233,243,242,.17);
  border-radius: var(--mb-card-r);
  padding: clamp(26px, 3vw, 40px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mb-form { display: grid; gap: 20px; }
.mb-field { display: grid; gap: 9px; }
.mb-label { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-inv); }
.mb-input, .mb-select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(233,243,242,.22);
  background: rgba(7,32,31,.42);
  color: var(--ink-inv);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--dur-mid), background var(--dur-mid), box-shadow var(--dur-mid);
}
.mb-input::placeholder { color: rgba(233,243,242,.4); }
.mb-input:focus, .mb-select:focus {
  outline: none;
  border-color: var(--accent-dark);
  background: rgba(7,32,31,.66);
  box-shadow: 0 0 0 3px rgba(42,204,195,.18);
}
.mb-select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232ACCC3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.mb-select option { background: var(--dark-teal); color: var(--ink-inv); }

.mb-submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  border: none;
  font-family: var(--font-body);
}
.mb-form-fine { font-size: 12.5px; color: var(--sub-dark); line-height: 1.55; text-align: center; }
.mb-form-fine a { color: var(--accent-dark); text-decoration: underline; }

.mb-form-success {
  display: none;
  padding: 30px 26px;
  border-radius: var(--mb-card-r);
  background: rgba(42,204,195,.1);
  border: 1px solid rgba(42,204,195,.4);
  color: var(--ink-inv);
  font-size: 15.5px;
  line-height: 1.6;
  text-align: center;
}

/* ── Footer ──────────────────────────────────────────────── */
.mb-foot {
  background: var(--dark-teal);
  color: var(--sub-dark);
  border-top: 1px solid rgba(233,243,242,.12);
  padding: 42px var(--mb-gutter) 54px;
  text-align: center;
}
.mb-foot img { height: 27px; width: auto; margin: 0 auto 18px; }
.mb-foot p { font-size: 13.5px; line-height: 1.7; }
.mb-foot a { color: var(--ink-inv); }
.mb-foot a:hover { color: var(--accent-dark); }
.mb-foot-tag {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mb-foot-tag em { color: var(--accent-dark); }

/* ── Sticky mobile CTA ───────────────────────────────────── */
.mb-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(23,19,16,.12);
  transform: translateY(110%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.mb-sticky.show { transform: none; }
.mb-sticky-price { font-size: 13px; line-height: 1.3; }
.mb-sticky-price strong { display: block; font-size: 15px; }
.mb-sticky .mb-btn { padding: 13px 22px; font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .mb-hero-inner  { grid-template-columns: 1fr; align-items: start; }
  .mb-hero-aside  { max-width: 560px; }
  .mb-rooms-grid,
  .mb-convert-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .mb-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .mb-pricing-lift { margin-top: clamp(-120px, -14vw, -80px); }
  /* Recommended tier leads on mobile, where order is hierarchy */
  .mb-plan.featured { order: -1; }
}

@media (max-width: 720px) {
  .mb-sticky { display: flex; }
  body { padding-bottom: 74px; }
  .mb-compare-row { grid-template-columns: 78px minmax(0, 1fr); row-gap: 10px; }
  .mb-compare-val { grid-column: 2; text-align: right; }
  .mb-trust { gap: 14px 24px; font-size: 13px; }
}

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mb-ladder-bar span,
  .mb-compare-bar span { transform: scaleX(1) !important; transition: none !important; }
  .mb-plan, .mb-testi-card, .mb-btn, .mb-plan-cta, .mb-nav-cta, .mb-sticky {
    transition: none !important;
  }
  .mb-plan:hover, .mb-testi-card:hover, .mb-btn:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Focus visibility, applied consistently ──────────────── */
.mb-btn:focus-visible,
.mb-plan-cta:focus-visible,
.mb-nav-cta:focus-visible,
.mb-input:focus-visible,
.mb-select:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
}