/* Layout grids + ping-only callouts. The card *looks* live in
   components.css; this just arranges them. */

/* Microslop home — three columns of programs, then a 2-col why-grid */
.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 22px 8px}
@media(max-width:680px){.progs{grid-template-columns:1fr}}

.why{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 22px 8px}
@media(max-width:680px){.why{grid-template-columns:1fr}}

/* Ping — 3-col feature grid that collapses */
.feats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:14px 22px}
@media(max-width:760px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feats{grid-template-columns:1fr}}

/* Ping-only blocks */
.note{margin:6px 22px 20px;border:3px dashed var(--ink);background:#fff;padding:16px}
.note .pix{font-size:9px;color:var(--ink);display:block;margin-bottom:8px}
.note p{font-size:14px;color:#4a4360}
.note b{color:var(--hot)}

.stack{padding:18px 22px;font-size:16px;color:#4a4360}
.stack .pix{font-size:9px;color:var(--purple);display:block;margin-bottom:8px}