/* ==========================================================================
   markXpand — Book a demo (/BookDemo)
   --------------------------------------------------------------------------
   Layered on top of product-page.css (shell, type, buttons, FAQ, closing band)
   and contact-page.css (the .ct-* field language the details form reuses
   wholesale). Nothing here re-declares a colour, a radius, a shadow or an
   easing that those two already own — every value below points at a token.

   THE SHAPE. One card floating on the shared deep-blue band, split into an
   aside that says what the meeting is and a booking column that runs the three
   steps down it: day, time, details. That is the same composition /Contact
   uses, with the graphic half replaced by the meeting's own facts — a picture
   would be decoration on the one page where the visitor is being asked to
   commit to a specific half-hour.

   ONE RULE. Everything that MOVES here is a CSS transition on a state class
   book-demo.js toggles, never an animation the script drives frame by frame,
   so a blocked or failed script leaves a page that still books.

   Responsive rules go LAST — later unmediated blocks in this project's landing
   CSS have silently beaten earlier media queries before.
   ========================================================================== */


/* ==========================================================================
   0. PAGE
   ========================================================================== */
/* The ground ramp comes from .ct-page (the body carries it) — this page opens
   on the blue band exactly like /Contact, so the same ramp is correct. Only
   the page-local tokens are declared here. */
.bd-page {
    --bd-line: #dce8f2;        /* the calendar's own hairline, a shade warmer than --hairline */
    --bd-off: #9fb1c0;         /* a closed day: readable as "not available", not as an error */
    --bd-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Visually hidden, still read aloud. The scheduler's own <h2> is a landmark for
   assistive tech; on screen the card's three numbered steps say the same thing. */
.bd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   1. HERO — the band the card floats on
   ========================================================================== */
.bd-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* Shorter than /Contact's: the card below is the tallest thing on the site,
       so the hero's job is to name the page and get out of the way. */
    padding: clamp(128px, 14vw, 176px) 0 clamp(46px, 5vw, 74px);
}

.bd-hero-head {
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
}

/* Inverted for the dark ground, on the alphas .ct-hero already proved against
   this ramp: .92 on the mono eyebrow and .9 on the lede both clear 4.5:1 at the
   band's lightest stop. */
.bd-hero .pr-kicker { color: rgba(255, 255, 255, .92); }
.bd-hero .pr-kicker::before { background: #fff; }
.bd-hero .pr-display { color: #fff; }
.bd-hero .pr-grad { color: var(--pr-band-accent); }

.bd-hero .pr-lede {
    color: rgba(255, 255, 255, .9);
    margin: 20px auto 0;
    max-width: 58ch;
}

/* The four facts about the meeting, as one line of chips under the headline.
   They are on the hero rather than in the card because they answer "should I
   book at all", which comes before "when". */
.bd-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: clamp(26px, 3vw, 38px) auto 0;
}

.bd-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.bd-facts i { color: var(--pr-band-accent); font-size: .8rem; }


/* ==========================================================================
   2. THE CARD
   ========================================================================== */
.bd-sched {
    position: relative;
    /* Pulled up onto the band so the card straddles the seam, the way /Contact's
       does. The section's own bottom padding carries it into the next band. */
    margin-top: calc(-1 * clamp(20px, 3vw, 40px));
    padding-bottom: var(--space-section);
}

.bd-card {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    background: #fff;
    border-radius: var(--ct-corner, var(--radius-lg));
    overflow: hidden;
    /* The same three-stop lift .ct-card uses, so the two cards read as one
       family rather than as two attempts at the same idea. */
    box-shadow:
        0 2px 6px rgba(9, 30, 48, .1),
        0 18px 40px -12px rgba(9, 30, 48, .3),
        0 60px 110px -30px rgba(9, 30, 48, .45);
}


/* ==========================================================================
   3. THE ASIDE — what the meeting is
   ========================================================================== */
.bd-meta {
    padding: clamp(28px, 3vw, 46px);
    background: linear-gradient(180deg, #f4fafe 0%, #eaf3fa 100%);
    border-inline-end: 1px solid var(--bd-line);
}

.bd-meta-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--bd-line);
}

.bd-meta-brand img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-xs);
    object-fit: contain;
    background: #fff;
    padding: 4px;
    box-shadow: var(--shadow-sm);
}

.bd-meta-org {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bd-meta-title {
    margin: 2px 0 0;
    font-family: var(--font-h);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
}

.bd-meta-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 11px;
}

.bd-meta-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .938rem;
    font-weight: 600;
    color: var(--text-body);
}

.bd-meta-list i {
    color: var(--brand-dark);
    font-size: .85rem;
    /* Optical: the icons sit on the cap height of the first line, not on its box. */
    margin-top: .28em;
    flex: 0 0 16px;
}

.bd-meta-lede {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.bd-meta-bullets {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.bd-meta-bullets li {
    position: relative;
    padding-inline-start: 24px;
    font-size: .938rem;
    line-height: 1.6;
    color: var(--text-body);
}

/* A tick rather than a bullet: each line is something the call delivers. */
.bd-meta-bullets li::before {
    content: '\f00c';                    /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: .18em;
    font-size: .7rem;
    color: var(--brand);
}

.bd-meta-note {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--bd-line);
}

.bd-meta-note i { color: var(--brand-dark); font-size: .85rem; margin-top: .25em; }
.bd-meta-note p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.bd-meta-note a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   4. THE BOOKING COLUMN
   ========================================================================== */
.bd-book { padding: clamp(28px, 3vw, 46px); }

/* Set by book-demo.js once the booking is confirmed — see the note there. */
.bd-book.is-done { display: grid; align-content: center; }

.bd-form { margin-top: 0; }

/* The rule between one step and the next. Applies to steps 1→2 while they are
   stacked, and always to the details step below them — see §7 for the wide
   layout, where 1 and 2 become columns and the rule between them turns
   vertical. */
.bd-step + .bd-step,
.bd-when + .bd-step {
    margin-top: clamp(26px, 3vw, 38px);
    padding-top: clamp(26px, 3vw, 38px);
    border-top: 1px solid var(--bd-line);
}

.bd-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.bd-step-n {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
}

.bd-step-head h3 {
    margin: 0;
    font-family: var(--font-h);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
}


/* ---------- 4a. the calendar ---------- */
.bd-cal {
    border: 1px solid var(--bd-line);
    border-radius: var(--radius-md);
    padding: 14px;
    background: #fbfdff;
}

.bd-cal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.bd-cal-month {
    margin: 0;
    font-family: var(--font-h);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.bd-cal-nav {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 1px solid var(--bd-line);
    background: #fff;
    color: var(--brand-dark);
    font-size: .8rem;
    cursor: pointer;
    transition: background .2s var(--bd-ease), border-color .2s var(--bd-ease), color .2s var(--bd-ease);
}

.bd-cal-nav:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.bd-cal-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bd-cal-nav:disabled { opacity: .35; cursor: default; }

.bd-cal-dow,
.bd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.bd-cal-dow {
    margin-bottom: 6px;
}

.bd-cal-dow span {
    text-align: center;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Every month in range is in the DOM; only the current one is displayed. Not
   `hidden` on the element, because the grid display has to survive being shown
   again — and not opacity, because a hidden month must not be tabbable. */
.bd-cal-grid { display: none; }
.bd-cal-grid.is-on { display: grid; }

.bd-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--text-body);
    font-family: var(--font-b);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--bd-ease), color .18s var(--bd-ease),
                border-color .18s var(--bd-ease), transform .18s var(--bd-ease);
}

.bd-day:hover:not(.is-off):not(.is-on) {
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-1px);
}

.bd-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bd-day.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Closed: a weekend, a day inside the lead time, or past the horizon. Rendered
   as a <span>, so it is neither focusable nor announced — the number is kept
   only so the month's shape stays readable. */
.bd-day.is-off {
    background: transparent;
    color: var(--bd-off);
    cursor: default;
}

.bd-cal-pad { aspect-ratio: 1; }

/* ---------- 4b. timezone + slots ---------- */
.bd-tz { margin-bottom: 20px; }

.bd-tz-note {
    margin: 8px 0 0;
    font-size: .813rem;
    color: var(--text-muted);
}

.bd-slots-for {
    margin: 0 0 12px;
    font-family: var(--font-h);
    font-size: .938rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.bd-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
}

/* Every hour of the day is offered, so this list is 24 buttons long — roughly three
   times the height of the calendar it sits beside. Capped to about the calendar's
   height and scrolled from 992px up (where the two are columns of one band); stacked
   below that there is nothing to stay level with, so it runs in full.

   The cap is in rem, not vh: it has to relate to the month grid next to it, not to
   the window. `overscroll-behavior` keeps a flick inside the list from carrying on
   into the page once it bottoms out. */
@media (min-width: 992px) {
    .bd-slots {
        max-height: 25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Room for the scrollbar so the last column is not clipped by it. */
        padding-inline-end: 6px;
    }
}

.bd-slot {
    display: grid;
    gap: 1px;
    padding: 10px 8px;
    border: 1px solid var(--bd-line);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: background .18s var(--bd-ease), border-color .18s var(--bd-ease),
                color .18s var(--bd-ease), transform .18s var(--bd-ease);
}

.bd-slot:hover:not(.is-on) {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.bd-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bd-slot-t {
    font-family: var(--font-h);
    font-size: .938rem;
    font-weight: 700;
    color: var(--ink);
    /* Tabular so the column of times does not jitter as labels change zone. */
    font-variant-numeric: tabular-nums;
}

/* Carries the visitor's own DATE, and only when it differs from the Dubai one —
   book-demo.js empties it otherwise, and an empty line would still hold a grid
   row open. Before script runs it holds the GST label, which is what the
   unconverted times above it actually are. */
.bd-slot-z {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.bd-slot-z:empty { display: none; }

.bd-slot.is-on {
    background: var(--brand);
    border-color: var(--brand);
}

.bd-slot.is-on .bd-slot-t,
.bd-slot.is-on .bd-slot-z { color: #fff; }

/* A slot that falls on a DIFFERENT calendar day where the visitor is than it does
   in Dubai. The date under the time says which day; this only colours it, so the
   line reads as information rather than as a caption nobody looks at. The
   button's title attribute spells the whole day out. */
.bd-slot.is-shifted .bd-slot-z { color: var(--brand-dark); }
.bd-slot.is-on.is-shifted .bd-slot-z { color: #fff; }


/* ---------- 4c. the chosen slot, restated ---------- */
.bd-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: #eef7fd;
    border: 1px solid #cfe6f6;
    font-family: var(--font-h);
    font-size: .938rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.bd-picked i { font-size: .9rem; }

.bd-submit { min-width: 200px; }


/* ==========================================================================
   5. THE CONFIRMATION
   ========================================================================== */
.bd-done {
    text-align: center;
    padding: clamp(20px, 3vw, 34px) 0;
}

.bd-done:focus { outline: none; }

.bd-done-mark {
    display: inline-grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #eaf7f0;
    color: #1c6b45;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.bd-done-h {
    margin: 0 0 12px;
    font-family: var(--font-h);
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.bd-done-when {
    margin: 0 0 6px;
    font-family: var(--font-h);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.bd-done-sub {
    margin: 0 0 24px;
    font-size: .875rem;
    color: var(--text-muted);
}

.bd-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.bd-done-actions .btn i { margin-inline-end: 8px; }

.bd-done-note {
    margin: 0;
    font-size: .875rem;
    color: var(--text-muted);
}


/* ==========================================================================
   6. RTL
   --------------------------------------------------------------------------
   Almost nothing: the layout is built on logical properties throughout, so the
   card, the calendar and the slot grid mirror on their own. The chevrons are
   swapped in the MARKUP (fa-chevron-left/right pick by direction there), which
   keeps a mirrored glyph from having to be un-mirrored here.
   ========================================================================== */
[dir="rtl"] .bd-cal-dow span,
[dir="rtl"] .bd-slot { direction: rtl; }

/* Times stay LTR whatever the page direction — "09:00" is not a phrase, and RTL
   reordering turns it into "00:09" on some engines. */
[dir="rtl"] .bd-slot-t,
[dir="rtl"] .bd-cal-month,
[dir="rtl"] .bd-day { direction: ltr; unicode-bidi: isolate; }


/* ==========================================================================
   7. RESPONSIVE — LAST, deliberately
   --------------------------------------------------------------------------
   This project's landing CSS has been bitten before by an unmediated block
   later in the file quietly overriding an earlier media query. Everything
   breakpoint-dependent lives here, at the bottom, so that cannot happen.
   ========================================================================== */

/* From 992px: the day and the time become two columns of one band, and the rule
   that separated them turns from a horizontal line into the gutter between them.
   Below this width .bd-when is an ordinary block and the stacked rule above
   applies unchanged. */
@media (min-width: 992px) {
    .bd-when {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
        gap: clamp(24px, 2.4vw, 34px);
    }

    .bd-when .bd-step + .bd-step {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-inline-start: 1px solid var(--bd-line);
        padding-inline-start: clamp(24px, 2.4vw, 34px);
    }
}

/* Tablet and below: the aside stops being a column and becomes a header strip
   above the booking flow. Its bullets are the part that stops earning its
   height on a narrow screen, so they go — the hero's chips and the FAQ below
   already carry the same promises. */
@media (max-width: 991.98px) {
    .bd-card { grid-template-columns: minmax(0, 1fr); }

    .bd-meta {
        border-inline-end: none;
        border-bottom: 1px solid var(--bd-line);
    }

    .bd-meta-bullets,
    .bd-meta-lede { display: none; }

    .bd-meta-list {
        margin-bottom: 20px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 575.98px) {
    .bd-sched { margin-top: 0; }

    /* The calendar is the one thing that cannot shrink below seven columns, so
       everything around it gives up its padding instead. */
    .bd-book,
    .bd-meta { padding: 22px 18px; }

    .bd-cal { padding: 10px; }
    .bd-cal-dow span { font-size: .58rem; }
    .bd-day { font-size: .8rem; }

    .bd-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }

    .bd-facts { gap: 8px; }
    .bd-facts span { padding: 7px 13px; font-size: .8rem; }

    .bd-picked {
        align-items: flex-start;
        font-size: .875rem;
    }

    .bd-picked i { margin-top: .2em; }

    .bd-done-actions .btn { width: 100%; justify-content: center; }
}

/* Somebody who has asked not to be moved still gets every state change — they
   just arrive instead of easing in. */
@media (prefers-reduced-motion: reduce) {
    .bd-day,
    .bd-slot,
    .bd-cal-nav { transition: none; }

    .bd-day:hover,
    .bd-slot:hover { transform: none; }
}