/* Book A Demo landing page
   Loaded only by front-end/book-a-demo.blade.php (extends layouts.app-frontend, BS4). */

.bookdemo-page {
    font-family: 'montserrat', -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    position: relative;
    background: #fff;
}

/* ===== Hero ===== */
/* Deliberately not clipped: Lena is absolutely positioned and ends below the hero's content, so
   an overflow clip here would cut her feet off against the Brands section. The blobs still bleed
   sideways safely because .bookdemo-page carries overflow-x: hidden. */
.bookdemo-hero {
    position: relative;
    padding: 2vw 0 0;
}

.bookdemo-hero__inner {
    position: relative;
    z-index: 3;
}

/* The d-How It Works artboard lays the hero out on a 1300/1920 content box; Bootstrap's .container
   caps at 1140, which pulls the copy and the booking card left of where the artboard puts them.
   Kept as a ratio, not 1300px flat: a 1920 screen at 125% OS scale reports a 1536px CSS viewport,
   where a fixed 1300 would eat 85% of the width instead of the artboard's 68% and read as zoomed
   in. The px value caps growth beyond a true 1920. */
@media (min-width: 1200px) {
    .bookdemo-hero__inner {
        max-width: min(67.7vw, 1300px);
    }

    /* Artboard splits that box 45/55 rather than on a 12-column boundary; col-5/col-7 leaves the
       copy too narrow to hold the subcopy's four lines. */
    .bookdemo-hero__copy {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .bookdemo-hero__widget {
        flex: 0 0 55%;
        max-width: 55%;
    }
}

/* Artboard puts the headline 127px below the nav at 1920; tightened here by request. */
.bookdemo-hero__copy {
    padding-top: 7.2vw;
}

/* 55/1920 from the artboard. Larger than this and "CREATIVE TEAM." stops fitting the column,
   which drops the headline from the artboard's 3 lines to 5. */
.bookdemo-headline {
    color: #000;
    font-size: 2.865vw;
    line-height: 1.15;
    margin: 0;
}

/* Override global `h1 span { color:#ff9821 !important }` (styles.css) so the design's blue holds. */
.bookdemo-headline .bookdemo-headline__blue {
    color: #097ADE !important;
}

.bookdemo-subcopy {
    color: #000;
    font-size: 1.25vw;
    line-height: 1.7 !important;
    margin: 1.8vw 0 0;
    /* Artboard's measure is 29.4vw in Poppins; Montserrat runs wider and needs this to hold the
       same four lines. */
    max-width: 32vw;
    font-weight: bold;
}

/* Artboard right-aligns the card to the content box rather than butting it against the copy. */
.bookdemo-hero__widget {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    margin-top: 5.5vw;
}

/* Match the site's "Book a Demo" popup frame (.calendar-container in styles.css).
   640x483 is the artboard's card at 1920. Width scales with the content box; height stays fixed
   because the contents are a Calendly iframe that renders at a fixed px size — scaling the height
   down just clips the month grid behind an inner scrollbar. 483px is the height at which the
   full month plus the time-zone row fits. */
.bookdemo-calendly {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    width: min(33.33vw, 640px);
    max-width: 100%;
    height: 483px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

.bookdemo-verify {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0vw;
    text-align: center;
    color: #00325E;
}

.bookdemo-verify__title {
    font-size: 1.2vw;
    margin: 0 0 0.6vw;
    color: #00325E;
}

.bookdemo-verify__desc {
    font-size: 0.95vw;
    color: #6c757d;
    margin: 0 0 1vw;
}

.bookdemo-verify__status {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95vw;
}

.bookdemo-verify__status i {
    color: #097ADE;
    margin-right: 6px;
}

.bookdemo-verify__branding {
    margin-top: 1.2vw;
    padding-top: 1vw;
    border-top: 1px solid #f0f0f0;
    max-width: 22vw;
}

.bookdemo-verify__branding small {
    font-size: 0.72vw;
    color: #6c757d;
    line-height: 1.4;
}

/* ===== 2-column booking card (details left + calendar-only right) ===== */
.bookdemo-book {
    display: flex;
    height: 100%;
    text-align: left;
}

/* Card internals are sized in vw off the same 1920 artboard as the card itself, so the whole
   card scales as one unit — fixed px here would stay full-size as the card shrinks.
   40/60 rather than the artboard's 50/50: the artboard's calendar is a scaled screenshot, while
   the live widget needs the extra 10% of width to lay its month grid out inside 483px. */
.bookdemo-book__info {
    flex: 0 0 40%;
    max-width: 40%;
    padding: 1.35vw 1.25vw;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bookdemo-book__logo {
    width: 6.67vw;
    margin-bottom: 0.83vw;
}

.bookdemo-book__host {
    color: #6c757d;
    font-size: 0.79vw;
    margin-bottom: 0.1vw;
}

.bookdemo-book__title {
    color: #1a1a2e;
    font-size: 1.25vw;
    margin: 0 0 0.83vw;
}

.bookdemo-book__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 0.83vw;
}

.bookdemo-book__meta li {
    color: #4a5568;
    font-size: 0.75vw;
    margin-bottom: 0.52vw;
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
}

.bookdemo-book__meta i {
    color: #4a5568;
    margin-right: 0.52vw;
    margin-top: 0.16vw;
    flex: 0 0 auto;
}

.bookdemo-book__desc {
    color: #4a5568;
    font-size: 0.75vw;
    line-height: 1.5;
    margin: 0;
}

.bookdemo-book__cal {
    flex: 1 1 60%;
    height: 100%;
    overflow: hidden;
}

/* Decorative background blobs */
/* These are <picture> elements so the mobile artwork can be swapped in at 767.98px; the wrapper
   carries the positioning and the inner <img> just fills it. */
.bookdemo-blob {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.bookdemo-blob img,
.bookdemo-char img {
    display: block;
    width: 100%;
    height: auto;
}

.bookdemo-blob--tr {
    top: -14vw;
    right: -12vw;
    width: 50vw;
}

.bookdemo-blob--left {
    top: 11vw;
    left: -22vw;
    width: 34vw;
}

/* Brand characters */
.bookdemo-char {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.bookdemo-char--lena {
    left: -5vw;
    top: 29vw;
    width: 25vw;
}

/* Artboard bleeds Adam ~2vw past the right edge, not 8vw — beyond that .bookdemo-hero's overflow
   clip cuts the pencil off on laptop-width screens. */
.bookdemo-char--adam {
    right: -3vw;
    width: 25.2vw;
    top: 22vw;
}

/* ===== Feature pills (provided assets) ===== */
/* Not clipped: .bookdemo-pills sits on negative margins that pull its glow past this row's edges, and
   an overflow clip here slices the first pill's glow into a hard vertical line across Lena. */
.bookdemo-features {
    position: relative;
    padding: 1vw 0 0;
}

/* Artboard starts the pill rows on the same left edge as the headline and fits 3 per row. Each
   PNG carries ~20.1% of its height as transparent glow on each side, which the flex row measures
   as real width — left unchecked that inflates row 2 past the content box and spills the third
   pill onto a row of its own. The negative margins discount the glow: on the container so the
   first bar starts on the headline's left edge, and per pill so the bar-to-bar gap lands near the
   artboard's ~35px rather than a 48px double-glow. */
.bookdemo-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: normal;
    align-items: center;
    max-width: none;
    margin: 0 -1.27vw;
    row-gap: 0;
}

.bookdemo-pill {
    display: block;
    margin-right: -0.8vw;
}

.bookdemo-pill-img {
    display: block;
    height: 6.3vw;
    width: auto;
    max-width: 100%;
}

/* ===== Brands we partner with ===== */
.bookdemo-brands {
    padding: 2vw 0 5vw;
}

.bookdemo-brands__title {
    color: #111;
    font-size: 2.2vw;
    margin-bottom: 3vw;
}

.bookdemo-brands__col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bookdemo-brands__logo {
    max-width: 100%;
    max-height: 2.6vw;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
}

/* ===== Tablet: stack the 2-column card, hide side characters ===== */
/* .98 upper bounds match Bootstrap 4's own -down queries; a plain 991px/767px leaves fractional
   viewports (767.5 on some Android devices and at non-100% zoom) matching no breakpoint at all. */
@media (max-width: 991.98px) {
    /* The desktop 2vw top padding only clears the fixed 63px nav once the viewport is wide
       enough; below 992px it resolves too small and the nav lands on the headline and card. */
    .bookdemo-hero {
        padding-top: 60px;
    }

    .bookdemo-char {
        display: none;
    }

    /* The desktop width is a ratio of the viewport (33.33vw), which resolves to ~256px here and
       leaves the stacked card too narrow for Calendly's own minimum. Fill the column instead. */
    .bookdemo-calendly {
        width: 100%;
        height: auto;
        max-width: 560px;
    }

    .bookdemo-book {
        flex-direction: column;
    }

    /* Card internals go back to fixed px below 992: the vw sizes are ratios of the 1920 artboard
       and would render the title at ~5px once the card is a stacked, near-full-width block. */
    .bookdemo-book__info {
        flex: none;
        max-width: 100%;
        padding: 26px 24px;
        border-right: none;
        border-bottom: 1px solid #eee;
        text-align: center;
        align-items: center;
    }

    .bookdemo-book__logo {
        width: 128px;
        margin-bottom: 16px;
    }

    .bookdemo-book__host {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .bookdemo-book__title {
        font-size: 1.5rem;
        margin: 0 0 16px;
    }

    .bookdemo-book__meta {
        margin: 0 0 16px;
    }

    .bookdemo-book__meta li {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .bookdemo-book__meta i {
        margin-right: 10px;
        margin-top: 3px;
    }

    .bookdemo-book__desc {
        font-size: 0.9rem;
    }

    .bookdemo-book__cal {
        flex: none;
        width: 100%;
        height: 640px;
    }
}

/* ===== Mobile — "m-How It Works" artboard, 414px wide ===== */
/* vw values below are the artboard's px measurements over 414 (e.g. 30px gutter = 7.25vw), so a
   narrow phone scales the artboard down intact. Each min() caps growth at the value the artboard
   reaches on a 480px viewport — past that, unbounded vw makes the type tablet-sized. */
@media (max-width: 767.98px) {
    .bookdemo-page {
        /* Mobile pill canvas: 401px wide on the 414px artboard, capped so the bars stop growing
           once the viewport passes the artboard. Every pill offset below derives from this. */
        --bookdemo-pill-w: min(96.86vw, 401px);
    }

    .bookdemo-hero {
        display: flex;
        flex-direction: column;
        /* The site nav is fixed and overlays the hero, so this clears the header band below. */
        padding: min(31vw, 149px) 0 0;
    }

    /* function.js swaps .header-logo to the white Group 1079.svg on every mobile page except
       the homepage set, and leaves the white menu.png burger, so an inner page has to paint its
       own header backdrop or the nav renders white-on-white. This is the artboard's own band
       asset, sized to its native 414x129; stretching it keeps the arc full-bleed past 414. */
    .bookdemo-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: min(31.16vw, 129px);
        background: url('../images/hiw-book-a-demo/mobile/header-band.png') no-repeat top center;
        background-size: 100% 100%;
        z-index: 1;
    }

    /* The artboard interleaves the feature pills with the booking card (3 above, 3 below),
       but they live in a sibling .row on desktop. This `display: contents` chain dissolves
       .container > .row > .bookdemo-pills so the copy, the card and all six pills become direct
       flex children of .bookdemo-hero and `order` can sequence them. Drop any link in the chain
       and the pills collapse back below the card. */
    .bookdemo-hero__inner,
    .bookdemo-hero .row,
    .bookdemo-pills {
        display: contents;
    }

    .bookdemo-hero__copy {
        order: 1;
    }

    .bookdemo-pill--unlimited-design-requests {
        order: 2;
    }

    .bookdemo-pill--unlimited-revisions {
        order: 3;
    }

    .bookdemo-pill--fast-turnaround {
        order: 4;
    }

    .bookdemo-hero__widget {
        order: 5;
    }

    .bookdemo-pill--multiple-ongoing-requests {
        order: 6;
    }

    .bookdemo-pill--dedicated-designer-pm {
        order: 7;
    }

    .bookdemo-pill--flat-monthly-subscription {
        order: 8;
    }

    .bookdemo-char--lena {
        order: 9;
    }

    /* .container's gutter is gone with `display: contents`, so each flex child carries it. */
    .bookdemo-hero__copy,
    .bookdemo-hero__widget {
        width: 100%;
        max-width: 100%;
        padding: 0 7.25vw;
    }

    /* Blobs sit at z-index 1; without .bookdemo-hero__inner's stacking context each child needs its own. */
    .bookdemo-hero__copy,
    .bookdemo-pill,
    .bookdemo-char--lena {
        position: relative;
        z-index: 3;
    }

    .bookdemo-hero__copy {
        padding-top: 0;
        text-align: left;
    }

    .bookdemo-headline {
        font-size: min(9.2vw, 44px);
        line-height: 1.1;
    }

    .bookdemo-subcopy {
        font-size: min(4.35vw, 21px);
        line-height: 1.6 !important;
        max-width: 100%;
        margin: 3.5vw 0 0;
        font-weight: normal;
    }

    .bookdemo-hero__widget {
        margin: 6vw 0 2.7vw;
    }

    .bookdemo-calendly {
        width: 100%;
        height: auto;
        border-radius: 18px;
    }

    .bookdemo-verify {
        padding: 9vw 6vw;
    }

    .bookdemo-verify__title {
        font-size: min(5vw, 24px);
        margin-bottom: 2vw;
    }

    .bookdemo-verify__desc {
        font-size: min(3.6vw, 17px);
        margin-bottom: 3vw;
    }

    .bookdemo-verify__status {
        font-size: min(3.6vw, 17px);
    }

    .bookdemo-verify__branding {
        margin-top: 5vw;
        padding-top: 4vw;
        max-width: 82vw;
    }

    .bookdemo-verify__branding small {
        font-size: min(3vw, 14px);
    }

    /* The mobile exports are uniform where the desktop ones hug their label: every canvas is
       401x106 with the bar occupying 353x58 at inset L24 T15 R24 B33. Sizing by width therefore
       gives all six the artboard's 353px bar, and (6 + 24) / 414 puts their left edge on the same
       7.25vw gutter as the copy and the card. */
    .bookdemo-pill {
        width: var(--bookdemo-pill-w);
        align-self: flex-start;
        margin-left: calc(var(--bookdemo-pill-w) * 0.01496);
        /* Two stacked canvases leave 33 + 15 = 48px of dead glow between bars; pull that back to
           the artboard's 11px bar-to-bar gap. */
        margin-bottom: calc(var(--bookdemo-pill-w) * -0.09226);
    }

    .bookdemo-pill-img {
        width: 100%;
        height: auto;
    }

    .bookdemo-char--adam {
        display: none;
    }

    .bookdemo-char--lena {
        display: block;
        position: relative;
        width: min(67.6vw, 325px);
        align-self: center;
        margin: 12vw 0 0;
        top: auto;
        left: auto;
    }

    .bookdemo-blob--tr {
        top: 88vw;
        right: -52vw;
        width: 96vw;
    }

    /* Sits behind Lena; keep the bottom inside .bookdemo-hero's overflow clip so the arc reads as a
       curve rather than a hard cut at the section boundary. */
    .bookdemo-blob--left {
        display: block;
        top: auto;
        bottom: 15vw;
        left: -32vw;
        width: 112vw;
    }

    .bookdemo-brands {
        padding: 9vw 0 14vw;
    }

    /* The artboard sets this over two lines; Montserrat runs wider than the mock's Poppins,
       so the measure is capped to force the same break rather than shrinking the type. */
    .bookdemo-brands__title {
        font-size: min(7.25vw, 35px);
        line-height: 1.25;
        max-width: min(58vw, 280px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 9vw;
    }

    .bookdemo-brands__col {
        margin-bottom: 12vw;
    }

    .bookdemo-brands__col:last-child {
        margin-bottom: 0;
    }

    .bookdemo-brands__logo {
        max-height: min(8vw, 38px);
    }
}