/* ============ TOUR DE PRODUCT (VMS Touchpoints tabs) ============ */
.tdp-section { padding: 60px 5%; }
.tdp-heading { text-align: center; font-size: 32px; margin-bottom: 40px; }
.tdp-heading-accent { color: var(--sharry-pink, #f0047f); }

.tdp-tabs { max-width: 1100px; margin: 0 auto; }

/* Tile menu */
.tdp-tabs-menu {
  display: flex; justify-content: center; align-items: stretch;
  gap: 20px; flex-wrap: wrap;
  background: transparent; margin-bottom: 28px; /* room for the neck */
}
.tdp-tab {
  background: #fff; border: 1px solid #edf1f7; border-radius: 16px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, .06);
  padding: 18px 12px 14px; width: 112px; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; color: #14213d; position: relative;
  transition: box-shadow .2s ease, transform .1s ease, color .2s ease;
}
.tdp-tab:hover { box-shadow: 0 10px 24px rgba(20, 33, 61, .12); }
.tdp-tab:active { transform: scale(.97); }
.tdp-tab.w--current { color: var(--sharry-pink, #f0047f); background: #fff; z-index: 1; }
/* "neck" connecting the active tile to the opened panel — one smooth SVG shape:
   straight stem flaring into the panel with concave curves, as in the design */
.tdp-tab.w--current::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 29' preserveAspectRatio='none'%3E%3Cpath d='M16 0 H64 V13 Q64 29 80 29 H0 Q16 29 16 13 Z' fill='%23e9f3fc'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  /* hidden by default — only the :has() rule below (synced to the pane) reveals it,
     so there's no gap where it flashes at full opacity before that rule applies */
  opacity: 0;
}
/* the neck's fade-in is gated by the PANE's own active state (not the nav link's
   w--current) so it always animates in at the exact same moment as .tdp-pane-inner,
   even if Webflow toggles w--current and w--tab-active a beat apart */
.w-tabs:has(.tdp-content .tdp-pane:nth-child(1).w--tab-active) .tdp-tabs-menu .tdp-tab:nth-child(1).w--current::after,
.w-tabs:has(.tdp-content .tdp-pane:nth-child(2).w--tab-active) .tdp-tabs-menu .tdp-tab:nth-child(2).w--current::after,
.w-tabs:has(.tdp-content .tdp-pane:nth-child(3).w--tab-active) .tdp-tabs-menu .tdp-tab:nth-child(3).w--current::after,
.w-tabs:has(.tdp-content .tdp-pane:nth-child(4).w--tab-active) .tdp-tabs-menu .tdp-tab:nth-child(4).w--current::after,
.w-tabs:has(.tdp-content .tdp-pane:nth-child(5).w--tab-active) .tdp-tabs-menu .tdp-tab:nth-child(5).w--current::after {
  /* slower, gentler curve than the panel's — a quick ease-out made the neck read as
     "already there" before the panel content visually caught up.
     forwards keeps it at opacity:1 once done, instead of snapping back to the
     opacity:0 base state above when the animation finishes. */
  animation: tdpFade .45s ease-in-out forwards;
}
/* hidden default tab = initial "closed" state of the section */
.tdp-tab-empty { display: none !important; }
.tdp-tab-icon { width: 28px; height: 28px; }
.tdp-tab-icon svg { width: 100%; height: 100%; display: block; }
.tdp-tab-label { font-size: 13px; font-weight: 600; line-height: 1.25; }

/* Panel */
.tdp-content { overflow: visible; }
.tdp-pane-inner {
  background: #e9f3fc; border-radius: 20px;
  padding: 40px 5% 48px; text-align: center;
  animation: tdpFade .25s ease-out;
}
.tdp-pane-title { font-size: 26px; margin: 0 0 12px; }
.tdp-pane-text { max-width: 720px; margin: 0 auto 28px; font-size: 15px; line-height: 1.6; opacity: .85; }
.tdp-pane-inner .image-full { max-width: 860px; margin: 0 auto; }

@keyframes tdpFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 767px) {
  .tdp-section { padding: 40px 5%; }
  .tdp-heading { font-size: 24px; margin-bottom: 24px; }
  .tdp-tabs-menu { gap: 12px; }
  .tdp-tab { width: calc(33.33% - 8px); min-width: 92px; padding: 14px 8px 12px; }
  /* tiles wrap into rows on mobile — the neck would cross the row below */
  .tdp-tab.w--current::after { display: none; }
  .tdp-tabs-menu { margin-bottom: 16px; }
  .tdp-pane-inner { padding: 28px 16px 32px; }
  .tdp-pane-title { font-size: 20px; }
}