/* Viewing aid for the component .html specimens and the group cards. NOT part of the system. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&family=Nunito+Sans:wght@400;600;700&display=swap');
html, body { margin: 0; }
body { font-family: var(--postie-font-ui); background: var(--postie-surface); color: var(--postie-ink); }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec > section { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.spec-h { margin: 0; font-family: var(--postie-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.spec-h small { display: block; margin-top: 4px; font-family: var(--postie-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--postie-c-muted); }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spec-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--postie-c-muted); }
.spec-note { font-size: 13px; line-height: 1.5; color: var(--postie-c-body); max-width: 60ch; }
.spec-brand { padding: 20px; border-radius: 16px; }
.spec-stack { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .spec { grid-template-columns: 1fr; } }