/* /orbit/ pages (#501, #502). Phone frames for board screenshots, the step
   list beside a phone, and the small-rooms list. Colors inherit from the band
   (docs/content-density.md): nothing here hardcodes cream or blue text. */

.phone {
    width: min(300px, 80vw);
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--edge);
    background: var(--blue-deep);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}
.phone img { display: block; width: 100%; height: auto; }
.phone-light { box-shadow: 0 30px 70px -34px rgba(0, 40, 80, 0.5); border-color: rgba(0, 40, 80, 0.12); }

.card-frame {
    width: min(360px, 86vw);
    margin: 0 auto;
}
.card-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 70px -34px rgba(0, 40, 80, 0.5);
}

.orbit-hero-shot { display: flex; justify-content: center; }

.orbit-steps { display: grid; gap: 3rem; align-items: start; }
.orbit-stack { grid-template-columns: 1fr !important; }
.orbit-stack li { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; align-items: baseline; }
.orbit-stack .stack-no { grid-row: 1 / span 2; padding-top: 0.5rem; }
.orbit-stack h3 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.orbit-stack p { margin: 0; }
.phone-steps { align-self: start; position: sticky; top: 110px; }

.orbit-rooms {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.75rem;
}
.orbit-rooms li {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.15;
    padding: 0.9rem 0;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.orbit-rooms li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

.orbit-rules { margin-top: 1.75rem; }

.orbit-sizes .price-card .price-tagline { margin-bottom: 1.5rem; }

@media (min-width: 860px) {
    .orbit-steps { grid-template-columns: 1fr 320px; gap: 4rem; }
    .orbit-rooms { grid-template-columns: repeat(2, 1fr); gap: 0 3rem; }
    .orbit-rooms li:nth-last-child(2) { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
}

/* /orbit/conferences/: the aside beside the step list, and light showcase text
   on a blue band (the homepage pattern is cream-only). */
.orbit-aside { align-self: start; position: sticky; top: 110px; }
.orbit-aside .kicker { color: var(--magenta); display: block; margin-bottom: 0.9rem; }
.orbit-aside p:not(.kicker) { line-height: 1.65; max-width: 40ch; }
.band-cream .orbit-stack li { background: transparent; }
.band-cream .orbit-stack h3 { color: var(--blue); }
.band-cream .orbit-stack p { color: rgba(0, 40, 80, 0.72); }
.band-cream .stack-list.orbit-stack { background: rgba(0, 40, 80, 0.12); border-color: rgba(0, 40, 80, 0.12); }
.showcase-text-light h3 { color: var(--cream); }
.showcase-text-light p { color: var(--cream-dim); }
.showcase-text-light .kicker { color: var(--yellow); }
.band-cream .stack-list.orbit-stack { background: transparent; border: 0; border-radius: 0; gap: 0; }
.band-cream .orbit-stack li { border-top: 1px solid rgba(0, 40, 80, 0.12); padding-left: 0; padding-right: 0; }
.band-cream .orbit-stack li:last-child { border-bottom: 1px solid rgba(0, 40, 80, 0.12); }