
.band--steps .wrap { max-width: var(--page-width); }
.step:nth-child(4) { --num: var(--teal); }
.step h2 { margin: 0; font-size: var(--step-2); }
.step .step-price { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; color: var(--num); }
.step p:last-child { color: var(--fg); }
@media (min-width: 60rem) {
  .steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .steps--four .step { padding: var(--space-m) var(--space-m) var(--space-l); border-left: 1px solid var(--line); }
  .steps--four .step:first-child { padding-left: 0; border-left: 0; }
  .steps--four .step:last-child { padding-right: 0; }
}

.band--sessions { padding-block: var(--space-s); }
.band--sessions .wrap { max-width: var(--page-width); }
.session { display: grid; gap: var(--space-l); padding-block: var(--space-l); scroll-margin-top: var(--space-m); }
.session + .session { border-top: 3px solid var(--ink); }
@media (min-width: 60rem) { .session { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-l); } }
.session-lead { display: grid; gap: var(--space-s); align-content: start; }
.session-lead h3 { margin: 0; font-size: var(--step-3); }
.session-price { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; color: var(--amber-ink); }
.session-intro { margin: 0; font-size: var(--step-1); max-width: 34ch; }
.session-mark svg { display: block; width: 7.5rem; height: auto; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.session-mark .fig-frame, .session-mark .fig-quiet { stroke: var(--ink); }
.session-mark .fig-quiet { opacity: 0.55; }
.session-mark .fig-hot, .session-mark .fig-hot-line, .session-mark .fig-hot-thick { stroke: var(--coral-ink); }
.session-mark .fig-hot-thick { stroke-width: 3.5; }
.session-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-s) var(--space-m); margin: var(--space-xs) 0 0; }
.session-facts div { border-top: 1px solid var(--line); padding-top: var(--space-xs); }
.session-facts dt { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.session-facts dd { margin: 0; }
.session-detail { display: grid; gap: var(--space-m); align-content: start; }
.session-detail h4 { margin: 0 0 var(--space-s); font-size: var(--step-1); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.agenda li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-s); }
.agenda-when { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step--1); padding-top: 0.2em; white-space: nowrap; }
.kept { margin: 0; padding-left: 1.2em; }
.kept li { margin-bottom: var(--space-xs); }
@media (max-width: 35rem) { .agenda li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.band--pick .wrap { max-width: var(--page-width); display: grid; gap: var(--space-l); }
@media (min-width: 60rem) { .band--pick .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pick-box { background: var(--surface); box-shadow: var(--lift-2), var(--catch); border-radius: var(--r-l); padding: var(--space-m) var(--space-l); }
.pick-box h2 { margin: 0 0 var(--space-s); font-size: var(--step-3); }
.pick { list-style: none; margin: 0; padding: 0; display: grid; }
.pick li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); border-top: 1px solid var(--line); }
.pick a { display: flex; align-items: center; min-height: var(--tap); color: var(--fg); text-decoration: none; }
.pick a:hover, .pick a:focus-visible { text-decoration: underline; }
.pick b { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.pick-call h2 { margin: 0 0 var(--space-s); font-size: var(--step-3); }
.pick-call p { margin: 0 0 var(--space-m); max-width: 44ch; }

.step-price [data-numeric], .session-price [data-numeric], .pick b [data-numeric] { font-family: inherit; }

.step h2 a { color: inherit; text-decoration: none; }
.step h2 a:hover, .step h2 a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.steps.mzl-drawn .step:nth-child(4) .step-mark svg > * { animation-duration: var(--motion-arc-3); }

.session-book { margin: var(--space-xs) 0 0; }
.band--book .wrap { max-width: var(--page-width); }
.band--book h2 { font-size: var(--step-3); }

.access-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.access-head h1 { margin: 0; }
.access-mark svg { display: block; width: 6.5rem; height: auto; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.access-mark .fig-frame, .access-mark .fig-quiet { stroke: var(--fg); }
.access-mark .fig-quiet { opacity: 0.55; }
.access-mark .fig-hot, .access-mark .fig-hot-line, .access-mark .fig-hot-thick { stroke: var(--amber); }
.access-mark .fig-hot { fill: var(--amber); fill-opacity: 0.18; }
.access-facts { width: 100%; max-width: 36rem; margin-top: var(--space-m); }
.access-files, .access-head { width: 100%; }
.access-files { display: grid; gap: var(--space-m) var(--space-l); margin-top: var(--space-l); }
@media (min-width: 60rem) { .access-files { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.access-group h3 { margin: 0 0 var(--space-xs); font-size: var(--step-1); }
.access-slides { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: 0; }
.access-download { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-m); border-radius: var(--r-s); background: var(--amber); color: var(--ink); font-weight: 700; text-decoration: none; }
.access-download:hover, .access-download:focus-visible { background: var(--amber-hover); }
.field.rating { flex-direction: row; flex-wrap: wrap; gap: var(--space-s); border: 0; padding: 0; margin-inline: 0; }
.field.rating legend { width: 100%; padding: 0; margin-bottom: var(--space-xs); font-size: var(--step--1); font-weight: 500; }
.rating-choice { position: relative; }
.rating-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-choice span { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--fg); border-radius: var(--r-s); font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); cursor: pointer; }
.rating-choice input:checked + span { background: var(--fg); color: var(--bg); }
.rating-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.session-book a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-m); border-radius: var(--r-s); background: var(--ink); color: var(--chalk); font-weight: 700; text-decoration: none; }
.session-book a:hover, .session-book a:focus-visible { text-decoration: underline; }
@media (min-width: 60rem) {
  .band--book .intake { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); }
  .band--book .intake > :nth-child(1), .band--book .intake > :nth-child(9), .band--book .submit-row, .band--book .feedback { grid-column: 1 / -1; }
}

.access-group--slides { grid-column: 1 / -1; }
.access-group:not(.access-group--slides) { padding: var(--space-m); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--lift-2); }
@media (prefers-reduced-motion: no-preference) {
  .access-group { animation: mzl-rise var(--motion-mid) var(--ease-out) both; }
  .access-group:nth-child(2) { animation-delay: 60ms; }
  .access-group:nth-child(3) { animation-delay: 120ms; }
  .access-group:nth-child(4) { animation-delay: 180ms; }
  .access-group:nth-child(5) { animation-delay: 240ms; }
}
.band--book .field-optional { display: inline; }
@media (min-width: 60rem) { .band--book .intake > :nth-child(8) { grid-column: 1 / -1; } }
