/* Startup Canvas preview (startup-canvas.html only) */
.sc-canvas { margin: 1.5rem 0 2.5rem; border: 2px solid var(--ink); background: var(--paper); }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: .6rem .9rem; background: var(--peach-soft); border-bottom: 2px solid var(--ink); }
.sc-title { font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.sc-meta { font-family: var(--f-label); font-size: .95rem; color: var(--ink-2); }
.sc-spaces { display: grid; grid-template-columns: 1fr 1fr; }
.sc-space + .sc-space { border-left: 2px solid var(--ink); }
.article-body .sc-space-title { margin: 0; padding: .5rem .9rem; font-family: var(--f-label); font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--orange-deep); border-bottom: 1px solid var(--rule); }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sc-cell { padding: .75rem .9rem 1rem; min-height: 8.5rem; border-bottom: 1px solid var(--rule); }
.sc-cell:nth-child(even) { border-left: 1px solid var(--rule); }
.sc-cell:nth-last-child(-n+2) { border-bottom: 0; }
.article-body .sc-name { display: flex; align-items: baseline; margin: 0 0 .35rem; font-family: var(--f-label); font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: var(--ink); }
.sc-num { flex: none; min-width: 1.4em; font-family: var(--f-display); font-weight: 900; color: var(--orange); }
.article-body .sc-q { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--ink-2); }
.sc-canvas figcaption { padding: .6rem .9rem; border-top: 2px solid var(--ink); font-size: .95rem; line-height: 1.45; color: var(--ink-3); }

@media (max-width: 760px) {
  .sc-spaces { grid-template-columns: 1fr; }
  .sc-space + .sc-space { border-left: 0; border-top: 2px solid var(--ink); }
}
@media (max-width: 480px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-cell { min-height: 0; }
  .sc-cell:nth-child(even) { border-left: 0; }
  .sc-cell:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}

/* Hero button spacing (replaces the former inline margin-top) */
.canvas-hero .container > div { margin-top: 1.5rem; }