.template-single-page {
  background: var(--new--neutral--color-100);
}

.template-single-page .main-content {
  overflow: clip;
}

.template-single-page .header-position-absolute {
  background: var(--new--neutral--color-100);
  box-shadow: 0 1px 0 rgba(231, 233, 246, .9);
  position: relative;
}

.template-single-page .breadcrumb-wrapper {
  padding-top: var(--mg-pd--xs);
  /* Matches the header's bottom line so the breadcrumb sits between two identical rules */
  box-shadow: inset 0 -1px 0 rgba(231, 233, 246, .9);
}

/* Nudge the breadcrumb 2px down for tighter vertical alignment. */
.template-single-page .breadcrumb-list-wrapper {
  position: relative;
  top: 2px;
}

.template-single-not-found {
  min-height: 52vh;
  padding-top: calc(var(--mg-pd--xxl) + 80px);
  padding-bottom: var(--mg-pd--xxl);
  background: var(--new--neutral--color-100);
}

.template-single-back {
  color: var(--new--primary-color);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 28px;
  transition: transform .22s ease, color .22s ease;
}

.template-single-back:hover {
  transform: translate3d(-4px, 0, 0);
}

.template-page-hero {
  padding-top: 56px;
  padding-bottom: 136px;
}

.template-single-hero {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.template-single-hero__copy {
  max-width: 610px;
}

@media screen and (min-width: 992px) {
  .template-single-hero__copy {
    padding-top: 2px;
  }

  .template-single-hero__excerpt {
    margin-top: -10px;
  }
}

.template-single-hero__badges {
  flex-wrap: wrap;
}

.template-single-hero__name {
  background-color: var(--new--secondary--color-2);
  color: var(--new--primary-color);
  border-width: 0;
  box-shadow: none;
  font-weight: 500;
}

.template-single-hero__category {
  color: var(--new--neutral--color-800);
  background-color: var(--new--neutral--color-100);
  box-shadow: none;
  font-weight: 500;
}

.template-single-hero__excerpt p {
  /* Relative line-height so it scales with the responsive font size,
     matching the live site (24px on desktop, ~20.4px on mobile). */
  line-height: 1.5;
}

.template-single-hero__buttons {
  margin-top: 24px;
}

.template-single-gallery {
  position: relative;
  min-width: 0;
}

.template-single-gallery__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--new--neutral--color-400);
  border-radius: var(--radius--br-5);
  background: var(--new--neutral--color-100);
  box-shadow: 0 3px 8px #211f5417;
}

.template-single-gallery__track {
  display: flex;
  will-change: transform;
  transition: transform .48s cubic-bezier(.22, 1, .36, 1);
}

.template-single-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 1.6 / 1;
  background: #f7f7ff;
}

.template-single-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-single-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  border: 1px solid #ffffffed;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px #4a3aff0d;
  color: var(--new--neutral--color-800);
  font-family: "BRIX Icon Font", sans-serif;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transform: translate3d(0, -50%, 0);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}

.template-single-gallery__arrow:hover {
  background: #fff;
  box-shadow: 0 2px 5px #4a3aff0d;
  transform: scale(.94) translate(0, -50%);
}

.template-single-gallery__arrow--prev {
  left: 20px;
}

.template-single-gallery__arrow--prev:hover {
  transform: translate3d(-4px, -50%, 0);
}

.template-single-gallery__arrow--next {
  right: 20px;
}

.template-single-gallery__arrow--next:hover {
  transform: translate3d(4px, -50%, 0);
}

.template-single-gallery[data-gallery-single="true"] .template-single-gallery__arrow {
  display: none;
}

.template-single-content-grid {
  grid-template-columns: 1fr .5fr;
  align-items: start;
  gap: var(--g-d);
  margin-top: -60px;
}

.template-single-page .cloneable-content {
  margin-top: 0;
  padding-top: 0;
}

.template-single-content-main {
  min-width: 0;
}

.template-single-sidebar-wrap {
  position: static;
  display: grid;
  gap: 24px;
  min-width: 0;
}

.template-single-customization-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  overflow: hidden;
  margin-bottom: 24px;
  padding-top: 32px;
  padding-bottom: 24px;
  border: 1px solid var(--new--neutral--color-300);
  border-radius: 14px;
  background: var(--new--neutral--color-100);
  color: inherit;
}

.template-single-customization-card:hover {
  transform: none;
}

.template-single-customization-card .btn {
  width: auto;
}

.template-single-customization-card .heading-h5-size {
  margin-top: 0;
  margin-bottom: 6px;
}

.template-single-customization-card .hire-our-team-card-image-wrapper {
  z-index: -1;
  flex-flow: column;
  justify-content: center;
  width: 60%;
  max-width: 364px;
  display: flex;
  position: absolute;
  bottom: -26%;
  right: 0;
}

.template-content-single {
  padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 64px) clamp(22px, 3vw, 36px);
}

.template-content-single .rich-text {
  color: var(--new--neutral--color-600);
  /* Breathing room above the first heading so the card doesn't feel cramped. */
  padding-top: 16px;
}

/* Purple bullets instead of the default grey. */
.template-content-single .rich-text ul li::marker {
  color: var(--new--primary-color);
}

/* Align the numbered list flush with the body text (no extra indent). */
.template-content-single .rich-text ol {
  padding-left: 0;
  list-style-position: inside;
}

.template-content-single .rich-text > :first-child {
  margin-top: 0;
}

.template-content-single .rich-text > :last-child {
  margin-bottom: 26px;
}

.template-content-single .rich-text img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* "Benefits" graphics are full infographics, not photos: show them flat,
   without the card shadow/rounded border the other rich-text images get.
   Matched by filename convention so it covers every template page. */
.template-content-single .rich-text img[src*="benefits"] {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.template-content-single .rich-text figure {
  margin: 34px 0;
}

.template-content-single .rich-text iframe {
  width: 100%;
  max-width: 100%;
  border-radius: 24px;
}

.share-post-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
  text-align: center;
}

.share-links-contianer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 43, .08);
  color: var(--new--neutral--color-600);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.share-link:hover {
  box-shadow: 0 12px 28px rgba(20, 20, 43, .16);
  transform: translateY(-4px);
}

.share-link svg {
  width: 17px;
  height: 17px;
}

.share-link.social-media-icon--facebook:hover,
.share-link.social-media-icon--facebook:focus-visible {
  color: #1877f2;
}

.share-link.social-media-icon--x:hover,
.share-link.social-media-icon--x:focus-visible {
  color: #000;
}

.share-link.social-media-icon--linkedin:hover,
.share-link.social-media-icon--linkedin:focus-visible {
  color: #0a66c2;
}

.template-sidebar {
  padding: 28px;
}

.template-sidebar-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  /* Halve the icon→title gap (was 16px + 18px title margin = 34px → 17px). */
  margin-bottom: 8px;
}

/* Second half of the halved icon→title gap (title's own top margin: 18px → 9px). */
.template-sidebar .sidebar-col-top .ts-7.heading {
  margin-top: 9px;
}

/* Soften the divider before the "Need help…" block to 40% of its opacity. */
.template-sidebar .divider {
  opacity: 0.4;
}

.template-single-sidebar__buttons {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.template-single-sidebar__buttons .btn {
  width: 100%;
}

.template-single-sidebar__buttons .btn__wrap {
  justify-content: center;
}

.template-single-sidebar__help {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.template-single-sidebar__help .btn {
  width: 100%;
}

.template-single-sidebar__help .btn__wrap {
  justify-content: center;
}

.template-single-sidebar__help .heading {
  margin-top: 0;
}

.template-single-included {
  margin-top: 0;
}

.template-single-included .sidebar-list {
  margin-top: 20px;
}

.template-single-included .sidebar-list-item {
  align-items: center;
}

.template-single-section-title {
  max-width: 760px;
  margin-right: auto;
  margin-bottom: 52px;
  margin-left: auto;
  text-align: center;
}

.template-single-features__buttons {
  margin-top: 54px;
}

.template-single-more .title-btn {
  align-items: center;
  margin-bottom: 40px;
}

.template-single-more .templates-grid {
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .template-page-hero {
    padding-top: 40px;
    padding-bottom: 110px;
  }

  .template-single-hero,
  .template-single-content-grid {
    grid-template-columns: 1fr;
  }

  .template-single-hero__copy {
    max-width: none;
  }

  .template-single-gallery__arrow--prev {
    left: 24px;
  }

  .template-single-gallery__arrow--next {
    right: 24px;
  }

  .template-single-sidebar-wrap {
    position: static;
    top: auto;
  }

  .template-single-more .title-btn {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 22px;
  }
}

@media screen and (max-width: 767px) {
  .template-single-page .header .header__content {
    min-height: 28px;
  }

  .template-single-page .header .hbm__wraper {
    min-width: 28px;
    max-width: 28px;
    min-height: 28px;
    max-height: 28px;
  }

  .template-page-hero {
    padding-top: 32px;
    padding-bottom: 92px;
  }

  .template-single-hero {
    gap: 34px;
  }

  .template-single-hero__badges {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  /* Both badges share a 16px horizontal padding — the midpoint between the
     name's previous 12/14 and the category's 20, so they end up matching. */
  .template-single-hero__name {
    padding: 9.6px 16px;
    font-size: 16px;
    line-height: 16px;
  }

  .template-single-hero__category {
    padding: 9.6px 16px;
    font-size: 14px;
    line-height: 14px;
  }

  .template-single-hero__badges .tag.medium.template-single-hero__category {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Outranks Webflow's `.tag.medium.light` (0,3,0) so the name badge also lands at 16px. */
  .template-single-hero__badges .tag.light.template-single-hero__name {
    padding-right: 16px;
    padding-left: 16px;
  }

  .template-single-hero__buttons,
  .template-single-features__buttons {
    width: 100%;
  }

  .template-single-features__buttons .btn {
    width: 100%;
  }

  .template-single-hero__buttons {
    width: auto;
    margin-top: 20px;
  }

  .template-single-hero__buttons .btn {
    width: auto;
  }

  .template-single-hero .text-200 {
    margin-top: 8px;
    line-height: 1.5;
  }

  .template-single-hero__excerpt p {
    margin-top: 6px;
  }

  .template-single-gallery__viewport {
    border-radius: 22px;
  }

  .template-single-gallery__slide {
    aspect-ratio: 1.6 / 1;
  }

  /* Hide carousel arrows on phones: swiping is the primary gesture there. */
  .template-single-gallery__arrow {
    display: none;
  }

  .template-single-content-grid {
    gap: 28px;
  }

  /* Outranks Webflow's `.grid__2-col.cloneable-page-content` (0,2,0) negative
     overlap. Trimmed (vs the -60px desktop overlap) to leave a 64px gap
     between the carousel and this card on phones. */
  .template-single-page .template-single-content-grid {
    margin-top: -37px;
  }

  /* Hide the "Need help to customize…" promo card on phones to keep the
     content focused; it stays visible on tablet and up. Page-scoped to
     outrank Webflow's `.card.hire-our-team` (0,2,0) display rule. */
  .template-single-page .template-single-customization-card {
    display: none;
  }

  /* Keep breadcrumbs on a single, horizontally scrollable line instead of
     wrapping to two rows on narrow screens. */
  .template-single-page .breadcrumb-list-wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .template-single-page .breadcrumb-list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .template-single-page .breadcrumb-list-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .template-content-single,
  .template-sidebar {
    padding: 24px;
    border-radius: 22px;
  }

  .template-content-single .rich-text figure {
    margin: 32px 0;
  }

  .template-content-single .rich-text img,
  .template-content-single .rich-text iframe {
    border-radius: 18px;
  }

  .share-post-wrapper {
    margin-right: 24px;
    margin-left: 24px;
  }

  .template-single-section-title {
    margin-bottom: 36px;
    text-align: left;
  }

  .template-single-more .title-btn .btn {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .share-post-wrapper {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .share-links-contianer {
    justify-content: center;
  }
}