/* design.css — Rafa's file. Brand layout and styling go here.
 * Loaded after base.css. Use the tokens in tokens.css; do not hard-code colors or font sizes.
 * Empty on purpose: the skeleton ships unstyled.
 */

/* Seller checklist page (/checklist/): three groups side by side on wide screens, one column on phones. */
.checklist-page .lead { font-size: var(--text-lead); max-width: var(--measure); color: var(--color-text-muted); }
.checklist-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-4); align-items: start; }
.checklist-group h2 { font-size: var(--text-h3); margin-block-end: var(--space-2); }
.checklist-group ul { list-style: none; margin: 0; padding: 0; }
.checklist-group li { border-block-end: 1px solid var(--color-border); }
.checklist-group label { display: flex; gap: var(--space-2); align-items: flex-start; padding-block: var(--space-1); cursor: pointer; }
.checklist-group input[type="checkbox"] { flex: none; width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--color-selected); }
.checklist-group input:checked + span { color: var(--color-text-muted); text-decoration: line-through; }
.checklist-closing { max-width: var(--measure); background: var(--color-surface); border-radius: var(--radius); padding: var(--space-3); margin-block-end: var(--space-4); }
.checklist-closing p + p { margin-block-start: var(--space-2); }
@media (max-width: 900px) { .checklist-groups { grid-template-columns: 1fr; } }
@media print { .checklist-page .prep-links, .checklist-page .btn-primary { display: none; } }

/* Quotes: Care Display Bold Italic with curly quotation marks; the name below stays DM Sans [brand kit 1.6, guide p. 28;
   Rafa 2026-10-26]. The full review text in the carousel is long reading text and stays DM Sans. */
.voice blockquote p, .brokerage-quote blockquote p, .stage-pull p { font-family: var(--font-heading); font-weight: 700; font-style: italic; }
.voice blockquote p::after, .brokerage-quote blockquote p::after, .stage-pull p::after { content: "\201D"; }
.stage-pull p::before { content: "\201C"; }

/* Questions under the rebrand video, in the dialog opened from the line under the header. */
.rebrand-faq { max-width: var(--measure); margin: var(--space-3) auto 0; }
.rebrand-faq dt { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h3); margin-block-start: var(--space-3); }
.rebrand-faq dt:first-child { margin-block-start: 0; }
.rebrand-faq dd { margin: var(--space-1) 0 0; font-size: var(--text-body); }

/* 404 page */
.not-found { padding-block: var(--space-5); max-width: 40rem; }
.not-found-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-block: var(--space-3); }
.not-found-links a { font-weight: 700; }