/* MyEstateAngel - Post Injector box.

   Loaded on its own, not from mea.css, because that file sits behind the motion switch and this
   box must keep working with motion off.

   IMPORTANT: spacing uses margin-block only, never the `margin` shorthand. The box is a direct
   child of .mea-article, which centres its children with margin-inline:auto; the shorthand would
   reset that and strand the box on the left edge. */

.mea-inject {
  container-type: inline-size;
  box-sizing: border-box;
  margin-block: 34px;
  font-family: "Public Sans", system-ui, sans-serif;
  color: #4E5F70;
}
.mea-inject * { box-sizing: border-box }
.mea-inject p { margin-block: 0 10px; font-size: 16px; line-height: 1.65 }
.mea-inject p:last-child { margin-block-end: 0 }
.mea-inject a { color: #127A75; font-weight: 600 }

/* --- shared type ------------------------------------------------------------------ */
.mea-inject .mea-inject-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6B7B; margin-block-end: 6px;
}
.mea-inject .mea-inject-title {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 22px; font-weight: 400; line-height: 1.25;
  color: #122F4B; margin-block-end: 8px;
}

/* --- button ----------------------------------------------------------------------- */
.mea-inject .mea-inject-action { margin-block-start: 16px }
.mea-inject .mea-inject-btn {
  display: inline-block; background: #127A75; color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 12px;
  transition: background .18s ease;
}
.mea-inject .mea-inject-btn:hover,
.mea-inject .mea-inject-btn:focus { background: #0F625E; color: #fff }
.mea-inject .mea-inject-btn:focus-visible { outline: 3px solid #7BD63F; outline-offset: 2px }

/* --- note: slim mint bar ---------------------------------------------------------- */
.mea-inject-note {
  background: #EFF6F5; border-inline-start: 3px solid #189A94;
  border-radius: 0 12px 12px 0; padding: 18px 22px;
}

/* --- card --------------------------------------------------------------------------- */
.mea-inject-card {
  background: #fff; border: 1px solid #E4EBEF; border-radius: 18px; padding: 26px 28px;
  box-shadow: 0 18px 40px -34px rgba(18, 47, 75, .5);
}

/* --- checklist ---------------------------------------------------------------------- */
.mea-inject-checklist {
  background: #F6F9FA; border: 1px solid #E4EBEF; border-radius: 18px; padding: 26px 28px;
}
.mea-inject-checklist ul {
  list-style: none; margin-block: 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.mea-inject-checklist li {
  position: relative; padding-inline-start: 30px; font-size: 15px; line-height: 1.55;
}
.mea-inject-checklist li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 1px;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: #E7F5F3; color: #127A75;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* --- size-aware, not viewport-aware -------------------------------------------------
   The box can sit in a 720px article column or a much narrower one. Container queries let it
   answer to the space it actually has. The stacked layout above is the safe default, so a
   browser without container query support still gets a usable box. */
@container (min-width: 460px) {
  .mea-inject-card,
  .mea-inject-checklist { padding: 30px 32px }
  .mea-inject-card .mea-inject-title,
  .mea-inject-checklist .mea-inject-title { font-size: 24px }
}

@media (max-width: 640px) {
  .mea-inject { margin-block: 26px }
  .mea-inject-note { padding: 16px 18px }
  .mea-inject-card,
  .mea-inject-checklist { padding: 22px 20px }
  .mea-inject .mea-inject-btn { display: block; text-align: center }
}

@media (prefers-reduced-motion: reduce) {
  .mea-inject .mea-inject-btn { transition: none }
}