/* The use-case pages (usecase-build.mjs). Loaded after the persona pages'
   stylesheet, whose tokens and .pe-* rules they share; only what is new here. */
.uc-head { display: grid; gap: .6rem; max-width: 46rem; margin: 1.5rem 0 1.25rem; }
.uc-head h1 { margin: 0; text-wrap: balance; }
.uc-head .pe-eyebrow { justify-self: start; }
.uc-feel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 0; }
.uc-from, .uc-to { display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.uc-from { background: rgba(232, 86, 106, .14); color: #f29aa7; }
.uc-to { background: rgba(63, 179, 127, .15); color: #8fd8ae; }
.uc-arrow { color: var(--faint, #6f6e7b); }
.uc-shot { margin: 0 0 1.5rem; max-width: 56rem; }
.uc-shot img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #1c1d23; }
.uc-shot figcaption { margin-top: .5rem; font-size: .85rem; color: var(--faint, #a3a2b0); }
.uc-short { margin-top: 1rem; }
.uc-guides-h { margin: 1.25rem 0 .4rem; font-size: 1rem; }
.uc-guides { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.uc-more { margin-top: 1rem; }
.uc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.uc-chips a { padding: .25rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; text-decoration: none; }
.uc-chips a:hover { border-color: #8f7aee; }