/**
 * CW Site Manager — Hidden cost section
 * Figma: CW-Site-Manager — https://www.figma.com/design/Aijk8ltvGMuxlQT9YM17aW/CW-Site-Manager?node-id=6174-32847
 * Colors: design tokens from a-generic/text.css (:root --ds-*).
 * Typography: a-generic/text.css (h2, h4, .p2-regular).
 * Layout: Bootstrap 3 (.container, .row, .col-lg-3 / .col-md-6 / .col-sm-6 / .col-xs-12).
 */

.cw_site_manager {
  box-sizing: border-box;
  /* Map section copy to DS so it stays aligned with Figma / variables.css */
  /* --heading-color: var(--ds-heading, #091e42);
  --paragraph-color: var(--ds-gray-60, #5e6c84); */
}

.cw_site_manager *,
.cw_site_manager *::before,
.cw_site_manager *::after {
  box-sizing: inherit;
}

/* -------------------------------------------------------------------------
   CW Site Manager Hero — dark, two-column hero (copy on the left, dashboard
   preview image on the right).
   Figma: CW-Site-Manager — node 6174:33501
   Typography: a-generic/text.css (h1, .p1-regular, .p2-semibold, .p2-regular,
   .p3-semibold). Only colors + layout are defined here for the dark surface.
   ------------------------------------------------------------------------- */
.cw_site_manager_hero {
  position: relative;
  overflow: hidden;
  padding: 190px 0;
  color: #ffffff;
  /* Solid fill under the image — visible while WebP loads or if it fails */
  background-color: #110445;
  /* background-image: url(https://www.cloudways.com/wp-content/uploads/2026/04/Hero_Bg.webp); */
  /* background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; */
}

.cw_site_manager_hero__container {
  max-width: 1326px;
  position: relative;
  z-index: 11;
}

.cw_site_manager_hero__wrap {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.cw_site_manager_hero__content {
  flex: 1 1 480px;
  max-width: 560px;
}

.cw_site_manager_hero__media {
  flex: 1 1 560px;
  max-width: 710px;
}

.cw_site_manager_hero__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Pill badge */
.cw_site_manager_hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  margin-bottom: 24px;
  border-radius: 110px;
border: 2px solid rgba(223, 223, 255, 0.00);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(245, 243, 255, 0.06) 100%);
backdrop-filter: blur(2px);
  color: #ffffff;
}

.cw_site_manager_hero__badgeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.cw_site_manager_hero__badgeLabel {
  margin: 0;
  color: currentColor;
}

/* Headline + subtitle inherit type from h1 / .p1-regular — we only re-color
   them for the dark surface (tokens in text.css assume a light surface). */
.cw_site_manager_hero__title {
  margin: 0 0 20px;
  color: #ffffff;
}

.cw_site_manager_hero__subtitle {
  margin: 0 0 40px;
  color: rgba(255, 255, 255, 0.8);
}

.cw_site_manager_hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  /* flex-wrap: wrap; */
  margin-bottom: 16px;
}
.cw_site_manager_hero__actions .p1-medium{
  margin-bottom: 0;
}
/* Primary CTA — solid white pill, dark text. Size/weight come from .p2-semibold */
.cw_site_manager_hero__btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 16px 32px;
  background-color: #ffffff;
  color: #091e42;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cw_site_manager_hero__btnPrimary:hover,
.cw_site_manager_hero__btnPrimary:focus {
  background-color: #dfe1e6;
  color: #091e42;
  text-decoration: none;
}

/* Secondary CTA — text-only link with trailing chevron. */
.cw_site_manager_hero__btnSecondary {
  display: inline-flex;
  align-items: center;
  /* gap: 8px; */
  margin: 0;
  padding: 8px 0;
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.cw_site_manager_hero__btnSecondary svg {
  transition: transform 0.25s ease;
  will-change: transform;
}

.cw_site_manager_hero__btnSecondary:hover,
.cw_site_manager_hero__btnSecondary:focus {
  color: #ffffff;
  /* opacity: 0.8; */
  text-decoration: none;
}

.cw_site_manager_hero__btnSecondary:hover svg,
.cw_site_manager_hero__btnSecondary:focus-visible svg {
  transform: translateX(6px);
}

.cw_site_manager_hero__signup {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.cw_site_manager_hero__signupLink {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.cw_site_manager_hero__signupLink:hover,
.cw_site_manager_hero__signupLink:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* Feature pill strip — glassmorphic bar anchored to the bottom of the hero.
   Figma: CW-Site-Manager — node 6174:33486 */
.cw_site_manager_hero__features {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  /* transform: translateX(-50%); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 28px 0;
  /* max-width: calc(100% - 48px); */
  border: 1.4px solid rgba(255, 255, 255, 0.4);
  /* border-radius: 100px; */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 46.52%, rgba(0, 0, 0, 0) 148.81%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 12;
  white-space: nowrap;
}

.cw_site_manager_hero__feature {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #ffffff;
}

.cw_site_manager_hero__featureIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  color: #ffffff;
}

.cw_site_manager_hero__featureIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cw_site_manager_hero__featureLabel {
  margin: 0;
  color: #ffffff;
}

.cw_site_manager_hero__featureDivider {
  display: inline-block;
  width: 1px;
  height: 24px;
  flex: 0 0 auto;
  background-color: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------------
   Section (white surface, centered 1296px content, vertical rhythm)
   ------------------------------------------------------------------------- */
.hidden_cost_section {
  background-color: var(--ds-white, #ffffff);
  padding: 80px 0;
}

.hidden_cost_section__container {
  max-width: 1326px;
}

.hidden_cost_section__inner {
  max-width: 1296px;
  margin: 0 auto;
}

.hidden_cost_section__title {
  margin: 0 auto 36px;
  max-width: 737px;
  text-align: center;
  color: var(--heading-color);
}

/* Equal-height cards per row (Figma cards share min-height ~355px) */
.hidden_cost_section__cards {
  display: flex;
  flex-wrap: wrap;
}

.hidden_cost_section__cards::before,
.hidden_cost_section__cards::after {
  display: none;
}

.hidden_cost_section__cards > [class*="col-"] {
  float: none;
  display: flex;
}

.hidden_cost_section__cardCol {
  margin-bottom: 24px;
}
.cw_site_manager_hero svg{
    overflow: visible;
    height: 18px;
    width: 18px;
    margin-left: 6px;
}
.cw_site_manager_hero .illus1{
    z-index: 2;
    position: absolute;
}
.cw_site_manager_hero .illus2 {
    z-index: 1;
    position: absolute;
}
.cw_site_manager_hero .illus3{
    z-index: 0;
    position: absolute;
}
.cw_site_manager_hero .illus4{
    position: absolute;
    left: 0;
    bottom: 0;
    filter: blur(31px);
}
.cw_site_manager_hero .illus1 , .cw_site_manager_hero .illus2 , .cw_site_manager_hero .illus3{
    right: 0;
    bottom: 0;
    height: 60%;
    filter: blur(100px);
}


/* -------------------------------------------------------------------------
   Card (304px max, 12px radius, lavender border, texture at 24% opacity)
   ------------------------------------------------------------------------- */
.hidden_cost_card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 304px;
  margin-left: auto;
  margin-right: auto;
  min-height: 355px;
  border-radius: 12px;
  border: 1px solid  #d5d7f2;
  overflow: hidden;
}

.hidden_cost_card__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
}

.hidden_cost_card__layer-solid {
  position: absolute;
  inset: 0;
  background: var(--ds-white, #ffffff);
  border-radius: 12px;
}

.hidden_cost_card__layer-texture {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  border-radius: 12px;
  overflow: hidden;
}

.hidden_cost_card__texture-img {
  position: absolute;
  width: 528.94%;
  height: 222.84%;
  max-width: none;
  left: -211.5%;
  top: -52.93%;
  object-fit: cover;
}

.hidden_cost_card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  gap: 24px;
  padding: 36px 26px;
  min-height: 355px;
  background: linear-gradient(215deg, #FCFBFF 0%, #F9F6FF 49.55%);
}

.hidden_cost_card__iconSlot {
  position: relative;
  width: 93px;
  height: 93px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden_cost_card__iconDisc {
  position: absolute;
  inset: 0;
  border-radius: 200px;
  background: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-blue-10, #eaebf9);
  box-shadow: 0 12.794px 11.942px rgba(0, 0, 0, 0.05);
}

.hidden_cost_card__iconImg,
.hidden_cost_card__iconSvg {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: block;
  flex-shrink: 0;
}

.hidden_cost_card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}

.hidden_cost_card__copy h4 {
  margin: 0;
  width: 100%;
}

.hidden_cost_card__copy .p2-regular {
  margin: 0;
  width: 100%;
}



/* =========================================================================
   CW Dash Run — "One Dashboard to Run Every WordPress Site You Own"
   Figma: CW-Site-Manager — node 6174:32575
   Layout: Bootstrap 3 (.container, .row, .col-lg-4 / .col-md-6 / .col-sm-6 / .col-xs-12)
   ========================================================================= */
.cw_dash_run {
  background-color:#FCFCFC;
  padding: 80px 0;
}

.cw_dash_run__container {
  max-width: 1328px;
}

.cw_dash_run__inner {
  max-width: 1298px;
  margin: 0 auto;
}

.cw_dash_run__title {
  margin: 0 auto 64px;
  max-width: 746px;
  text-align: center;
  color: var(--ds-heading, #091e42);
}

/* Equal-height cards per row */
.cw_dash_run__cards {
  display: flex;
  flex-wrap: wrap;
}

.cw_dash_run__cards::before,
.cw_dash_run__cards::after {
  display: none;
}

.cw_dash_run__cards > [class*="col-"] {
  float: none;
  display: flex;
}

.cw_dash_run__cardCol {
  margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
   Feature card (416px wide, 275px min-height, 12px radius, gray-10 border)
   ------------------------------------------------------------------------- */
.cw_dash_run_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 16px;
  width: 100%;
  padding: 24px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  border-radius: 12px;
  min-height: 275px;
}

.cw_dash_run_card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cw_dash_run_card__iconSvg {
  width: 48px;
  height: 48px;
  display: block;
}

.cw_dash_run_card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.cw_dash_run_card__heading {
  margin: 0;
  font-family: var(--ds-font-poppins, "poppins", sans-serif);
  font-size: 20px;
  font-weight: var(--ds-font-weight-semibold, 600);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ds-gray-100, #091e42);
}

.cw_dash_run_card__list {
  list-style: disc;
  padding: 0;
  margin: 0 0 0 24px;
  width: 100%;
}

.cw_dash_run_card__list li {
  margin: 0;
  padding: 0;
  color: var(--ds-gray-80, #253858);
}

.cw_dash_run_card__list li.p2-regular {
  margin-bottom: 0;
}

/* =========================================================================
   Integrations — "Simple, Seamless Integration In Three Easy Steps"
   Figma: CW-Site-Manager — node 6174:33335
   Layout: Bootstrap 3 (.container, .row, .col-lg-3 / .col-md-6 / .col-sm-6 / .col-xs-12)
   ========================================================================= */
.integrations_section {
  background-color: var(--ds-white, #ffffff);
  padding: 80px 0;
}

.integrations_section__container {
  max-width: 1328px;
}

.integrations_section__inner {
  max-width: 1298px;
  margin: 0 auto;
}

.integrations_section__title {
  margin: 0 auto 64px;
  max-width: 681px;
  text-align: center;
  color: var(--ds-heading, #091e42);
}

.integrations_section__steps {
  display: flex;
  flex-wrap: wrap;
}

.integrations_section__steps::before,
.integrations_section__steps::after {
  display: none;
}

.integrations_section__steps > [class*="col-"] {
  float: none;
  display: flex;
}

.integrations_section__stepCol {
  margin-bottom: 48px;
}

/* -------------------------------------------------------------------------
   Individual step
   ------------------------------------------------------------------------- */
.integration_step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  gap: 32px;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.integration_step__badge {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.integration_step__circle {
  width: 80px;
  height: 80px;
  display: block;
}

.integration_step__number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-font-poppins, "poppins", sans-serif);
  font-size: 32px;
  font-weight: var(--ds-font-weight-semibold, 600);
  line-height: 1.2;
  letter-spacing: -0.03em;
  background: linear-gradient(124.68deg, #705AFE 9.82%, #CA7CFB 107.85%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.integration_step__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.integration_step__title {
  margin: 0;
  font-family: var(--ds-font-poppins, "poppins", sans-serif);
  font-size: 24px;
  font-weight: var(--ds-font-weight-semibold, 600);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ds-gray-100, #091e42);
  width: 100%;
}

.integration_step__desc {
  margin: 0;
  color: var(--ds-gray-80, #253858);
  width: 100%;
}

/* -------------------------------------------------------------------------
   Decorative dashed connector between steps (desktop only)
   Starts just past the right edge of the current circle (50% + 40px) and
   stretches to the left edge of the next circle. The step is 280px wide and
   sits centered inside an ~317px col, so 235px spans the gap cleanly.
   ------------------------------------------------------------------------- */
.integration_step__connector {
  display: none;
  position: absolute;
  top: 22px;
  left: calc(50% + 46px);
  width: 235px;
  height: 36px;
  pointer-events: none;
}

.integration_step__connector svg {
  width: 100%;
  height: 100%;
  display: block;
}

.integration_step__connector--down svg {
  transform: scaleY(-1);
}
.integration_step__connector--up{
    top: 2px;
}
.integration_step__connector--down{
    top: 43px;
}


/* =========================================================================
   Pricing Section — "Simple Pricing. Clear Capabilities."
   Figma: CW-Site-Manager — node 6174:56421
   Layout: 3-column comparison table (Features / Basic / Pro), then two
   pricing tiers and a CTA button.
   ========================================================================= */
.pricing_section {
  background-color: var(--ds-white, #ffffff);
  padding: 80px 0;
}

.pricing_section__container {
  max-width: 1328px;
}

.pricing_section__inner {
  max-width: 856px;
  margin: 0 auto;
}

.pricing_section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  text-align: center;
}

.pricing_section__title {
  max-width: 690px;
}

.pricing_section__subtitle {
  margin: 0;
  max-width: 610px;
}

.pricing_section__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* -------------------------------------------------------------------------
   Comparison table
   ------------------------------------------------------------------------- */
.pricing_table__scroll {
  width: 100%;
}

.pricing_table__wrap {
  position: relative;
  width: 100%;
}

/* Pro column gradient underlay — one continuous gradient across the full
   column height so the lavender tint at the top fades smoothly to white
   without restarting per-row (cf. Figma node 6174:56427). */
.pricing_table__wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28.68%;
  pointer-events: none;
  border-radius: 4px;
  background-image: linear-gradient(180deg, #f4ebffb5 0%, #ffffff 55%);
  z-index: 0;
}

/* Pro column outer shadow — rendered as a single element so it's only
   visible on the outer boundary of the column, never on internal borders. */
.pricing_table__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28.68%;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: -10px 4px 14px 0 rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.pricing_table {
  position: relative;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  z-index: 1;
}

.pricing_table__featuresHead,
.pricing_table__planHead {
  height: 70px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  vertical-align: middle;
  text-align: center;
  padding: 16px;
  color: #253858;
}

.pricing_table__featuresHead {
  text-align: left;
  padding-left: 16px;
  border-color: transparent;
  background-color: transparent;
  width: 42.64%;
}

.pricing_table__planHead {
  width: 28.68%;
  border-top-left-radius: 4px;
  border-top-right-radius: 0;
}

/* Pro header: its own purple-bordered box with pink-to-white gradient.
   Its 1px bottom border acts as the only divider between header and body.
   Shadow is drawn by .pricing_table__wrap::after, not here. */
.pricing_table__planHead--pro {
  position: relative;
  border: 1px solid #705afe;
  background-image: linear-gradient(-2.78deg, #ffffff 7.22%, #e5caffe8 89.09%);
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
}

.pricing_table__feature {
  height: 64px;
  margin: 0;
  padding: 0 16px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  border-top: 0;
  text-align: left;
  vertical-align: middle;
  color: #253858;

}
.pricing_table tbody tr:first-child .pricing_table__feature{
    border-top: 1px solid #dfe1e6;
}
/* Basic column cells: gray row dividers (bottom only; top comes from header /
   previous row's bottom). */
.pricing_table__cell {
  height: 64px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  border-top: 0;
  text-align: center;
  vertical-align: middle;
  border-left: 0;
}

/* Pro column body cells: transparent so the single continuous gradient on
   .pricing_table__wrap::before shows through; purple left/right borders
   form the column's vertical edges; gray bottom border matches Basic's
   row dividers. Shadow lives on the wrap, not on these cells. */
.pricing_table__cell--pro {
  border: 0;
  border-left: 1px solid #705afe;
  border-right: 1px solid #705afe;
  border-bottom: 1px solid var(--ds-gray-10, #dfe1e6);
  background-color: transparent;
  background-image: none;
}

/* Last pro cell closes the column box with its bottom purple border + radius. */
.pricing_table tbody tr:last-child .pricing_table__cell--pro {
  border-bottom: 1px solid #705afe;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 4px;
}

.pricing_table__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.pricing_table__tick svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------------------
   Pro plan pricing tiers
   ------------------------------------------------------------------------- */
.pricing_plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.pricing_plan .p1-semibold{
    color: #253858;
}
.pricing_plan__label {
  margin: 0;
}

.pricing_plan__tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing_plan__tier .p2-semibold{
    margin-bottom: 0;
    color: #333;
}
.pricing_plan__tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 8px 24px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  border-radius: 4px;
}

.pricing_plan__tierPrice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pricing_plan__price {
  color: var(--ds-primary, #2f39bf);
}

/* -------------------------------------------------------------------------
   CTA Button
   ------------------------------------------------------------------------- */
.pricing_section__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.pricing_section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 225px;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  background-color: var(--ds-primary, #2f39bf);
  color: var(--ds-white, #ffffff);
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pricing_section__btn:hover,
.pricing_section__btn:focus {
  background-color: #232a9a;
  color: var(--ds-white, #ffffff);
  text-decoration: none;
}



/* -------------------------------------------------------------------------
   Trusted Agencies — owl-carousel slider of agency testimonial / logo cards.
   Figma: CW-Site-Manager — node 6174-34214
   ------------------------------------------------------------------------- */
.trusted_agencies {
  background-color: var(--ds-white, #ffffff);
  padding: 80px 0;
}

.trusted_agencies__container {
  max-width: 1326px;
}

.trusted_agencies__inner {
  max-width: 1296px;
  margin: 0 auto;
}

.trusted_agencies__head {
  max-width: 737px;
  margin: 0 auto 48px;
  text-align: center;
}

.trusted_agencies__title {
  margin: 0 0 12px;
}

.trusted_agencies__subtitle {
  margin: 0;
}

/* sliderWrap stays full-width and acts only as a positioning anchor for the
   prev/next arrows. .owl-carousel itself fills 100% of the parent so the
   cards can use the full available width. */
.trusted_agencies__sliderWrap {
  position: relative;
}

.trusted_agencies__slider.owl-theme .owl-nav {
  margin: 0;
}

/* Bare purple chevron arrows (no button background / border / shadow) — the SVG
   itself is the arrow, per Figma. */
.trusted_agencies__slider.owl-theme .owl-nav [class*="owl-"] {
  position: absolute;
  top: 40%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 41px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
  z-index: 5;
}

/* Arrows sit at the very edges of the owl-carousel stage — inside the first/
   last card's 24px internal padding area, so they never cover the quote text
   or the author row. This keeps the cards at 100% width and still shows the
   arrows on every viewport without needing any outer gutter. */
.trusted_agencies__slider.owl-theme .owl-nav .owl-prev {
  left: 20px;
}

.trusted_agencies__slider.owl-theme .owl-nav .owl-next {
  right: 20px;
}

.trusted_agencies__slider.owl-theme .owl-nav [class*="owl-"]:hover,
.trusted_agencies__slider.owl-theme .owl-nav [class*="owl-"]:focus {
  background: transparent;
  opacity: 0.75;
}

.trusted_agencies__slider.owl-theme .owl-nav .disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.trusted_agencies__navIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.trusted_agencies__navIcon svg {
  display: block;
}

/* Keep owl from forcing equal heights — Figma cards size to their own content. */
.trusted_agencies__slider.owl-carousel .owl-stage-outer,
.trusted_agencies__slider.owl-carousel .owl-stage {
  align-items: flex-start;
}

.trusted_agencies__slider.owl-carousel .owl-item {
  align-items: flex-start;
}

/* Card — white surface with hairline border; each card sizes to its own
   content (variable heights per Figma), quote → 36px gap → author row. */
.trusted_agencies__card {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
  width: 100%;
  padding: 24px;
  background-color: var(--ds-white, #ffffff);
  border: 1px solid var(--ds-gray-10, #dfe1e6);
  border-radius: 12px;
  max-width: 416px;
}
/* Typography comes from the generic .p2-regular class on the element itself.
   Layout only: fill remaining height and reset margin (p1/p2 classes ship
   margin-bottom: 1em which we don't want here). */
.trusted_agencies__cardQuote {
  flex: 1 1 auto;
  margin: 0;
}

/* Author row — 48px avatar + 12px gap + (name / role stacked). */
.trusted_agencies__cardAuthor {
  display: flex;
  align-items: center;
  gap: 12px;
  /* width: 48px;
height: 48px; */
width: 100%;
}
.trusted_agencies__cardAuthor .trusted_agencies__cardAvatar{
    width: 48px !important;
    height: 48px;
}
/* Grey circle fallback so the layout still reads correctly if the avatar image
   path is missing; real avatars cover this with object-fit:cover. */
.trusted_agencies__cardAvatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background-color: var(--ds-gray-10, #dfe1e6);
}

.trusted_agencies__cardAuthorInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Typography for name/role comes from the generic .p1-semibold / .p2-regular
   classes on the elements themselves. We only reset the margin-bottom those
   classes add, so name and role sit tight in the flex column. */
.trusted_agencies__cardAuthorName,
.trusted_agencies__cardAuthorRole {
  margin: 0;
}

/* Owl carousel theming — keep dots on-brand with the page primary color. */
.trusted_agencies__slider.owl-theme .owl-dots {
  margin-top: 32px;
  text-align: center;
}

.trusted_agencies__slider.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: var(--ds-gray-10, #dfe1e6);
  border-radius: 50%;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.trusted_agencies__slider.owl-theme .owl-dots .owl-dot.active span,
.trusted_agencies__slider.owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--ds-primary, #2f39bf);
}

.trusted_agencies__slider.owl-theme .owl-dots .owl-dot.active span {
  width: 24px;
  border-radius: 4px;
}
/* =========================================================================
   Seamless Upgrade — "From SafeUpdates to Site Manager"
   Figma: CW-Site-Manager — node 6174:34286
   Dark surface with a two-column split: copy on the left, comparison cards
   on the right. A dashed arrow connects the old SafeUpdates card to the new
   Site Manager Pro card, signalling the upgrade path.
   ========================================================================= */
   .seamless_upgrade {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 80px 0;
    background-color: #0f0639;
    color: #ffffff;
  }
  
  /* Texture background (user-supplied safe.webp) sits above the solid fill but
     below the blurred color glows so it reads as a subtle dot pattern. */
  .seamless_upgrade__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('https://www.cloudways.com/wp-content/uploads/2026/04/CTA_Bg-1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
  }
  .hero_bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('https://www.cloudways.com/wp-content/uploads/2026/04/Hero_Bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  }
  /* Soft blurred color blobs recreate the purple / magenta lighting from Figma. */
  .seamless_upgrade__glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.55;
    pointer-events: none;
  }
  
  .seamless_upgrade__glow--purple {
    width: 620px;
    height: 360px;
    left: -160px;
    bottom: -120px;
    background: #730cff;
    opacity: 0.45;
  }
  
  .seamless_upgrade__glow--pink {
    width: 520px;
    height: 340px;
    right: -120px;
    top: -120px;
    background: #b764d8;
    opacity: 0.4;
  }
  
  .seamless_upgrade__glow--violet {
    width: 460px;
    height: 300px;
    right: 20%;
    bottom: -140px;
    background: #bda7ff;
    opacity: 0.22;
    filter: blur(140px);
  }
  
  .seamless_upgrade__container {
    max-width: 1326px;
    position: relative;
    z-index: 2;
  }
  
  .seamless_upgrade__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    flex-wrap: wrap;
  }
  
  /* -------------------------------------------------------------------------
     Left column — copy
     ------------------------------------------------------------------------- */
  .seamless_upgrade__content {
    flex: 1 1 420px;
    max-width: 517px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  /* Eyebrow uses .p1-semibold for size / weight / family; we only re-paint
     it with the multi-stop gradient from the Figma spec. */
  .seamless_upgrade__eyebrow {
    display: inline-block;
    margin: 0;
    background:linear-gradient(82deg, #FFF -37.59%, #C583E0 -37.58%, #FFBC7D 74.04%, #FFF 115.51%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
  
  /* h2 from text.css already sets size / weight / family. Override the heading
     color only, for the dark surface. */
  .seamless_upgrade__title {
    color:  #ffffff;
  }
  
  /* .p2-regular supplies typography; re-color + reset its default bottom margin
     so the CTA sits tight underneath. */
  .seamless_upgrade__desc {
    margin: 0;
    color:  #fcfcfc;
  }
  
  /* .p1-medium supplies typography. We only add layout + the white link color. */
  .seamless_upgrade__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color:  #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .seamless_upgrade__cta span{
    color: #fff;
  }
  .seamless_upgrade__cta svg {
    transition: transform 0.25s ease;
    will-change: transform;
  }
  
  .seamless_upgrade__cta:hover,
  .seamless_upgrade__cta:focus {
    color: #ffffff;
    text-decoration: none;
  }
  
  .seamless_upgrade__cta:hover svg,
  .seamless_upgrade__cta:focus-visible svg {
    transform: translateX(6px);
  }
  
  /* -------------------------------------------------------------------------
     Right column — comparison visual
     ------------------------------------------------------------------------- */
  .seamless_upgrade__media {
    flex: 1 1 560px;
    max-width: 755px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .seamless_upgrade__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 755px;
  }
  
  /* Responsive overrides for this section are merged into the shared
     breakpoints above (max-width: 1200 / 991 / 767). */
  
  /* =========================================================================
     Built for Teams — "Built for Teams That Work and Dream in WordPress"
     Figma: CW-Site-Manager — node 6174:32626
     Layout: 3-column grid (Agencies / Developers / Ecommerce). Card shell is
     shared; only the gradient fill changes per variant. Reuses the same
     gradient recipes as .affilaite_orange / _light_green / _light_blue on the
     affiliate page, but scoped to this page (that CSS is namespaced under
     .affilite_pagee_2023 and cannot leak here).
     Typography: h3 + .p1-medium + .p2-regular from a-generic/text.css.
     ========================================================================= */
  .teams_section {
    background-color: var(--ds-gray-1, #fcfcfc);
    padding: 80px 0;
  }
  
  .teams_section__container {
    max-width: 1328px;
  }
  
  .teams_section__inner {
    max-width: 1298px;
    margin: 0 auto;
  }
  
  .teams_section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto 64px;
    text-align: center;
  }
  
  /* h2 from text.css supplies type — override color only if needed. */
  .teams_section__title {
    margin: 0;
    color: var(--ds-heading, #091e42);
  }
  
  /* .p2-regular supplies type. Reset bottom margin + scope width. */
  .teams_section__subtitle {
    margin: 0;
    max-width: 724px;
    color: var(--ds-gray-80, #253858);
  }
  
  /* Equal-height cards, Bootstrap 3 row overrides (same pattern as
     .hidden_cost_section__cards / .cw_dash_run__cards). */
  .teams_section__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .teams_section__cards:last-child .teams_card__desc{
    width: 362px;
  }
  
  .teams_section__cards::before,
  .teams_section__cards::after {
    display: none;
  }
  
  .teams_section__cards > [class*="col-"] {
    float: none;
    display: flex;
  }
  
  .teams_section__cardCol {
    margin-bottom: 24px;
  }
  
  /* -------------------------------------------------------------------------
     Card — 416px wide, 510px tall, rounded corners, text at top, illustration
     anchored to the bottom. Gradient is applied per variant class below.
     ------------------------------------------------------------------------- */
  .teams_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    max-width: 416px;
    min-height: 510px;
    margin-left: auto;
    margin-right: auto;
    padding: 36px 24px 0;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .teams_card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 344px;
    text-align: center;
  }
  
  /* h3 from text.css = 32px / 600 / -0.02em. Only scope color here. */
  .teams_card__title {
    margin: 0;
    color: var(--ds-heading, #091e42);
  }
  .teams_section__cardCol:first-child .teams_card__media .teams_card__img{
    position: relative;
    top: 20px;
  }
  /* .p1-medium (20px / 500). Reset its default bottom margin so it sits
     tight under the title with an 8px gap. */
  .teams_card__subtitle {
    margin: 8px 0 0;
    color: var(--ds-gray-80, #253858);
  }
  
  /* .p2-regular (16px / 400). 16px air above to match the Figma empty-line
     spacer between subtitle and description. */
  .teams_card__desc {
    margin: 16px 0 0;
    color: var(--ds-gray-80, #253858);
  }
  
  /* Illustration slot — grows to fill remaining card height and pins the
     image to the bottom edge. */
  .teams_card__media {
    margin-top: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .teams_card__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;
  }
 
  /* -------------------------------------------------------------------------
     Gradient variants — identical recipes to the affiliate page cards, but
     scoped here so they don't need the affilite_pagee_2023 wrapper.
     ------------------------------------------------------------------------- */
  .teams_card--agencies {
    background:linear-gradient(    82deg,    rgba(255, 255, 255, 0.4) -37.59%,    rgba(197, 131, 224, 0.4) -37.58%,    rgba(255, 188, 125, 0.4) 74.04%,    rgba(255, 255, 255, 0.4) 115.51%  )
  }
  
  .teams_card--developers {
    background: linear-gradient(
      124deg,
      rgba(90, 205, 254, 0.3) 10%,
      rgba(124, 251, 236, 0.3) 108%
    );
  }
  
  .teams_card--ecommerce {
    background: linear-gradient(
      124deg,
      rgba(173, 230, 255, 0.4) 10%,
      rgba(84, 100, 245, 0.4) 108%
    );
  }

/* =========================================================================
   Why Site Manager — "Why Site Manager?"
   Figma: CW-Site-Manager — node 6174:32886
   Layout: centered head + 2-up wide card row + 3-up narrower card row.
   Card shell is shared across both rows; only the illustration differs.
   Typography: h2 / h4 / .p2-regular from a-generic/text.css.
   ========================================================================= */
.why_sm {
  background-color: #FCFCFC;
  padding: 80px 0;
}

.why_sm__container {
  max-width: 1328px;
}

.why_sm__inner {
  max-width: 1296px;
  margin: 0 auto;
}

.why_sm__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 782px;
  margin: 0 auto 64px;
  text-align: center;
}

/* h2 supplies type — override only color to keep the heading on-brand. */
.why_sm__title {
  margin: 0;
  color: var(--ds-heading, #091e42);
}

/* .p2-regular supplies type — reset its default bottom margin, scope width. */
.why_sm__subtitle {
  margin: 0;
  max-width: 572px;
  color: var(--ds-gray-80, #253858);
}

/* Equal-height Bootstrap 3 row overrides (same pattern as the hidden-cost,
   dash-run and teams grids). */
.why_sm__row {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 24px;
}

.why_sm__row::before,
.why_sm__row::after {
  display: none;
}

.why_sm__row > [class*="col-"] {
  float: none;
  display: flex;
}

.why_sm__row--two {
  margin-bottom: 24px;
}

.why_sm__col {
  margin-bottom: 24px;
  padding: 0;
}
.why_sm__col .gradient_bottom{
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.00) 0%, #F6F3FF 40%);
  position: absolute;
  /* left: 0.5px; */
  /* bottom: -79.404px; */
  bottom: -60px;
  z-index: 99999;
  /* background: #333; */
  max-width: 603px;
  height: 176px;
  width: 100%;
}
/* -------------------------------------------------------------------------
   Card — lavender surface, 12px radius, primary-blue/25 border, copy at the
   top and the illustration pinned at the bottom via margin-top: auto.
   Top row (.--two) cards are 588px wide × 377px min-height.
   Bottom row (.--three) cards are 384px wide × 370px min-height.
   ------------------------------------------------------------------------- */
.why_sm_card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  padding: 26px;
  background: linear-gradient(215deg, #FCFBFF 0%, #F9F6FF 49.55%);
  border: 1px solid  #d5d7f2;
  border-radius: 12px;
  overflow: hidden;
}

.why_sm__row--two .why_sm_card {
  max-height: 377px;
  max-width: 603px;
  /* margin-left: auto;
  margin-right: auto; */
  /* Drop right padding so the dashboard mock can bleed to the card edge.
     Copy still gets its 32px right padding restored below. */
  /* padding-right: 0; */
  padding-bottom: 0;
}

.why_sm__row--two .why_sm_card.over_take::after{
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.00) 0%, #F6F3FF 40%);
  position: absolute;
  /* left: 0.5px; */
  /* bottom: -79.404px; */
  bottom: -60px;
  z-index: 99999;
  /* background: #333; */
  max-width: 603px;
  height: 176px;
  width: 100%;
  content: '';
  display: block;
  left: 0;
  right: 0;
}

.why_sm__row--two .why_sm_card__copy {
  padding-right: 32px;
}

.why_sm__row--three .why_sm_card {
  max-width: 384px;
  /* margin-left: auto;
  margin-right: auto; */
  padding-bottom: 0;
  max-height: 370px;
}

.why_sm_card__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* h4 supplies type (24px / 600 / -0.03em). Color already matches. */
.why_sm_card__title {
  margin: 0;
}

/* .p2-regular supplies type. Reset its default bottom margin. */
.why_sm_card__desc {
  margin: 0;
  color: var(--ds-gray-80, #253858);
}

/* Illustration slot — grows to fill remaining card height so the image
   always sits flush with the bottom edge of the card. */
.why_sm_card__media {
  margin-top: auto;
  padding-top: 24px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.why_sm_card__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Top-row mocks are displayed at native width, left-aligned, and allowed to
   bleed past the card's right edge (clipped by .why_sm_card { overflow: hidden }).
   min-width: 100% guarantees the image always at least fills the card width. */
.why_sm__row--two .why_sm_card__media {
  justify-content: center;
}

.why_sm__row--two .why_sm_card__img {
  width: 100%;
  max-width: 524.308px;
}
.why_sm__row--two .why_sm_card__img.image2{
  transform: translatey(-50px);
}
.why_sm__row .why_sm__col:first-child .why_sm_card__media {
  padding-top: 0;
}
.why_sm__row--three .why_sm__col{
  max-width: 400px !important;
}

/* =========================================================================
   CTA banner (bottom of page)
   Figma: CW-Site-Manager — node 6174:34042
   Dark surface with a purple gradient splash, heading + subtitle on the
   left, two CTAs on the right. Typography comes from a-generic/text.css.
   ========================================================================= */
.sm_cta {
  position: relative;
  overflow: hidden;
  padding: 86px 0 93px;
  background-color: #0e0538;
  background-image: url("https://www.cloudways.com/wp-content/uploads/2026/04/cta.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sm_cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 48px; */
}

.sm_cta__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}

/* h3 supplies 32px / 600 / -0.03em. Just color-override for dark surface. */
.sm_cta__title {
  margin: 0;
  color: #ffffff;
}

/* .p2-regular supplies 16px / 400. */
.sm_cta__subtitle {
  margin: 0;
  color: #fcfcfc;
}

.sm_cta__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

/* Shared button shell — 54px tall, 4px radius. Type from .p2-medium. */
.sm_cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.sm_cta__btn--primary {
  background-color: #ffffff;
  color: #253858;
  border-color: #ffffff;
  margin-bottom: 0;
}

.sm_cta__btn--primary:hover,
.sm_cta__btn--primary:focus {
  background-color: #dfe1e6;
  color: #253858;
  text-decoration: none;
}
#glb-nfaq-wrap.globle_faq{
  background: #fff;
}

/* Site Manager FAQ — show first 5, then “Load more” (Figma 6464-34248) */
#glb-nfaq-wrap.cw_sm_faq .cw_sm_faq__item--hidden {
  display: none !important;
}

#glb-nfaq-wrap.cw_sm_faq .cw_sm_faq__loadMoreWrap {
  /* display: flex; */
  justify-content: center;
  margin-top: 8px;
}
.wt-faq{
  margin-bottom: 10px;
}
#glb-nfaq-wrap.cw_sm_faq .cw_sm_faq__loadMore {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  color: #2F39BF;
  background-color: #EAEBF9;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sm_cta__btn--secondary {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.leading_Agency{
  position: relative;
  padding: 80px 0;
  background: #FCFCFC;
}
.sm_cta__btn--secondary:hover,
.sm_cta__btn--secondary:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
}
.owl_-carousel-blur-left {
height: 100%;
width: 80px;
position: absolute;
top: 0;
left: -29px;
background-color: #FCFCFC;
opacity: 0.9;
z-index: 5;
filter: blur(5px);
pointer-events: none;
}

.owl_-carousel-blur-right {
height: 100%;
width: 80px;
position: absolute;
right: -29px;
top: 0;
background-color: #FCFCFC;
opacity: 0.9;
z-index: 5;
filter: blur(5px);
pointer-events: none;
}
/* =========================================================================
   Responsive — all breakpoints consolidated here.
   Typography scaling is handled by a-generic/text.css (max-width: 992px).
   Order: desktop-first, largest viewport first.
     1. min-width: 1200px                          — XL desktop enhancements
     2. min-width: 768px and max-width: 1199px     — tablet range only
     3. max-width: 1200px                          — below XL
     4. max-width: 991px                           — below LG (tablet)
     5. max-width: 767px                           — mobile
     6. max-width: 480px                           — small mobile
   ========================================================================= */

/* 1. XL desktop (>= 1200px) — zero out bottom-margin on the last row of
      each grid, and reveal the decorative step connector. */
@media (min-width: 1200px) {
  .hidden_cost_section__cardCol {
    margin-bottom: 0;
  }

  .cw_dash_run__cardCol:nth-last-child(-n+3) {
    margin-bottom: 0;
  }

  .integrations_section__stepCol {
    margin-bottom: 0;
  }

  .teams_section__cardCol {
    margin-bottom: 0;
  }

  /* Why-SM: last card of each row loses its bottom margin on desktop. */
  .why_sm__row--two .why_sm__col,
  .why_sm__row--three .why_sm__col {
    margin-bottom: 0;
    overflow: hidden;
    max-width: 603px;
  }

  .why_sm__row--two {
    margin-bottom: 24px;
    gap: 24px;
  }

  .integration_step__connector {
    display: block;
  }
}

/* 2. Tablet range (768px–1199px) — zero out last-row bottom-margin for grids
      that wrap differently than on desktop. */
@media (min-width: 768px) and (max-width: 1199px) {
  .hidden_cost_section__cardCol:nth-child(3),
  .hidden_cost_section__cardCol:nth-child(4) {
    margin-bottom: 0;
  }

  .cw_dash_run__cardCol:nth-last-child(-n+2) {
    margin-bottom: 0;
  }

  .integrations_section__stepCol:nth-last-child(-n+2) {
    margin-bottom: 0;
  }

  .teams_section__cardCol:last-child {
    margin-bottom: 0;
  }

  /* Why-SM: on tablets the 3-card row wraps as 2 + 1; zero out the last col. */
  .why_sm__row--three .why_sm__col:last-child {
    margin-bottom: 0;
  }
}

/* 3. Below XL (<= 1200px) — center hero content, collapse dash-run min-height,
      tighten seamless upgrade gap, resize hero illustrations. */
@media (max-width: 1200px) {
  .cw_dash_run_card {
    min-height: 0;
  }

  .cw_site_manager_hero__content {
    text-align: center;
    margin: auto;
  }

  .cw_site_manager_hero__actions {
    justify-content: center;
  }

  .cw_site_manager_hero__wrap {
    justify-content: center;
  }

  .cw_site_manager_hero .illus1,
  .cw_site_manager_hero .illus2,
  .cw_site_manager_hero .illus3 {
    bottom: -190px;
    height: 100%;
  }

  .cw_site_manager_hero .illus4 {
    height: 100%;
  }

  .seamless_upgrade__wrap {
    gap: 48px;
  }

  .sm_cta__inner {
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    text-align: center;
  }

  .sm_cta__copy {
    align-items: center;
  }

  .sm_cta__actions {
    justify-content: center;
  }
}

/* 4. Below LG (<= 991px) — section paddings, card min-height resets,
      stack seamless upgrade into a single column. */
@media (max-width: 991px) {
  .hidden_cost_section,
  .cw_dash_run,
  .integrations_section,
  .pricing_section,
  .teams_section,
  .why_sm {
    padding: 48px 0 64px;
  }

  .why_sm__head {
    margin-bottom: 40px;
  }

  .why_sm_card,
  .why_sm__row--two .why_sm_card,
  .why_sm__row--three .why_sm_card {
    min-height: 0;
  }

  .hidden_cost_section__title {
    margin-bottom: 32px;
  }

  .cw_dash_run__title,
  .integrations_section__title {
    margin-bottom: 40px;
  }

  .pricing_section__header {
    margin-bottom: 40px;
  }

  .teams_section__head {
    margin-bottom: 40px;
  }

  .hidden_cost_card,
  .hidden_cost_card__content {
    min-height: 0;
  }

  .teams_card {
    min-height: 0;
  }

  .cw_site_manager_hero__features {
    gap: 24px;
    padding: 20px 24px;
  }

  .cw_site_manager_hero__feature {
    gap: 12px;
  }

  .seamless_upgrade {
    padding: 64px 0;
  }

  .seamless_upgrade__wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 48px;
  }

  .seamless_upgrade__content {
    align-items: center;
    max-width: 640px;
    flex: 1;
  }

  .seamless_upgrade__media {
    width: 100%;
    justify-content: center;
    max-width: 100%;
    flex: 1;
  }
  .why_sm__row{
    flex-direction: column;
    margin: auto;
  }
  .why_sm__row--two .why_sm_card{
    max-width: 100%;
  }
  .why_sm__row--three .why_sm_card{
    max-width: 100%;
    width: 100%;
  }
  .why_sm__row--three .why_sm__col{
    max-width: 100% !important;
    width: 100%;
  }
  .trusted_agencies__card{
    max-width: 100%;
  }

  .sm_cta {
    padding: 64px 0;
  }
}

/* 5. Mobile (<= 767px) — zero out last-child card margins, drop section
      title max-widths, convert the pricing table to horizontal scroll,
      stack hero + trusted agencies + seamless upgrade. */
@media (max-width: 767px) {
  /* Grid: zero out the last card's bottom-margin in every section. */
  .hidden_cost_section__cardCol:last-child,
  .cw_dash_run__cardCol:last-child,
  .integrations_section__stepCol:last-child,
  .teams_section__cardCol:last-child,
  .why_sm__row--three .why_sm__col:last-child {
    margin-bottom: 0;
  }

  /* Why-SM: tighten internal card padding on small screens. */
  .why_sm_card {
    padding: 24px;
  }

  /* Titles: remove the desktop max-width so copy fills available width. */
  .hidden_cost_section__title,
  .cw_dash_run__title,
  .integrations_section__title,
  .pricing_section__title,
  .pricing_section__subtitle,
  .teams_section__title,
  .why_sm__title,
  .why_sm__subtitle {
    max-width: none;
  }

  /* Pricing table: let it scroll horizontally on narrow viewports so the
     three-column layout stays intact. 4px bottom padding reserves space for
     the iOS scrollbar so it doesn't overlap the table's bottom border. */
  .pricing_table__scroll {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .pricing_table__wrap {
    min-width: 720px;
  }

  .pricing_plan__tier {
    flex-wrap: wrap;
    padding: 16px;
  }

  /* Trusted agencies — hide carousel arrows and tighten card padding. */
  .trusted_agencies {
    padding: 48px 0;
  }

  .trusted_agencies__head {
    margin-bottom: 32px;
  }

  .trusted_agencies__sliderWrap {
    padding: 0;
  }

  .trusted_agencies__slider.owl-theme .owl-nav , .trusted_agencies__slider.owl-theme .owl-nav [class*="owl-"]{
    display: flex;
    gap: 10px;
    max-width: 80px;
    margin:  auto;
    align-items: center;
    position: static;
  }
  .trusted_agencies__slider.owl-theme .owl-nav [class*="owl-"]{
    transform: translateY(0%);
  }
  .trusted_agencies__navIcon{
    height: 16px;
    width: 16px;
  }

  .trusted_agencies__card {
    min-height: 0;
    padding: 20px;
    gap: 28px;
  }

  /* Hero — stack copy above the dashboard preview, drop dividers, tighten
     vertical rhythm and CTA spacing. */
  .cw_site_manager_hero__wrap {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .cw_site_manager_hero__content,
  .cw_site_manager_hero__media {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .cw_site_manager_hero__title {
    margin-bottom: 16px;
  }

  .cw_site_manager_hero__subtitle {
    margin-bottom: 28px;
  }

  .cw_site_manager_hero__actions {
    gap: 16px;
    margin: auto;
    margin-bottom: 12px;
  }

  .cw_site_manager_hero__btnPrimary {
    padding: 14px 24px;
  }

  .cw_site_manager_hero__features {
    /* flex-direction: column; */
    gap: 14px;
  }
  .cw_site_manager_hero__feature .p1-regular{
    font-size: 12px;
    text-wrap: auto;
    text-align: center;
  }
  .cw_site_manager_hero__feature{
    flex-direction: column;
  }
  .cw_site_manager_hero__featureDivider{
    height: 54px;
  }

  .cw_site_manager_hero .illus1,
  .cw_site_manager_hero .illus2,
  .cw_site_manager_hero .illus3 {
    bottom: 0;
  }

  .seamless_upgrade {
    padding: 56px 0;
  }

  .sm_cta {
    padding: 56px 0;
  }

  .sm_cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .leading_Agency{
    padding: 40px 0;
  }

  .trusted_agencies__slider.owl-theme .owl-dots{
    display: none;
  }
  .sm_cta__btn {
    width: 100%;
  }

  /* Single-card (and narrow) carousel: keep cards off the screen edge — same
     horizontal inset as Bootstrap .container (15px) so quotes align with the
     section heading above. */
  .trusted_agencies__sliderWrap {
    padding-left: 15px;
    padding-right: 15px;
  }

  .trusted_agencies__slider.owl-theme .owl-nav {
    display: none;
  }
  .owl_-carousel-blur-left,
  .owl_-carousel-blur-right {
    display: none;
  }
}

/* 6. Small mobile (<= 480px) — tighter section paddings, card inner padding,
      hero CTAs stack vertically. */
@media (max-width: 480px) {
  .hidden_cost_section,
  .cw_dash_run,
  .integrations_section,
  .pricing_section,
  .teams_section,
  .why_sm {
    padding: 40px 0 48px;
  }

  .cw_dash_run__title,
  .integrations_section__title {
    margin-bottom: 32px;
  }

  .pricing_section__header {
    margin-bottom: 32px;
  }

  .teams_section__head,
  .why_sm__head {
    margin-bottom: 32px;
  }

  .hidden_cost_card__content {
    padding: 28px 20px;
  }

  .cw_dash_run_card {
    padding: 20px;
  }

  .teams_card {
    padding: 32px 20px 0;
  }

  .why_sm_card {
    padding: 20px;
  }

  .cw_site_manager_hero__actions {
    flex-direction: column;
  }

  .sm_cta {
    padding: 48px 0;
  }
  .cw_site_manager_hero {
    background: url(https://www.cloudways.com/wp-content/uploads/2026/04/Hero_Mobile_Bg.webp) no-repeat center/100% 100%;
  }
  .teams_section__cards:last-child .teams_card__desc{
    width: auto;
  }
  .seamless_upgrade__bg {
    background-image: url('https://www.cloudways.com/wp-content/uploads/2026/04/CTA_Mobile_Bg.webp');
  }
  .pricing_table__planHead{
    width:2.68%;
  }
  .pricing_table__wrap::after{
    width: 24.68%;
  }
  .pricing_table__featuresHead{
    width: 5.64%;
  }
}