/* ==========================================================================
   legacy-bridge.css: NEW styles for OLD markup, loaded on EVERY page, last
   Not the old theme's CSS (that is styles.css). This file cancels or restyles
   what the old theme and Bootstrap impose on our elements (sticky navbar
   resets, old footer wrapper, link underlines, spacing), and later holds the
   new look for old content elements. It shrinks as old templates retire.
   ========================================================================== */
/* Navbar: use the design's compact line height, not the old theme's */
header.navbar,
header.navbar :where(li, a, p, span, button) { line-height: normal; }

/* Navbar lists: cancel the old theme's spacing on every ul/li */
header.navbar ul { margin: 0; line-height: normal; }
header.navbar li { margin: 0; padding: 0; }
header.navbar .navbar__panel-sublist { margin: 4px 0 4px 12px; }

/* No underlines on links in the navbar and the new homepage sections
   (the old theme underlines every link on hover) */
header.navbar a,
header.navbar a:hover,
:is(.hero, .trio, .stages, .stages__tabs, .observe, .proof-stats, .leaders, .workflow, .reviews, .faq) a,
:is(.hero, .trio, .stages, .stages__tabs, .observe, .proof-stats, .leaders, .workflow, .reviews, .faq) a:hover {
  text-decoration: none;
}

/* Exception: links inside running text keep their hover underline */
.proof-stats .proof-stats__text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The old fixed header needed 80px of push-down space on the homepage (page-1).
   The new sticky navbar takes its own space, so drop it wherever the new navbar is on the page. */
.page-1.layout-default:has(header.navbar) .main-part,
body:has(header.navbar) .main-part { padding-top: 0; }


/* ==========================================================================
   HP26 footer (TYPO3 add-on)
   The design's .newsletter / .footer rules above style the structure. These
   rules (1) cancel the old theme's footer wrapper, (2) style the content
   elements editors manage in the footer columns, and (3) handle the
   newsletter form's spam protection and messages.
   ========================================================================== */

/* 1) The Default layout still wraps the footer in the old theme's markup */
.footer-part:has(.hp26-footer),
#footer-part:has(.hp26-footer) {
  margin: 0;
  padding: 0;
  background: none;
}
.footer-part:has(.hp26-footer) > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.footer-part:has(.hp26-footer) .footer-inner {
  margin: 0;
  padding: 0;
}

/* Old theme list, paragraph and frame spacing inside the footer */
.hp26-footer ul { margin: 0; padding: 0; list-style: none; }
.hp26-footer li { margin: 0; padding: 0; }
.hp26-footer li::before { content: none; display: none; }
.hp26-footer .frame,
.hp26-footer .frame-container,
.hp26-footer .frame-inner {
  margin: 0;
  padding: 0;
  max-width: none;
}
.hp26-footer a:hover { text-decoration: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   768px: phones / small tablets
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Old theme's orange "scroll to top" square ---
     Overlaps the chat bubble on phones and isn't part of the design. */
  a.scroll-top {
    display: none;
  }
}


/* ==========================================================================
   Feature pages (pilot: Platform > Observe > Live Visitor Activity)
   New look for the old theme's feature-page elements, without touching
   content or templates. Every page using these elements gets it too.
     .common-title-part   page title block (product name, claim, intro, tag)
     .perfect-part        image + text rows (eyebrow, heading, text, list, buttons)
     .perfect-gradient    the "one platform, four stages" band
     .frame-type-header   plain section heading ("More Observe tools")
     .product-feature-part  grid of links to related tools
   All rules are scoped to .main-part, so navbar and footer are never affected.
   ========================================================================== */

/* --- Shared container: same width and side padding as the homepage --- */
.main-part .common-title-part > .container,
.main-part .perfect-part > .container,
.main-part .product-feature-part > .container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Page title block --- */
.main-part .common-title-part {
  padding: 80px 0 48px;
  text-align: center;
}

.main-part .common-title-part .platform-inner-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

/* The product name (the page's h1) reads as a gradient label above the claim */
.main-part .common-title-part h1 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.44px;
}

.main-part .common-title-part .gradient-txt-sm {
  display: inline-block;
  background: linear-gradient(100deg, var(--color-core-950) 0%, #8e238b 55%, #e55728 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}

/* The claim is the visual headline */
.main-part .common-title-part h2 {
  max-width: 900px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--color-core-neutral-800);
  text-wrap: balance;
}

.main-part .common-title-part p {
  max-width: 820px;
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-tracking);
  color: var(--color-core-neutral-600);
}

.main-part .common-title-part p strong {
  font-weight: 600;
  color: var(--color-core-neutral-800);
}

.main-part .common-title-part p a {
  color: var(--color-primary);
  text-decoration: none;
}

.main-part .common-title-part p a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Tag line pill: matches the homepage's featured pill exactly --- */
.main-part .common-title-part p:has(.feature-tag) {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px 6px 6px;
  border-radius: 100px;
  background: var(--color-core-50);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.308px;
  white-space: pre-wrap;
  color: var(--color-core-700);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.main-part .common-title-part p:has(.feature-tag):hover {
  background: var(--color-core-100);
}

/* Everything inside shares one line box, so it all centers vertically */
.main-part .common-title-part p:has(.feature-tag) > * {
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 24px;
}

.main-part .common-title-part p:has(.feature-tag) strong {
  font-weight: 600;
  color: inherit;
}

/* Links inside the pill: no underline, no old decoration */
.main-part .common-title-part p:has(.feature-tag) a,
.main-part .common-title-part p:has(.feature-tag) a:hover {
  padding: 0;
  border: 0;
  background: none !important;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

/* The whole pill is clickable: the last link stretches over it */
.main-part .common-title-part p:has(.feature-tag) a:last-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The homepage pill's arrow: same size, same drawing, same nudge */
.main-part .common-title-part p:has(.feature-tag) a:last-of-type::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-color: var(--color-core-700);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M12 4H5M12 4V11" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M12 4H5M12 4V11" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  transition: transform 0.25s ease;
}

.main-part .common-title-part p:has(.feature-tag):hover a:last-of-type::after {
  transform: translate(2px, -2px);
}

/* The tag: identical to the homepage's "New", including its casing */
.main-part .common-title-part p:has(.feature-tag) .feature-tag {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 50px;
  background: var(--color-core-700) !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--color-text-inverse) !important;
  -webkit-text-fill-color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  height: auto;
  min-height: 0;
  max-height: none;
  letter-spacing: -0.308px;
  text-transform: lowercase;
}

.main-part .common-title-part p:has(.feature-tag) .feature-tag::first-letter {
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .main-part .common-title-part p:has(.feature-tag),
  .main-part .common-title-part p:has(.feature-tag) a:last-of-type::after {
    transition: none;
  }
}

/* --- Image + text rows --- */
.main-part .perfect-part {
  padding: 48px 0;
  background: none;
}

.main-part .perfect-part .perfect-inner > .row {
  align-items: center;
  row-gap: 32px;
}

.main-part .perfect-part .perfect-left img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* Text column: breathing room on the side that faces the image */
.main-part .perfect-part .perfect-right {
  max-width: 560px;
  padding: 0 40px 0 0;
}

/* Rows with the image on the left: the room moves to the text's left side */
.main-part .perfect-part.perfect-switch:not(.perfect-gradient):nth-of-type(odd) .perfect-right {
  padding: 0 0 0 40px;
}

/* Alternate sides: every second image row puts the image on the left */
.main-part .perfect-part.perfect-switch:not(.perfect-gradient):nth-of-type(odd) .perfect-inner > .row {
  flex-direction: row;
}

.main-part .perfect-part .sub-title {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-core-700);
}

.main-part .perfect-part h2 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-core-neutral-800);
  text-wrap: balance;
}

.main-part .perfect-part p {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.65;
  letter-spacing: var(--text-body-tracking);
  color: var(--color-core-neutral-600);
}

/* Lists: a check mark in the brand color instead of old bullets */
.main-part .perfect-part ul {
  display: grid;
  gap: 10px;
  margin: 4px 0 24px;
  padding: 0;
  list-style: none;
}

.main-part .perfect-part ul li {
  position: relative;
  margin: 0;
  padding: 0 0 0 32px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-core-neutral-700);
  list-style: none;
  background: none;
}

.main-part .perfect-part ul li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--color-core-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%235C04B4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-mask: none;
  mask: none;
}

.main-part .perfect-part ul li a {
  color: inherit;
  text-decoration: none;
}

.main-part .perfect-part ul li a:hover {
  color: var(--color-primary);
}

.main-part .perfect-part .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
}

/* --- Buttons: the old theme's three button styles in the new design --- */
.main-part a.theme-btn,
.main-part a.theme-btn-border,
.main-part a.theme-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 52px;
  box-shadow: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.352px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.main-part a.theme-btn :is(span, strong),
.main-part a.theme-btn-border :is(span, strong),
.main-part a.theme-btn-white :is(span, strong) {
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.main-part a.theme-btn :is(span, strong)::before,
.main-part a.theme-btn :is(span, strong)::after,
.main-part a.theme-btn-border :is(span, strong)::before,
.main-part a.theme-btn-border :is(span, strong)::after,
.main-part a.theme-btn-white :is(span, strong)::before,
.main-part a.theme-btn-white :is(span, strong)::after,
.main-part a.theme-btn::before,
.main-part a.theme-btn-border::before,
.main-part a.theme-btn-white::before {
  content: none;
  display: none;
}

/* Chevron after the label, like the homepage buttons */
.main-part a.theme-btn::after,
.main-part a.theme-btn-border::after,
.main-part a.theme-btn-white::after {
  content: "";
  position: static;
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  opacity: 1;
  transform: none;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  transition: transform 0.25s ease;
}

.main-part a.theme-btn:hover::after,
.main-part a.theme-btn-border:hover::after,
.main-part a.theme-btn-white:hover::after {
  transform: translateX(3px);
}

.main-part a.theme-btn {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.main-part a.theme-btn:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

.main-part a.theme-btn-border {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.main-part a.theme-btn-border:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-hover);
  color: var(--color-primary);
}

.main-part a.theme-btn-white {
  background: var(--color-surface);
  color: var(--color-core-700);
}

.main-part a.theme-btn-white:hover {
  background: var(--color-core-50);
  color: var(--color-core-700);
}

/* --- "One platform, four stages" band --- */
.main-part .perfect-part.perfect-gradient {
  padding: 64px 20px 48px;
  background: none;
}

.main-part .perfect-part.perfect-gradient > .container {
  padding: 56px 48px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--color-core-950) 0%, var(--color-core-700) 60%, #8e238b 100%);
  color: var(--color-text-inverse);
}

.main-part .perfect-gradient .perfect-left img {
  box-shadow: none;
}

.main-part .perfect-gradient h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-core-200);
}

.main-part .perfect-gradient h3 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  text-wrap: balance;
}

.main-part .perfect-gradient p,
.main-part .perfect-gradient ul li {
  color: rgba(255, 255, 255, 0.85);
}

.main-part .perfect-gradient ul li::before {
  background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.main-part .perfect-gradient ul li strong {
  color: var(--color-text-inverse);
}

.main-part .perfect-gradient ul li a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.main-part .perfect-gradient .feature-tag {
  margin: 0 0 0 8px;
  background: var(--color-text-inverse);
  color: var(--color-core-700);
}

/* On the dark band, the primary button turns into the light accent */
.main-part .perfect-gradient a.theme-btn {
  background: var(--color-accent-default);
}

.main-part .perfect-gradient a.theme-btn:hover {
  background: var(--color-accent-default);
  filter: brightness(1.08);
}

/* --- Plain section heading ("More Observe tools") --- */
.main-part .frame-type-header,
.main-part .frame-type-header .frame-inner,
.main-part .frame-type-header .frame-header {
  margin: 0;
  padding: 0;
}

/* The wrapper keeps the page's container width, centered */
.main-part .frame-type-header .frame-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.main-part .frame-type-header .element-header {
  margin: 16px 0 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-core-neutral-800);
  text-align: center;
}

/* --- Related tools grid --- */
.main-part .product-feature-part {
  margin: 0;
  padding: 0 0 80px;
  background: none;
}

.main-part .product-feature-part .product-feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.main-part .product-feature-part .product-feature-col {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.main-part .product-feature-part .product-feature-col a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--color-core-neutral-100);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.main-part .product-feature-part .product-feature-col a:hover {
  border-color: var(--color-core-300);
  box-shadow: 0 12px 24px -16px rgba(31, 1, 57, 0.3);
  transform: translateY(-2px);
}

.main-part .product-feature-part .product-feature-col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-core-50);
}

.main-part .product-feature-part .product-feature-col-icon img {
  width: 24px;
  height: 24px;
}

.main-part .product-feature-part .product-feature-col-info h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-core-neutral-800);
  white-space: normal;
}

.main-part .product-feature-part .product-feature-col a:hover h6 {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .main-part a.theme-btn::after,
  .main-part a.theme-btn-border::after,
  .main-part a.theme-btn-white::after,
  .main-part .product-feature-part .product-feature-col a {
    transition: none;
  }
  .main-part .product-feature-part .product-feature-col a:hover {
    transform: none;
  }
}

/* Cancel the old theme's decoration and centering inside the cards */
.main-part .product-feature-part .product-feature-col a::before,
.main-part .product-feature-part .product-feature-col a::after,
.main-part .product-feature-part .product-feature-col-info::before,
.main-part .product-feature-part .product-feature-col-info::after,
.main-part .product-feature-part .product-feature-col-info h6::before,
.main-part .product-feature-part .product-feature-col-info h6::after {
  content: none;
  display: none;
}

.main-part .product-feature-part .product-feature-col-info,
.main-part .product-feature-part .product-feature-col-info h6 {
  border: 0;
  background-image: none;
  text-align: left;
}

.main-part .product-feature-part .product-feature-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* The old theme reserves space under the card's title: remove it, so the
   title sits centered next to its icon */
.main-part .product-feature-part .product-feature-col-info,
.main-part .product-feature-part .product-feature-col-info h6 {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

/* --- Feature pages on tablets and phones --- */
@media (max-width: 768px) {
  .main-part .common-title-part { padding: 40px 0 16px; }
  .main-part .perfect-part { padding: 40px 0; }
  .main-part .perfect-part .perfect-right { max-width: none; padding: 0; }
  .main-part .perfect-part.perfect-gradient { padding: 40px 16px; }
  .main-part .perfect-part.perfect-gradient > .container { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .main-part .perfect-part .btn-group { flex-direction: column; align-items: stretch; }
  .main-part a.theme-btn,
  .main-part a.theme-btn-border,
  .main-part a.theme-btn-white { justify-content: center; white-space: normal; text-align: center; }
}