.walkthrough-hero h1 { max-width: 18ch; }
.walkthrough-hero .lede { max-width: 72ch; }
.walkthrough-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.walkthrough-nav a { font-size: var(--text-sm); }
.scenario-grid,
.outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.scenario-card,
.outcome-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.scenario-card h3,
.outcome-card h3 { margin-bottom: var(--space-2); font-size: var(--text-base); font-weight: 600; }
.scenario-card p,
.outcome-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.scenario-card p + p { margin-top: var(--space-4); }
.scenario-card code { overflow-wrap: anywhere; word-break: break-word; }
.scenario-list { display: grid; gap: var(--space-3); margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.domain-list { list-style: none; padding-left: 0; }
.domain-list li { display: grid; gap: var(--space-1); }
.domain-list code { width: fit-content; max-width: 100%; color: var(--color-text); }
.provider-list strong { color: var(--color-text); font-weight: 600; }
.scenario-list + p { margin-top: var(--space-5); }
.table-scroll { margin-top: var(--space-6); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.walkthrough-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--text-sm); }
.walkthrough-table th,
.walkthrough-table td { padding: var(--space-4); border-bottom: 1px solid var(--color-divider); text-align: left; vertical-align: top; }
.walkthrough-table th { color: var(--color-text); background: var(--color-surface-offset); font-weight: 600; }
.walkthrough-table tr:last-child td { border-bottom: 0; }
.response-pill { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.walkthrough-callout { margin-top: var(--space-6); padding: clamp(var(--space-5), 4vw, var(--space-8)); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--color-surface-offset); }
.walkthrough-callout strong { color: var(--color-text); }
.walkthrough-callout p + p { margin-top: var(--space-3); }
.cluster-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding: 0; list-style: none; }
.cluster-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.cluster-list .step-number { align-self: start; }
.cluster-list p { color: var(--color-text-muted); font-size: var(--text-sm); }
.walkthrough-pattern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.walkthrough-step { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.walkthrough-step dt { margin-bottom: var(--space-2); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.walkthrough-step dd { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.walkthrough-step--wide { grid-column: 1 / -1; }
.artefact-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.open-items { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.open-item { padding: var(--space-5); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--color-surface); }
.open-item h3 { margin-bottom: var(--space-2); font-size: var(--text-base); }
.open-item p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 960px) { .scenario-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .outcome-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .walkthrough-pattern { grid-template-columns: 1fr; } .walkthrough-step--wide { grid-column: auto; } .table-scroll { margin-inline: calc(var(--space-5) * -1); border-radius: 0; } }
@media print { .walkthrough-page .section:not(#reflection-section) { display: block !important; } .walkthrough-nav, .artefact-links { display: none; } .table-scroll { overflow: visible; } .walkthrough-table { min-width: 0; font-size: 8pt; } .walkthrough-step, .open-item, .scenario-card, .outcome-card { break-inside: avoid; } }