/* Public preview only; app.css and site.css tokens supply the Kahwa & Ink identity. */
.preview-page [hidden] { display: none !important; }
.preview-header { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s5); }
.preview-brand { font: 800 24px/1 var(--display); color: var(--text); text-decoration: none; }
.preview-brand span { color: var(--accent); margin-inline-start: 6px; font-size: 16px; }
.preview-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.preview-intro { padding-block: var(--s6); max-inline-size: 760px; }
.preview-intro h1 { font-size: clamp(32px, 6vw, 60px); }
.preview-intro .lede { margin-block-start: var(--s5); max-inline-size: 62ch; }
.preview-grid { display: grid; gap: var(--s6); align-items: start; }
.preview-grid > * { min-inline-size: 0; }
.preview-page fieldset { margin: 0; padding: var(--s5); border: 1px solid var(--control); border-radius: var(--radius-lg); background: var(--surface); min-inline-size: 0; }
.preview-page legend { padding-inline: var(--s2); font-size: 22px; font-weight: 600; }
.preview-page label { margin-block: var(--s4) var(--s2); }
.preview-page input { max-inline-size: 100%; }
.preview-page input[type="file"] { font-size: 14px; inline-size: 100%; padding: var(--s2); }
.preview-page input[type="color"] { inline-size: 100%; min-block-size: 48px; }
.preview-page .btn { min-block-size: 44px; white-space: normal; text-align: center; }
.preview-page #preview-status { margin-block: var(--s4) 0; color: var(--ok); }
.preview-colours { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.preview-error { color: var(--danger); margin-block: var(--s3); }
.preview-stage { padding: var(--s5); border-radius: var(--radius-lg); background: radial-gradient(ellipse at top, #302817, var(--surface) 75%); text-align: center; }
.preview-tag { display: inline-block; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 99px; padding: 4px 14px; font-size: 13px; margin-block-end: var(--s5); }
.preview-card { --card-bg: #1f1630; --card-ink: #ffffff; --stamp-fill: #ff5c8f; --stamp-ink: #000000; background: var(--card-bg); color: var(--card-ink); border: 1px solid var(--control); border-radius: 22px; padding: var(--s5); max-inline-size: 390px; margin: 0 auto var(--s5); text-align: start; box-shadow: var(--shadow-lift); overflow-wrap: anywhere; }
.preview-card-top { display: flex; align-items: center; gap: var(--s3); margin-block-end: var(--s5); }
.preview-card-top strong { min-inline-size: 0; font-size: 20px; }
.preview-card-top img { object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.preview-monogram { display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none; border: 1px solid currentColor; border-radius: 12px; font-weight: 700; }
.preview-stamps { display: grid; grid-template-columns: repeat(var(--stamp-columns, 3), minmax(0, 1fr)); justify-items: center; gap: 10px; padding-block: var(--s4) var(--s5); }
.preview-stamps span { aspect-ratio: 1; max-inline-size: 45px; inline-size: 100%; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--card-ink); font-weight: 700; }
.preview-stamps .earned { background: var(--stamp-fill); color: var(--stamp-ink); }
.preview-card #card-progress { border-block-start: 1px solid currentColor; padding-block-start: var(--s4); margin-block: var(--s5) 0; font-size: 14px; }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-block: var(--s5) var(--s4); }
.preview-journey { margin-block: var(--s8); }
.preview-journey ol { display: grid; gap: var(--s5); padding-inline-start: var(--s5); margin-block: var(--s6); }
.preview-journey li { padding-inline-start: var(--s2); }
.preview-journey li::marker { color: var(--accent); font-weight: 700; }
.preview-next { border-block-start: 1px solid var(--control); padding-block: var(--s6) var(--s8); }
.preview-next .row { margin-block-start: var(--s5); }
.preview-notice { padding: var(--s4); border: 1px solid var(--accent); }
@media (min-width: 760px) {
    .preview-grid { grid-template-columns: 1fr 1fr; }
    .preview-journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
@media (min-width: 1000px) {
    .preview-journey ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Four-step landing journey; scoped separately from the existing three-step style. */
@media (min-width: 900px) {
    .site #how .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site #how .steps-line { inset-inline-end: calc((100% - 96px) / 4 - 20px); }
}
@media (prefers-reduced-motion: reduce) {
    .preview-page *, .preview-page *::before, .preview-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .preview-page .btn:hover, .preview-page .btn:active { transform: none; }
}