/* Scoped role explorer; colors and spacing come from the shared marketing system. */
.demo-explore { padding-block: clamp(2rem, 5vw, 5rem); }
.demo-explore__intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); gap: var(--s10); align-items: end; margin-block-end: var(--s12); }
.demo-explore__eyebrow { color: var(--mk-green-800); font-size: var(--mk-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--s3); }
.demo-explore h1 { font-family: var(--mk-display-font); font-size: var(--mk-display-lg); line-height: 1.08; max-inline-size: 16ch; margin: 0 0 var(--s5); }
.demo-explore h2 { font-family: var(--mk-display-font); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.2; margin: 0 0 var(--s3); }
.demo-explore p { line-height: 1.6; }
.demo-explore__lead { font-size: var(--mk-body-lg); max-inline-size: var(--mk-reading-max); margin: 0; color: var(--mk-muted); }
.demo-explore__note { border-inline-start: 2px solid var(--mk-gold-500); padding-inline-start: var(--s6); color: var(--mk-muted); }
.demo-explore__note a { color: var(--mk-green-900); text-decoration: underline; text-underline-offset: .2em; }
.demo-explore__pill { display: inline-flex; padding: var(--s2) var(--s3); border-radius: 100vmax; background: var(--mk-cream-200); color: var(--mk-green-900); font-size: .875rem; font-weight: 700; }
.demo-explore__workspace { border-block-start: 1px solid var(--mk-line); padding-block-start: var(--s8); }
.demo-explore__stages { display: flex; flex-wrap: wrap; gap: var(--s3); }
.demo-explore__stages [aria-current="true"] { color: var(--mk-white); background: var(--mk-green-900); }
.demo-explore__stage-intro { color: var(--mk-muted); max-inline-size: var(--mk-reading-max); margin-block: var(--s5) var(--s8); }
.demo-explore__section-heading { display: flex; justify-content: space-between; gap: var(--s8); align-items: end; margin-block-end: var(--s6); }
.demo-explore__section-heading > p { color: var(--mk-muted); max-inline-size: 28ch; margin: 0; }
.demo-explore__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.demo-explore__role { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); min-block-size: var(--target-min); border: 1px solid var(--mk-line); border-radius: var(--r-card); color: var(--mk-green-900); text-decoration: none; background: var(--mk-white); }
.demo-explore__role[aria-current="true"] { background: var(--mk-green-900); color: var(--mk-white); border-color: var(--mk-green-900); }
.demo-explore__role:hover { border-color: var(--mk-green-700); }
.demo-explore__role strong, .demo-explore__role small { display: block; }
.demo-explore__role strong { font-size: 1rem; }
.demo-explore__role small { font-size: .8125rem; margin-block-start: var(--s1); }
.demo-explore__monogram { flex: 0 0 2.75rem; display: grid; place-items: center; block-size: 2.75rem; border-radius: 50%; background: var(--mk-cream-200); color: var(--mk-green-900); font-weight: 600; }
.demo-explore__arrow { margin-inline-start: auto; font-size: 1.25rem; }
.demo-explore__selected { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s10); padding: clamp(1.25rem, 4vw, 3rem); margin-block-start: var(--s5); background: var(--mk-cream-200); border-radius: var(--r-card); }
.demo-explore__identity > p:not(.demo-explore__eyebrow) { color: var(--mk-muted); max-inline-size: 32ch; }
.demo-explore__sample-name { font-size: .875rem; color: var(--mk-muted); }
.demo-explore__journeys { list-style: none; padding: 0; margin: 0; }
.demo-explore__journeys li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding-block: var(--s5); border-block-end: 1px solid var(--mk-line); }
.demo-explore__journeys li:first-child { padding-block-start: 0; }
.demo-explore__journeys li:last-child { border-block-end: 0; padding-block-end: 0; }
.demo-explore__journeys h3 { font-size: 1rem; line-height: 1.4; margin: 0; }
.demo-explore__journeys p { color: var(--mk-muted); font-size: .9375rem; margin: var(--s2) 0 0; }
.demo-explore__journeys form { margin: 0; }
.demo-explore__button { display: inline-flex; justify-content: center; align-items: center; min-block-size: var(--target-min); padding: var(--s3) var(--s5); border: 1px solid var(--mk-green-800); border-radius: var(--r-button); color: var(--mk-green-900); background: var(--mk-white); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.3; text-align: center; }
.demo-explore__button--primary, .demo-explore__button.is-primary { color: var(--mk-white); background: var(--mk-green-900); border-color: var(--mk-green-900); }
.demo-explore__button:hover { box-shadow: inset 0 0 0 1px currentColor; }
.demo-explore a:focus-visible, .demo-explore button:focus-visible { outline: var(--mk-focus-inner-width) solid var(--mk-focus); outline-offset: 4px; box-shadow: 0 0 0 var(--mk-focus-outer-width) var(--mk-focus-halo); }
.demo-explore__booking { display: flex; justify-content: space-between; align-items: center; gap: var(--s8); margin-block-start: var(--s12); padding-block: var(--s8); border-block-start: 1px solid var(--mk-line); }
.demo-explore__booking p:not(.demo-explore__eyebrow) { max-inline-size: 58ch; color: var(--mk-muted); margin-block-end: 0; }
.demo-explore__actions { display: flex; flex-direction: column; gap: var(--s3); flex-shrink: 0; }
@media (max-width: 64rem) {
    .demo-explore__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-explore__intro { gap: var(--s6); }
    .demo-explore__selected { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6); }
    .demo-explore__booking { align-items: start; }
}
@media (max-width: 42rem) {
    .demo-explore__intro, .demo-explore__selected { grid-template-columns: minmax(0, 1fr); }
    .demo-explore__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-explore__role { padding: var(--s3); gap: var(--s2); }
    .demo-explore__monogram { flex-basis: 2rem; block-size: 2rem; font-size: .75rem; }
    .demo-explore__arrow { display: none; }
    .demo-explore__section-heading, .demo-explore__booking { display: block; }
    .demo-explore__section-heading > p { max-inline-size: none; }
    .demo-explore__actions { margin-block-start: var(--s6); align-items: flex-start; }
    .demo-explore__journeys li { gap: var(--s3); }
}