/* /request-a-demo (ET-14755). Figma: Request a demo 28957:89567, at 1600 and 390.

   One centred column: the hero, the toggle, a card, then the trust band and the logo strip, which
   are both components and bring their own spacing. This file owns the card shell and the rhythm
   between those pieces -- everything inside the card is a component.

   The header is cleared by the shared page offset (.site-main--offset); what is here is the hero
   section's own padding on top of it, 48 at 1600 and none at 390. */
.request-a-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 0 var(--space-64);
}

/* Shorter than the homepage's, which is the only thing that differs, so it is the shared element
   with its height set -- the same call /404 makes. */
.request-a-demo__wash {
    --page-wash-height: 236px;
}

/* The hero is a step up from section-head's defaults: the frame sets the heading to Heading xL
   (48/56, Bold) and the line under it to Body 2xL (24/32), where the component's own steps are Lg
   and Lg. They are custom properties with those defaults, so setting them here changes this page
   and nothing else. The 16 between caption and heading is the frame's too; the component's 12 is
   what every other head uses. */
.request-a-demo .section-head {
    --section-head-caption-gap: var(--space-16);
    --section-head-headline-size: var(--type-heading-xl-size);
    --section-head-headline-weight: var(--heading-weight-xl);
    --section-head-headline-line: var(--type-heading-xl-line);
    --section-head-headline-track: var(--type-heading-xl-track);
    --section-head-description-size: var(--type-body-2xl-size);
    --section-head-description-line: var(--type-body-2xl-line);

    align-self: stretch;
}

/* The frame breaks the line after "integrations,"; left to itself the browser fits one more clause
   on the first line. The copy carries the break as a newline in front matter and this renders it,
   which keeps the wording and its shape in the same place -- and keeps the meta description, which
   is the separate `description` key, free of it.

   Only where the frame draws two lines. Below 1200 the measure is narrower than the first line
   anyway, so holding the break there would strand a short second line under a wrapped first. */
@media (min-width: 1200px) {
    .request-a-demo .section-head__description {
        white-space: pre-line;
    }
}

.request-a-demo__panel {
    width: 100%;
    max-width: 864px;
}

/* The Google embed needs the room, so the calendar panel runs the full container where the form
   panel is 864. That is the frame: `GCalendar` is 1312 wide and `Form` is 864. */
.request-a-demo__panel--wide {
    max-width: none;
}

.request-a-demo__panel[hidden] {
    display: none;
}

/* 33 of padding in the frame is 32 and the 1px edge. Written as the two parts rather than the one
   number, because the padding is on the spacing scale and the border is not part of it. */
.request-a-demo__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-32);
    background: var(--white);
    border: 1px solid var(--black-12);
    border-radius: var(--radius-16);
}

/* The embed is a third party: it brings its own layout and its own scrolling, so the card gives it
   a width and a height and nothing else. The height is the frame's 1234. */
.request-a-demo__booking {
    width: 100%;
    height: 1234px;
    border: 0;
}

/* The fields are 16 apart, which is the frame's spacer between every one of them. The head above
   is separated by the card's own 24. */
.request-a-demo__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

@media (max-width: 833.95px) {
    .request-a-demo {
        padding-block: 0 var(--space-48);
    }

    /* The card loses its radius and its side padding against the screen edge, the same call
       .card-grid--panel makes at this width. */
    .request-a-demo__card {
        padding: var(--space-24) var(--space-16);
    }

    /* A thousand-pixel iframe on a phone is a scroll trap; the embed has its own inner scrolling
       and reflows to whatever it is given. */
    .request-a-demo__booking {
        height: 900px;
    }
}

@media (min-width: 1200px) {
    .request-a-demo {
        padding-block: var(--space-48) var(--space-96);
    }

    .request-a-demo__wash {
        --page-wash-height: 360px;
    }
}