:root{
  --mlab-bg:#F5FAF6;
  --mlab-surface:#FFFFFF;
  --mlab-ink:#0B0F0D;
  --mlab-ink-soft:#4B5563;
  --mlab-green:#22C55E;
  --mlab-green-dark:#15803D;
  --mlab-green-pale:#DCFCE7;
  --mlab-green-mid:#86EFAC;
  --mlab-line:rgba(11,15,13,0.10);
  --mlab-line-strong:rgba(11,15,13,0.18);
  --mlab-radius:16px;
  --mlab-shadow:0 1px 2px rgba(11,15,13,.05), 0 8px 22px rgba(11,15,13,.07);
}

/* Global reset applied to every MirrorLab component — add class="mlab"
   to any top-level wrapper div to pick this up automatically. */
.mlab, .mlab *{
  box-sizing:border-box;
  font-family:inherit;
}

/* ============================================================
   FEATURE CARDS GRID
============================================================ */
.mlab-features{ max-width:1080px; margin:0 auto; padding:20px 0; }
.mlab-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:720px){ .mlab-grid{ grid-template-columns:1fr; } }
.mlab-card{ background:var(--mlab-surface); border:1px solid var(--mlab-line); border-radius:var(--mlab-radius); padding:26px; box-shadow:var(--mlab-shadow); }
.mlab-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.mlab-icon{ width:44px; height:44px; border-radius:12px; background:var(--mlab-green-pale); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.mlab-tag{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--mlab-green-dark); font-weight:600; margin-bottom:2px; }
.mlab-card h3{ margin:0; font-size:1.15rem; color:var(--mlab-ink); font-weight:700; }
.mlab-card p{ color:var(--mlab-ink-soft); font-size:.94rem; line-height:1.6; margin:0 0 14px; }
.mlab-takeaway{ background:var(--mlab-bg); border-left:3px solid var(--mlab-green); border-radius:0 8px 8px 0; padding:10px 14px; font-size:.86rem; margin:0 0 16px; color:var(--mlab-ink); }
.mlab-takeaway strong{ color:var(--mlab-green-dark); }
.mlab-btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:999px; font-weight:700; font-size:.85rem; background:var(--mlab-ink); color:var(--mlab-green-mid) !important; text-decoration:none !important; border:none; cursor:pointer; }
.mlab-btn:hover{ background:var(--mlab-green-dark); color:#fff !important; }

/* ============================================================
   JUMP NAV + CALLOUT
============================================================ */
.mlab-intro{ max-width:1080px; margin:0 auto; padding:10px 0; }
.mlab-jumpnav{ display:flex; flex-wrap:wrap; gap:12px; background:var(--mlab-surface); border:1px solid var(--mlab-line); border-radius:16px; padding:20px; margin-bottom:20px; }
.mlab-jumpnav a{ display:inline-flex; align-items:center; background:var(--mlab-bg); border:1px solid var(--mlab-line); border-radius:999px; padding:10px 20px; font-size:.92rem; font-weight:700; color:var(--mlab-ink) !important; text-decoration:none !important; transition:border-color .15s, background .15s; }
.mlab-jumpnav a:hover{ border-color:var(--mlab-green); background:var(--mlab-green-pale); }
.mlab-callout{ background:var(--mlab-green-pale); border:1px solid var(--mlab-green-mid); border-radius:16px; padding:22px 26px; margin-bottom:20px; }
.mlab-callout p{ margin:0; font-size:1rem; line-height:1.75; color:var(--mlab-green-dark); }
.mlab-callout strong{ color:var(--mlab-ink); }

/* ============================================================
   FAQ CARDS
============================================================ */
.mlab-faq-wrap{ max-width:1080px; margin:0 auto; padding:10px 0; }
.mlab-faq-eyebrow{ display:inline-block; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mlab-green-dark); background:var(--mlab-green-pale); padding:6px 14px; border-radius:999px; font-weight:700; margin-bottom:14px; }
.mlab-faq-wrap h2{ font-size:1.7rem; font-weight:700; color:var(--mlab-ink); margin:0 0 24px; }
.mlab-faq-card{ background:var(--mlab-surface); border:1px solid var(--mlab-line); border-radius:14px; box-shadow:var(--mlab-shadow); margin-bottom:14px; overflow:hidden; }
.mlab-faq-card summary{ cursor:pointer; list-style:none; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:1rem; color:var(--mlab-ink); }
.mlab-faq-card summary::-webkit-details-marker{ display:none; }
.mlab-faq-card summary::after{ content:'+'; flex-shrink:0; font-size:1.4rem; font-weight:400; color:var(--mlab-green); }
.mlab-faq-card[open] summary::after{ content:'\2013'; }
.mlab-faq-card[open] summary{ border-bottom:1px solid var(--mlab-line); }
.mlab-faq-card p{ margin:0; padding:16px 22px 20px; font-size:.95rem; line-height:1.7; color:var(--mlab-ink-soft); }

/* ============================================================
   CLOSING CTA CARD
============================================================ */
.mlab-cta-card{ background:var(--mlab-ink); border-radius:20px; padding:38px 32px; text-align:center; margin-top:32px; }
.mlab-cta-card h3{ color:#fff; font-size:1.5rem; font-weight:700; margin:0 0 14px; }
.mlab-cta-card p{ color:var(--mlab-green-mid); font-size:1rem; line-height:1.7; margin:0 0 24px; }
.mlab-cta-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:700; font-size:.95rem; background:var(--mlab-green); color:var(--mlab-ink) !important; text-decoration:none !important; }
.mlab-cta-btn:hover{ background:var(--mlab-green-mid); }

/* ============================================================
   Shape CARD
============================================================ */
.mlab-shape-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:20px 0 12px;
}
@media(max-width:820px){ .mlab-shape-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:560px){ .mlab-shape-grid{ grid-template-columns:1fr; } }
 
.mlab-shape-card{
  background:var(--mlab-surface);
  border:1px solid var(--mlab-line);
  border-radius:var(--mlab-radius);
  overflow:hidden;
  box-shadow:var(--mlab-shadow);
  text-align:center;
}
 
/* Image slot — drop an <img> straight inside .mlab-shape-img and
   it will automatically fill this area, cropped to fit. Until
   you add one, it shows a placeholder so you can see the layout. */
.mlab-shape-img{
  aspect-ratio:4/3;
  background:var(--mlab-bg);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--mlab-line);
  overflow:hidden;
}
.mlab-shape-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.mlab-shape-img-placeholder{
  font-size:.8rem; color:var(--mlab-ink-soft); font-weight:600;
  border:1.5px dashed var(--mlab-line-strong); border-radius:10px;
  padding:10px 16px; margin:0 20px;
}
 
.mlab-shape-body{ padding:20px 18px 24px; }
.mlab-shape-card h4{
  margin:0 0 8px; font-size:1.1rem; font-weight:700; color:var(--mlab-ink);
}
.mlab-shape-card p{
  margin:0; font-size:.9rem; line-height:1.6; color:var(--mlab-ink-soft);
}
 
.mlab-shape-cta{ text-align:center; margin-top:24px; }


.mlab-shape-grid{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}