/* ============================================================
   Deliverables widget — phase strip + commitment checklist
   ============================================================ */

/* ---- Phase strip ----
   The track count comes from the real number of phases via --hs-phase-cols,
   written by the widget. A hardcoded repeat(3,…) would leave a visible empty
   cell the moment someone used two phases — and these cards have a background,
   so an empty grid area paints a solid slab rather than nothing. */
.hs-deliver__phases{
  display:grid;
  grid-template-columns:repeat(var(--hs-phase-cols,3),minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.hs-deliver__phase{
  padding:22px;
  background:var(--hs-surface);
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:14px;
}
.hs-deliver__phase-n{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hs-deliver__phase-t{font-size:18px;font-weight:800;margin:8px 0 12px}
.hs-deliver__phase-list{
  list-style:none;
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  font-size:14px;
}
.hs-deliver__phase-list li{position:relative;padding-left:16px}
.hs-deliver__phase-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;height:6px;
  border-radius:999px;
  background:var(--hs-w-accent,var(--hs-accent));
}

/* ---- Checklist ---- */
.hs-deliver__list-h{
  font-size:clamp(20px,3vw,26px);
  font-weight:800;
  margin:48px 0 18px;
}
.hs-deliver__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.hs-deliver__row{
  position:relative;
  padding:20px 22px 20px 56px;
  background:var(--hs-w-surface,var(--hs-card));
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:14px;
  transition:border-color var(--hs-t);
}
.hs-deliver__row:hover{border-color:var(--hs-w-accent,var(--hs-accent))}
/* A tick drawn in CSS rather than an <i> per row: this is decoration repeating
   the semantics of a checklist, so it does not belong in the markup where a
   screen reader would read seventeen identical icons. */
.hs-deliver__row::before{
  content:"";
  position:absolute;
  left:22px;
  top:24px;
  width:12px;
  height:7px;
  border-left:2px solid var(--hs-w-accent,var(--hs-accent));
  border-bottom:2px solid var(--hs-w-accent,var(--hs-accent));
  transform:rotate(-45deg);
}
.hs-deliver__row b{display:block;font-size:15.5px;font-weight:700;margin-bottom:4px}
.hs-deliver__row span{display:block;font-size:14px;line-height:1.6}

@media(max-width:900px){
  .hs-deliver__phases,
  .hs-deliver__list{grid-template-columns:minmax(0,1fr)}
  .hs-deliver__list-h{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){
  .hs-deliver__row{transition:none}
}