.hgq .hgq__media { position: relative; width: 100%; margin-bottom: 20px; text-align: center; }
.hgq .hgq__media .hgq__image, .hgq .hgq__video {
 --hgq-image-cap: 300px; display: block; height: auto; max-height: var(--hgq-image-cap);
 width: min(100%, calc(var(--hgq-image-cap) * var(--hgq-image-ratio, 1)));
 margin: 0 auto; border-radius: 12px;
}
.hgq .hgq__video { width: 100%; object-fit: contain; }
.hgq .hgq__media [hidden] { display: none; }
.hgq .hgq__screen:has(.hgq__media.is-image-loading) { visibility: hidden; }
@media (max-width: 600px) {
 .hgq .hgq__media .hgq__image, .hgq .hgq__video { --hgq-image-cap: 340px; }
}
.hgq .hgq__sections { display: flex; gap: 6px; list-style: none; margin-bottom: 8px; }
.hgq .hgq__sections li { flex: 1; min-width: 0; color: var(--hgq-muted); font-size: .7rem; text-align: center; }
.hgq .hgq__sections [aria-current], .hgq .hgq__sections .is-complete { color: var(--hgq-blue); font-weight: 800; }
.hgq .hgq__scale { width: 100%; grid-column: 1 / -1; margin: 12px 0 24px; }
.hgq .hgq__scale-levels { display: flex; gap: 4px; list-style: none; padding-bottom: 32px; margin-top: 12px; }
.hgq .hgq__scale-level { flex: 1; min-width: 0; position: relative; border-top: 8px solid var(--hgq-border);
 padding-top: 8px; font-size: .75rem; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
.hgq .hgq__scale-level.is-filled { border-color: var(--hgq-teal); }
.hgq .hgq__scale-level.is-filled.is-alert { border-color: var(--hgq-red); }
.hgq .hgq__scale-level:not(.is-filled) { color: var(--hgq-muted); }
.hgq .hgq__scale-level[aria-current] { font-weight: 800; color: var(--hgq-blue); }
.hgq .hgq__scale-marker { display: block; margin: 6px auto 0; border-radius: 100px; padding: 3px 8px;
 background: var(--hgq-blue); color: white; width: fit-content; }
.hgq .hgq__cascade { list-style: none; margin: 20px 0; }
.hgq .hgq__cascade-step { position: relative; border-left: 2px solid var(--hgq-border); padding: 0 0 24px 24px; }
.hgq .hgq__cascade-step:last-child { border-color: transparent; padding-bottom: 0; }
.hgq .hgq__cascade-number { position: absolute; left: -13px; top: 0; border-radius: 100px; width: 24px; height: 24px;
 background: var(--hgq-blue); color: white; text-align: center; font-size: .8rem; }
.hgq .hgq__cascade-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hgq .hgq__cascade-tag, .hgq .hgq__cascade-product { border-radius: 100px; padding: 4px 10px; font-size: .8rem;
 background: var(--hgq-bg); border: 1px solid var(--hgq-border); }
.hgq .hgq__cascade-product { background: var(--hgq-teal); color: white; font-weight: 800; }
.hgq .hgq__step-track { display: block; height: 5px; background: var(--hgq-border); margin: 8px 0 16px; }
.hgq .hgq__step-fill { display: block; height: 100%; width: 100%; background: var(--hgq-blue);
 transform: scaleX(0); transform-origin: left; transition: transform var(--hgq-step-ms) linear; }
.hgq .hgq__step-fill.is-filled { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .hgq .hgq__step-fill { transition: none; } }