/* ============================================================
   Trace checkout CTA ("tcta")
   The site-wide CTA band rebuilt as a mini pricing section: the
   pricing page's plan cards, compacted, with one-click checkout.
   Reuses the pricing classes (.checkout-card, .plan-button,
   .option-*, .tag) so the cards track that page's design; this
   file only handles the band's layout and the compact sizing.
   Checkout behavior in /js/trace-cta.js.
   ============================================================ */

.tcta {
  grid-column-gap: 48px;
  grid-row-gap: 40px;
  align-items: center;
  align-content: flex-start; /* .cta-flex is height:100%; once this wraps,
     stretch would pad each line with the slack (133px under the intro) */
  height: auto;
  flex-wrap: wrap;
}

.tcta-intro {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  align-items: flex-start;
  flex: 1 1 300px;
  max-width: 420px;
}

/* A touch more air before the button than between headline and body. */
.tcta-intro .secondary-button-trace { margin-top: 6px; }

.tcta-plans {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  align-items: flex-end;
  flex: 1 1 560px;
}

.tcta-cards {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
}

/* Compact the pricing card: it ships with vertical-only padding and a
   32px gap sized for the full checkout stack. */
.tcta-cards .checkout-card {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex: 1 1 240px;
  padding: 28px;
}

.tcta-cards .option-content { max-width: 100%; }

.tcta-cards .plan-button {
  width: 100%;
  min-width: 0;
  text-align: center;
  margin-top: auto; /* buttons align across cards whatever the copy does */
}

/* Product shot above the headline — the current camera, cropped to its alpha
   bounds from Seb's TraceCam-Front-Kneron master, so it sits flush with the
   text edge on real transparency (no blend tricks needed). */
.tcta-camera {
  width: 100px;
  height: auto;
  margin-bottom: 4px;
  border-radius: 0; /* the global Webflow img{border-radius:20px} clips the cutout's corners */
}

/* Loading state — defined inline on the pricing page, needed here too. */
.plan-button.disabled {
  opacity: .5;
  cursor: not-allowed !important;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .tcta { grid-row-gap: 32px; }
  .tcta-intro { max-width: 100%; }
  .tcta-plans { align-items: center; }
  .tcta-cards .checkout-card { flex-basis: 100%; padding: 24px; }
}

/* Webflow flips .cta-flex to column at 479px — the columns' flex-basis
   would become a fixed HEIGHT there (a 300px-tall intro over 167px of
   content). Reset to content sizing once the axis is vertical. */
@media screen and (max-width: 479px) {
  .tcta-intro,
  .tcta-plans { flex-basis: auto; }
}