/* ═══════════════════════════════════════════════════
   SECTION: audit-deliverables — source audit.html #sp-deliverables

   Three groups in a hairline grid: the 2px gap lets the borders read as one
   table rather than three floating cards. The heading block comes from
   service-page.css.

   The tick is the one from the home page's qualifying list — a character, not
   an image, so it takes its colour from a token instead of hardcoding a hex
   the way the source's data-URI did.
═══════════════════════════════════════════════════ */

#sp-deliverables {
  background: var(--c-bg);
  padding: var(--sp-section) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Rounded on the outside only, the way the outcomes row is — and the border
   has to move with the radius. A first attempt kept the border on each card and
   put the radius on the container: overflow then clipped the corner of a card's
   own border, so the outline appeared sliced at both ends. The frame belongs to
   whatever is rounded. Cards keep only the divider between them, and the 2px
   gap goes with the outer borders it was separating. */
.sp-del-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-16);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sp-del-group {
  background: var(--c-bg-3);
  border-right: 1px solid var(--c-border);
  padding: var(--sp-9, 36px) var(--sp-8);
}
.sp-del-group:last-child { border-right: none }

.sp-del-group-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(var(--c-accent-rgb), .08);
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}
.sp-del-group-icon svg { width: 20px; height: 20px }

.sp-del-group-title {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}

.sp-del-group-sub {
  font-size: var(--fs-300);
  color: var(--c-text-3);
  margin-bottom: var(--sp-5);
  line-height: 1.75;
}

.sp-del-list { display: flex; flex-direction: column; gap: 10px }

.sp-del-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-200);
  color: var(--c-text-3);
  line-height: 1.7;
}
/* The same mark the qualifying list on the home page uses: a text tick in a
   tinted square, in the success colour rather than the accent. That retires
   the data-URI this rule used to carry — an SVG cannot read a custom property,
   so its blue was written out as a hex and had to be kept in step by hand.
   A character can just take the token. */
.sp-del-item::before {
  content: '✓';
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 4px;
  display: grid;
  place-items: center;
  background: rgba(var(--c-success-rgb), .1);
  border: 1px solid rgba(var(--c-success-rgb), .25);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-success);
}

/* ── Responsive ── */
/* Two columns, three cards: the third sits alone on a second row, so the
   dividers have to be worked out per position rather than per cell. */
@media (max-width: 1100px) {
  .sp-del-groups { grid-template-columns: 1fr 1fr }
  .sp-del-group { border-right: none; border-bottom: 1px solid var(--c-border) }
  .sp-del-group:nth-child(odd) { border-right: 1px solid var(--c-border) }
  .sp-del-group:last-child { border-right: none; border-bottom: none }
}

@media (max-width: 960px) {
  #sp-deliverables { padding: var(--sp-20) 0 }
}

@media (max-width: 640px) {
  .sp-del-groups { grid-template-columns: 1fr; margin-top: var(--sp-10) }
  .sp-del-group {
    padding: var(--sp-6);
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .sp-del-group:nth-child(odd) { border-right: none }
  .sp-del-group:last-child { border-bottom: none }
}