/* The use-case pages (for/ and for/<slug>/) share styles.css, compare.css and
   agents.css: the hero, the landing page's stories and feature cells, the
   notes, the FAQ list and the closing call. This sheet adds what they need on
   top: the still under the hero, the spacing around the feature cells and the
   cards that link the use cases to each other. Dark only, like the rest of
   the site. */

/* ---------- hero ---------- */
.uc-hero .hero-head h1 { max-width: 18ch; }
.uc-hero .shot-frame { margin-top: clamp(2.5rem, 5vw, 4rem); }
.uc-hero .shot-frame img { width: 100%; height: auto; }

/* ---------- feature cells, other use cases ---------- */
.uc-more, .uc-others { padding: 0 0 var(--section); }
.uc-others .section-line a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--muted); }
.uc-others .section-line a:hover { text-decoration-color: currentColor; }

/* ---------- cards ---------- */
/* Hairline-joined like the provider grid. Five cards leave a hole in a grid
   of two; the last one takes both cells instead. */
.uc-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; border: 1px solid var(--edge); border-radius: 20px; overflow: hidden; background: var(--edge); text-align: left; }
.uc-cards li { display: grid; background: var(--bg); }
.uc-cards li:last-child:nth-child(odd) { grid-column: span 2; }
.uc-cards a { display: grid; align-content: start; gap: 8px; padding: 26px 24px 28px; color: inherit; text-decoration: none; transition: background-color 160ms var(--ease-out); }
.uc-cards a:hover { background: var(--bg-2); }
.uc-cards a:focus-visible { outline-offset: -2px; }
.uc-card-name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.uc-card-name::after { content: ' →'; color: var(--muted); transition: color 160ms var(--ease-out); }
.uc-cards a:hover .uc-card-name::after { color: var(--text); }
.uc-card-line { max-width: 52ch; color: var(--text-2); line-height: 1.5; }
@media (max-width: 720px) {
  .uc-cards { grid-template-columns: minmax(0, 1fr); }
  .uc-cards li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-cards a, .uc-card-name::after { transition: none; }
}