.shc-products { --surface: var(--shc-white); background: var(--surface); }
.shc-products--surface-light-blue { --surface: var(--shc-light-blue); }
.shc-products--surface-panel { --surface: var(--shc-panel); }
/* Figma: a white sheet with 30px top corners, pulled 76px up over the hero photo.
   z-index 3: above the hero's card (2), which the hero root does not isolate, and
   well under the sticky header (50). */
.shc-products { position: relative; z-index: 3; margin-top: calc(var(--overlap, 0px) * -1); }
.shc-products--rounded-top { border-radius: 30px 30px 0 0; }

.shc-products__heading { margin: 0 0 48px; color: var(--shc-blue); }

/* The rail: one 2px rule from the first marker's centre to the end of the last card,
   capped with a small dot, the way Figma draws it (#D4D4D8, 10.67px end dot). */
.shc-products__phases { position: relative; margin: 0; padding: 0 0 24px; list-style: none; }
.shc-products__phases::before,
.shc-products__phases::after { content: ""; position: absolute; background: var(--shc-input-border); pointer-events: none; }
.shc-products__phases::before { top: 16px; bottom: 5px; left: 15px; width: 2px; }
.shc-products__phases::after { bottom: 0; left: 10.5px; width: 11px; height: 11px; border-radius: 50%; }

.shc-products__phase {
  position: relative;
  display: grid;
  /* Figma: cards start 309px in from the container at 1440. The percentage lets the
     label column give way between 1024 and 1200 instead of squeezing the cards. */
  grid-template-columns: min(26%, 309px) minmax(0, 1fr);
  align-items: start;
}
.shc-products__phase + .shc-products__phase { margin-top: var(--phase-gap); }

.shc-products__marker { display: flex; align-items: center; gap: 19px; min-height: 32px; }
/* The asterisk's arms are cut-outs, so the rail would show through them. A disc of the
   section surface behind the 24px glyph (inset 4px in its 32px box) masks it. */
.shc-products__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, var(--surface) 11.5px, transparent 12px);
}
.shc-products__label {
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--shc-navy);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shc-products__label {
    background: linear-gradient(90deg, var(--shc-navy), #005a87);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.shc-products__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shc-products__cards--cols-1 { grid-template-columns: minmax(0, 1fr); }
/* Figma caps full-width copy at 742px so a long line does not run the whole 894px card. */
.shc-products__cards--cols-1 .shc-products__text { max-width: 742px; }

.shc-products__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 26px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 10px;
  background: var(--shc-white);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.01), 0 2px 9px rgb(0 0 0 / 0.01), 0 2px 16px rgb(0 0 0 / 0.016);
}
.shc-products__card--linked {
  transition: box-shadow var(--shc-transition), border-color var(--shc-transition);
}
@media (hover: hover) {
  .shc-products__card--linked:hover {
    border-color: rgb(41 110 183 / 0.28);
    box-shadow: 0 2px 4px rgb(18 49 81 / 0.04), 0 8px 24px rgb(18 49 81 / 0.08);
  }
}

.shc-products__title { font-size: var(--shc-h3); line-height: 28px; font-weight: 700; color: var(--shc-ink); }
.shc-products__text { margin: 14px 0 0; font-size: var(--shc-body); line-height: var(--shc-body-lh); color: var(--shc-charcoal); }

/* Bottom-aligned, so links in a row line up whatever the copy length (Figma: 1236 / 1236). */
.shc-products__link {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  font-size: 17px;
  line-height: 23px;
  font-weight: 700;
  color: var(--shc-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shc-products__link::after { content: ""; position: absolute; inset: -1px; border-radius: 10px; }
.shc-products__link:focus-visible { outline: none; }
.shc-products__link:focus-visible::after { outline: 3px solid var(--shc-blue); outline-offset: 2px; }
.shc-products__card--linked:hover .shc-products__link { color: var(--shc-navy); }

/* Below 1024 the label column would crush the cards, so the label sits above them and
   the cards indent to the label's edge, keeping the rail on the left. */
@media (max-width: 1023px) {
  .shc-products__phase { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .shc-products__cards { padding-left: 51px; }
}
@media (max-width: 767px) {
  .shc-products { margin-top: calc(var(--overlap-m, 0px) * -1); }
  .shc-products--rounded-top { border-radius: 16px 16px 0 0; }
  .shc-products__heading { margin-bottom: 32px; }
  .shc-products__phase + .shc-products__phase { margin-top: var(--phase-gap-m); }
  .shc-products__cards,
  .shc-products__cards--cols-1 { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 44px; }
  .shc-products__marker { gap: 12px; }
  .shc-products__label { font-size: 18px; line-height: 24px; }
  .shc-products__card { padding: 18px 18px 22px; }
  .shc-products__title { font-size: 20px; line-height: 26px; }
  .shc-products__text { margin-top: 10px; font-size: var(--shc-small); line-height: var(--shc-small-lh); }
  .shc-products__link { padding-top: 12px; font-size: var(--shc-small); line-height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .shc-products__card--linked { transition: none; }
}