html { outline: 8px solid red !important; }
body { background: #ff0 !important; }
.site-header { background: #000 !important; }

/* ===============================
   Mabform v2 – Starter Patch
   SaaS-first, Olivero-safe
   =============================== */

/* ---- Design tokens ---- */
:root {
  --mf-max: 1200px;
  --mf-pad: clamp(16px, 4vw, 48px);

  --mf-blue: #066ce3;
  --mf-purple: #7a4587;
  --mf-navy: #142543;

  --mf-bg-soft: #f6f8fb;
}

/* ===============================
   Mabform v2 – Page Wrapper Fix
   =============================== */

.page-wrapper {
    max-width: var(--max-bg-color);
    background: var(--color--white);
    margin: auto;
}

*

/* Root wrapper: allow full-bleed sections */
.page-wrapper {
  overflow-x: hidden;
}

/* Default content width (centered SaaS) */
.page-wrapper .layout-container {
  max-width: var(--mf-max);
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed escape hatch */
.page-wrapper .mf-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}


/* ---- Base layout override ---- */
.layout-container {
  max-width: var(--mf-max);
  padding-left: var(--mf-pad);
  padding-right: var(--mf-pad);
}

/* ---- Hero section ---- */
.mf-hero {
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(6,108,227,.12), transparent 60%),
    radial-gradient(800px 400px at 80% 20%, rgba(122,69,135,.12), transparent 60%),
    #fff;
  padding: clamp(80px, 12vw, 160px) 0;
}

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

.mf-hero p {
  font-size: 1.125rem;
  color: #4a5568;
  max-width: 42rem;
}

/* ---- Section rhythm ---- */
.mf-section {
  padding: clamp(64px, 10vw, 120px) 0;
}

.mf-section--soft {
  background: var(--mf-bg-soft);
}

/* ---- Feature cards ---- */
.mf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.mf-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.mf-card h3 {
  margin-bottom: .5rem;
}

/* ---- CTA ---- */
.mf-cta {
  background: linear-gradient(135deg, var(--mf-blue), var(--mf-purple));
  color: #fff;
  text-align: center;
}

.mf-cta a.button {
  background: #fff;
  color: var(--mf-blue);
  border-radius: 999px;
  padding: 14px 28px;
}

/* ---- Remove "Drupal look" ---- */
.block {
  background: transparent;
}