/* Book a demo page. Builds on site.css and time.css; only the booking frame lives here.
   The Microsoft Bookings page is light in both themes, so it sits in a light panel, like the product screenshots. */

.demo-section {
    padding-top: clamp(48px, 7vw, 88px);
}

.demo-head {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.demo-head .lede {
    margin-top: 18px;
}

.demo-note {
    margin-top: 14px;
    max-width: 62ch;
    color: var(--ink-soft);
}

.booking-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    overflow: hidden;
}

.booking-frame {
    display: block;
    width: 100%;
    height: 1100px;
    border: 0;
}

.booking-fallback {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .booking-frame {
        height: 1500px;
    }
}