/* ═══════════════════════════════════════════════════════════════════════
   BOOK A DEMO — standalone conversion page (ships with no nav, no footer)

   Implements Figma "Web 2.0" file 3eM6tH658vTCTpJrFOc6jS, node 1786:56509
   ("Book a Demo", 1800×3013), with the hero replaced by node 1844:36746
   ("Main Content", 1560×964). Everything is scoped under `.bd` /
   `body.bd-page` so it cannot leak into the shared stylesheets.

   Light-only by design — the frame has no dark counterpart and the page
   carries no theme toggle (no nav), so colours are literal Figma values
   rather than theme tokens.

   Reused from elsewhere in the repo:
     · `.home-faq*` FAQ component, ported from the homepage's inline <style>
       (markup, styling and toggle script all match it)
     · `.tag`/`.section-eyebrow` and `.section-title` from brand.css
     · `.bd-story*` is the shipped `.f2-teams-card*` component from
       /solutions/finance-automation-solutions/ (same Figma component set),
       plus a `--wide` variant for the 784px DISH story
     · `.bd-logos*` is the shipped `.f2-customer-logos*` marquee
   ═══════════════════════════════════════════════════════════════════════ */

body.bd-page {
  /* Figma variables for this frame */
  --bd-page:   #e5e5e5;         /* frame fill                              */
  --bd-dark:   #171717;         /* schedule card fill                      */
  --bd-lime:   #f2ff70;         /* colors/primary-dark                     */
  --bd-onDark: #a3a3a3;         /* base/muted-foreground                   */
  --bd-ink:    #0a0a0a;         /* colors/background-dark, base/foreground */
  --bd-ink2:   #171717;         /* base/secondary-foreground               */
  --bd-muted:  #525252;         /* colors/sidebar-muted-dark               */
  --bd-muted2: #737373;         /* base/muted-foreground, colors/ring-dark */
  --bd-border: #e5e5e5;         /* colors/border-light                     */
  /* Rules drawn directly on the page background need their own value: the
     homepage's #e5e5e5 dividers read because that section sits on #f5f5f5,
     but this page's background IS #e5e5e5, so #e5e5e5 is invisible. This
     keeps the same ~16-step contrast the homepage rules have. */
  --bd-rule:   #d4d4d4;
  --bd-layout: #fafafa;         /* base/layout                             */
  --bd-accent: #f0f0f0;         /* colors/accent-light                     */
  --bd-gap:    20px;
}

/* ── Page shell ──
   Every other page reserves 64px at the top of <body> for the fixed nav.
   This page has no nav, so that offset has to go. */
body.bd-page {
  padding-top: 0;
  background: var(--bd-page);
  color: var(--bd-ink);
}

.bd {
  padding: clamp(32px, 6vw, 108px) 0 clamp(64px, 8vw, 143px);
}

.bd-wrap {
  box-sizing: border-box;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6.67vw, 120px);
}

.bd :where(h1, h2, h3, p) { margin: 0; }

/* ═══ HEADER — back link + display headline ═══ */
.bd-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
.bd-back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--bd-muted);
  transition: color .2s ease;
}
.bd-back:hover,
.bd-back:focus-visible { color: var(--bd-ink); }

/* Heading/2 — 44/48.4/-1.32px in the frame. */
.bd-h1 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(30px, 2.9vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #000;
}

.bd-h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(28px, 2.75vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bd-ink);
}

/* ═══ HERO — split panel (Figma 1844:36746) ═══
   One #fafafa surface, 1560×900, radius 32. The right half is a lime-gradient
   panel (radius 24, 0.7px #737373 hairline) laid flush over it — the two radii
   differ in the frame, which is what leaves the small #fafafa slivers where the
   panel's corners sit inside the surface's. Nothing is clipped, so those show
   the same way here.

   Vertically the frame is 900px, but the live HubSpot iframe needs its full
   680px (at 670 it clips the last week), so the hero is content-height —
   ~950px — rather than pinned to 900. */
.bd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bd-layout);
  border-radius: 32px;
}

.bd-hero__left {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 2.6vw, 40px);
  /* Deeper than the frame's 116px: the scheduler column sets the row height, so
     this is the lever that decides how far down `margin-top: auto` drops the
     logo marquee. */
  padding-bottom: clamp(40px, 9vw, 140px);
}

/* Figma indents the list 67px past the headline and caps it at 444px. */
.bd-points {
  margin: 63px 0 0 clamp(0px, 4.3vw, 67px);
  padding: 0;
  max-width: 444px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 24px marker box carrying an 8px square pinned to its bottom centre, so the
   square lands on the title's optical centre. */
.bd-point {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 12px;
}
.bd-point::before {
  content: '';
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  background: linear-gradient(var(--bd-ink2), var(--bd-ink2)) bottom center / 8px 8px no-repeat;
}
.bd-point__title {
  grid-area: 1 / 2;
  padding: 4px 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #131313;
}
/* The frame sets the third description in rgba(19,19,19,.6) and the other two in
   the #525252 token; taking the token for all three keeps them consistent and
   holds 7.5:1 on #fafafa. */
.bd-point__desc {
  grid-area: 2 / 2;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--bd-muted);
}

/* ── Scheduler panel ──
   Gradient angle/stops straight from the frame. The card is capped at its own
   design width (517) rather than the 450 the frame scales it to, because that
   is what leaves the HubSpot embed its full 430px. */
/* flex-start, not centre: the card's top edge then stays pinned at the panel's
   padding-top no matter how tall the card resolves to, so trimming its height
   takes the trim off the bottom instead of sliding the whole card down. */
.bd-hero__right {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 5vw, 86px) clamp(16px, 3.8vw, 60px);
  border: .7px solid var(--bd-muted2);
  border-radius: 24px;
  background: linear-gradient(46.7deg, #f2ff70 1.55%, #d4d4d4 84.46%, #fafafa 105.72%);
}

/* ── Schedule card (holds the existing HubSpot meetings embed) ──
   Sized down a step from the card's own 517px design width. The embed drops to
   620px with it: HubSpot's panel stretches to whatever height it is given, and
   the calendar itself only needs ~500px even in a six-week month (Aug 2026,
   which starts on a Saturday, is one), so 620 keeps headroom without the 180px
   of dead panel 680 was leaving. */
.bd-hero__right .bd-schedule {
  width: 100%;
  max-width: 470px;
  gap: 28px;
  padding: 28px;
}
.bd-hero__right .bd-schedule__embed { height: 620px; }
.bd-schedule {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 33px;
  border: 1px solid var(--bd-border);
  border-radius: 16px;
  overflow: hidden;
  /* Dark card now; the lime wash the earlier revision used is gone. The 1px
     #e5e5e5 border is what the frame specifies even though it matches the page
     behind it — it reads as a hairline only where the card meets a card. */
  background: var(--bd-dark);
}
.bd-schedule__head {
  width: 100%;
  max-width: 430px;
}
.bd-schedule__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 39.6px;
  color: var(--bd-lime);
}
.bd-schedule__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--bd-onDark);
}
/* The embed itself is untouched — only its box moves. */
/* Design box is 430×670. The live embed needs the full 680px the HubSpot
   iframe asks for — at 670 it clips the last week of the calendar. */
.bd-schedule__embed {
  width: 100%;
  max-width: 430px;
  height: 680px;
  border-radius: 7px;
  overflow: hidden;
}
.bd-schedule__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Schedule card: the one panel on this row that does something ──
   The two feature cards beside it are inert by design, so this card carries an
   affordance they do not. On hover — and whenever focus is anywhere inside it,
   which is how a keyboard user reaching the embed sees the same state — the
   hairline that was invisible against the page turns lime, a lime bloom and a
   drop shadow lift the card off the surface, and the fill warms a step.

   Deliberately no transform and no `cursor: pointer`. This card wraps the
   HubSpot iframe: transforming an iframe's ancestor re-rasterizes the embed,
   and only the calendar inside is actually clickable, so a pointer cursor over
   the padding would promise a click that does nothing. */
.bd-schedule {
  transition:
    border-color .26s ease,
    box-shadow .26s ease,
    background-color .26s ease;
}
.bd-schedule:hover,
.bd-schedule:focus-within {
  border-color: var(--bd-lime);
  background: #1f1f1f; /* --bd-dark, one step up */
  box-shadow:
    0 18px 44px rgba(23, 23, 23, .18),
    0 0 0 3px rgba(242, 255, 112, .16);
}
/* Sized to the text so the rule tracks the title rather than the 430px head. */
.bd-schedule__title {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.bd-schedule__title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--bd-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, .28, .2, 1);
}
.bd-schedule:hover .bd-schedule__title::after,
.bd-schedule:focus-within .bd-schedule__title::after {
  transform: scaleX(1);
}

/* ═══ CUSTOMER LOGO MARQUEE ═══
   Sits at the foot of the hero's left panel; `auto` takes up whatever slack the
   scheduler column leaves, with 51px as the floor the frame specifies. */
.bd-logos {
  position: relative;
  height: 58px;
  margin-top: auto;
  min-height: 58px;
  padding-top: 51px;
  box-sizing: content-box;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.bd-logos-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: bd-logo-marquee 60s linear infinite;
}
.bd-logos-set {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.bd-logos-track img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  opacity: .6;
  /* cr-garden SVGs ship light-grey for dark backgrounds; flatten to dark here */
  filter: brightness(0);
}
@keyframes bd-logo-marquee { to { transform: translateX(-50%); } }

/* ═══ CUSTOMER STORIES ═══ */
.bd-teams { margin-top: clamp(72px, 11vw, 200px); }
.bd-teams__title { margin-bottom: 45px; }

.bd-teams-grid {
  display: grid;
  grid-template-columns: 784fr 370fr 370fr;
  gap: 18px;
  --bd-story-dur:  .6s;
  --bd-story-ease: cubic-bezier(.22, .28, .2, 1);
}

.bd-story {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 437px;
  background: #d4d4d4;
  border: 1px solid var(--bd-ink2);
  overflow: hidden;
  color: inherit;
}

/* Header zone — logo (+ tag), above the artwork */
.bd-story__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 32px 0;
}
/* Figma's logo slot is a fixed 94×48 box regardless of the logo's own height,
   which is what puts the tag chip 88px down from the card top. */
.bd-story__logo {
  display: flex;
  align-items: center;
  height: 48px;
}
.bd-story__logo img {
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 32px;
  object-fit: contain;
  object-position: left center;
}
.bd-story__tag {
  align-self: flex-start;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--bd-ink2);
  white-space: nowrap;
  background: var(--bd-accent);
  border: 1px solid var(--bd-ink2);
  border-radius: 2px;
}

/* Background illustration — fills the card behind the bottom bar */
.bd-story__media {
  position: absolute;
  inset: 96px 0 0 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}
/* Artwork scale/offset per card, fitted to the Figma instances (the design
   places each illustration at its own size: TTX_IMG 529×313, EOS_IMG 388×351). */
.bd-story__media img {
  width: auto;
  height: auto;
  max-width: 68%;
  max-height: 92%;
  margin-top: 8px;
  object-fit: contain;
  object-position: right top;
  filter: grayscale(1);
  transform: scale(1);
  transform-origin: left top;
  transition: transform var(--bd-story-dur) var(--bd-story-ease);
}
.bd-story--eos .bd-story__media img {
  max-width: 78%;
  margin-top: -20px;
}
.bd-story:hover .bd-story__media img,
.bd-story:focus-within .bd-story__media img { transform: scale(1.06); }

/* Bottom bar */
.bd-story__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 24px 32px 28px;
  overflow: hidden;
  border-top: 1px solid var(--bd-ink2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(90deg, rgba(242, 255, 112, .94) 0%, rgba(240, 240, 240, .94) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
  transition: box-shadow var(--bd-story-dur) var(--bd-story-ease);
}
.bd-story:hover .bd-story__bar,
.bd-story:focus-within .bd-story__bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .04);
}
.bd-story__bar-main { position: relative; z-index: 1; }
.bd-story__bar h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--bd-ink2);
}
.bd-story__desc {
  margin-top: 16px;
  max-width: 320px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #404040;
}
.bd-story__cta-wrap { padding-top: 14px; }
.bd-story__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 131px;
  height: 35px;
  max-width: 100%;
  padding: 5px 5.52px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  color: var(--bd-ink2);
  background: transparent;
  border: .7px solid var(--bd-ink2);
  border-radius: 2.58px;
  transition: background-color .2s ease, color .2s ease;
}
.bd-story:hover .bd-story__cta,
.bd-story:focus-within .bd-story__cta {
  background: var(--bd-ink2);
  color: var(--bd-layout);
}

/* ── Wide story (DISH): photo bleeds edge to edge, logo reversed out ──
   Geometry from the "Customer Story Long" instance (1789:90051): logo 138.8×63.6
   at 40.4/25, bar 152 tall with 32/42 padding, title 24px bold, body 444 wide. */
.bd-story--wide .bd-story__head { padding: 25px 40px 0; }
.bd-story--wide .bd-story__logo { height: auto; }
.bd-story--wide .bd-story__logo img {
  width: 139px;
  height: 64px;
  max-width: none;
  max-height: none;
}
.bd-story--wide .bd-story__media { inset: 0; }
.bd-story--wide .bd-story__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin-top: 0;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.05);
}
.bd-story--wide .bd-story__bar { padding: 32px 42px; }
.bd-story--wide .bd-story__bar h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}
.bd-story--wide .bd-story__desc {
  max-width: 444px;
  font-size: 16px;                /* Body/Medium 16/24 */
}

/* ═══ FAQ ═══
   Ported verbatim from the homepage `.home-faq` component (inline <style> in
   index.html) so the two read as one component: left heading rail, right list
   of thin-ruled rows. Kept the `home-faq__*` names — if that CSS is ever
   lifted into a shared stylesheet, these overrides simply fall away. */
.bd-faq {
  margin-top: 40px;
  padding: 100px 0;
  border: none;
}
.bd .home-faq__grid {
  display: grid;
  grid-template-columns: 355px 1fr;
  gap: 55px;
  align-items: start;
  margin-top: 8px;
}
.bd .home-faq__title {
  text-align: left;
  margin-top: 12px;
  margin-bottom: 0;
}

.bd .home-faq__list { display: flex; flex-direction: column; }
.bd .home-faq__item { border-top: 1px solid var(--bd-rule); }
/* Close the list off, as the homepage rules read against its following section. */
.bd .home-faq__item:last-child { border-bottom: 1px solid var(--bd-rule); }
.bd .home-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bd-ink2);
  transition: color .2s ease;
}
.bd .home-faq__trigger:hover { color: var(--bd-muted); }
.bd .home-faq__trigger:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 2px; }
.bd .home-faq__chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: currentColor;
  transition: transform .25s ease;
}
.bd .home-faq__item--open .home-faq__chev { transform: rotate(180deg); }
.bd .home-faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.bd .home-faq__item--open .home-faq__body { max-height: 600px; }
.bd .home-faq__body-inner {
  max-width: 640px;
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bd-muted);
}
.bd .home-faq__body-inner p { margin: 0; }

/* ═══ FOOT MARK — brand lockup stands in for the site footer ═══ */
.bd-footmark {
  margin-top: 86px;
  text-align: center;
}
.bd-footmark img {
  display: inline-block;
  width: auto;
  height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* The scheduler column stops sharing the row once its half can no longer hold
   the embed's 430px plus the card's 33px gutters — squeezed narrower, the
   HubSpot calendar grid breaks. Stacked, the gradient panel becomes a band
   under the story rather than beside it. */
@media (max-width: 1080px) {
  .bd-hero { grid-template-columns: minmax(0, 1fr); }
  .bd-hero__left { padding-bottom: clamp(32px, 5vw, 56px); }
  .bd-points { margin-left: 32px; max-width: none; }
  .bd-hero__right { padding: clamp(32px, 6vw, 56px) clamp(16px, 4vw, 40px); }
  .bd-logos { padding-top: 40px; }
}

@media (max-width: 560px) {
  .bd-hero { border-radius: 20px; }
  .bd-hero__right { border-radius: 20px; }
  .bd-points { margin-left: 0; }
  .bd-schedule { padding: 32px 20px; }
}

@media (max-width: 1100px) {
  .bd-teams-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bd-story--wide { grid-column: 1 / -1; }
}

/* Same collapse point the homepage component uses. */
@media (max-width: 768px) {
  .bd .home-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bd-faq { padding: 64px 0; }
}

@media (max-width: 760px) {
  .bd-teams-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-story--wide { grid-column: auto; }
  .bd-teams__title { margin-bottom: 28px; }
  .bd-story__desc { max-width: none; }
  .bd-footmark img { height: 32px; }
}

@media (max-width: 520px) {
  .bd-schedule { padding: 24px 16px; }
  .bd-story__head { padding: 20px 20px 0; }
  .bd-story__bar,
  .bd-story--wide .bd-story__bar { padding: 20px 20px 24px; }
  .bd-story--wide .bd-story__head { padding: 22px 20px 0; }
}

@media (prefers-reduced-transparency: reduce) {
  .bd-story__bar {
    background: linear-gradient(90deg, #f2ff70 0%, #f0f0f0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bd-logos-track { animation: none; }
  .bd-story__media img,
  .bd-story__bar,
  .bd-schedule { transition: none; }
  /* The colour change still lands; only the wipe is dropped. */
  .bd-schedule__title::after { transition: none; }
}
