/* ---------------------------------------------------------------------------
   Developers
   ---------------------------------------------------------------------------
   Nearly all of this page is the scene kit. What it needs of its own is four
   small components: the stat row under the hero, the numbered integration
   steps, the platform tag on an SDK card, and the two-column link list.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The three numbers
   ------------------------------------------------------------------------ */

/*
 * A definition list, because that is what it is: a number and what the number
 * counts. Rendering it as divs would cost a screen reader the pairing, which is
 * the only thing that makes "4" mean anything.
 */
.srk-page .srdv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  margin: clamp(26px, 4vh, 44px) 0 0;
  padding: clamp(20px, 3vh, 30px) 0 0;
  border-top: 1px solid var(--srh-hairline);
}

.srk-page .srdv-stat dt {
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.srk-page .srdv-stat dd {
  margin: 0.4em 0 0;
  color: var(--srh-ink);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   The four steps
   ------------------------------------------------------------------------ */

/*
 * An ordered list that keeps its numbers, because the order is the content: a
 * workflow is published before a QR code can be embedded. The marker is drawn
 * rather than left to the browser so it can carry the accent, but it is still a
 * real <ol> underneath and still reads as "1 of 4" to a screen reader.
 */
.srk-page .srdv-steps {
  counter-reset: srdv-step;
  list-style: none;
  margin: clamp(22px, 3vh, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vh, 18px);
  max-width: var(--srk-measure);
}

.srk-page .srdv-steps li {
  counter-increment: srdv-step;
  position: relative;
  padding-left: 46px;
  color: var(--srh-ink);
}

.srk-page .srdv-steps li::before {
  content: counter(srdv-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-surface);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.875rem;
  font-weight: 600;
}

.srk-page .srdv-best {
  margin-top: clamp(18px, 2.6vh, 26px);
  color: var(--srh-ink);
  max-width: var(--srk-measure);
}

.srk-page .srdv-best strong {
  color: var(--srh-pale);
}

/* ---------------------------------------------------------------------------
   The SDK cards
   ------------------------------------------------------------------------ */

/*
 * FOUR CARDS, ONE ROW, once there is width for it.
 *
 * Two rows of two put this scene 145px over its band, which on a page whose
 * whole promise is one chevron press per screen means the last of it is only
 * reachable by scrolling past what the chevron skips. Four across is the same
 * four cards and one row of height, and at 1200px each card still holds its two
 * sentences comfortably.
 */
@media (min-width: 1200px) {
  .srk-page .srdv-sdks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .srk-page .srdv-sdk { padding: clamp(18px, 1.8vw, 24px); }
}

.srk-page .srdv-sdk {
  display: flex;
  flex-direction: column;
}

/*
 * The platform tag is a fact about the SDK, not a button, so it must not look
 * like one. It sits at the foot of the card on its own line, at the size of a
 * caption, and it never gets a hover state.
 */
.srk-page .srdv-tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-surface);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.srk-page .srdv-sdk p {
  margin-bottom: clamp(14px, 2vh, 20px);
}

/* ---------------------------------------------------------------------------
   The link lists
   ------------------------------------------------------------------------ */

.srdv-cols {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(24px, 3.4vh, 38px);
}

@media (min-width: 860px) {
  .srdv-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.srk-page .srdv-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.4vh, 16px);
}

.srk-page .srdv-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.srk-page .srdv-links a {
  color: var(--srh-pale);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--srh-hairline);
  transition: border-color 200ms var(--srk-ease, ease), color 200ms var(--srk-ease, ease);
}

.srk-page .srdv-links a:hover,
.srk-page .srdv-links a:focus-visible {
  color: var(--srk-accent-live, var(--srh-accent));
  border-bottom-color: var(--srk-accent-live, var(--srh-accent));
}

.srk-page .srdv-links span {
  color: var(--srh-ink-fade);
  font-size: 0.9375rem;
}

/*
 * The heading of the second column is a list item rather than a heading
 * element, deliberately: it labels a list inside a section that already has an
 * h2, and adding an h3 here would put a level in the outline for a label.
 */
.srk-page .srdv-links-head {
  color: var(--srh-ink-fade);
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   The closer
   ------------------------------------------------------------------------ */

.srdv-narrow {
  max-width: 62ch;
}

.srdv-centre {
  text-align: center;
  margin-inline: auto;
}

.srk-page .srdv-centre p {
  margin-inline: auto;
}

.srdv-centre-actions {
  justify-content: center;
}