/* ==========================================================================
   engagement-planner.css
   Planner-specific styles for the Engagement Planner & Before I Do pages.
   ONLY contains styles unique to these pages. Global tokens, header, footer,
   cards, buttons, grids, FAQ and Wendy widget all live in assets/site.css and
   are intentionally NOT duplicated here.
   Brand tokens referenced: --plum #7b214f, --deep #541437, --rose #d93f68,
   --pink #e65b72, --blush #fff5f7, --cream #fffaf7, --ink, --muted, --line.
   ========================================================================== */

/* Stepped planning timeline -------------------------------------------------*/
.ep-steps{display:grid;gap:16px;counter-reset:ep}
.ep-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:22px 22px 22px 70px;box-shadow:var(--soft)}
.ep-step:before{counter-increment:ep;content:counter(ep);position:absolute;left:20px;top:22px;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--plum);color:#fff;font-weight:900;font-size:15px}
.ep-step h3{margin:0 0 6px;color:var(--plum)}
.ep-step p{margin:0;color:var(--muted)}

/* Milestone / checklist tiles ----------------------------------------------*/
.ep-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ep-check{display:flex;gap:12px;align-items:flex-start;background:var(--blush);
  border:1px solid var(--line);border-radius:16px;padding:14px}
.ep-check .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--rose);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}
.ep-check span{color:#4f414a;font-weight:700}

/* Countdown band ------------------------------------------------------------*/
.ep-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.ep-count{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 10px;
  box-shadow:var(--soft)}
.ep-count strong{display:block;font-size:34px;line-height:1;color:var(--deep);letter-spacing:-.04em}
.ep-count span{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-weight:900;margin-top:6px;display:block}

/* Budget split bar ----------------------------------------------------------*/
.ep-bar{display:flex;height:26px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.ep-bar i{display:block;height:100%}
.ep-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.ep-legend span{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  color:var(--muted);font-weight:700}
.ep-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* Pill row of quick links ---------------------------------------------------*/
.ep-pills{display:flex;flex-wrap:wrap;gap:10px}
.ep-pills a{background:var(--blush);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font-weight:850;color:var(--plum)}
.ep-pills a:hover{background:#fff;box-shadow:var(--soft)}

@media(max-width:760px){
  .ep-checklist,.ep-countdown{grid-template-columns:1fr 1fr}
  .ep-step{padding-left:62px}
}