/* Psychedelic therapy lesson. All rules scoped under .pth-* */
.pth-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pth-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.pth-steps { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.pth-steps .slot .n { font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--dim); }
.pth-steps .slot .v { font-size: 14px; }

.pth-bars { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; }
.pth-bar { display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.pth-bl { grid-column: 1 / 3; font: 600 14px var(--sans); color: var(--dim); }
.pth-bt { height: 16px; border-radius: 8px; background: rgba(169,155,255,.12); overflow: hidden; }
.pth-bt i { display: block; height: 100%; width: 0; border-radius: 8px; }
.pth-full .pth-bt i { background: var(--gold); }
.pth-tiny .pth-bt i { background: rgba(169,155,255,.6); }
.pth-bar b { font: 700 16px var(--sans); color: var(--text); text-align: right; }
.pth-note { font-size: 12.5px; color: var(--faint); text-align: center; }

@media (max-height: 700px) {
  .pth-hero img { max-height: 26vh; }
}