.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button-primary { background: var(--copper); color: #100e0c; }
.button-primary:hover:not(:disabled) { background: var(--gold); }
.button-secondary { border-color: var(--copper); background: transparent; color: var(--cream); }
.button-ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.button-large { width: min(100%, 420px); min-height: 58px; text-transform: uppercase; letter-spacing: .08em; }

.workflow-card { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent); }
.step-heading { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.step-heading > span { color: var(--copper); font: 700 2rem var(--font-display); }
.step-heading p, .eyebrow { margin: 0 0 .25rem; color: var(--copper); font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.step-heading h2 { margin: 0; font: 600 clamp(1.45rem, 4vw, 2rem) var(--font-display); }

.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.option-card, .layout-card { position: relative; padding: 1rem; border: 1px solid var(--line); background: var(--ink-soft); color: var(--cream); text-align: left; cursor: pointer; }
.option-card::before { content: ""; display: block; height: 52px; margin-bottom: .8rem; background: radial-gradient(circle at 50% 10%, var(--gold), transparent 64%); opacity: .45; }
.option-card small, .layout-card small { display: block; margin-top: .3rem; color: var(--muted); line-height: 1.4; }
.option-card[aria-checked="true"], .layout-card[aria-checked="true"] { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.layout-options { display: grid; gap: .7rem; }
.status-message { min-height: 1.5rem; margin: 0 0 1rem; color: var(--muted); }
.status-message.is-error { color: var(--danger); }
.status-message.is-success { color: var(--success); }