/* ============================================================
   SEGMENTS: who the platform is for, one column per segment
   ============================================================ */
/* The top rule and the two column rails are drawn on the table, each fading out at its ends */
.segments {
  --rail-fade-v: linear-gradient(to bottom, transparent, var(--color-connector) 16%, var(--color-connector) 84%, transparent);
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  background-image:
    linear-gradient(to right, transparent, var(--color-prominent) 14%, var(--color-prominent) 86%, transparent),
    var(--rail-fade-v),
    var(--rail-fade-v);
  background-repeat: no-repeat;
  background-size: 100% 2px, 1px calc(100% - var(--space-4)), 1px calc(100% - var(--space-4));
  background-position: top left, 33.333% var(--space-4), 66.666% var(--space-4);
}

.segments th {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  padding: var(--space-5) var(--space-8) var(--space-6) 0;
  vertical-align: bottom;
}

.segments td {
  padding: 0 var(--space-8) 0 0;
  vertical-align: top;
}

.segments th + th,
.segments td + td {
  padding-left: var(--space-8);
}

.segments-needs {
  display: grid;
  gap: var(--space-4);
}

.segments-needs li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  max-width: 32ch;
}

/* Below 768px each heading is reordered above its own list */
@media (max-width: 767.98px) {
  .segments {
    display: grid;
    background-image: linear-gradient(to right, transparent, var(--color-prominent) 14%, var(--color-prominent) 86%, transparent);
    background-size: 100% 2px;
    background-position: top left;
  }

  .segments th:nth-child(2),
  .segments th:nth-child(3) {
    background-image: linear-gradient(to right, transparent, var(--color-connector) 20%, var(--color-connector) 80%, transparent);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
  }

  .segments thead,
  .segments tbody,
  .segments tr {
    display: contents;
  }

  .segments th,
  .segments td,
  .segments th + th,
  .segments td + td {
    display: block;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }

  .segments th {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .segments td {
    padding-bottom: var(--space-10);
  }

  .segments td:last-child {
    padding-bottom: 0;
  }

  .segments th {
    padding-top: var(--space-6);
  }

  .segments th:nth-child(1) { order: 1; }
  .segments td:nth-child(1) { order: 2; }
  .segments th:nth-child(2) { order: 3; }
  .segments td:nth-child(2) { order: 4; }
  .segments th:nth-child(3) { order: 5; }
  .segments td:nth-child(3) { order: 6; }

  .segments-needs li {
    max-width: none;
  }
}