/* Migration overrides — loaded LAST so it wins over the Webflow shared CSS.
   Fixes regressions introduced by the faithful capture + the performance pass. */

/* Blog-post intro: [slug].astro wraps the (short) intro in .section-11, a class the
   theme defines as a full-viewport hero (min-height:100vh). That left ~1000px of
   whitespace before the cover/article. Cap it to its content height on blog posts. */
.blog-post .section-11 { min-height: auto; }

/* Pricing monthly/yearly toggle — the Webflow IX2 click interaction was removed in the
   performance pass and reshimmed in nav.js. Default = monthly visible; the dot slides
   on switch (the one animation worth keeping, per design). */
.yearly-row { display: none; }
.toggle-dot { left: 5px; transition: left .3s cubic-bezier(.4, 0, .2, 1); }
.toggle-contain.is-yearly .toggle-dot { left: 41px; }
.toggle-contain { cursor: pointer; }
.toggle-text { cursor: pointer; }
.pricing-box-row { transition: opacity .2s ease; }

/* /demo-poc CRO hero — the Webflow float grid rendered the two columns swapped
   (calendar left / copy right) and squeezed the calendar into a ~300px column,
   so the HubSpot iframe (~440px) overflowed with a horizontal scrollbar.
   Pin it with flexbox: copy LEFT, calendar RIGHT. Stacking is driven ONLY by the
   991px media query (flex-direction:column) — NOT by a min-width that would wrap the
   calendar below at an unpredictable width and desync it from the arrow swap. */
.section-hero .columns-4 { display: flex; align-items: flex-start; }
.section-hero .columns-4 > .w-col { float: none; }
.section-hero .columns-4 > .w-col:first-child { order: 1; }   /* copy */
.section-hero .columns-4 > .column-5 { order: 2; }            /* calendar */
/* The badges grid has margin-right:-60px (it deliberately overhangs its column),
   which collides with the calendar card at narrower side-by-side widths and lets a
   badge slip under the white card. Keep it inside the column and let badges scale. */
.section-hero .grid-14 { margin-right: 0; }
.section-hero .grid-14 img { max-width: 100%; height: auto; }
/* container-18 is display:flex; the signpost banner + calendar are two children, so
   stack them (banner above calendar) instead of side-by-side. */
.section-hero .container-18 { max-width: 470px; margin-left: auto; margin-right: auto; flex-direction: column; }

/* Booking calendar card: our container IS the card (HubSpot's iframe content is
   transparent until it loads, which flashed the blue page through). White bg + large
   radius + shadow + overflow:hidden gives a bigger rounded card and clips the iframe;
   min-height reserves the space so there's no layout shift while it loads. */
.meetings-iframe-container {
  position: relative;
  width: 100%;
  min-height: 760px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(8, 28, 66, .28);
  overflow: hidden;
}
.meetings-iframe-container iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 760px;
  border: 0;
  background: transparent;
}
/* spinner placeholder sits behind the (transparent) iframe; the calendar covers it on load */
.booking-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #6b7a90;
  font-size: 15px;
  font-weight: 600;
}
.booking-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #d8e2f0;
  border-top-color: #378ae8;
  animation: booking-spin .8s linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* CRO "see it in action" arrow: point RIGHT (to the calendar) when side-by-side,
   point DOWN (to the stacked calendar) once the columns stack. Both swaps fire at the
   SAME 991px breakpoint so the arrow never points at empty space. */
.tt-cta-arrow .tt-arr-h { display: inline-block; }
.tt-cta-arrow .tt-arr-v { display: none; }

@media (max-width: 991px) {
  .section-hero .columns-4 { flex-direction: column; }
  .section-hero .columns-4 > .w-col { width: 100%; }
  .tt-cta-arrow .tt-arr-h { display: none; }
  .tt-cta-arrow .tt-arr-v { display: inline-block; }
}