/* ==========================================================================
   Pantheon IQ - site-wide Custom CSS
   Matches the Next.js site (pantheoniq-site). Order matters: several rules
   override earlier ones, so add new rules at the end of their section.
   ========================================================================== */

/* ---------- Typography ---------- */

/* Font smoothing as on the Next.js site (thinner, lighter text on macOS) */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No browser-synthesised bold or italic */
body * { font-synthesis: none; }

/* All buttons in Questrial (the theme sets some in Work Sans) */
.zpbutton, .zpbutton * { font-family: Questrial, sans-serif !important; }

/* Buttons of equal width: add the class "equal-btn" to the button group */
.equal-btn .zpbutton-wrapper {
  width: 300px;
  box-sizing: border-box;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
}
@media (max-width: 480px) {
  .equal-btn .zpbutton-wrapper {
    width: 100%;
  }
}
/* ---------- Tags: any Heading element set to H6 shows as a pill ---------- */
h6.zpheading,
.zpelem-heading h6 {
  display: block !important;
  width: fit-content !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: #EBE1ED !important;
  color: #56086D !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Follow the alignment set in the Heading element */
h6.zpheading-align-center,
.zpelem-heading h6.zpheading-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
h6.zpheading-align-right,
.zpelem-heading h6.zpheading-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}
h6.zpheading-align-left,
.zpelem-heading h6.zpheading-align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---------- Menu spacing ----------
   Tighter spacing like the Next.js header, so all items plus Contact Us fit on
   one row at laptop widths instead of Contact Us folding into "More". */
.theme-navigation-and-icons .theme-menu-area .theme-menu [data-zp-menu-top] > li {
  margin-inline-end: 4px !important;
}

.theme-navigation-and-icons .theme-menu-area .theme-menu [data-zp-menu-top] > li > a {
  padding: 8px 12px !important;
}

/* ---------- Menu "Contact Us" pill: 44px tall, 18px text ---------- */
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li a[href="/contact-us"],
.theme-menu a[href="/contact-us"] {
  display: inline-flex !important;
  align-items: center;
  height: 44px;
  padding: 0 28px !important;
  margin-left: 12px;
  border-radius: 999px !important;
  background: #8c0db1 !important; /* Button Purple */
  color: #fff !important;
  transition: background-color 0.15s ease;
}

.theme-menu a[href="/contact-us"] .theme-menu-name,
.theme-menu a[href="/contact-us"]:hover .theme-menu-name {
  color: #fff !important;
  font-size: 18px !important;
}

/* Lighter on hover, like the Next.js button (was darker #56086D) */
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li a[href="/contact-us"]:hover,
.theme-menu a[href="/contact-us"]:hover {
  background: rgba(140, 13, 177, 0.8) !important;
}

.theme-menu a[href="/contact-us"]:focus-visible {
  outline: 2px solid #d133ff;
  outline-offset: 2px;
}

/* ---------- Solid buttons: stop the theme's blue hover ----------
   Zoho's theme turns primary buttons blue on hover. Keep them purple,
   80% opacity, like the Next.js site. Covers "Book a Discovery Call".
   Buttons tagged "zscustom-outline-btn" are skipped (they keep the outline hover). */
a.zpbutton.zpbutton-type-primary:not(.zscustom-outline-btn):not(.zscustom-outline-btn *):hover {
  background: rgba(140, 13, 177, 0.8) !important;
  color: #fff !important;
}

a.zpbutton.zpbutton-type-primary:focus-visible {
  outline: 2px solid #d133ff;
  outline-offset: 2px;
}

/* White "Book a Discovery Call" in the purple CTA box. The doubled-up classes
   make this beat the purple hover rule above. */
.zscustom-calltoaction-box.zscustom-gradient-bg a.zpbutton.zpbutton-type-primary:not(.zscustom-outline-btn):not(.zscustom-outline-btn *):hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #56086d !important;
}

/* Hide the theme's duplicate menu list */
.theme-menu > ul:not([data-zp-menu-top]) {
  visibility: hidden;
}

/* A row of exactly five 2/12 columns fills the row (five equal columns) */
@media (min-width: 768px) {
  .zprow:has(> .zpcol-md-2:nth-of-type(5):last-of-type):not(:has(> .zpelem-col:not(.zpcol-md-2))) > .zpcol-md-2 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    width: 20% !important;
  }
}
/* ---------- Cards: boxes with the class "zscustom-hover-box" ----------
   Styled like the Next.js "How we work" cards. Selectors are doubled up and
   use !important because Zoho writes per-box inline styles with !important. */

/* Card */
div.zpelem-box.zpbox-container.zscustom-hover-box {
  position: relative;
  height: 100%;
  padding: 20px !important;
  background-color: #ffffff !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

div.zpelem-box.zpbox-container.zscustom-hover-box:hover,
div.zpelem-box.zpbox-container.zscustom-hover-box:focus-within {
  border-color: #8c0db1 !important;
  background-color: rgba(235, 225, 237, 0.4) !important; /* brand tint #EBE1ED at 40% */
}

/* Equal-height cards in a row (Zoho rows align columns to the top by default) */
.zprow:has(> .zpelem-col > .zscustom-hover-box) {
  align-items: stretch !important;
}

.zpelem-col:has(> .zscustom-hover-box) {
  display: flex !important;
  flex-direction: column;
}

/* Icon + title: left-aligned, icon above title */
.zscustom-hover-box .zpicon-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.zscustom-hover-box .zpicon-container .zpicon,
.zscustom-hover-box .zpicon-container .zpicon svg {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

.zscustom-hover-box .zpicon-container .zpicon svg,
.zscustom-hover-box .zpicon-container .zpicon svg path {
  fill: #8c0db1 !important;
}

.zscustom-hover-box .zpicon-heading,
.zscustom-hover-box .zpicon-heading span {
  margin: 0 !important;
  padding: 20px 0 0 !important;
  font-size: 22px !important;
  line-height: 1.8 !important;
  color: #1b032b !important;
  text-align: left !important;
  transition: color 0.15s ease;
}

.zscustom-hover-box .zpicon-heading span {
  padding: 0 !important;
}

.zscustom-hover-box:hover .zpicon-heading,
.zscustom-hover-box:hover .zpicon-heading span {
  color: #8c0db1 !important;
}

/* Body text */
.zscustom-hover-box .zpelem-text {
  margin-top: 8px !important;
}

.zscustom-hover-box .zptext,
.zscustom-hover-box .zptext p,
.zscustom-hover-box .zptext span {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #353b47 !important;
  text-align: left !important;
}

/* Make the whole card clickable: stretch the "Learn more" link over the box */
.zscustom-hover-box .zpbutton-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}

.zscustom-hover-box .zpbutton-wrapper:focus-visible {
  outline: none;
}

.zscustom-hover-box:has(.zpbutton-wrapper:focus-visible) {
  outline: 2px solid #d133ff;
  outline-offset: 2px;
}

/* The Next.js cards have no "Learn more" text. Keep the link (it powers the
   click) but hide it visually. Delete this block to show "Learn more" again. */
.zscustom-hover-box .zpelem-buttonicon {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
}

.zscustom-hover-box .zpbutton-icon,
.zscustom-hover-box .zpbutton-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Cards without a link: look like cards, not buttons */
div.zpelem-box.zpbox-container.zscustom-hover-box:not(:has(a.zpbutton)) {
  cursor: default;
}

div.zpelem-box.zpbox-container.zscustom-hover-box:not(:has(a.zpbutton)):hover,
div.zpelem-box.zpbox-container.zscustom-hover-box:not(:has(a.zpbutton)):focus-within {
  border-color: #e6e6ea !important;
  background-color: #ffffff !important;
}

.zscustom-hover-box:not(:has(a.zpbutton)):hover .zpicon-heading,
.zscustom-hover-box:not(:has(a.zpbutton)):hover .zpicon-heading span {
  color: #1b032b !important;
}

/* ---------- Header: white to lavender gradient, frosted glass, purple shadow ---------- */
.zpheader-style-01 {
  background: linear-gradient(to right,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.8) 50%,
    rgba(235,225,237,.9) 100%) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px -12px rgba(86,8,109,.25) !important;
}
/* Zoho gives the inner header a white background on scroll, covering the gradient */
.zpheader-style-01 .theme-header,
.zpheader-style-01.theme-header-animate .theme-header {
  background: transparent !important;
  box-shadow: none !important;
}
/* Hairline along the bottom, transparent to purple */
.zpheader-style-01::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(140,13,177,.5), rgba(140,13,177,.2));
  pointer-events: none;
}

/* ---------- Footer: aubergine to deep purple diagonal gradient ---------- */
.theme-footer-area {
  background: linear-gradient(to bottom right,
    #1b032b 0%, #1b032b 50%, #56086d 100%) !important;
}
/* The purple logo is hard to see on the dark background: show it in white */
.theme-footer-area img {
  filter: brightness(0) invert(1);
}
/* ---------- Purple CTA box ("Start with one process." etc.): purple to deep purple ---------- */
.zpdark-section.zscustom-gradient-bg.zscustom-calltoaction-box {
  background-image: linear-gradient(to bottom right,
    #8c0db1 0%,
    #56086d 100%
  ) !important;
  box-shadow: none !important;
}

/* Deep purple text on the white button */
.zscustom-calltoaction-box .zpbutton-type-primary {
  color: #56086d !important;
}

/* ---------- Home hero: "Practical solutions" in a shimmering purple gradient ----------
   The words are the purple span (inline colour rgb(140, 13, 177)) inside the
   hero heading. If you recolour that text in the editor, update the selector. */
.zscustom-heroslide-heading h1 span[style*="140, 13, 177"] {
  color: #8c0db1; /* fallback if background-clip is unsupported */
  background-image: linear-gradient(
    100deg,
    #8c0db1 0%,
    #d133ff 25%,
    #56086d 50%,
    #d133ff 75%,
    #8c0db1 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .zscustom-heroslide-heading h1 span[style*="140, 13, 177"] {
    animation: piq-hero-shimmer 8s ease-in-out infinite alternate;
  }
}

@keyframes piq-hero-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
/* ---------- Purple outline button, for "browse more" buttons ----------
   Booking buttons stay solid purple.
   - Hero "Explore Solutions": styled automatically (no class needed).
   - Any other button: add the custom class "zscustom-outline-btn" to it. */
.zphero-slide:has(.zscustom-heroslide-heading) a.zpbutton.zpbutton-type-secondary,
.zscustom-outline-btn a.zpbutton,
a.zpbutton.zscustom-outline-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #8c0db1 !important;
  border: 1px solid rgba(140, 13, 177, 0.5) !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.zphero-slide:has(.zscustom-heroslide-heading) a.zpbutton.zpbutton-type-secondary:hover,
.zscustom-outline-btn a.zpbutton:hover,
a.zpbutton.zscustom-outline-btn:hover {
  background: rgba(235, 225, 237, 0.6) !important; /* brand tint #EBE1ED */
  border-color: #8c0db1 !important;
  color: #8c0db1 !important;
}

.zphero-slide:has(.zscustom-heroslide-heading) a.zpbutton.zpbutton-type-secondary:focus-visible,
.zscustom-outline-btn a.zpbutton:focus-visible,
a.zpbutton.zscustom-outline-btn:focus-visible {
  outline: 2px solid #d133ff;
  outline-offset: 2px;
}

.zphero-slide:has(.zscustom-heroslide-heading) a.zpbutton.zpbutton-type-secondary .zpbutton-content,
.zscustom-outline-btn a.zpbutton .zpbutton-content,
a.zpbutton.zscustom-outline-btn .zpbutton-content,
.zphero-slide:has(.zscustom-heroslide-heading) a.zpbutton.zpbutton-type-secondary .zpbutton-icon,
.zscustom-outline-btn a.zpbutton .zpbutton-icon,
a.zpbutton.zscustom-outline-btn .zpbutton-icon {
  color: inherit !important;
}
/* ---------- Home "Featured solutions": each row is a clickable card ----------
   Big purple number, white card and purple title on hover, and the
   "View solution" button becomes a round arrow that fills purple on hover.
   Rows are found by their "zscustom-small-heading" text block. */

/* ---------- Row = card ---------- */
.zprow:has(> .zpelem-col > .zscustom-small-heading) {
  position: relative !important;
  margin-inline: -16px !important;
  padding: 24px 16px !important;
  border-radius: 22px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.zprow:has(> .zpelem-col > .zscustom-small-heading):hover,
.zprow:has(> .zpelem-col > .zscustom-small-heading):focus-within {
  background-color: #ffffff !important;
}

/* Let the button's link stretch over the whole row (columns are relative) */
.zprow:has(> .zpelem-col > .zscustom-small-heading) > .zpelem-col {
  position: static !important;
}

/* ---------- Big purple number, label below ---------- */
.zprow:has(> .zpelem-col > .zscustom-small-heading) .zscustom-small-heading .zptext > p:first-child,
.zprow:has(> .zpelem-col > .zscustom-small-heading) .zscustom-small-heading .zptext > p:first-child * {
  font-size: 46px !important;
  line-height: 1.1 !important;
  color: #8c0db1 !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- Title turns purple on hover ---------- */
.zprow:has(> .zpelem-col > .zscustom-small-heading) h3,
.zprow:has(> .zpelem-col > .zscustom-small-heading) h3 span {
  transition: color 0.15s ease;
}

.zprow:has(> .zpelem-col > .zscustom-small-heading):hover h3,
.zprow:has(> .zpelem-col > .zscustom-small-heading):hover h3 span {
  color: #8c0db1 !important;
}

/* ---------- "View solution" -> round arrow button ---------- */
.zprow:has(> .zpelem-col > .zscustom-small-heading) .zpbutton-container {
  display: flex !important;
  justify-content: flex-end !important;
}

.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton.zpbutton-wrapper {
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(140, 13, 177, 0.4) !important;
  color: #8c0db1 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Arrow icon (same shape as the Next.js site's ArrowUpRight) */
.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton.zpbutton-wrapper::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}

/* Stretch the link over the whole row so the entire card is clickable */
.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton.zpbutton-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}

/* Keep "View solution" for screen readers, hide it visually */
.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton .zpbutton-content,
.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton .zpbutton-icon {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Hover: arrow fills purple and nudges up-right */
.zprow:has(> .zpelem-col > .zscustom-small-heading):hover a.zpbutton.zpbutton-wrapper {
  background: #8c0db1 !important;
  border-color: #8c0db1 !important;
  color: #ffffff !important;
}

@media (prefers-reduced-motion: no-preference) {
  .zprow:has(> .zpelem-col > .zscustom-small-heading):hover a.zpbutton.zpbutton-wrapper::before {
    transform: translate(2px, -2px);
  }
}

/* Keyboard focus ring around the whole card */
.zprow:has(> .zpelem-col > .zscustom-small-heading) a.zpbutton.zpbutton-wrapper:focus-visible {
  outline: none;
}

.zprow:has(> .zpelem-col > .zscustom-small-heading):has(a.zpbutton:focus-visible) {
  outline: 2px solid #d133ff;
  outline-offset: 2px;
}

/* ---------- Home hero background image ----------
   Targets only the hero slide with the hero heading. */

.zphero-slide:has(.zscustom-heroslide-heading) {
  background-image: none !important;
  background-color: #ffffff !important;
}

.zphero-slide:has(.zscustom-heroslide-heading)::before,
.zphero-slide:has(.zscustom-heroslide-heading)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Background image (uploaded to Zoho Files: hero/hero.png): fills the whole
   hero, anchored right. It is white on the left, behind the text. */
.zphero-slide:has(.zscustom-heroslide-heading)::before {
  background: url("/hero/hero.png") right center / cover no-repeat;
}

/* Wrap the intro paragraph like the Next.js site so it clears the illustration. */
.zphero-slide:has(.zscustom-heroslide-heading) .zpelem-text:has(p) .zptext {
  max-width: 680px;
}

/* From 1024px: a white veil fading out to the right keeps the heading, text and
   buttons on clean white. The stops follow the 1152px content column, so the veil
   ends just past the heading on every screen width. */
@media (min-width: 1024px) {
  .zphero-slide:has(.zscustom-heroslide-heading)::after {
    background: linear-gradient(to right,
      rgba(255, 255, 255, 0.95) 0,
      rgba(255, 255, 255, 0.9) calc(max(0px, (100% - 1152px) / 2) + 640px),
      rgba(255, 255, 255, 0) calc(max(0px, (100% - 1152px) / 2) + 1040px));
  }
}

/* Below 1024px the busy side of the image sits behind the text, so veil it. */
@media (max-width: 1023px) {
  .zphero-slide:has(.zscustom-heroslide-heading)::after {
    background: rgba(255, 255, 255, 0.65);
  }
}
@media (max-width: 767px) {
  .zphero-slide:has(.zscustom-heroslide-heading)::after {
    background: rgba(255, 255, 255, 0.8);
  }
}

/* Keep the text and buttons above the background. */
.zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container {
  z-index: 1;
}

/* ---------- Page width: 1152px max, 16 / 24 / 32px side padding, like the Next.js site ----------
   Applies to every Zoho container (header, hero, sections, footer). Embed Code
   snippets follow the Zoho column, so they line up automatically. */

.zpcontainer {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 640px) {
  .zpcontainer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1024px) {
  .zpcontainer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* The hero banner style adds 18px of its own padding to the row, which pushed
   the hero text in further than every other section. */
.zphero-slider-container .zpcontainer > .zprow {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ---------- Spacing around Embed Code blocks (piq-* classes) ----------
   Each embed follows Zoho's rhythm: heading 70px below the top of its section,
   content ending 50px above the bottom, so every gap is about 120px. */

/* The Zoho section that holds the embeds: no padding of its own. */
.zpsection:has(section.piq-fde, section.piq-fde2, section.piq-stages, section.piq-sol, .piq-about) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Zoho's 20px top margin on each Embed Code element. */
.zpelem-codesnippet:has(section.piq-fde, section.piq-fde2, section.piq-stages, section.piq-sol, .piq-about) {
  margin-top: 0 !important;
}

/* Each embed block: 70px above the heading, 50px below the content, like Zoho. */
section.piq-fde,
section.piq-fde2,
section.piq-stages,
section.piq-sol,
.piq-about .piq-about__section {
  padding: 70px 0 50px !important;
}

/* About: the leadership cards follow the award card as one group, 80px below it. */
.piq-about .piq-about__section--team {
  padding-top: 30px !important;
}

/* Homepage hero: Zoho sets it to the full screen height (about 900px), which left
   about 280px of white space between the logo row and "How we work". Fit it to its
   content instead, so that gap is 120px like the rest of the page. The hero
   container's own dark grey background is set to white, or a hairline of it shows
   at the bottom edge. */
.zphero:has(.zscustom-heroslide-heading) {
  height: auto !important;
  min-height: 0 !important;
  background: #ffffff !important;
}

.zphero:has(.zscustom-heroslide-heading) .zphero-slides,
.zphero:has(.zscustom-heroslide-heading) .zphero-slide:has(.zscustom-heroslide-heading),
.zphero:has(.zscustom-heroslide-heading) .zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
}

.zphero:has(.zscustom-heroslide-heading) .zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container {
  padding-bottom: 13px !important;
}

/* Homepage hero: fill exactly one screen height on any monitor, so the next
   section ("How we work") never peeks in on tall screens. The content (heading,
   buttons, logo row) is centred vertically in that space. On short screens the
   content is taller than the screen and the hero simply fits the content. */
.zphero:has(.zscustom-heroslide-heading) .zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container {
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Below 992px Zoho's header (80px) sits above the hero instead of over it, so
   take it off the height or the logo row drops just below the screen. */
@media (max-width: 991px) {
  .zphero:has(.zscustom-heroslide-heading) .zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container {
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100svh - 80px) !important;
  }
}

.zphero:has(.zscustom-heroslide-heading) .zphero-slider-container > .zpcontainer {
  width: 100%;
}

/* Logo row at the bottom of the screen; the heading, text and buttons sit in the
   middle of the space above it. The second row (buttons + logo image) is flattened
   so the buttons stay with the heading and only the logos drop to the bottom. */
.zphero-slide:has(.zscustom-heroslide-heading) > .zphero-slider-container > .zpcontainer {
  display: flex !important;
  flex-direction: column;
  flex: 1 0 auto;
}

.zphero-slide:has(.zscustom-heroslide-heading) .zpcontainer > .zprow:has(.zpelem-image),
.zphero-slide:has(.zscustom-heroslide-heading) .zpcontainer > .zprow:has(.zpelem-image) > .zpelem-col {
  display: contents !important;
}

.zphero-slide:has(.zscustom-heroslide-heading) .zpcontainer > .zprow:has(.zscustom-heroslide-heading) {
  margin-top: auto !important;
}

/* Same gap above the buttons as before the row was flattened */
.zphero-slide:has(.zscustom-heroslide-heading) .zpcontainer .zpelem-buttongroup {
  margin-top: 38px !important;
}

/* At least 79px above the logos (as before), more on tall screens */
.zphero-slide:has(.zscustom-heroslide-heading) .zpcontainer .zpelem-image {
  margin-top: auto !important;
  padding-top: 79px;
}
/* Paste into Zoho Sites > site-wide Custom CSS (at the end).
   "Sound familiar?" sections styled like the Next.js site: grey section, quotes as
   white rounded cards with a purple tick, two columns 896px wide with 16px gaps
   (one column on mobile).

   To use: in the Zoho editor, select the "Sound familiar?" section, open its
   settings and add the custom class:  zscustom-sound-familiar
   Works with the existing layout on the industry pages: each quote is an H5
   heading with a divider line above it in its own column. The dividers are
   hidden; nothing needs rebuilding. */

/* Grey section background */
.zpsection.zscustom-sound-familiar {
  background: #f8f8f8 !important;
}

/* Hide the divider lines above each quote */
.zpsection.zscustom-sound-familiar .zpelem-divider {
  display: none !important;
}

/* 32px between the heading and the first row of cards */
.zpsection.zscustom-sound-familiar .zpelem-heading:has(h2) {
  margin-bottom: 16px;
}

/* Two columns, 896px wide, 16px apart; cards in a row share one height */
.zpsection.zscustom-sound-familiar .zprow:has(> .zpelem-col > .zpelem-heading h5) {
  align-items: stretch !important;
  max-width: 912px;
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.zpsection.zscustom-sound-familiar .zpelem-col:has(> .zpelem-heading h5) {
  display: flex !important;
  flex-direction: column;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Each quote is a card, with room on the left for the tick */
.zpsection.zscustom-sound-familiar .zpelem-heading:has(h5) {
  position: relative;
  flex: 1;
  margin-top: 16px !important;
  padding: 20px 20px 20px 56px;
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 21.6px;
}

/* Tick: lavender circle with a purple check */
.zpsection.zscustom-sound-familiar .zpelem-heading:has(h5)::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ebe1ed;
}

.zpsection.zscustom-sound-familiar .zpelem-heading:has(h5)::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 28px;
  width: 16px;
  height: 16px;
  background: #8c0db1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Quote text: 18px body text, as on the Next.js site */
.zpsection.zscustom-sound-familiar .zpelem-heading h5,
.zpsection.zscustom-sound-familiar .zpelem-heading h5 * {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: #1b032b !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Each quote ends with a line break in Zoho, which adds an empty line */
.zpsection.zscustom-sound-familiar .zpelem-heading h5 br {
  display: none;
}
/* Paste into Zoho Sites > site-wide Custom CSS (at the end).
   Contact Us page laid out like the Next.js site: grey section, the purple card
   (zoho-contact-card.html) on the left and the Bigin form as a white card on the
   right, fields in two columns with labels above, rounded inputs, Submit and an
   outline Reset button. On mobile the form comes first.

   To use: in the Zoho editor, on /contact-us, select the section holding the
   Bigin form and add the custom class:  zscustom-contact
   Then delete the logo image in its left column and put an Embed Code element
   there with zoho-contact-card.html. The form itself is unchanged: it still
   submits to Bigin with its reCAPTCHA. */

/* Grey section */
.zpsection.zscustom-contact {
  background: #f8f8f8 !important;
}

/* Columns: card 5/12, form 7/12 on desktop; form first below that */
@media (min-width: 1024px) {
  .zpsection.zscustom-contact .zprow:has(> .zpelem-col .zpapp) > .zpelem-col:not(:has(.zpapp)) {
    flex: 0 0 41.667% !important;
    max-width: 41.667% !important;
  }

  .zpsection.zscustom-contact .zprow:has(> .zpelem-col .zpapp) > .zpelem-col:has(.zpapp) {
    flex: 0 0 58.333% !important;
    max-width: 58.333% !important;
  }
}

@media (max-width: 1023px) {
  .zpsection.zscustom-contact .zprow:has(> .zpelem-col .zpapp) > .zpelem-col:has(.zpapp) {
    order: -1;
  }
}

/* Both cards start at the top of the row (no element margin above them) */
.zpsection.zscustom-contact .zprow:has(> .zpelem-col .zpapp) > .zpelem-col > .zpelement:first-child {
  margin-top: 0 !important;
}

/* The form as a white card */
.zpsection.zscustom-contact .zpapp {
  padding: 40px;
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 21.6px;
}

@media (max-width: 767px) {
  .zpsection.zscustom-contact .zpapp {
    padding: 32px;
  }
}

.zpsection.zscustom-contact .zpapp h2 {
  margin: 0 !important;
  font-size: 46px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #1b032b !important;
}

@media (max-width: 1023px) {
  .zpsection.zscustom-contact .zpapp h2 {
    font-size: 36px !important;
  }
}

/* Fields: two columns, labels above; Company, reCAPTCHA and buttons full width */
.zpsection.zscustom-contact .zpform-container {
  margin-top: 32px !important;
  padding: 0 !important;
}

.zpsection.zscustom-contact .zpform-outer {
  display: grid !important;
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (min-width: 640px) {
  .zpsection.zscustom-contact .zpform-outer {
    grid-template-columns: 1fr 1fr;
  }
}

.zpsection.zscustom-contact .zpform-outer > li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zpsection.zscustom-contact .zpform-outer > li:nth-child(n + 5) {
  grid-column: 1 / -1;
}

.zpsection.zscustom-contact .zpform-outer > li:has(.g-recaptcha) .zpform-label-container {
  display: none !important;
}

.zpsection.zscustom-contact .zpform-label-container,
.zpsection.zscustom-contact .zpform-field-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zpsection.zscustom-contact .zpform-label-container {
  min-height: 0 !important;
  margin-bottom: 8px !important;
}

.zpsection.zscustom-contact .zpform-label-container label {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #1b032b !important;
}

.zpsection.zscustom-contact .zpform-mandatory {
  font-style: normal;
  color: #8c0db1 !important;
}

/* Inputs: 48px, rounded, purple focus ring */
.zpsection.zscustom-contact .zpform-field-container input[type="text"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 18px !important;
  color: #1b032b !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zpsection.zscustom-contact .zpform-field-container input[type="text"]:focus {
  border-color: #8c0db1 !important;
  box-shadow: 0 0 0 2px rgba(209, 51, 255, 0.4) !important;
}

/* Buttons: pill Submit (solid purple, from the button CSS above) and outline Reset */
.zpsection.zscustom-contact .zpform-button {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
}

.zpsection.zscustom-contact .zpform-button input {
  height: 48px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 32px !important;
  border-radius: 999px !important;
  font-size: 18px !important;
}

.zpsection.zscustom-contact .zpform-button input[type="reset"] {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #8c0db1 !important;
  border: 1px solid rgba(140, 13, 177, 0.5) !important;
}

.zpsection.zscustom-contact .zpform-button input[type="reset"]:hover {
  background: rgba(235, 225, 237, 0.6) !important;
  border-color: #8c0db1 !important;
}
/* Paste into Zoho Sites > site-wide Custom CSS (at the end).
   A bullet list in a Text element, shown like the Next.js site's "What this means
   for you": one white card, a purple tick on each row, rows divided by a hairline.

   To use: in the Zoho editor, select the section (e.g. "What this means for you" on
   /converge-iq and /ascend-ai) and add the custom class:  zscustom-checklist
   Only the list in the section's Text element is shown; the empty paragraphs Zoho
   leaves around it are hidden, so don't put other text in that Text element. */

.zpsection.zscustom-checklist .zpelem-text .zptext p {
  display: none !important;
}

/* The list as one white card */
.zpsection.zscustom-checklist .zpelem-text .zptext ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 21.6px;
  overflow: hidden;
}

.zpsection.zscustom-checklist .zpelem-text .zptext li {
  position: relative;
  margin: 0 !important;
  padding: 16px 24px 16px 64px !important;
  list-style: none !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #1b032b !important;
}

.zpsection.zscustom-checklist .zpelem-text .zptext li + li {
  border-top: 1px solid #e6e6ea;
}

.zpsection.zscustom-checklist .zpelem-text .zptext li::marker {
  content: none;
}

/* Tick: lavender circle with a purple check */
.zpsection.zscustom-checklist .zpelem-text .zptext li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ebe1ed;
}

.zpsection.zscustom-checklist .zpelem-text .zptext li::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 24px;
  width: 16px;
  height: 16px;
  background: #8c0db1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Paste into Zoho Sites > site-wide Custom CSS (at the end).
   Become a Member page laid out like the Next.js site: grey section, the purple
   "What happens next" card (zoho-member-card.html) on the left and the Zoho form as
   a white card on the right. Fields in two columns with labels above, rounded
   inputs and dropdowns, each checkbox and radio option in its own bordered box,
   and a pill "Send enquiry" button. On mobile the form comes first.

   To use: in the Zoho editor, on /become-a-member, select the section holding the
   form and add the custom class:  zscustom-member
   Then delete the "What happens next" heading, the three step boxes and the
   "Want to know more?" box in the left column, and put an Embed Code element
   there with zoho-member-card.html. The form itself is unchanged: its fields,
   required checks and submissions all work as before. */

/* Grey section, 80px above and below */
.zpsection.zscustom-member {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  background: #f8f8f8 !important;
}

/* Columns: card 5/12, form 7/12 on desktop, 40px apart; form first below that */
@media (min-width: 1024px) {
  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) {
    flex-wrap: nowrap !important;
    gap: 40px;
  }

  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) > .zpelem-col:not(:has(.zpelem-lpform)) {
    flex: 5 1 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* The card stays in view while the long form scrolls past */
    position: sticky;
    top: 112px;
  }

  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) > .zpelem-col:has(.zpelem-lpform) {
    flex: 7 1 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) {
    align-items: flex-start !important;
  }
}

@media (max-width: 1023px) {
  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) > .zpelem-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) > .zpelem-col:has(.zpelem-lpform) {
    order: -1;
    margin-bottom: 32px;
  }
}

/* Both cards start at the top of the row (no element margin above them) */
.zpsection.zscustom-member .zprow:has(> .zpelem-col .zpelem-lpform) > .zpelem-col > .zpelement:first-child {
  margin-top: 0 !important;
}

/* The form as a white card */
.zpsection.zscustom-member .zpelem-lpform {
  padding: 40px !important;
  background: #ffffff !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 21.6px !important;
}

@media (max-width: 767px) {
  .zpsection.zscustom-member .zpelem-lpform {
    padding: 32px !important;
  }
}

.zpsection.zscustom-member .zpelem-lpform h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 46px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #1b032b !important;
}

@media (max-width: 1023px) {
  .zpsection.zscustom-member .zpelem-lpform h2 {
    font-size: 36px !important;
  }
}

/* Fields: two columns, labels above. Full width: regions, the four choice groups,
   the message, the consent box and the button. */
.zpsection.zscustom-member .zpform-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Fields line up along the bottom of each row, so a label that wraps onto two
   lines doesn't push its input out of line with the one beside it */
.zpsection.zscustom-member .zpform-outer {
  display: grid !important;
  align-items: end;
  gap: 24px;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (min-width: 640px) {
  .zpsection.zscustom-member .zpform-outer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.zpsection.zscustom-member .zpform-outer > li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.zpsection.zscustom-member .zpform-outer > li:nth-child(n + 13):nth-child(-n + 17),
.zpsection.zscustom-member .zpform-outer > li:nth-child(n + 20),
.zpsection.zscustom-member .zpform-outer > li.zpform-choice-input-container {
  grid-column: 1 / -1;
}

/* The form's hidden message row and empty label rows take no space */
.zpsection.zscustom-member .zpform-outer > li[style*="display:none"],
.zpsection.zscustom-member .zpform-outer > li[style*="display: none"] {
  display: none !important;
}

.zpsection.zscustom-member .zpform-outer > li:has(.zpform-button) .zpform-label-container,
.zpsection.zscustom-member .zpform-outer > li:last-child .zpform-label-container:empty {
  display: none !important;
}

.zpsection.zscustom-member .zpform-label-container,
.zpsection.zscustom-member .zpform-field-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zpsection.zscustom-member .zpform-label-container {
  min-height: 0 !important;
  margin-bottom: 8px !important;
}

.zpsection.zscustom-member .zpform-choice-input-container .zpform-label-container {
  margin-bottom: 12px !important;
}

.zpsection.zscustom-member .zpform-label-container label,
.zpsection.zscustom-member .zpform-label-container .zpform-label {
  display: block;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: #1b032b !important;
}

.zpsection.zscustom-member .zpform-mandatory {
  font-style: normal;
  color: #8c0db1 !important;
}

/* The consent box has only a "*" as its label: hide that row (the * is in the
   checkbox text) */
.zpsection.zscustom-member .zpform-outer > li:has(.zpform-help-text) .zpform-label-container {
  display: none !important;
}

/* Text inputs, dropdowns and the message: 48px high, rounded, purple focus ring */
.zpsection.zscustom-member .zpform-field-container input[type="text"],
.zpsection.zscustom-member .zpform-field-container input[type="email"],
.zpsection.zscustom-member .zpform-field-container input[type="tel"],
.zpsection.zscustom-member .zpform-field-container input[type="url"],
.zpsection.zscustom-member .zpform-field-container select,
.zpsection.zscustom-member .zpform-field-container textarea {
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 16.8px !important;
  background-color: #ffffff !important;
  font-family: inherit !important;
  font-size: 18px !important;
  color: #1b032b !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zpsection.zscustom-member .zpform-field-container select {
  padding-right: 44px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
}

.zpsection.zscustom-member .zpform-field-container textarea {
  height: auto !important;
  min-height: 188px;
  padding: 12px 16px !important;
  line-height: 1.8 !important;
  resize: vertical;
}

.zpsection.zscustom-member .zpform-field-container input:focus,
.zpsection.zscustom-member .zpform-field-container select:focus,
.zpsection.zscustom-member .zpform-field-container textarea:focus {
  border-color: #8c0db1 !important;
  box-shadow: 0 0 0 2px rgba(209, 51, 255, 0.4) !important;
}

/* Checkbox and radio groups: each option in its own bordered box, two columns */
.zpsection.zscustom-member .zpform-choice-input-container .zpform-field-container {
  display: grid !important;
  gap: 8px;
}

@media (min-width: 640px) {
  .zpsection.zscustom-member .zpform-choice-input-container .zpform-field-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.zpsection.zscustom-member .zpform-choice-container {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.zpsection.zscustom-member .zpform-choice-container label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 16.8px !important;
  background: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #1b032b !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.zpsection.zscustom-member .zpform-choice-container label:hover {
  border-color: rgba(140, 13, 177, 0.5) !important;
}

.zpsection.zscustom-member .zpform-choice-container label:has(input:checked) {
  border-color: #8c0db1 !important;
  background: rgba(235, 225, 237, 0.4) !important;
}

.zpsection.zscustom-member .zpform-choice-container input[type="checkbox"],
.zpsection.zscustom-member .zpform-choice-container input[type="radio"] {
  flex: none;
  width: 16px !important;
  height: 16px !important;
  margin: 8px 0 0 !important;
  accent-color: #8c0db1;
  cursor: pointer;
}

/* Consent: one plain line (no box) with the help text below it */
.zpsection.zscustom-member .zpform-outer > li:has(.zpform-help-text) .zpform-field-container {
  display: block !important;
}

.zpsection.zscustom-member .zpform-outer > li:has(.zpform-help-text) .zpform-choice-container label {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.zpsection.zscustom-member .zpform-help-text {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #353b47 !important;
}

/* "privacy policy" link (added by the script in the member card embed) */
.zpsection.zscustom-member .zpform-help-text a {
  color: #56086d !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Send enquiry: solid purple pill */
.zpsection.zscustom-member .zpform-button {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
}

.zpsection.zscustom-member .zpform-button input {
  height: 48px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #8c0db1 !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.zpsection.zscustom-member .zpform-button input:hover {
  background: rgba(140, 13, 177, 0.8) !important;
}
/* Paste into Zoho Sites > site-wide Custom CSS (at the end).
   "Explore more" cards on the solution pages (e.g. /sales-tendering) laid out like
   the Next.js site: white cards with a light border, the Industry / Solutions /
   Service tag as plain purple caps (not a pill), the title, and a purple arrow at
   the bottom. On hover the border and title turn purple and the card gets a light
   purple tint. 4 across on desktop, 2 on tablets, 1 on phones, 20px apart, and the
   cards in a row are the same height.

   No class needs adding: it applies to every box with the "zsradius-hover-box"
   class that holds an H6 tag and an H5 link title, which is how the Explore more
   cards are built on every solution page. The whole card is already clickable
   (Header Code). Selectors are doubled up and use !important because Zoho writes
   per-box inline styles with !important. */

/* ---------- The row of cards ---------- */
/* 48px from the "Explore more" heading to the first row of cards */
.zprow:not(:has(.zsradius-hover-box)) + .zprow:has(> .zpelem-col > .zsradius-hover-box h6):has(> .zpelem-col > .zsradius-hover-box h5 a) {
  margin-top: 28px !important;
}

/* 20px between cards, and the cards in a row the same height */
.zprow:has(> .zpelem-col > .zsradius-hover-box h6):has(> .zpelem-col > .zsradius-hover-box h5 a) {
  align-items: stretch !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.zpelem-col:has(> .zsradius-hover-box h6):has(> .zsradius-hover-box h5 a) {
  display: flex !important;
  flex-direction: column;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Tablets: 2 across (Zoho shows 4 from 768px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .zprow:has(> .zpelem-col > .zsradius-hover-box h6):has(> .zpelem-col > .zsradius-hover-box h5 a) {
    flex-wrap: wrap !important;
  }

  .zpelem-col:has(> .zsradius-hover-box h6):has(> .zsradius-hover-box h5 a) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ---------- The card ---------- */
div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a) {
  position: relative;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
  margin: 20px 0 0 !important;
  padding: 32px !important;
  background-color: #ffffff !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 21.6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a):hover,
div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a):focus-within {
  border-color: #8c0db1 !important;
  background-color: rgba(235, 225, 237, 0.4) !important;
}

/* The tag and title sit straight under each other (no Zoho element margins) */
.zsradius-hover-box:has(h6):has(h5 a) > .zpelement {
  margin: 0 !important;
  padding: 0 !important;
}

/* Tag: Industry / Solutions / Service as plain purple caps, not the site's pill */
.zsradius-hover-box:has(h6):has(h5 a) .zpelem-heading h6.zpheading,
.zsradius-hover-box:has(h6):has(h5 a) .zpelem-heading h6.zpheading * {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #56086d !important;
}

.zsradius-hover-box:has(h6):has(h5 a) .zpelem-heading h6.zpheading {
  margin-bottom: 8px !important;
}

/* Title */
.zsradius-hover-box:has(h6):has(h5 a) h5,
.zsradius-hover-box:has(h6):has(h5 a) h5 a {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 28px !important;
  line-height: 1.375 !important;
  font-weight: 400 !important;
  color: #1b032b !important;
  text-decoration: none !important;
  /* Zoho's headings use break-word, which split "Manufacturing" mid-word */
  word-break: normal !important;
  overflow-wrap: normal !important;
  transition: color 0.15s ease;
}

.zsradius-hover-box:has(h6):has(h5 a):hover h5,
.zsradius-hover-box:has(h6):has(h5 a):hover h5 a {
  color: #8c0db1 !important;
}

@media (max-width: 1023px) {
  .zsradius-hover-box:has(h6):has(h5 a) h5,
  .zsradius-hover-box:has(h6):has(h5 a) h5 a {
    font-size: 24px !important;
  }
}

/* Arrow (up and to the right), 24px below the title */
div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a)::after {
  content: "";
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 24px;
  background-color: #8c0db1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}

div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a):hover::after {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  div.zpelem-box.zpbox-container.zsradius-hover-box:has(h6):has(h5 a)::after {
    transition: none;
  }
}
.zpbutton.zpbutton-style-oval,
input.zpbutton.zpbutton-style-oval {
  border-radius: 999px !important;
}
/* ---------- Show the logo on phones and tablets ----------
   The header setting hides it below 992px (theme-disable-logo-mobile). */
.theme-header .zpcontainer .theme-branding-info .theme-logo-parent.theme-disable-logo-mobile {
  display: flex !important;
}

@media (max-width: 991px) {
  .theme-header .zpcontainer .theme-branding-info .theme-logo-parent.theme-disable-logo-mobile img {
    height: 40px !important;
    width: auto !important;
  }
}