/* Use-case pages (/use-cases/*). Loads AFTER brand.css and landing.css and reuses
   their scaffolding (.wrap/.sec/.sec__head/.eyebrow/.h2/.lead/.track/.btn) — this
   file only adds what those don't already cover.

   px, not rem, for the same reason brand.css documents: these pages render inside
   layout/header_index, which loads Skeleton (html{font-size:62.5%}), so rem values
   would come out ~62% smaller here than on the landing page. */

.uc h1,
.uc h2,
.uc h3 { text-wrap: balance; }

/* ---- page header ---- */
.uc-hero { padding-bottom: clamp(28px, 4vw, 40px); }
.uc-hero__title {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0;
}
.uc-hero__para {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 14px 0 0;
}
.uc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- numbered steps ---- */
.uc-steps {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  counter-reset: none;
}
.uc-steps li {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 22px 18px 60px;
}
.uc-steps__n {
  position: absolute;
  top: 22px;
  left: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
/* ⚠️ The step number must flip to DARK text in dark mode, not stay white.
   --color-primary lightens to #6E93F5 there, and white on it measures 2.94:1 —
   below the 4.5:1 AA floor for text this size, on a 13px bold glyph. Dark text on
   the same fill is 6.53:1. brand.css states every pairing in the system meets AA;
   this keeps that true rather than carving out an exception. */
@media (prefers-color-scheme: dark) {
  .uc-steps__n { color: #0B0F17; }
}
.uc-steps h3 { margin: 0 0 6px; font-size: 16px; }
.uc-steps p  { margin: 0; font-size: 14.5px; color: var(--color-text-muted); }

/* ---- benefit cards: .track is 2-up; these read better at 2-up too, but the
       cards carry more text than the landing page's, so give them room. ---- */
.uc-track article { padding: 22px; }
.uc-track h3 { font-size: 16px; }
.uc-track p  { font-size: 14.5px; }

/* ---- industry blurbs ---- */
.uc-industries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.uc-industries article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.uc-industries h3 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--color-accent-text);
}
.uc-industries p { margin: 0; font-size: 14.5px; color: var(--color-text-muted); }

/* ---- closing CTA ---- */
.uc-cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 40px);
  text-align: center;
}
.uc-cta .lead { margin-left: auto; margin-right: auto; }
.uc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ---- related links ---- */
.uc-related { margin-top: 36px; text-align: center; }
.uc-related__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.uc-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
}

@media (max-width: 720px) {
  .uc-steps,
  .uc-industries { grid-template-columns: 1fr; }
}