/* Structured marketing blocks (P234). Ported from the page 60 reference; tokens come from theme.css. */
:root {
  --mb-primary-text: #8A5F0D;
  --mb-card-border: #E2E7EB;
}

.mb-block {
  font-family: var(--ff-font-body);
  color: var(--ff-neutral-700);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mb-block *,
.mb-block *::before,
.mb-block *::after { box-sizing: border-box; }
.mb-block h1,
.mb-block h2,
.mb-block h3 {
  font-family: var(--ff-font-display);
  color: var(--ff-neutral-900);
  line-height: 1.12;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mb-block p { margin: 0; }
.mb-block em { font-style: italic; }
.mb-block a { color: var(--ff-secondary); text-decoration: none; }
.mb-block a:hover { color: var(--ff-secondary-light); }
.mb-block :focus-visible {
  outline: 3px solid var(--ff-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ff-dark);
  border-radius: 4px;
}

.ff-feature-page.ff-page-shell > .mb-block:first-child { margin-top: -2rem; }

.mb-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mb-wrap--narrow { max-width: 760px; }
.mb-eyebrow {
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-primary-text);
  margin: 0 0 14px;
}

/* Buttons */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration: none;
}
.mb-block .mb-btn--primary { background: var(--ff-primary); color: var(--ff-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.mb-block .mb-btn--primary:hover { background: var(--ff-primary-hover); color: var(--ff-dark); }
.mb-block .mb-btn--ghost { background: transparent; color: var(--ff-white); border-color: rgba(255, 255, 255, 0.35); }
.mb-block .mb-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--ff-white); }
.mb-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.mb-block .mb-textlink { color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: 0.95rem; }
.mb-block .mb-textlink:hover { color: var(--ff-white); }

/* Hero */
.mb-hero {
  position: relative;
  background: linear-gradient(155deg, var(--ff-secondary) 0%, var(--ff-dark) 78%);
  color: var(--ff-white);
  overflow: hidden;
}
.mb-hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.mb-hero > .mb-wrap { position: relative; padding-top: 84px; padding-bottom: 84px; }
.mb-hero--split > .mb-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.mb-hero--centred > .mb-wrap { text-align: center; }
.mb-hero--centred .mb-cta-row { justify-content: center; }
.mb-block.mb-hero h1 { color: var(--ff-white); font-size: 3.05rem; font-weight: 700; }
.mb-block.mb-hero h1 em { color: var(--ff-primary-light); }
.mb-hero__sub { margin-top: 22px; font-size: 1.18rem; color: rgba(255, 255, 255, 0.82); max-width: 32em; }
.mb-hero--centred .mb-hero__sub { margin-left: auto; margin-right: auto; }
.mb-hero .mb-eyebrow { color: var(--ff-primary-light); }
.mb-hero--centred .mb-hero__media { margin-top: 44px; }

/* Sections */
.mb-section { padding: 78px 0; }
.mb-section--tint { background: var(--ff-neutral-100); }
.mb-block.mb-section h2 { font-size: 2.1rem; }
.mb-section__lead { font-size: 1.18rem; color: var(--ff-neutral-700); max-width: 42em; margin-top: 18px; }
.mb-section:has(.mb-related) .mb-wrap { text-align: center; }
.mb-section:has(.mb-related) .mb-related { text-align: left; }
.mb-section__content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; }
.mb-section__content > * { grid-column: 1 / -1; }
.mb-section__content > .mb-feat--text { grid-column: auto; }

/* Callouts */
.mb-callout { background: var(--ff-primary-subtle); border: 1px solid var(--mb-card-border); border-radius: 12px; padding: 30px 34px; margin-top: 26px; }
.mb-callout__text { font-size: 1.22rem; color: var(--ff-neutral-900); line-height: 1.5; }
.mb-callout--answer { background: var(--ff-secondary-subtle); border: 0; border-radius: 14px; padding: 40px 44px; text-align: center; }
.mb-callout--answer .mb-eyebrow { text-align: center; text-transform: none; letter-spacing: 0.02em; font-size: 0.92rem; }
.mb-callout--answer .mb-callout__text {
  font-family: var(--ff-font-display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.25;
  max-width: 26em;
  margin: 0 auto;
}

/* Beats (bulleted list directly inside a section) */
.mb-section__content > ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.mb-section__content > ul li { position: relative; padding-left: 34px; font-size: 1.08rem; color: var(--ff-neutral-700); max-width: 72ch; }
.mb-section__content > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--ff-primary);
  transform: rotate(45deg);
}

/* Feature rows */
.mb-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 46px 0; }
.mb-feat + .mb-feat { border-top: 1px solid var(--ff-neutral-300); }
.mb-feat--text { grid-template-columns: 1fr; }
.mb-feat--reverse .mb-feat__media { order: -1; }
.mb-feat__num { font-family: var(--ff-font-display); font-weight: 700; font-size: 1rem; color: var(--mb-primary-text); letter-spacing: 0.04em; }
.mb-block .mb-feat h3 { font-size: 1.55rem; margin-top: 10px; }
.mb-feat__text p { margin-top: 14px; font-size: 1.06rem; }
.mb-feat__text .mb-eyebrow { margin-top: 10px; margin-bottom: 0; }
.mb-feat__media img { max-width: 100%; height: auto; border-radius: 12px; }

/* Stats band */
.mb-stats { background: var(--ff-secondary); color: var(--ff-white); }
.mb-stats > .mb-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 30px; padding-top: 56px; padding-bottom: 56px; text-align: center; }
.mb-stats__figure { font-family: var(--ff-font-display); font-weight: 700; font-size: 2.6rem; color: var(--ff-primary-light); line-height: 1; }
.mb-stats__label { margin-top: 12px; color: rgba(255, 255, 255, 0.85); font-size: 1rem; }

/* FAQ */
.mb-faq { display: grid; gap: 18px; margin-top: 34px; }
.mb-faq__item { background: var(--ff-white); border: 1px solid var(--ff-neutral-300); border-radius: 12px; padding: 24px 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.mb-faq__q { font-family: var(--ff-font-display); font-weight: 600; font-size: 1.18rem; color: var(--ff-neutral-900); margin: 0; }
.mb-faq__a { margin-top: 12px; font-size: 1.02rem; color: var(--ff-neutral-700); }

/* Steps */
.mb-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; counter-reset: mb-step; }
.mb-steps__item { position: relative; background: var(--ff-white); border: 1px solid var(--ff-neutral-300); border-radius: 12px; padding: 24px 26px; counter-increment: mb-step; }
.mb-steps__item::before { content: counter(mb-step); display: block; font-family: var(--ff-font-display); font-weight: 700; color: var(--mb-primary-text); margin-bottom: 8px; }
.mb-steps__item--highlight { border-color: var(--ff-primary); background: var(--ff-primary-subtle); }
.mb-steps__title { font-family: var(--ff-font-display); font-weight: 600; font-size: 1.15rem; color: var(--ff-neutral-900); }
.mb-steps__body { margin-top: 10px; font-size: 0.98rem; }
.mb-steps__meta { margin-top: 10px; font-size: 0.85rem; color: var(--ff-neutral-500); }

/* Related pages */
.mb-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.mb-related__card { display: block; background: var(--ff-white); border: 1px solid var(--ff-neutral-300); border-radius: 12px; padding: 24px 26px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: 0.2s ease; }
.mb-related__card:hover { border-color: var(--ff-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.mb-related__label { font-family: var(--ff-font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-primary-text); }
.mb-block .mb-related__card h3 { font-size: 1.2rem; margin-top: 10px; color: var(--ff-neutral-900); }
.mb-related__card p { margin-top: 10px; font-size: 0.98rem; color: var(--ff-neutral-700); }
.mb-related__more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.92rem; color: var(--ff-secondary); }

/* Comparison pages */
.mb-comparison-cards { margin-top: 0; padding-bottom: 78px; }
.mb-block.mb-comparison-sources { padding: 48px 0; border-top: 1px solid var(--ff-neutral-300); }
.mb-block.mb-comparison-sources h2 { font-size: 1.3rem; }
.mb-sources { margin: 16px 0 0; padding-left: 1.2em; font-size: 0.95rem; }
.mb-sources li + li { margin-top: 8px; }
.mb-sources__checked { color: var(--ff-neutral-500); font-size: 0.85rem; }
.mb-comparison-verified { margin-top: 24px; font-size: 0.9rem; color: var(--ff-neutral-500); }

/* CTA band */
.mb-cta { background: linear-gradient(155deg, var(--ff-secondary) 0%, var(--ff-dark) 82%); color: var(--ff-white); text-align: center; }
.mb-cta > .mb-wrap { padding-top: 74px; padding-bottom: 74px; }
.mb-block.mb-cta h2 { color: var(--ff-white); font-size: 2.4rem; }
.mb-block.mb-cta h2 em { color: var(--ff-primary-light); }
.mb-cta__body { margin: 18px auto 0; max-width: 40em; color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; }
.mb-cta .mb-cta-row { justify-content: center; }
.mb-cta__fine { margin-top: 18px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }

/* Facsimile */
.mb-facsimile { max-width: 100%; overflow-x: auto; }

/* Lead magnet form. The capture result page reuses the card for its success and error states. */
.mb-lm { background: var(--ff-neutral-100); padding: 64px 0; }
.mb-lm__card {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 44px;
  background: var(--ff-white);
  border: 1px solid var(--ff-neutral-300);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mb-lm__card--split {
  max-width: 1000px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
}
.mb-lm__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  background: var(--ff-secondary-subtle);
  border-right: 1px solid var(--ff-neutral-300);
}
.mb-lm__img {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  border: 1px solid var(--ff-neutral-300);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mb-lm__card--split .mb-lm__text { padding: 48px; align-self: center; }
.mb-block.mb-lm h1,
.mb-block.mb-lm h2 { font-size: 1.9rem; }
.mb-lm__body { margin-top: 14px; font-size: 1.06rem; max-width: 40em; }
.mb-lm__form { margin-top: 28px; container-type: inline-size; }
.mb-lm__label { display: block; margin-bottom: 8px; font-size: 0.82rem; font-weight: 600; color: var(--ff-neutral-900); }
.mb-lm__row { display: flex; flex-direction: column; gap: 12px; }
.mb-lm__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--ff-font-body);
  font-size: 0.95rem;
  color: var(--ff-neutral-900);
  background: var(--ff-white);
  border: 1.5px solid var(--ff-neutral-300);
  border-radius: 8px;
  scroll-margin-top: 180px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mb-lm__input::placeholder { color: var(--ff-neutral-500); }
.mb-block .mb-lm__input:focus,
.mb-block .mb-lm__input:focus-visible {
  outline: none;
  border-color: var(--ff-primary);
  box-shadow: 0 0 0 3px var(--ff-primary-subtle);
}
.mb-lm__input[aria-invalid="true"] { border-color: var(--ff-danger); }
.mb-lm__submit { white-space: nowrap; }
@container (min-width: 460px) {
  .mb-lm__row { flex-direction: row; }
  .mb-lm__input { flex: 1; }
  .mb-lm__row .mb-lm__submit { flex: none; width: auto; }
}
.mb-lm .alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px 16px;
  border-style: solid;
  font-size: 0.95rem;
  line-height: 1.5;
}
.mb-lm .alert i { font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
.mb-lm__next { margin-top: 20px; }

@media (max-width: 860px) {
  .mb-lm { padding: 40px 0; }
  .mb-lm__card { padding: 28px 22px; }
  .mb-lm__card--split { grid-template-columns: 1fr; padding: 0; }
  .mb-lm__media { padding: 28px 22px; border-right: 0; border-bottom: 1px solid var(--ff-neutral-300); }
  .mb-lm__img { max-width: 240px; }
  .mb-lm__card--split .mb-lm__text { padding: 28px 22px; }
  .mb-block.mb-lm h1,
  .mb-block.mb-lm h2 { font-size: 1.55rem; }
  .mb-lm__input { scroll-margin-top: 140px; }
}
@media (max-width: 767.98px) {
  .mb-lm__input { font-size: 16px; }
}

@media (max-width: 860px) {
  .mb-block { font-size: 16px; }
  .mb-hero > .mb-wrap { padding-top: 60px; padding-bottom: 60px; }
  .mb-hero--split > .mb-wrap { grid-template-columns: 1fr; gap: 36px; }
  .mb-block.mb-hero h1 { font-size: 2.3rem; }
  .mb-section { padding: 56px 0; }
  .mb-block.mb-section h2 { font-size: 1.7rem; }
  .mb-section__content { grid-template-columns: 1fr; }
  .mb-feat { grid-template-columns: 1fr; gap: 26px; padding: 36px 0; }
  .mb-feat--reverse .mb-feat__media { order: 0; }
  .mb-stats > .mb-wrap { grid-template-columns: 1fr; gap: 34px; }
  .mb-btn { width: 100%; }
  .mb-cta-row { flex-direction: column; align-items: stretch; }
  .mb-textlink { text-align: center; }
  .mb-callout--answer { padding: 30px 24px; }
  .mb-callout--answer .mb-callout__text { font-size: 1.35rem; }
  .mb-callout__text { font-size: 1.08rem; }
  .mb-related { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-block * { transition-duration: 0.01ms !important; }
  .mb-related__card:hover { transform: none; }
}