/* designprofil.se – sidorna under /losningar/ (ingång efter behov).
   Bygger på tokens.css och site.css. Prefix: lo-. Inga gula ytor, gult bara på huvudknappen i kontaktblocket. */

/* ---------- Behovskort på /losningar/: tre i bredd ---------- */
.lo-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lo-areas .w-area .dp-ph { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .lo-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lo-areas { grid-template-columns: 1fr; } }

/* ---------- Checklistan "Det här brukar ni behöva" ---------- */
.lo-check h3 { display: flex; align-items: center; gap: var(--dp-space-2); }
.lo-tick { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--dp-radius-pill); background: var(--dp-white); border: 1px solid var(--dp-silver); }
.lo-tick .dp-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.lo-check .dp-link { justify-self: start; margin-top: var(--dp-space-1); font-size: var(--dp-fs-sm); }

/* ---------- Egen produktion, under stegen ---------- */
.lo-own { max-width: 46rem; margin-top: clamp(32px, 4vw, 56px); padding-top: var(--dp-space-6); border-top: 1px solid var(--dp-silver); font-size: var(--dp-fs-lg); line-height: 1.45; }