/* Beyond What You Can Imagine. All rules are scoped to this arc. */
.byi-page {
  --byi-line: color-mix(in srgb, var(--cyan-soft) 34%, transparent);
  --byi-panel: color-mix(in srgb, var(--night-2) 82%, var(--cyan-soft));
  --byi-glow: color-mix(in srgb, var(--cyan-soft) 20%, transparent);
  padding-top: 0;
}
.byi-page .arc-banner { --arc-hero-position: center 58%; }
.byi-page .byi-banner-practice { --arc-hero-position: center 54%; }
.byi-page h1, .byi-page h2, .byi-page h3 { color: var(--ink); }
.byi-page p { line-height: 1.65; }
.byi-page .eyebrow { color: var(--gold-soft); }
.byi-breadcrumb { margin: 1.5rem 0 1.25rem; font-size: .86rem; }
.byi-breadcrumb a { color: var(--cyan-soft); }
.byi-overview-start { max-width: 72ch; margin: 0 0 1.5rem; }
.byi-overview-start > p { color: var(--ink-soft); font-size: 1.05rem; }
.byi-hero-actions, .byi-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.5rem; }
.byi-hero-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.byi-hero-meta span { border: 1px solid var(--byi-line); border-radius: 999px; padding: .35rem .65rem; font-size: .75rem; color: var(--cyan-soft); }
.byi-section-heading { margin: 3.6rem 0 1.15rem; max-width: 72ch; }
.byi-section-heading h2 { margin: .35rem 0 .6rem; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.byi-section-heading p:last-child { color: var(--ink-soft); }
.byi-orientation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.byi-orientation-card { min-width: 0; display: flex; flex-direction: column; padding: 1.3rem; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--byi-panel); }
.byi-orientation-card h3 { margin: .4rem 0 .6rem; font-size: 1.13rem; }
.byi-orientation-card p:not(.eyebrow) { color: var(--ink-soft); font-size: .91rem; }
.byi-text-link { margin-top: auto; padding-top: .8rem; color: var(--cyan-soft); font-weight: 600; }
.byi-text-link:hover { color: var(--cyan); }
.byi-context { padding: 1rem 1.25rem; margin-top: 1rem; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--night-2) 83%, var(--gold)); }
.byi-context strong { color: var(--gold-soft); }
.byi-context p { margin: .25rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.byi-experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.byi-experience-card { min-width: 0; display: block; overflow: hidden; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--night-2); color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.byi-experience-card:hover { color: var(--ink); border-color: var(--cyan-soft); box-shadow: 0 0 22px var(--byi-glow); transform: translateY(-2px); }
.byi-experience-art { aspect-ratio: 16/9; overflow: hidden; background: var(--night); }
.byi-experience-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.byi-experience-copy { position: relative; padding: 1.25rem 1.4rem 1.5rem; }
.byi-experience-copy .eyebrow { margin-right: 3rem; }
.byi-experience-copy h3 { margin: .45rem 0 .6rem; font-size: 1.35rem; }
.byi-experience-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: .92rem; }
.byi-number { position: absolute; right: 1.4rem; top: 1.1rem; font-family: Cinzel,serif; font-size: 1.4rem; color: var(--gold-soft); }
.byi-card-link { display: inline-block; margin-top: .7rem; color: var(--cyan-soft); font-weight: 600; font-size: .87rem; }
.byi-practice-preview, .byi-tutorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; margin-top: 3.6rem; padding: 1.3rem; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--byi-panel); }
.byi-song-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.3rem; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--byi-panel); }
.byi-song-feature > img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); }
.byi-song-feature p:not(.eyebrow) { color: var(--ink-soft); }
.byi-practice-preview img, .byi-tutorial img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); }
.byi-practice-preview p:not(.eyebrow), .byi-tutorial p:not(.eyebrow) { color: var(--ink-soft); }
.byi-practice-preview .btn, .byi-tutorial .btn { margin-top: .6rem; }
.byi-playlist { margin-top: 2rem; text-align: center; font-size: .9rem; }
.byi-reader-body { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 2rem; margin-top: 3rem; }
.byi-reader-intro > p { color: var(--ink-soft); }
.byi-video-action { margin-top: 1.4rem; padding: 1.3rem; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--byi-panel); }
.byi-video-art img { display: block; width: 100%; height: auto; margin: .85rem 0; border-radius: 8px; }
.byi-video-action h3 { margin: .4rem 0; }
.byi-video-action p:not(.eyebrow) { color: var(--ink-soft); font-size: .9rem; }
.byi-video-action .btn { margin-top: .6rem; }
.byi-jump-list h2 { margin-bottom: 1rem; }
.byi-jump-card { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; padding: 1.2rem 0; border-top: 1px solid var(--byi-line); }
.byi-jump-number { font-family: Cinzel,serif; font-size: 1.25rem; color: var(--gold-soft); }
.byi-jump-card h3 { margin: .4rem 0 .6rem; font-size: 1.13rem; }
.byi-jump-card p:not(.eyebrow) { color: var(--ink-soft); margin: .4rem 0; font-size: .91rem; }
.byi-jump-benefit strong { color: var(--ink); }
.byi-route-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--byi-line); font-size: .9rem; }
.byi-route-nav a { padding: .5rem .7rem; border: 1px solid var(--byi-line); border-radius: 8px; }
.byi-route-nav a:hover { border-color: var(--cyan-soft); }
.byi-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.byi-steps li { display: flex; gap: 1rem; padding: 1.25rem; border: 1px solid var(--byi-line); border-radius: var(--radius); background: var(--byi-panel); }
.byi-steps li > span { color: var(--gold-soft); font-family: Cinzel,serif; font-size: 1.3rem; }
.byi-steps h3 { margin: .15rem 0 .5rem; }
.byi-steps p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.byi-tempo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; list-style: none; padding: 0; margin: 0; }
.byi-tempo-grid a { display: flex; gap: .75rem; align-items: center; min-width: 0; padding: .55rem; border: 1px solid var(--byi-line); border-radius: 9px; background: var(--night-2); color: var(--ink); }
.byi-tempo-grid .byi-tempo-unavailable { display: flex; gap: .75rem; align-items: center; min-width: 0; padding: .55rem; border: 1px solid var(--byi-line); border-radius: 9px; background: var(--night-2); color: var(--ink-soft); }
.byi-tempo-grid a:hover { border-color: var(--cyan-soft); }
.byi-tempo-featured a { border-color: var(--gold-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-soft) 38%, transparent), 0 0 19px color-mix(in srgb, var(--gold-soft) 22%, transparent); background: color-mix(in srgb, var(--night-2) 82%, var(--gold)); }
.byi-tempo-featured a:hover { border-color: var(--gold); }
.byi-tempo-grid em { display: inline-block; margin-top: .2rem; color: var(--gold-soft); font-size: .68rem; font-style: normal; font-weight: 600; }
.byi-tempo-grid img { display: block; width: 6.5rem; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; }
.byi-tempo-grid span { min-width: 0; }
.byi-tempo-grid strong, .byi-tempo-grid small { display: block; }
.byi-tempo-grid strong { font-size: .84rem; }
.byi-tempo-grid small { margin-top: .2rem; color: var(--cyan-soft); font-size: .73rem; }
.byi-unavailable { display: inline-block; color: var(--ink-soft); font-size: .85rem; }
.byi-image-fallback { display: grid; place-items: center; width: 100%; min-height: 7rem; aspect-ratio: 16/9; border: 1px dashed var(--byi-line); border-radius: 7px; background: var(--night); color: var(--ink-soft); font-size: .8rem; text-align: center; }
.byi-tempo-grid .byi-image-fallback { width: 6.5rem; min-height: 0; flex: 0 0 auto; }
.byi-missing { text-align: center; padding: 5rem 1rem; }

@media (max-width: 990px) {
  .byi-tempo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .byi-reader-body, .byi-song-feature, .byi-practice-preview, .byi-tutorial { grid-template-columns: 1fr; }
  .byi-orientation-grid { grid-template-columns: 1fr; }
  .byi-reader-body { gap: 2rem; }
}
@media (max-width: 560px) {
  .byi-hero-actions .btn, .byi-action-row .btn { width: 100%; text-align: center; }
  .byi-section-heading { margin-top: 2.7rem; }
  .byi-experience-grid, .byi-steps, .byi-tempo-grid { grid-template-columns: 1fr; }
  .byi-experience-copy { padding: 1rem; }
  .byi-song-feature, .byi-practice-preview, .byi-tutorial { padding: .9rem; }
  .byi-route-nav { justify-content: center; }
  .byi-route-nav span { display: none; }
  .byi-tempo-grid img { width: 5.5rem; }
}