/* ==========================================================================
   site.css — interactivity styles for the static Direct mirror.
   These rules are NOT from the original site; they replace the behaviour that
   was previously driven by the React/Next.js runtime (mega-menu open/close,
   mobile navigation, cookie banner). The original compiled stylesheets in
   this folder still provide all of the visual design.
   ========================================================================== */

/* Brand purple used by the site */
:root { --direct-purple: #7940ff; }

/* --------------------------------------------------------------------------
   Desktop mega-menu (>= 1024px, Bulma "desktop" breakpoint)
   The overlay is hidden by default and revealed when a nav button opens it.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  #nav .navlinkgroupoverlay_hitArea__egXu4,
  #nav .navlinkgroupoverlay_dropdownArrow__6D2Dy {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  #nav.dd-open .navlinkgroupoverlay_hitArea__egXu4 {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) !important;
  }

  #nav.dd-open .navlinkgroupoverlay_dropdownArrow__6D2Dy {
    opacity: 1 !important;
    transform: translateY(0) rotate(45deg) translateZ(0) !important;
  }

  /* keep the mobile-only bits out of the desktop overlay */
  #nav .navlinkgroupoverlay_closeButton__tbA0g,
  #nav .navlinkgroupoverlay_dropdownFooter__jW326 { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile navigation (< 1024px)
   The hamburger button toggles a full-screen panel that reuses the site's
   combined mobile menu section.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  /* overlay is closed unless the mobile menu is open */
  #nav .navlinkgroupoverlay_wrapper__26exS { display: none; }

  #nav.is-mobile-open .navlinkgroupoverlay_wrapper__26exS {
    display: block;
    position: fixed;
    inset: 0;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    background: #fff;
    transform: none;
    z-index: 1000;
    pointer-events: auto;
  }

  #nav.is-mobile-open .navlinkgroupoverlay_hitArea__egXu4 {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    max-width: 100%;
    width: 100%;
    padding-top: 0;
    pointer-events: auto;
  }

  #nav.is-mobile-open .navlinkgroupoverlay_dropdownArrow__6D2Dy { display: none; }

  #nav.is-mobile-open .navlinkgroupoverlay_container__0UEJF {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    min-height: 100vh;
  }

  /* lock background scroll while the menu is open */
  body.nav-locked { overflow: hidden; }

  .navlinkgroupoverlay_closeButton__tbA0g { cursor: pointer; }
}

/* --------------------------------------------------------------------------
   Simplified mobile menu (slide-in panel toggled by the hamburger)
   -------------------------------------------------------------------------- */
.simpleMobileMenu { display: none; }

@media screen and (max-width: 1023px) {
  #nav.is-mobile-open .simpleMobileMenu {
    display: block;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
  }
  .simpleMobileMenu_close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #2d3142;
  }
  .simpleMobileMenu_close svg { width: 1.25rem; height: 1.25rem; }
  .simpleMobileMenu ul { list-style: none; margin: 0; padding: 0; }
  .simpleMobileMenu li { border-bottom: 1px solid #dcdde3; }
  .simpleMobileMenu li a {
    display: block;
    padding: 1.1rem 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3142;
    text-decoration: none;
  }
  .simpleMobileMenu li a:hover { color: #7940ff; }
  body.nav-locked { overflow: hidden; }
}

/* Contact Sales: HubSpot form embed, framed as a light card like the rest of
   the site. The form itself lives in a HubSpot iframe, so its type and colours
   come from the form's HubSpot style settings. */
#hubspot-form-wrapper {
  background: #ffffff;
  border: 1px solid #dcdde3;
  border-radius: 18px;
  padding: 2.5rem 2.25rem 2rem;
  box-shadow: 0 18px 40px rgba(1, 22, 30, .08);
}
#hubspot-form-wrapper .hs-form-iframe { min-height: 700px; }
@media screen and (max-width: 640px) {
  #hubspot-form-wrapper { padding: 1.75rem 1.25rem 1.25rem; border-radius: 14px; }
}

/* Platform page: section intro copy sits under each section heading. */
.dynamicfeatures_headline__DlgnJ { margin-bottom: 0.4rem; }
.platform-section-intro {
  max-width: 760px;
  margin-top: 0.35rem;
  margin-bottom: 3rem;
}

/* White space below the platform hero before the first coloured section. */
.platform-hero { padding-bottom: 3.5rem; }

/* More space between the hero CTA buttons. */
.platform-hero .level-item:not(:last-child) { margin-right: 1.5rem; }

/* Centre the closing "Ready to cook?" title, subtitle and buttons. */
.platform-final-cta .marketingFooter_leftColumn__sgRJK { text-align: center; }
.platform-final-cta .level.is-mobile,
.platform-final-cta .level-left { justify-content: center; }

/* Home closing CTA: centred, with a larger "Ready to cook?" headline. */
.home-final-cta .marketingFooter_leftColumn__sgRJK { text-align: center; }
.home-final-cta .level.is-mobile,
.home-final-cta .level-left { justify-content: center; }
.home-final-cta .headlineText_h3__5wwwA { font-size: 3.4rem; line-height: 1.15; }
.home-final-cta .marketingFooter_leftColumn__sgRJK .level.is-mobile { margin-top: 1.75rem; }
@media screen and (max-width: 768px) {
  .home-final-cta .headlineText_h3__5wwwA { font-size: 2.4rem; }
}

/* Contact Sales: centred title + subtext above a single centred form. */
.contact-centered { max-width: 640px; margin: 0 auto; }
.contact-centered-title,
.contact-centered-sub { text-align: center; }
.contact-centered-sub { margin: 0.75rem auto 2.25rem; }

/* --------------------------------------------------------------------------
   Home hero customisations
   -------------------------------------------------------------------------- */

/* Centre the label inside the "Learn more" button frame. The base button uses
   asymmetric padding (16px left / 24px right for the icon), which shifts the
   text off-centre; match the padding and centre the flex content. */
.hero-cta.callToAction_callToAction__LV3PM {
  justify-content: center;
  text-align: center;
  padding-left: 24px;
}

/* Hero image: let it run to the edge of the screen and scale responsively. */
.hero-home { overflow-x: clip; }
.hero-home .columns { align-items: center; }

.hero-home .hero-home__media .dynamichero_breakFreeContainer__5So_G {
  width: 100% !important;
}
.hero-home .hero-home__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop: text on the left, image pinned to the right edge of the viewport
   and always right-adjusted. The image is sized in viewport units so it grows
   and shrinks with the screen while staying flush to the right, and a gap is
   kept between the copy and the artwork. */
@media screen and (min-width: 1024px) {
  .hero-home .columns { flex-wrap: nowrap; }

  /* buffer between the title/subtext and the image */
  .hero-home .columns > .column:first-child {
    padding-right: 3.5rem;
  }

  .hero-home .hero-home__media {
    flex: none;
    width: 52vw;
    max-width: none;
    /* pull the column's right edge out to the viewport's right edge */
    margin-right: calc(50% - 50vw);
    padding: 0;
  }
}

/* Tablet & mobile: stack, image spans the full viewport width below the text. */
@media screen and (max-width: 1023px) {
  .hero-home .columns { display: block; }
  .hero-home .columns > .column { width: 100%; }
  .hero-home .hero-home__media {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   "Tech stack" section — pull the CTA buttons directly under the closing
   line and leave breathing room beneath them before the carousel.
   -------------------------------------------------------------------------- */
.techstack h2 { font-size: 2.9rem; line-height: 1.12; }
@media screen and (max-width: 768px) { .techstack h2 { font-size: 2.1rem; } }
.techstack .techstack-tagline { font-style: italic; margin-top: -.25rem; margin-bottom: 2rem; }
.techstack .techstack-closing { margin-top: 2.85rem; margin-bottom: .25rem; }
/* Two-column checklist with a purple tick before each item */
.techstack-checklist {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem 2.5rem;
}
.techstack-checklist li { position: relative; padding-left: 1.75rem; }
.techstack-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #7940ff;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .techstack-checklist { grid-template-columns: 1fr; }
}

/* Hero: small space above the "software flex" line, before the buttons */
.hero-flex { margin-top: 2.5rem; margin-bottom: .4rem; }
.hero-home .hero-flex + .level.is-mobile { margin-top: 0.75rem; }

/* "Behind every booking" banner */
.booking-banner { padding-top: 4.5rem; padding-bottom: 7rem; }
.booking-banner .booking-banner-sub {
  max-width: 760px;
  margin: 1.25rem auto 0;
  font-size: 20px;
}
.techstack .techstack-intro { margin-bottom: .5rem; }   /* tighter gap before bullets */
.techstack .contentBlockText_listText__LDU8m { margin-top: 0; }
.techstack .techstack-cta {
  margin-top: 0;             /* buttons pulled up under the closing line */
  padding-bottom: 7rem;      /* larger space before the carousel */
}

/* --------------------------------------------------------------------------
   Home image carousel (rebuilt as a simple, understandable horizontal
   scroller with working prev/next arrows). Every image shares the same
   height, has a full border + rounded corners, and there is a small gap
   between each slide.
   -------------------------------------------------------------------------- */
.gallery { position: relative; }

.gallery-viewport { overflow: hidden; }

.gallery-track {
  display: flex !important;  /* force a horizontal row (never stack) */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;                 /* small space between each slide */
  margin: 0;
  padding: 8px 4px;          /* room so the border/shadow isn't clipped */
  list-style: none;
  transition: transform .45s ease;
  will-change: transform;
}

/* Product screenshots: every block is the SAME HEIGHT while its WIDTH follows
   the image's aspect ratio, so a single rounded frame (alternating purple /
   blue) hugs each image with an even border on all four sides. */
#home-gallery { margin-top: 2.25rem; }
#home-gallery .gallery-slide {
  flex: 0 0 auto;
  height: 400px;             /* same height for every block */
  width: auto;               /* width follows the image */
  border: 4px solid #7940ff; /* single frame, even all the way around */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(1, 22, 30, .14); /* slight lift */
  line-height: 0;
}
#home-gallery .gallery-slide:nth-child(even) { border-color: #067bc2; } /* blue */
#home-gallery .gallery-slide img {
  height: 100%;              /* fill the height; width follows aspect ratio */
  width: auto;
  max-width: none;
  display: block;
}

/* Reviews carousel: clean cards on a light row, no top/bottom frame, with a
   single consistent divider line between each card, scrolled by the arrows. */
.reviews-track { gap: 0; align-items: stretch; padding: 8px 0; }
.review-slide {
  flex: 0 0 auto;
  width: 360px;
  display: flex;
}
.review-slide + .review-slide { border-left: 1px solid #dcdde3; } /* consistent separator */
.review-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2.25rem 2rem;
}
.review-ornament img { height: 52px; width: auto; margin-bottom: 1.25rem; }
.review-quote { font-size: 16px; line-height: 28px; margin-bottom: 1.25rem; }
.review-name { font-weight: 600; color: #2d3142; }
.review-sub { color: #6c759b; }
.review-logo { margin-top: auto; padding-top: 1.25rem; }
.review-logo img { height: 34px; width: auto; }

/* Arrows — reuse the archived circular styling, centre the chevron and make
   the chevron fit neatly inside the circle. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
}
.gallery-arrow svg { width: 18px; height: 18px; }  /* chevron fits in the circle */
.gallery-arrow.gallery-prev { left: 16px; }
.gallery-arrow.gallery-next { right: 16px; }
.gallery-arrow.is-disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* Carousel sits on white and butts right up against the dark Growth section. */
.dynamicimagegallery_wrapper__XHteb { padding-bottom: 3.5rem; }

/* Growth section — more room above (image + words shifted down) and below. */
.growth-section { padding-top: 7rem; padding-bottom: 7rem; }

/* Efficiency block — more space above the heading and under the words. */
.efficiency-header { padding-top: 4.25rem; }
.efficiency-header h2 { margin-bottom: 1rem; }
.efficiency-tiles { padding-top: 0; padding-bottom: 6rem; }

/* Partner logos — spread further out across the screen. */
.dynamiclogos_centerModules__Vka53 { max-width: 1320px; margin-left: auto; margin-right: auto; margin-top: 3.75rem; margin-bottom: 1.75rem; }
@media (min-width: 64em) {
  .dynamiclogos_column__ek4un { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Growth section — italic tagline, tighter paragraphs, larger artwork. */
.growth-section h2 { margin-bottom: .35rem; }
.dynamicheader4_wrapper__wcRah .growth-tagline { font-style: italic; margin-top: -.25rem; margin-bottom: 1rem; }
.dynamicheader4_wrapper__wcRah .growth-copy { margin-bottom: .5rem; }
.dynamicheader4_wrapper__wcRah .growth-final { margin-top: 2.4rem; margin-bottom: 0; }
.dynamicheader4_wrapper__wcRah .growth-cta { margin-top: .6rem; }
.dynamicheader4_wrapper__wcRah .growth-copy strong { color: #fff; }  /* keep bold words legible on dark */
.dynamicheader4_wrapper__wcRah .growth-cta { margin-top: 1.25rem; }
/* Ready-to-cook: pull the buttons up under "Contact our sales team." */
.marketingFooter_leftColumn__sgRJK .level.is-mobile { margin-top: -0.35rem; }
.growth-image img { width: 100%; max-width: none; }
@media (min-width: 64em) {
  .growth-image { transform: translateX(4%) scale(1.18); transform-origin: center right; }
}

@media screen and (max-width: 768px) {
  #home-gallery .gallery-slide { height: 300px; }
  .review-slide { width: 300px; }
  .gallery-arrow { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   Pricing page — two wide, readable option cards side by side with a clear
   gap (replaces the archived slider that rendered as vertical text).
   -------------------------------------------------------------------------- */
.pricing-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
}
.pricing-option {
  flex: 1 1 380px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #dcdde3;
  border-radius: 16px;
  padding: 2.75rem 2.25rem 2.25rem;
  box-shadow: 0 8px 22px rgba(1, 22, 30, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(1, 22, 30, .14);
}
.pricing-option-icon img { height: 72px; width: auto; margin-bottom: 1.5rem; }
.pricing-option-label { font-size: 1.6rem; font-weight: 700; color: #2d3142; margin-bottom: .5rem; }
.pricing-option-desc { color: #505775; margin-bottom: 1.5rem; }
.pricing-option-link { color: #7940ff; font-weight: 600; display: inline-flex; align-items: center; }
.pricing-option-link svg { width: .7em; height: .7em; margin-left: .4rem; }
@media screen and (max-width: 768px) {
  .pricing-options { gap: 1.5rem; }
  .pricing-option { flex: 1 1 100%; max-width: none; }
}

/* --------------------------------------------------------------------------
   Feature / option card grids — rebuilt from the archived Slick sliders that
   rendered as unreadable vertical text. Clean, evenly-spaced responsive grid.
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #fff;
  border: 1px solid #dcdde3;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 6px 18px rgba(1, 22, 30, .06);
  height: 100%;
}
.feature-card--link { transition: transform .2s ease, box-shadow .2s ease; }
.feature-card--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(1, 22, 30, .12);
}
.feature-card-icon img { height: 56px; width: auto; margin-bottom: 1.1rem; }
.feature-card-label { font-size: 1.2rem; font-weight: 700; color: #2d3142; margin-bottom: .5rem; }
.feature-card-desc { color: #505775; margin: 0; }
.feature-card-link {
  color: #7940ff;
  font-weight: 600;
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
}
.feature-card-link svg { width: .7em; height: .7em; margin-left: .4rem; }
/* Dark-mode sections keep the cards readable on dark backgrounds */
.darkMode .feature-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.darkMode .feature-card-label { color: #fff; }
.darkMode .feature-card-desc { color: #c9cbdb; }
@media screen and (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Per-page screenshot galleries reuse the home carousel behaviour */
.screenshot-gallery .gallery-slide {
  flex: 0 0 auto;
  height: 360px;
  width: auto;
  border: 4px solid #7940ff;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(1, 22, 30, .14);
  line-height: 0;
}
.screenshot-gallery .gallery-slide:nth-child(even) { border-color: #067bc2; }
.screenshot-gallery .gallery-slide img { height: 100%; width: auto; max-width: none; display: block; }

/* Per-page review galleries: no gap, consistent dividers (as on the homepage) */
.reviews-gallery .gallery-track { gap: 0; align-items: stretch; }

/* Single captured screenshot (was a one-image slider) */
.single-shot { line-height: 0; }
.single-shot img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(1, 22, 30, .12);
}

@media screen and (max-width: 768px) {
  .screenshot-gallery .gallery-slide { height: 280px; }
}

/* --------------------------------------------------------------------------
   Responsive CTA button rows. The archived markup wraps CTAs in Bulma
   `.level.is-mobile` rows that stay horizontal at every width, so two buttons
   can overflow narrow screens. Let them wrap (and centre where the section is
   centred) on tablet/mobile.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  main .level.is-mobile { flex-wrap: wrap; row-gap: .85rem; }
  main .level.is-mobile > .level-left { flex-wrap: wrap; row-gap: .85rem; }
  main .callToAction_callToAction__LV3PM { white-space: normal; }
}
@media screen and (max-width: 560px) {
  /* Stack CTA buttons full width so labels never clip on phones. */
  main .level.is-mobile > .level-left { width: 100%; }
  main .level.is-mobile > .level-left > .level-item { width: 100%; }
  main .level.is-mobile > .level-left > .level-item .callToAction_callToAction__LV3PM {
    width: 100%;
    justify-content: center;
  }
  .platform-hero .level-item:not(:last-child) { margin-right: 0; }
}

/* "Coming soon" divider between shipped and upcoming feature grids */
.dynamicfeatures_toolsDivider__ZZ6sF {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
}
.dynamicfeatures_toolsDivider__ZZ6sF img { height: 56px; width: auto; }