body.page-id-536 {
  --sop8-ink: #073a3c;
  --sop8-copy: #35595b;
  --sop8-teal: #09a6a0;
  --sop8-teal-dark: #087f7b;
  --sop8-mint: #e6f7f4;
  --sop8-milk: #fbfcf8;
  --sop8-line: #d9e9e6;
  --sop8-card-shadow: 0 18px 42px rgba(11, 63, 66, 0.08);
  /* fix: site-wide icon audit - one shared token set instead of each card
     section inventing its own icon size/box/color. --sop8-icon-size is the
     default glyph size (24px per spec); --sop8-icon-size-lg (28px) is for
     the bigger service cards. --sop8-icon-box-* derive the surrounding
     colored square from the glyph size so box and glyph always scale
     together instead of drifting out of sync. */
  --sop8-icon-size: 24px;
  /* fix (Lucide icon swap): service-card icons resized to the requested
     40px desktop / 34px mobile (see the max-width:767px override below)
     and recolored to #42c7c4 - a dedicated --sop8-icon-color-services
     token instead of overwriting the shared --sop8-icon-color, since
     audience-card and FAQ icons stay on the original teal. */
  --sop8-icon-size-lg: 40px;
  --sop8-icon-box: 40px;
  --sop8-icon-box-lg: 56px;
  --sop8-icon-gap: 16px;
  --sop8-icon-bg: #e5f8f5;
  --sop8-icon-color: #079f98;
  --sop8-icon-color-services: #42c7c4;
  --sop8-icon-radius: 10px;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body.page-id-536 {
    --sop8-icon-size-lg: 34px;
    --sop8-icon-box-lg: 50px;
  }
}

/* fix: shared, reusable icon component - used by every "icon box" style
   card on the page (service cards, audience cards) instead of each
   section re-declaring its own icon sizing/box/spacing. Change the
   tokens above once, every card using this class updates together. */
.page-id-536 .sop8-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: var(--sop8-icon-box) !important;
  height: var(--sop8-icon-box) !important;
  background: var(--sop8-icon-bg) !important;
  border-radius: var(--sop8-icon-radius) !important;
  color: var(--sop8-icon-color) !important;
  overflow: hidden !important;
}

.page-id-536 .sop8-icon-box.sop8-icon-box--lg {
  width: var(--sop8-icon-box-lg) !important;
  height: var(--sop8-icon-box-lg) !important;
}

.page-id-536 .sop8-icon-box svg,
.page-id-536 .sop8-icon-box i {
  width: var(--sop8-icon-size) !important;
  height: var(--sop8-icon-size) !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
  color: currentColor !important;
}

.page-id-536 .sop8-icon-box--lg svg,
.page-id-536 .sop8-icon-box--lg i {
  width: var(--sop8-icon-size-lg) !important;
  height: var(--sop8-icon-size-lg) !important;
}

/* fix: the symmetric card-header layout the audit asked for - icon in a
   fixed-width left cell, title centered in the middle cell, and an empty
   right cell of the SAME fixed width mirroring the icon cell. Because
   both side columns are equal, centering text in the middle column is
   mathematically identical to centering it across the card's full width
   (the two equal margins cancel out) - no separate "centered across
   everything" hack needed. --sop8-header-side sets that shared column
   width per section (40px default / 44px for the larger service cards). */
.page-id-536 .sop8-card-header-grid {
  --sop8-header-side: var(--sop8-icon-box);
  display: grid !important;
  grid-template-columns: var(--sop8-header-side) 1fr var(--sop8-header-side) !important;
  align-items: center !important;
  column-gap: var(--sop8-icon-gap) !important;
  width: 100% !important;
}

.page-id-536 .sop8-card-header-grid--lg {
  --sop8-header-side: var(--sop8-icon-box-lg);
}

/* fix (icon audit): the FAQ accordion +/- toggle icons rendered in the
   leftover site-wide blue (#173d72, Elementor's default accent on this
   theme) instead of the page's teal icon color - the only icon color on
   the page that didn't match. These are small interactive UI affordances
   rather than content icons, so they keep their own compact size, but
   the color now matches --sop8-icon-color like everything else. */
.page-id-536 .elementor-widget-accordion .elementor-accordion-icon svg,
.page-id-536 .elementor-widget-accordion .elementor-accordion-icon i {
  color: var(--sop8-icon-color) !important;
  fill: var(--sop8-icon-color) !important;
}

body.page-id-536,
body.page-id-536 .site-content {
  background: var(--sop8-milk);
}

.page-id-536 .entry-content,
.page-id-536 .elementor-location-single {
  overflow-x: clip;
}

.page-id-536 .elementor-element a,
.page-id-536 .elementor-button,
.page-id-536 button,
.page-id-536 input,
.page-id-536 textarea {
  border-radius: 14px;
}

/* fix: buttons had no hover/active feedback — every background/border on this
   page is set with !important on the base selector, which also blocks
   Elementor's own default :hover state. filter() darkens whatever color a
   given button already has, so one rule covers every button variant. */
.page-id-536 .elementor-button {
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.page-id-536 .elementor-button:hover {
  filter: brightness(0.92) !important;
}

.page-id-536 .elementor-button:active {
  filter: brightness(0.85) !important;
  transform: translateY(1px) !important;
}

.page-id-536 .elementor-heading-title,
.page-id-536 .elementor-widget-text-editor,
.page-id-536 .elementor-icon-box-title,
.page-id-536 .elementor-icon-box-description {
  color: var(--sop8-ink);
}

.page-id-536 .elementor-widget-text-editor,
.page-id-536 .elementor-icon-box-description {
  color: var(--sop8-copy);
}

.page-id-536 .elementor-element-6552fdcf {
  position: relative;
  background: #e4f7f5 url("./hero-seamless-reference.png") center/cover no-repeat !important;
  overflow: hidden;
  padding: 26px 0 34px !important;
}

.page-id-536 .elementor-element-6552fdcf::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 87% 18%, rgba(139, 224, 215, 0.24), transparent 20%),
    radial-gradient(circle at 76% 76%, transparent 0 118px, rgba(7, 159, 152, 0.12) 119px 120px, transparent 121px),
    linear-gradient(90deg, transparent 0%, transparent 37%, rgba(228, 247, 245, 0.38) 41%, rgba(228, 247, 245, 0.85) 46%, #e4f7f5 50%, #e4f7f5 100%);
  pointer-events: none;
}

.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px !important;
  width: min(1240px, calc(100% - 36px)) !important;
  min-height: 650px;
  display: grid !important;
  grid-template-columns: minmax(420px, 47%) 1fr !important;
  align-items: center;
  gap: 28px;
}

.page-id-536 .elementor-element-45288202 img {
  opacity: 0 !important;
}

.page-id-536 .elementor-element-49419ec8 {
  min-height: 620px;
}

.page-id-536 .elementor-element-4def7f7c {
  padding: 36px 8px 24px 34px !important;
}

.page-id-536 .elementor-element-59273441 .elementor-widget-container,
.page-id-536 .elementor-element-59273441 p {
  margin: 0 0 18px !important;
  color: var(--sop8-teal-dark) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.page-id-536 .elementor-element-1c44352 .elementor-heading-title {
  font-size: clamp(64px, 6vw, 84px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
  font-weight: 800 !important;
}

.page-id-536 .elementor-element-5cf02524 .elementor-widget-container,
.page-id-536 .elementor-element-5cf02524 p {
  max-width: 650px;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #31595a !important;
}

.page-id-536 .elementor-element-456131b8 {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 14px;
  margin-top: 30px;
}

.page-id-536 .elementor-element-b7d95fc .elementor-button,
.page-id-536 .elementor-element-6d4d42f1 .elementor-button,
.page-id-536 .elementor-element-267c2f15 .elementor-button {
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(7, 159, 152, 0.18) !important;
  font-weight: 800 !important;
}

.page-id-536 .elementor-element-b7d95fc .elementor-button {
  background: linear-gradient(135deg, #08a9a1, #0a938e) !important;
}

.page-id-536 .elementor-element-6d4d42f1 .elementor-button {
  background: #fff !important;
  color: var(--sop8-ink) !important;
  border: 1px solid var(--sop8-line) !important;
  box-shadow: 0 8px 20px rgba(18, 58, 60, 0.08) !important;
}

.page-id-536 .elementor-element-267c2f15 .elementor-button {
  background: transparent !important;
  color: var(--sop8-teal-dark) !important;
  box-shadow: none !important;
}

.page-id-536 .elementor-element-517d751d {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 44px !important;
}

.page-id-536 .elementor-element-63b843c3,
.page-id-536 .elementor-element-328b0e85,
.page-id-536 .elementor-element-4b1afa7a {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--sop8-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(17, 82, 79, 0.07) !important;
  padding: 18px 20px !important;
  min-height: 84px;
  justify-content: center;
}

.page-id-536 .sopx-card-title .elementor-heading-title {
  font-size: 28px !important;
  font-weight: 800 !important;
}

.page-id-536 .sopx-card-copy p {
  font-size: 12px !important;
  color: #607b7d !important;
}

.page-id-536 .elementor-section[id],
.page-id-536 .e-con[id] {
  scroll-margin-top: 110px;
}

.page-id-536 .elementor-element-43e94cea,
.page-id-536 .elementor-element-6796ac93,
.page-id-536 .elementor-element-35cb7fa4,
.page-id-536 .elementor-element-cbbdead {
  background: transparent !important;
}

.page-id-536 .elementor-element-39def113 .elementor-column,
.page-id-536 .elementor-element-113c1438 .elementor-column,
.page-id-536 .elementor-element-7855a5ad .elementor-column,
.page-id-536 .elementor-element-45c6db1 .elementor-column,
.page-id-536 .elementor-element-cbbdead .elementor-column {
  margin-bottom: 18px;
}

/* fix: 542b3f8f/166984a7/5ae9c1aa/62c8ff94/10da8515/4e0e3a64 used to be
   the 6 service-card Icon Box widgets, back when this rule was written as
   part of the original "feature card" baseline (each widget WAS the
   visible card). They were split into separate Icon + Heading + list
   widgets since then (see further down), and this rule's background/
   border/24px radius/28px padding/min-height:100% - meant for a full
   card - now lands directly on the small Icon widget instead, rendering
   as an oversized white pill. Removed from this group; the dedicated
   .elementor-icon-wrapper rule further down gives the icon its correct
   34px box. The other IDs here are unrelated cards elsewhere on the page
   and still need this rule as before. */
.page-id-536 .elementor-element-2932cc9f,
.page-id-536 .elementor-element-239695a4,
.page-id-536 .elementor-element-98100d5,
.page-id-536 .elementor-element-58b3d2b2,
.page-id-536 .elementor-element-11d53b17,
.page-id-536 .elementor-element-2fb4fbea,
.page-id-536 .elementor-element-392040b6,
.page-id-536 .elementor-element-653deab4,
.page-id-536 .elementor-element-6c1b4dad {
  background: #fff !important;
  border: 1px solid var(--sop8-line) !important;
  border-radius: 24px !important;
  box-shadow: var(--sop8-card-shadow) !important;
}

.page-id-536 .elementor-icon-box-icon i,
.page-id-536 .elementor-icon-box-icon svg {
  color: var(--sop8-teal) !important;
}

/* fix: the audience cards (Державні та приватні клініки, Стоматології,
   Косметологія, Лабораторії) actually live in section 7855a5ad, not
   432f8782 (that's just the "Для кого" heading's own section) - the
   icon-left/title-right change for them is further down, in the existing
   7855a5ad icon-box block. */

.page-id-536 .elementor-icon-box-title {
  font-size: 17px;
  line-height: 1.35;
}

.page-id-536 .elementor-icon-box-description {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-widget-wrap,
.page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-height: 360px;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--sop8-line);
  border-radius: 22px;
  box-shadow: var(--sop8-card-shadow);
  overflow: hidden;
}

.page-id-536 .elementor-element-7855a5ad .elementor-widget-icon-box {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 24px 18px !important;
  text-align: center;
}

.page-id-536 .sop8-audience-photo {
  flex: 0 0 210px;
  order: -1;
  width: 100%;
  height: 210px;
  overflow: hidden;
}

.page-id-536 .sop8-audience-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-wrapper {
  width: 100%;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-icon {
  margin-bottom: 12px !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-title {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* fix (Tabler icon swap): these 4 cards used to show a CSS ::before
   background-image (a data-URI SVG) while the actual injected <svg>
   inside .elementor-icon was hidden (opacity:0) - a leftover from before
   this widget had a working icon-injection story. Now that
   enhanceAudienceCards() injects a real, visible, stroke-based Tabler
   icon directly into that element (same pattern as the service cards),
   the ::before hack and the opacity:0/color:transparent masking are both
   dead weight - removed. --sop8-icon-size-whom/--sop8-icon-box-whom are
   this section's own tokens (36px desktop / 30px mobile per spec,
   distinct from the service cards' --sop8-icon-size-lg) so resizing
   these 4 icons again never touches the other card sections. */
body.page-id-536 {
  --sop8-icon-size-whom: 36px;
  --sop8-icon-box-whom: 52px;
  --sop8-icon-color-whom: #42c7c4;
}

body.page-id-536 .elementor-element-2932cc9f .elementor-icon,
body.page-id-536 .elementor-element-239695a4 .elementor-icon,
body.page-id-536 .elementor-element-98100d5 .elementor-icon,
body.page-id-536 .elementor-element-58b3d2b2 .elementor-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sop8-icon-size-whom) !important;
  height: var(--sop8-icon-size-whom) !important;
  flex-shrink: 0 !important;
  color: var(--sop8-icon-color-whom) !important;
}

/* fix: a page-wide leftover rule (`.elementor-icon-box-icon svg { color:
   var(--sop8-teal) !important }`) sets color DIRECTLY on the svg element,
   not just the wrapper - a direct declaration always wins over one that
   only reaches the svg by inheriting from its parent, regardless of
   which rule has more specificity. Repeating the color assignment here,
   directly on the svg, is what actually beats it (matches the same
   direct-vs-inherited fix applied to these same 4 icons earlier in the
   icon audit). */
body.page-id-536 .elementor-element-2932cc9f .elementor-icon svg,
body.page-id-536 .elementor-element-239695a4 .elementor-icon svg,
body.page-id-536 .elementor-element-98100d5 .elementor-icon svg,
body.page-id-536 .elementor-element-58b3d2b2 .elementor-icon svg {
  width: var(--sop8-icon-size-whom) !important;
  height: var(--sop8-icon-size-whom) !important;
  flex-shrink: 0 !important;
  color: var(--sop8-icon-color-whom) !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

@media (max-width: 767px) {
  body.page-id-536 {
    --sop8-icon-size-whom: 30px;
    --sop8-icon-box-whom: 44px;
  }
}

@media (max-width: 767px) {
  .page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-widget-wrap,
  .page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-element-populated {
    min-height: 330px;
  }

  .page-id-536 .sop8-audience-photo {
    flex-basis: 190px;
    height: 190px;
  }
}

/* hero benefit cards: compact icon + two-line copy */
body.page-id-536 .elementor-element-517d751d {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 0 !important;
}

body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 88px !important;
  height: auto !important;
  padding: 11px 13px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #dcebea !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(17, 82, 79, 0.07) !important;
}

/* fix: these ::before glyphs depended on Elementor's "eicons" icon font
   (font-family: eicons + PUA codepoints like \e888), which never loads on
   this page (no request for it fires at all) — so each card showed the
   browser's blank "missing glyph" tofu box instead of an icon. Kill the
   dead glyph and render a real inline SVG (injected by page-v116.js) in
   the same grid cell instead — no external font dependency to fail. */
body.page-id-536 .elementor-element-63b843c3::before,
body.page-id-536 .elementor-element-328b0e85::before,
body.page-id-536 .elementor-element-4b1afa7a::before {
  content: none !important;
}

body.page-id-536 .sopx-card-icon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 68px !important;
  height: 68px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00a7a0 !important;
}

body.page-id-536 .sopx-card-icon svg {
  width: 48px !important;
  height: 48px !important;
}

body.page-id-536 .elementor-element-63b843c3 .sopx-card-title,
body.page-id-536 .elementor-element-328b0e85 .sopx-card-title,
body.page-id-536 .elementor-element-4b1afa7a .sopx-card-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.page-id-536 .elementor-element-63b843c3 .sopx-card-title .elementor-heading-title,
body.page-id-536 .elementor-element-328b0e85 .sopx-card-title .elementor-heading-title,
body.page-id-536 .elementor-element-4b1afa7a .sopx-card-title .elementor-heading-title {
  margin: 0 !important;
  color: #073a3c !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body.page-id-536 .elementor-element-63b843c3 .sopx-card-copy,
body.page-id-536 .elementor-element-328b0e85 .sopx-card-copy,
body.page-id-536 .elementor-element-4b1afa7a .sopx-card-copy {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* fix: "збільш поле, і впиши повністю текст" - nowrap + ellipsis was
   truncating "документація під ключ" / "перед перевіркою" / "супровід по
   Україні" to "докумен…" etc. Switched to the same white-space:normal
   wrapping mobile already used (see the max-width:767px copy below,
   unchanged) so the full text shows, wrapping onto a 2nd line instead of
   being cut off. The card's own height is now auto (min-height:88px is
   still the floor - see the grid rule above) instead of a fixed 88px, so
   it grows to fit a wrapped 2-line description instead of clipping it. */
body.page-id-536 .elementor-element-63b843c3 .sopx-card-copy p,
body.page-id-536 .elementor-element-328b0e85 .sopx-card-copy p,
body.page-id-536 .elementor-element-4b1afa7a .sopx-card-copy p {
  margin: 0 !important;
  color: #557273 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-517d751d {
    gap: 8px !important;
  }

  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    min-height: 70px !important;
    height: auto !important;
    padding: 9px 8px !important;
  }

  body.page-id-536 .sopx-card-icon {
    width: 52px !important;
    height: 52px !important;
  }

  body.page-id-536 .sopx-card-icon svg {
    width: 38px !important;
    height: 38px !important;
  }

  /* fix: title/description were 10px/7px on mobile - well under the 14px
     minimum for body text. Bumped as far as the 3-across compact card row
     can take without wrapping onto a 4th line; height:auto above lets the
     card grow instead of clipping the larger text. */
  body.page-id-536 .elementor-element-63b843c3 .sopx-card-title .elementor-heading-title,
  body.page-id-536 .elementor-element-328b0e85 .sopx-card-title .elementor-heading-title,
  body.page-id-536 .elementor-element-4b1afa7a .sopx-card-title .elementor-heading-title {
    font-size: 12px !important;
    white-space: normal !important;
  }

  /* fix: at this width a single word like "документація" is wider than the
     ~40px left for text after the 52px icon + gap + padding are taken out
     of a 3-across mobile card - white-space:normal alone only wraps at
     space characters, so that one word (and "супровід"/"перевіркою") still
     overflowed straight past the card's right edge instead of wrapping.
     overflow-wrap lets a word break mid-word when it doesn't fit, same as
     the fix already used elsewhere on this page for long single words. */
  body.page-id-536 .elementor-element-63b843c3 .sopx-card-copy p,
  body.page-id-536 .elementor-element-328b0e85 .sopx-card-copy p,
  body.page-id-536 .elementor-element-4b1afa7a .sopx-card-copy p {
    font-size: 13px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Pixel-sync: services section mirrors the localhost reference. */
.page-id-536 .elementor-element-43e94cea,
.page-id-536 .elementor-element-39def113,
.page-id-536 .elementor-element-113c1438 {
  background: #effaf8 !important;
}

.page-id-536 .elementor-element-43e94cea {
  padding: 96px 0 0 !important;
}

.page-id-536 .elementor-element-43e94cea > .elementor-container,
.page-id-536 .elementor-element-39def113 > .elementor-container,
.page-id-536 .elementor-element-113c1438 > .elementor-container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-43e94cea .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-48217a35 {
  margin: 0 0 16px !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-48217a35 .elementor-heading-title {
  margin: 0 !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.page-id-536 .elementor-element-48217a35 strong {
  font-weight: 800 !important;
}

/* fix: Elementor's own generated width for this widget (a custom-width
   flex setting, max-width:65.677%) was winning over the old width:700px
   here (no !important), collapsing it to 0 width in some layouts - text
   still rendered via overflow, just wrapped onto extra lines with no
   real box to size against. width:auto + an explicit max-width
   (!important, wide enough for the sentence to fit on one line at 16px -
   measured at 790px) fixes the collapse and, on desktop, white-space:
   nowrap keeps it on a single line as requested; mobile keeps wrapping
   since the viewport is too narrow for one line regardless. */
.page-id-536 .elementor-element-4db90202 {
  width: auto !important;
  max-width: 850px !important;
  margin: 0 0 42px !important;
  align-self: center !important;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-4db90202 p {
  margin: 0 !important;
  text-align: center !important;
}

@media (min-width: 900px) {
  .page-id-536 .elementor-element-4db90202,
  .page-id-536 .elementor-element-4db90202 p {
    white-space: nowrap !important;
  }
}

.page-id-536 .elementor-element-39def113,
.page-id-536 .elementor-element-113c1438 {
  padding: 0 !important;
}

.page-id-536 .elementor-element-39def113 > .elementor-container,
.page-id-536 .elementor-element-113c1438 > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-id-536 .elementor-element-113c1438 {
  padding: 18px 0 96px !important;
}

.page-id-536 .elementor-element-39def113 .elementor-top-column,
.page-id-536 .elementor-element-113c1438 .elementor-top-column {
  width: auto !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e2ebe9 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(17, 82, 79, 0.04) !important;
  overflow: hidden;
}

/* fix: compact redesign - the previous per-row min-height (380px/260px)
   forced dead empty space under the shorter cards. CSS Grid already
   stretches items in the same row to match the row's tallest card
   (.elementor-container above is display:grid, default align-items:
   stretch), so removing the forced numbers just lets each row settle to
   its own natural content height instead of an oversized fixed one. */
/* fix: each card is now 3 separate native Elementor widgets - an Icon
   widget, a Heading widget, and a Text Editor widget (class "soppk-list",
   the same class/markup pattern the package list already uses) - instead
   of one Icon Box widget with a description field full of raw HTML. Every
   piece is its own element with its own controls in the Elementor panel.
   flex-wrap puts icon+heading on the first row (heading's flex:1 fills
   the rest of that row) and the list widget's flex-basis:100% below
   forces it onto its own second row, since it can never fit next to a
   row that's already full width. */
/* fix (icon audit): rebuilt as the symmetric 3-column header grid used
   across the whole page now - icon in a fixed-width left cell (sized off
   the shared --sop8-icon-box-lg token), title centered in the middle
   cell, and an equal-width empty right cell mirroring the icon cell. The
   two side columns are the same width, so centering the title in the
   middle column is the same as centering it across the card's full
   width - no separate "ignore the icon" centering hack needed. Row 2
   (grid-auto-rows) holds the bullet list, spanning all 3 columns. */
.page-id-536 .elementor-element-39def113 .elementor-top-column > .elementor-widget-wrap,
.page-id-536 .elementor-element-113c1438 .elementor-top-column > .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: var(--sop8-icon-box-lg) 1fr var(--sop8-icon-box-lg) !important;
  grid-template-rows: minmax(52px, auto) auto !important;
  align-items: center !important;
  column-gap: var(--sop8-icon-gap) !important;
  row-gap: 12px !important;
  padding: 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page-id-536 .elementor-element-39def113 .elementor-widget-icon,
.page-id-536 .elementor-element-113c1438 .elementor-widget-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: auto !important;
  margin: 0 !important;
}

.page-id-536 .elementor-element-39def113 .elementor-widget-heading,
.page-id-536 .elementor-element-113c1438 .elementor-widget-heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.page-id-536 .elementor-element-39def113 .elementor-icon-wrapper,
.page-id-536 .elementor-element-113c1438 .elementor-icon-wrapper {
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  width: var(--sop8-icon-box-lg) !important;
  height: var(--sop8-icon-box-lg) !important;
  background: var(--sop8-icon-bg) !important;
  border-radius: var(--sop8-icon-radius) !important;
}

.page-id-536 .elementor-element-39def113 .elementor-icon,
.page-id-536 .elementor-element-113c1438 .elementor-icon {
  display: grid !important;
  place-items: center !important;
  width: var(--sop8-icon-size-lg) !important;
  height: var(--sop8-icon-size-lg) !important;
  flex-shrink: 0 !important;
  color: var(--sop8-icon-color-services) !important;
  background: transparent !important;
}

.page-id-536 .elementor-element-39def113 .elementor-icon svg,
.page-id-536 .elementor-element-113c1438 .elementor-icon svg {
  width: var(--sop8-icon-size-lg) !important;
  height: var(--sop8-icon-size-lg) !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
}

/* fix: all 6 service-card icons are now Lucide icons (stroke-drawn, not
   filled) - the fill:currentColor rule above would solid-fill their open
   paths, so every injected icon carries this class to reset fill/stroke
   explicitly. stroke-width is already baked into each icon's own markup
   (1.8), repeated here as a CSS fallback in case that ever drifts. */
.page-id-536 .elementor-element-39def113 .elementor-icon svg.sopx-service-icon,
.page-id-536 .elementor-element-113c1438 .elementor-icon svg.sopx-service-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

/* fix: font-size/line-height deliberately left WITHOUT !important here -
   this is only the default. Elementor's own per-widget typography output
   (when someone sets a custom size for this Heading widget in the
   editor's Style panel) is scoped to that widget's own element ID, which
   is more specific than this two-section selector, so a real edit made
   in Elementor naturally wins over this default instead of being
   silently blocked by it. */
.page-id-536 .elementor-element-39def113 .elementor-heading-title,
.page-id-536 .elementor-element-113c1438 .elementor-heading-title {
  margin: 0 !important;
  color: #16191a;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center !important;
  text-wrap: balance;
}

/* fix: the bullet list (Text Editor widget, class "soppk-list") reuses
   the exact class/markup the package list already uses, so font-size,
   line-height and text color all come for free from the shared
   .soppk-list / .soppk-list li rules further up this file - no need to
   redeclare them here, and no risk of the two lists drifting apart again.
   Only the parts that should differ for THIS layout (block instead of
   centered grid, left-aligned, wraps onto its own row) are overridden,
   scoped to these two sections so the real package list is untouched. */
.page-id-536 .elementor-element-39def113 .soppk-list,
.page-id-536 .elementor-element-113c1438 .soppk-list {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* fix: diamond marker instead of the package list's round dot - same
   inline ::before technique (list-style:none is inherited from the
   shared .soppk-list rule), just squared and rotated 45deg. */
.page-id-536 .elementor-element-39def113 .soppk-list li::before,
.page-id-536 .elementor-element-113c1438 .soppk-list li::before {
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
  background: #0abab5 !important;
}

@media (max-width: 1024px) {
  /* fix: each of these two sections holds exactly 3 cards (39def113 and
     113c1438 are separate Elementor sections, not one 6-card grid). Forcing
     2 columns here left the 3rd card of each section alone in its row with
     empty space beside it. Keep 3 columns through this breakpoint so each
     section stays one clean row until it collapses to 1 column at 768px. */
  .page-id-536 .elementor-element-39def113 > .elementor-container,
  .page-id-536 .elementor-element-113c1438 > .elementor-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .page-id-536 .elementor-element-43e94cea {
    padding-top: 72px !important;
  }

  .page-id-536 .elementor-element-39def113 > .elementor-container,
  .page-id-536 .elementor-element-113c1438 > .elementor-container {
    grid-template-columns: 1fr !important;
  }

  .page-id-536 .elementor-element-39def113 .elementor-top-column,
  .page-id-536 .elementor-element-113c1438 .elementor-top-column,
  .page-id-536 .elementor-element-39def113 .elementor-top-column > .elementor-widget-wrap,
  .page-id-536 .elementor-element-113c1438 .elementor-top-column > .elementor-widget-wrap {
    min-height: 0 !important;
  }

  .page-id-536 .elementor-element-113c1438 {
    padding-bottom: 72px !important;
  }
}

/* Whole-page audit corrections. */
.page-id-536 .elementor-element-6552fdcf {
  min-height: 650px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
  min-height: 650px !important;
}

.page-id-536 .elementor-element-3ea9cc85 {
  display: none !important;
}

.page-id-536 .sop8-package-card {
  height: 394px !important;
  min-height: 394px !important;
  max-height: 394px !important;
  overflow: hidden !important;
}

.page-id-536 .sop8-package-grid {
  height: 394px !important;
}

.page-id-536 .sop8-monitor-banner {
  min-height: 92px !important;
  height: 92px !important;
}

.page-id-536 .elementor-element-6796ac93 {
  padding-top: 72px !important;
}

.page-id-536 .elementor-element-45c6db1 {
  padding-bottom: 72px !important;
}

.page-id-536 .elementor-element-601c568c {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

@media (max-width: 1024px) {
  .page-id-536 .sop8-package-grid {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .page-id-536 .sop8-package-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 420px) {
  .page-id-536 .elementor-element-43e94cea > .elementor-container,
  .page-id-536 .elementor-element-39def113 > .elementor-container,
  .page-id-536 .elementor-element-113c1438 > .elementor-container {
    width: min(100% - 28px, 1180px) !important;
  }

  .page-id-536 .elementor-element-39def113 .elementor-top-column > .elementor-widget-wrap,
  .page-id-536 .elementor-element-113c1438 .elementor-top-column > .elementor-widget-wrap {
    padding: 22px !important;
  }
}

/* Pixel-sync: page body from audience through reviews. */
.page-id-536 .sop8-section-eyebrow {
  margin: 0 0 17px !important;
  color: #087c78 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.page-id-536 .elementor-element-432f8782,
.page-id-536 .elementor-element-7855a5ad {
  background: #fbfcf8 !important;
}

/* fix: "Кому допомагаємо" (the eyebrow label above this heading) was
   removed per request - the 96px top padding was sized to balance
   eyebrow+heading together, and left an oversized empty gap once the
   eyebrow line was gone. Trimmed to close that gap. */
.page-id-536 .elementor-element-432f8782 {
  padding: 64px 0 0 !important;
}

.page-id-536 .elementor-element-432f8782 > .elementor-container,
.page-id-536 .elementor-element-7855a5ad > .elementor-container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-432f8782 .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-432f8782 .elementor-heading-title {
  margin: 0 !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-7855a5ad {
  padding: 42px 0 96px !important;
}

.page-id-536 .elementor-element-7855a5ad > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-top-column {
  width: auto !important;
  margin: 0 !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-widget-wrap,
.page-id-536 .elementor-element-7855a5ad .elementor-column > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  min-height: 266px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(17, 82, 79, 0.09) !important;
  overflow: hidden !important;
}

/* fix: 27px top matches the service-card icon header (39def113/113c1438)
   one section up, so the icon sits the same distance from the card's top
   edge in both sections instead of ~4px closer here. */
/* fix: "Державні та приватні клініки" (the longest of the 4 titles) wraps
   to 2 lines at some viewport widths while the other 3 stay on 1 line -
   with a fixed 70px height that made only that one card taller, pushing
   its photo (and nothing else) down and breaking the row's alignment.
   88px fits the 2-line case for every card, so all 4 headers are the
   same height regardless of which one happens to wrap at a given width. */
.page-id-536 .elementor-element-7855a5ad .elementor-widget-icon-box {
  order: 0 !important;
  display: flex !important;
  flex: 0 0 88px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* fix (icon audit): replaced the absolute-positioned icon + asymmetric
   content padding (39px/35px - a hand-tuned approximation, not a true
   center) with the same symmetric 3-column grid used on the service
   cards: icon in a fixed left cell (--sop8-icon-box), title centered in
   the middle cell, equal empty cell on the right. Since both side
   columns share one width, the title's center is the card's true center
   regardless of icon width - no more guess-and-check padding numbers. */
.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-wrapper {
  display: grid !important;
  grid-template-columns: var(--sop8-icon-box-whom) 1fr var(--sop8-icon-box-whom) !important;
  align-items: center !important;
  column-gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-content {
  grid-column: 2 !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-icon {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: var(--sop8-icon-box-whom) !important;
  height: var(--sop8-icon-box-whom) !important;
  margin: 0 !important;
  background: var(--sop8-icon-bg) !important;
  border-radius: var(--sop8-icon-radius) !important;
  line-height: 1 !important;
}

.page-id-536 .elementor-element-7855a5ad .elementor-icon-box-title {
  margin: 0 !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-wrap: balance;
}

.page-id-536 .sop8-audience-photo {
  order: 1 !important;
  flex: 0 0 190px !important;
  width: 100% !important;
  height: 190px !important;
}

.page-id-536 .elementor-element-6796ac93,
.page-id-536 .elementor-element-45c6db1 {
  background: #f8fcfb !important;
}

.page-id-536 .elementor-element-6796ac93 {
  padding: 96px 0 0 !important;
}

.page-id-536 .elementor-element-6796ac93 > .elementor-container,
.page-id-536 .elementor-element-45c6db1 > .elementor-container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-6796ac93 .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-6796ac93 .elementor-heading-title {
  margin: 0 0 16px !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

/* fix: this rule used to set its own font-size/margin/max-width for the
   "Простий процес без зайвої бюрократії..." subtitle (elementor-element-983788),
   at a HIGHER specificity (3 classes: page-id-536 + section id + widget type)
   than the shared subtitle rule further down (2 classes: page-id-536 +
   widget id) - so it silently won every property they both set, most
   visibly margin:0 auto (killing the shared rule's 42px bottom gap to the
   process steps) and font-size:22px (only saved by the equally-specific
   direct <p> rule beating it via the "direct beats inherited" rule).
   Removed - the shared block at the bottom of this file (search
   "elementor-element-983788") now owns this subtitle's styling entirely,
   the same way it already owns 4b8d89f5/ea96e76/708a03a0/26fd11c2/6c69a85d. */

.page-id-536 .elementor-element-45c6db1 {
  padding: 55px 0 96px !important;
}

.page-id-536 .elementor-element-45c6db1 > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  position: relative !important;
  gap: 0 !important;
}

/* fix: "лінія... має проходити рівно по центру кругів" (see the full
   rewrite near .elementor-element-4bb972db below) - this partial rule
   (no content/position of its own, patched in only via !important onto
   a separate complete definition further down) measured its left/right/
   top against the SECTION's own box, not the 1180px content column the
   4 number badges actually center within - the two boxes don't share an
   origin, so the line's span and height never matched the badges'.
   Removed; replaced by one rule on .elementor-container itself, which
   already has position:relative (directly above) and is the same box
   the badges are centered in. */

.page-id-536 .elementor-element-45c6db1 .elementor-top-column {
  width: auto !important;
  padding: 0 26px !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-widget-wrap,
.page-id-536 .elementor-element-45c6db1 .elementor-widget-icon-box {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-icon-box-wrapper {
  text-align: center !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-icon {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  color: #fff !important;
  background: #087c78 !important;
  border: 7px solid #f8fcfb !important;
  border-radius: 50% !important;
  font-size: 0 !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-icon-box-title {
  margin: 0 0 12px !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-icon-box-description {
  margin: 0 !important;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.page-id-536 .elementor-element-32d389bb,
.page-id-536 .elementor-element-392040b6.sop8-packages-empty,
.page-id-536 .elementor-element-11d53b17,
.page-id-536 .soppk-style,
.page-id-536 .sopcta-style,
.page-id-536 .soptm-style {
  display: none !important;
}

.page-id-536 .elementor-element-35cb7fa4 {
  padding: 96px 0 !important;
  background: #fff !important;
}

.page-id-536 .elementor-element-35cb7fa4 > .e-con-inner {
  display: block !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

/* fix: this used to be a 2-col grid (title left, "Працюємо за договором"
   note right) - the only header on the page not centered. Switched to a
   centered stack to match every other section header (services, audience,
   process, testimonials). */
.page-id-536 .elementor-element-120da36a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 0 20px !important;
}

/* fix: 4729ee3f (kicker+title) is itself an Elementor flex container with
   align-items:normal - it's full width, but that left-aligns its own
   children as a block instead of centering them, so text-align:center on
   the title alone had no visible effect (the title's box was already
   shrink-wrapped to its own text width, sitting at the left edge). */
.page-id-536 .elementor-element-4729ee3f {
  align-items: center !important;
}

/* fix: the kicker/title widgets carry their own inline color from
   Elementor's rich-text editor (set directly on the inner <p>/<h2>, not the
   wrapper this file targets), so it doesn't inherit the wrapper's color —
   it renders whatever stray blue was picked in the editor at some point. */
.page-id-536 .soppk-kicker,
.page-id-536 .soppk-kicker * {
  color: #087c78 !important;
}

.page-id-536 .soppk-title,
.page-id-536 .soppk-title * {
  color: #073a3c !important;
}

/* fix: same tie-break issue as .soptm-title — Elementor's embedded custom
   CSS has ".soppk-title .elementor-heading-title { color: ...!important }"
   at equal specificity to the wildcard rule above, and it loads later. */
.page-id-536 .soppk-title .elementor-heading-title {
  color: #073a3c !important;
}

/* fix: "Пакети консультацій" eyebrow removed per request, same treatment
   as the "Кому допомагаємо" / "Простий і прозорий процес" eyebrows above -
   display:none instead of deleting the widget from _elementor_data (that
   direct-DB-edit path has repeatedly fought with Elementor's own editor
   cache/autosave this session; hiding via CSS is reversible and doesn't
   touch the data Elementor's editor caches). */
.page-id-536 .soppk-kicker {
  display: none !important;
}

.page-id-536 .soppk-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(18px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.page-id-536 .soppk-title .elementor-heading-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.page-id-536 .soppk-lead {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 16px !important;
  text-align: center !important;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* fix: the editor pasted "Працюємо за договором." into a <pre> block, and
   the browser's default `pre { font-family: monospace }` rule is a direct
   match on that element — the Manrope rule above only matches the wrapper,
   so it never reaches the <pre> through inheritance (the <pre> already has
   its own specified value, so it doesn't inherit its ancestor's font). */
.page-id-536 .soppk-lead pre {
  margin: 0 !important;
  white-space: normal !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.page-id-536 .sop8-package-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.page-id-536 .sop8-package-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: auto !important;
  min-height: 440px !important;
  padding: 28px 24px !important;
  background: #fff !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(17, 82, 79, 0.05) !important;
}

/* fix: this used to force "Оберіть формат, який відповідає вашій задачі"
   onto one line below 1024px - at tablet widths the heading no longer fits
   its container at that font size, so with overflow:visible (never
   changed) the sentence spilled out both sides of its box instead of
   wrapping - exactly the overflow bug also present on desktop (see the
   shared heading rule's width/white-space fix further down this file).
   Removed so it wraps naturally like every other section heading. */

.page-id-536 .sop8-package-featured {
  border: 2px solid #079f98 !important;
  transform: translateY(-8px) !important;
}

.page-id-536 .sop8-package-card img,
.page-id-536 .sop8-package-card .elementor-widget-image {
  display: none !important;
}

.page-id-536 .soppk-card-title {
  margin: 0 0 12px !important;
  color: #087c78 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* fix: "ВПРОВАДЖЕННЯ" is one long word with no space to wrap at, so at
   package-grid widths where 4 cards share the row it doesn't fit its
   card and spills past the border - "БАЗОВИЙ АУДИТ" wraps fine right next
   to it because it has a space. overflow-wrap lets a single long word
   break onto a second line instead of overflowing. */
.page-id-536 .soppk-card-title,
.page-id-536 .soppk-card-title .elementor-heading-title {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.page-id-536 .soppk-card-text {
  min-height: 78px !important;
  margin: 0 0 12px !important;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.page-id-536 .soppk-subprice {
  align-self: center !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  color: #087c78 !important;
  background: #e5f8f5 !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

/* fix: same "hidden widget still injects its <style> block" issue as the
   bullet markers - .soppk-style is display:none but its <p> color rule
   (#6d7f98, 3.71:1 on this mint bg) still wins over the rule above because
   it targets the nested <p> directly instead of relying on inheritance. */
.page-id-536 .soppk-subprice p {
  color: #087c78 !important;
}

.page-id-536 .soppk-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 11px !important;
  margin: 22px 0 26px !important;
  padding: 0 !important;
  width: 100% !important;
  color: #4d696a !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 11px !important;
  text-align: center !important;
  list-style: none !important;
}

.page-id-536 .soppk-list ul {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* fix: same hidden .soppk-style legacy widget referenced below also sets
   `.soppk-list li { font-size:16px; line-height:1.45; color:#5f7290 }`
   directly on the <li> itself (not just the ancestor .soppk-list). A value
   declared directly on an element always wins over one that would only
   reach it by inheriting from an ancestor rule, regardless of the
   ancestor's specificity/!important - so the parent's font-size:11px/color
   above never actually reached this text, and it rendered at the leak's
   16px in a leftover blue-gray from the site's old color scheme instead of
   the brand teal-gray. Declaring the same properties directly here (same
   1-class-vs-3-class fight the ::before/::after rules below already win)
   locks in the size intentionally and fixes the color to match the brand
   instead of leaving it dependent on a hidden widget nobody edits. */
.page-id-536 .soppk-list li {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #4d696a !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* fix: a hidden legacy widget (.soppk-style, display:none) still injects a
   <style> block into the page - display:none on its container does NOT
   disable the CSS rules it contains. That block styles .soppk-list li with
   its own gold ::before dot (position:absolute) AND a blue-gray "•" ::after
   (also absolute), both with !important - since !important always wins over
   a non-important rule regardless of specificity, those two clashing dots
   rendered on top of each other instead of this rule. Matching !important
   here and explicitly killing ::after replaces both with one clean teal dot
   in the page's own accent color. */
.page-id-536 .soppk-list li::before {
  content: "" !important;
  position: static !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 9px 2px 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  background: #079f98 !important;
  box-shadow: none !important;
}

.page-id-536 .soppk-list li::after {
  content: none !important;
}

.page-id-536 .soppk-btn {
  width: 100% !important;
  margin-top: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-id-536 .soppk-btn .elementor-button {
  width: 100% !important;
  padding: 13px 16px !important;
  color: #fff !important;
  /* fix: #079f98 with white text was 3.27:1 (fails WCAG AA 4.5:1) - darkened
     to the site's existing --sop8-teal-dark token instead of a new color. */
  background: #087f7b !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 9px 20px rgba(7, 159, 152, 0.22) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  transition: filter 0.2s ease !important;
}

/* fix: Elementor's own per-widget custom CSS (stored in the page data, not
   this file) gave "Обрати пакет" a white/navy hover and "Замовити супровід"
   (soppk-btn-primary) a blue-gradient hover — two different colors for
   buttons that are identical teal at rest. Same darken treatment for both
   so hover doesn't imply they're different actions. */
.page-id-536 .soppk-btn .elementor-button:hover,
.page-id-536 .soppk-btn .elementor-button:focus,
.page-id-536 .soppk-btn-primary .elementor-button:hover,
.page-id-536 .soppk-btn-primary .elementor-button:focus {
  background: #067b75 !important;
  color: #fff !important;
  border-color: transparent !important;
}

.page-id-536 .sop8-monitor-banner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
  margin: 30px 0 0 !important;
  padding: 20px 28px !important;
  background: #e6f8f5 !important;
  border: 1px solid #b9e4df !important;
  border-radius: 18px !important;
}


.page-id-536 .elementor-element-601c568c {
  padding: 96px 0 !important;
  background: #fbfcf8 !important;
}

.page-id-536 .elementor-element-601c568c > .elementor-container {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
  gap: 40px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-601c568c .elementor-top-column {
  width: auto !important;
}

.page-id-536 .elementor-element-19e31335 > .elementor-widget-wrap,
.page-id-536 .elementor-element-cbbdead > .elementor-widget-wrap {
  padding: 0 !important;
}

.page-id-536 .elementor-element-601c568c .elementor-heading-title {
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-601c568c .elementor-accordion-item {
  margin-bottom: 13px !important;
  background: #fff !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.page-id-536 .elementor-element-cbbdead {
  padding: 28px !important;
  background: #fff !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(17, 82, 79, 0.09) !important;
}

/* fix (cont.): this original rule's flat "padding: 96px 0 !important"
   was the real blocker for the native padding change above - Elementor
   writes native container padding as CSS custom properties
   (--padding-top/--padding-bottom etc.) for a later base rule to
   consume via var(), so a literal !important padding here always won
   regardless of what the native "padding" control said. Background
   stays; padding removed so the native values (top:28/bottom:24,
   applied through EMCP Tools) actually reach the page. */
.page-id-536 .elementor-element-3d7a0745 {
  background: #fafcfb !important;
}

/* fix (cont.): the native padding.bottom:24px set via EMCP Tools IS
   correctly saved and appears in Elementor's own generated CSS as
   --padding-bottom:24px - confirmed in post-536.css - but Elementor's
   core frontend.min.css only ever consumes the block-direction padding
   variables (--padding-block-start/-end, which read --padding-top/
   -bottom) into the *inline* physical properties (padding-inline-start/
   -end, i.e. left/right); nothing in its cascade actually applies
   padding-block-start/-end as rendered padding-top/-bottom. Left/right
   worked for exactly this reason and top/bottom silently didn't -
   same category of gap as the button_padding/text_padding key earlier
   in this project. Mirroring the native value here so it actually
   renders; the setting itself remains the real source of truth in
   Elementor's own data. */
.page-id-536 .elementor-element-3d7a0745 {
  padding-bottom: 6px !important;
}

.page-id-536 .elementor-element-3d7a0745 > .e-con-inner {
  display: block !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-30e7e16e {
  display: block !important;
  margin-bottom: 40px !important;
  text-align: center !important;
}

/* fix: same cause as the packages kicker/title — Elementor's rich-text
   editor saved a stray blue directly on the inner <p>/<h2>/<div>, which the
   wrapper-level color rule below never reached. */
.page-id-536 .soptm-kicker,
.page-id-536 .soptm-kicker * {
  color: #087c78 !important;
}

.page-id-536 .soptm-title,
.page-id-536 .soptm-title * {
  color: #073a3c !important;
}

/* fix: Elementor's own embedded custom CSS has
   ".soptm-title .elementor-heading-title { color: ... !important }" at the
   same specificity as the wildcard rule above, so the winner depends on
   source order, which this file doesn't control. Match its exact selector
   shape (widget class + heading-title class) so this one is never a tie. */
.page-id-536 .soptm-title .elementor-heading-title {
  color: #073a3c !important;
}

.page-id-536 .soptm-author,
.page-id-536 .soptm-author * {
  color: #073a3c !important;
}

.page-id-536 .soptm-author .elementor-heading-title {
  color: #073a3c !important;
}

.page-id-536 .soptm-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.page-id-536 .soptm-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.page-id-536 .soptm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-id-536 .soptm-kicker {
  margin: 0 0 17px !important;
  color: #087c78 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.page-id-536 .soptm-title {
  margin: 0 !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.page-id-536 .elementor-element-60966af {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-id-536 .elementor-element-4009ab52,
.page-id-536 .elementor-element-17ad39b4,
.page-id-536 .elementor-element-624bf470 {
  width: auto !important;
  padding: 28px !important;
  background: #fff !important;
  border: 1px solid #dce9e6 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(17, 82, 79, 0.05) !important;
}

.page-id-536 .soptm-text {
  color: #385b5c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

@media (max-width: 1024px) {
  .page-id-536 .elementor-element-7855a5ad > .elementor-container,
  .page-id-536 .sop8-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* fix: single, complete definition of the 01-04 connector line, on the
   grid container (already position:relative) rather than the section.
   12.5%/87.5% are exactly the horizontal centers of column 1 and column
   4 in this 4-equal-column grid - no gutter-compensating calc() needed,
   since percentages here are already relative to the 1180px content
   column the badges themselves center in. top:26px is half the badge's
   own 52px height, measured from the same container's top edge the
   badges sit flush against (confirmed by direct measurement: badge
   center Y - container top = 26px exactly). Placed here, BEFORE the
   768px/767px responsive overrides below, on purpose: this and those
   overrides share the same selector and specificity, so whichever comes
   LAST in the file wins ties regardless of which media query actually
   matches - this used to sit after the 768px override, silently
   overruling it at every width, including exactly the tablet width it
   was meant to override. */
.page-id-536 .elementor-element-45c6db1 > .elementor-container::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 26px;
  height: 1px;
  background: #bfded8;
}

@media (max-width: 768px) {
  .page-id-536 .elementor-element-432f8782,
  .page-id-536 .elementor-element-6796ac93,
  .page-id-536 .elementor-element-35cb7fa4,
  .page-id-536 .elementor-element-601c568c,
  .page-id-536 .elementor-element-3d7a0745 {
    padding-top: 72px !important;
  }

  /* fix: same removal as the desktop copy of this rule (see the comment
     a few hundred lines up, above elementor-element-45c6db1) - the shared
     subtitle rule already gives this element the reference's own 850px
     max-width/16px font-size/normal wrapping at every width; a narrower
     520px mobile-only cap here was an artifact of the old per-section
     styling, not something the reference itself has. */

  .page-id-536 .elementor-element-7855a5ad > .elementor-container,
  .page-id-536 .elementor-element-45c6db1 > .elementor-container,
  .page-id-536 .sop8-package-grid,
  .page-id-536 .elementor-element-601c568c > .elementor-container,
  .page-id-536 .elementor-element-60966af {
    grid-template-columns: 1fr !important;
  }

  .page-id-536 .elementor-element-7855a5ad,
  .page-id-536 .elementor-element-45c6db1 {
    padding-bottom: 72px !important;
  }

  .page-id-536 .elementor-element-45c6db1 > .elementor-container {
    gap: 22px !important;
  }

  /* fix: at this breakpoint the badges are pulled into the column's own
     left gutter (see the padding-left:76px rule below) rather than
     staying centered, so the line switches from horizontal to vertical,
     running through all 4 badges at their shared X. Value confirmed by
     direct measurement against the actual badge centers at 768px. */
  .page-id-536 .elementor-element-45c6db1 > .elementor-container::before {
    top: 26px;
    bottom: 58px;
    left: 26px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .page-id-536 .elementor-element-45c6db1 .elementor-top-column {
    min-height: 80px !important;
    padding: 0 0 0 76px !important;
    text-align: left !important;
  }

  .page-id-536 .elementor-element-120da36a {
    grid-template-columns: 1fr !important;
  }

  .page-id-536 .sop8-package-featured {
    transform: none !important;
  }
}

.page-id-536 .elementor-element-45c6db1 .elementor-column {
  position: relative;
  text-align: center;
}

.page-id-536 .elementor-element-4bb972db,
.page-id-536 .elementor-element-25ec697a,
.page-id-536 .elementor-element-2002220f,
.page-id-536 .elementor-element-3ced44fd {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px !important;
  border-radius: 999px;
  background: var(--sop8-teal-dark);
  border: 7px solid #f8fcfb;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.page-id-536 .elementor-element-4bb972db .elementor-heading-title,
.page-id-536 .elementor-element-25ec697a .elementor-heading-title,
.page-id-536 .elementor-element-2002220f .elementor-heading-title,
.page-id-536 .elementor-element-3ced44fd .elementor-heading-title {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.page-id-536 .elementor-element-35cb7fa4 > .e-con-inner,
.page-id-536 .elementor-element-392040b6 > .e-con-inner {
  max-width: 1180px !important;
}

.page-id-536 .elementor-element-11d53b17,
.page-id-536 .elementor-element-2fb4fbea,
.page-id-536 .elementor-element-34569ebe,
.page-id-536 .elementor-element-653deab4 {
  padding: 28px 24px !important;
}

.page-id-536 .elementor-element-392040b6 {
  margin-top: 18px !important;
}

.page-id-536 .soppk-card-title .elementor-heading-title {
  color: var(--sop8-teal-dark) !important;
  font-size: 22px !important;
  letter-spacing: 0.03em !important;
}

.page-id-536 .elementor-element-6c1b4dad {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(115deg, #e6f8f5, #fff) !important;
  border-color: #b9e4df !important;
}

.page-id-536 .elementor-element-6c1b4dad .elementor-button {
  background: #fff !important;
  color: var(--sop8-ink) !important;
  border: 1px solid var(--sop8-line) !important;
}

.page-id-536 .elementor-accordion .elementor-tab-title,
.page-id-536 .elementor-toggle .elementor-tab-title {
  border-radius: 14px 14px 0 0 !important;
}

/* fix: FAQ questions are literal <a> tags — nothing in this file ever set
   their color, so they fell back to the browser/theme default link blue
   (and looked like ordinary hyperlinks, underline included). */
.page-id-536 .elementor-accordion-title,
.page-id-536 .elementor-accordion-title:visited {
  color: #073a3c !important;
  text-decoration: none !important;
}

.page-id-536 .elementor-element-636ce252 .elementor-button,
.page-id-536 .elementor-element-22c23a26 .elementor-button,
.page-id-536 .elementor-element-73c59b29 .elementor-button,
.page-id-536 .elementor-element-64e1f12a .elementor-button {
  min-height: 52px;
  border-radius: 14px !important;
  border: 1px solid currentColor !important;
  background: #fff !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

/* fix: "Viber" однакової довжини з іншими кнопками" - the 3 buttons sat
   in 3 equal-width columns (160px each) but each button itself was
   sized to its own text ("Viber" = 86px, "Telegram" = 114px, "WhatsApp"
   = 119px), so they visually looked mismatched despite equal columns.
   width:100% on the <a> alone wasn't enough - each button widget's own
   wrapper div (.elementor-element-XXXXXXXX, Elementor's own "align"
   markup) is itself shrink-wrapped to the button's content width, so
   the <a>'s 100% was resolving against that shrunk wrapper, not the
   true column. Both levels need width:100% for it to actually reach
   the column. */
.page-id-536 .elementor-element-22c23a26,
.page-id-536 .elementor-element-73c59b29,
.page-id-536 .elementor-element-64e1f12a,
.page-id-536 .elementor-element-22c23a26 .elementor-button,
.page-id-536 .elementor-element-73c59b29 .elementor-button,
.page-id-536 .elementor-element-64e1f12a .elementor-button {
  width: 100% !important;
}

/* fix: brand colors (#229ed9 Telegram, #7360f2 Viber, #1fae5b WhatsApp) used
   directly as link text on white failed WCAG AA (2.9-4.5:1). Darkened each
   toward the same hue so they still read as their brand, but clear 4.5:1+. */
.page-id-536 .elementor-element-22c23a26 .elementor-button { color: #1170a3 !important; }
.page-id-536 .elementor-element-73c59b29 .elementor-button { color: #5a48d4 !important; }
.page-id-536 .elementor-element-64e1f12a .elementor-button { color: #178a4d !important; }

.page-id-536 .sop8-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.page-id-536 .sop8-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    grid-template-columns: 44% 56% !important;
    min-height: 600px;
  }

  .page-id-536 .elementor-element-1c44352 .elementor-heading-title {
    font-size: clamp(54px, 8vw, 74px) !important;
  }

}

@media (max-width: 767px) {
  .page-id-536 .elementor-element-6552fdcf {
    background: linear-gradient(115deg, #f7fbf9, #e4f7f5) !important;
    padding-top: 12px !important;
  }

  .page-id-536 .elementor-element-6552fdcf::before {
    display: none;
  }

  .page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    display: flex !important;
    flex-direction: column;
    min-height: auto;
  }

  .page-id-536 .elementor-element-45288202 img {
    opacity: 1 !important;
    border-radius: 0 0 36px 36px;
  }

  .page-id-536 .elementor-element-517d751d {
    grid-template-columns: 1fr !important;
  }

  .page-id-536 .elementor-element-6552fdcf,
  .page-id-536 .elementor-section,
  .page-id-536 .e-con {
    overflow-x: clip !important;
  }

  .page-id-536 .elementor-element-4def7f7c {
    padding: 28px 0 !important;
  }

  /* fix: value confirmed by direct measurement against the actual badge
     centers at 375px - the previous 24px/32px pair was never checked
     against real badge positions and landed noticeably off (22px
     horizontally, tens of px vertically). */
  .page-id-536 .elementor-element-45c6db1 > .elementor-container::before {
    left: 26px;
    right: auto;
    width: 1px;
    top: 26px;
    bottom: 87px;
    height: auto;
  }

  .page-id-536 .elementor-element-45c6db1 .elementor-column {
    text-align: left;
    padding-left: 76px;
  }

  /* fix: `left: 0` on an absolutely positioned element lands at the
     containing column's PADDING edge, not its border edge — since the
     column has padding-left:76px reserved for the badge, `left:0` put the
     badge exactly where the heading text also starts, so they overlapped.
     Pulling back by that same 76px puts the badge in the gutter instead. */
  .page-id-536 .elementor-element-4bb972db,
  .page-id-536 .elementor-element-25ec697a,
  .page-id-536 .elementor-element-2002220f,
  .page-id-536 .elementor-element-3ced44fd,
  .page-id-536 .elementor-element-3b2aecd9 {
    position: absolute;
    left: -76px;
    margin: 0 !important;
  }

  .page-id-536 .elementor-element-6c1b4dad {
    grid-template-columns: 1fr !important;
  }
}

/* Final-cascade overrides for the synchronized lower page. */
.page-id-536 .elementor-element-4bb972db,
.page-id-536 .elementor-element-25ec697a,
.page-id-536 .elementor-element-2002220f,
.page-id-536 .elementor-element-3ced44fd,
.page-id-536 .elementor-element-3b2aecd9 {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  color: #fff !important;
  background: #087c78 !important;
  border: 7px solid #f8fcfb !important;
  border-radius: 50% !important;
  order: -1 !important;
}

.page-id-536 .elementor-element-4bb972db .elementor-heading-title,
.page-id-536 .elementor-element-25ec697a .elementor-heading-title,
.page-id-536 .elementor-element-2002220f .elementor-heading-title,
.page-id-536 .elementor-element-3ced44fd .elementor-heading-title,
.page-id-536 .elementor-element-3b2aecd9 .elementor-heading-title {
  color: #fff !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-widget-heading:not(.elementor-element-4bb972db):not(.elementor-element-25ec697a):not(.elementor-element-2002220f):not(.elementor-element-3ced44fd):not(.elementor-element-3b2aecd9) {
  margin: 0 0 12px !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-widget-heading:not(.elementor-element-4bb972db):not(.elementor-element-25ec697a):not(.elementor-element-2002220f):not(.elementor-element-3ced44fd):not(.elementor-element-3b2aecd9) .elementor-heading-title {
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.page-id-536 .elementor-element-45c6db1 .elementor-widget-text-editor {
  margin: 0 !important;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.page-id-536 .elementor-element-601c568c > .elementor-container {
  display: block !important;
}

.page-id-536 .elementor-element-19e31335,
.page-id-536 .elementor-element-cbbdead {
  width: 100% !important;
}

.page-id-536 .elementor-element-19e31335 {
  margin-bottom: 40px !important;
}

.page-id-536 .elementor-element-19e31335 .elementor-accordion {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px 16px !important;
}

.page-id-536 .elementor-element-601c568c .elementor-accordion-item {
  margin: 0 !important;
}

.page-id-536 .elementor-element-cbbdead {
  padding: 25px 30px !important;
}

/* fix: "кнопки посунь вліво" - column 1 was `1fr`, so it stretched to
   absorb ALL leftover row width (the text itself only needs ~400px; on
   a wide screen the row is ~1100px), pushing the button columns far to
   the right with a large dead gap in between. The paragraph already has
   its own <br> forcing its 2-line wrap regardless of column width (see
   EMCP Tools fix to elementor-element-6b1a86eb removing ~20 leading
   spaces per line that were also inflating this column's own natural
   width).
   fix (cont.): "посунь вправо" - plain max-content overcorrected. A
   max-content grid track is still compressible when the row doesn't
   have enough space for every track at its preferred size (only the
   3 fixed 160px button columns are protected from that); at ~1024-
   1280px viewports this column got squeezed down to ~339px, narrower
   than the paragraph's own longest line (~391px with padding), so that
   line wrapped a second time - 2 lines became 4, and the button row
   looked squeezed up against the text. minmax(400px, max-content) puts
   a floor under the compression so the paragraph always gets the width
   its own 2 lines need. */
/* fix: "зсунути вправо, краще збалансовано" - the grid's 4 columns
   (text + 3×160px buttons) don't add up to the card's full available
   width, and by CSS default (justify-content:normal, behaves as start)
   packed flush against the card's left padding edge, leaving all the
   leftover width as dead space on the right only. justify-content:
   center redistributes that same leftover width to both sides instead
   - nothing stretches (column sizes/gaps unchanged), only the whole
   group's position shifts. Desktop/tablet only: the <=768px rule
   further down switches this to a single stacked 1fr column, where
   justify-content on one column is a no-op, so mobile is unaffected. */
.page-id-536 .elementor-element-cbbdead > .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: minmax(400px, max-content) repeat(3, 160px) !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 13px !important;
  row-gap: 0px !important;
}

/* fix: "Швидкий контакт і кнопки в 1 ряд" - title and the Telegram/
   Viber/WhatsApp buttons now share row 1 (title in col 1, buttons in
   cols 2-4), with the paragraph moved to its own row 2 spanning the
   full width underneath, instead of the title sitting alone above a
   title+paragraph column with buttons centered against just the
   paragraph line. */
.page-id-536 .elementor-element-cbbdead > .elementor-widget-wrap > .elementor-element-1156a3de {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* fix: "розмісти по центру Швидкий контакт, біле поле яке звільниться
   скороти в мінімум" - the heading, as a block element, was stretching
   to fill the entire 597px column 1 (Elementor's grid default), so its
   short text sat flush-left with a large empty runway before the
   buttons started. justify-self:center shrinks the heading's own box
   down to its text width and centers that compact box within the
   column instead - no leftover dead space, and the text reads centered
   in the row. */
.page-id-536 .elementor-element-cbbdead .elementor-element-1156a3de {
  width: max-content !important;
  max-width: 100% !important;
  justify-self: center !important;
  text-align: center !important;
  /* fix: "заголовок не рухати взагалі" - align-self:center tied the
     heading's position to row 1's own height, which is set by the
     tallest item sharing that row (the buttons) - any native-settings
     margin change on the buttons (done through EMCP Tools below) grew
     row 1 and re-centered the heading along with it, moving it despite
     nothing being asked to touch it. align-self:start pins the heading
     to row 1's top edge instead, which is fixed to the grid's own top
     and never shifts regardless of how tall row 1's content gets - the
     heading now stays put no matter what happens to the buttons. */
  align-self: start !important;
}

/* fix (cont.): the real reason "centering" left so much white space is
   that this title had never been given the page's card-title styling -
   it was still rendering at Elementor's raw default (54px, navy
   #173d72), the same text as everywhere else on the page just much
   bigger than this small contact card was ever meant to hold. Matched
   it to the 22px scale every other in-card title on the page uses
   (.soppk-card-title) - the huge default size was the actual source of
   the excess space, not just the alignment. */
/* fix: "збільшити текст заголовка «Швидкий контакт»" - supersedes the
   22px note above (this was matched to .soppk-card-title at the time).
   Bumped 22->28->35px; font-family/weight/color untouched since they
   already are this page's standard heading treatment (Manrope 800,
   #073a3c). */
.page-id-536 .elementor-element-cbbdead .elementor-element-1156a3de .elementor-heading-title {
  width: auto !important;
  font-size: 35px !important;
  font-weight: 800 !important;
  color: #073a3c !important;
  letter-spacing: normal !important;
}

/* fix: "текст занадто далеко праворуч" - the paragraph spanned the full
   row (col 1 through the button columns), so its own text-align:center
   centered it against that whole width - including the space under the
   buttons - while the heading above it is centered against just column
   1. Two different centering axes made the text visually drift right
   of the heading. Scoped back to column 1 only, same as the heading,
   so both lines center against the same reference width and read as
   one block; the buttons (column 2 onward) are untouched. */
.page-id-536 .elementor-element-cbbdead > .elementor-widget-wrap > .elementor-element-6b1a86eb {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

/* fix: "кнопки опустити нижче, написи на лінії з заголовком" - anchored
   to row 1's top edge (same stable reference the heading now uses)
   instead of the row's own center, so the buttons' vertical position
   is controlled purely by the explicit top margin set on each button
   widget through EMCP Tools - predictable, and independent of the
   heading.
   fix (cont.): "опустити кнопки до вертикального центру блоку" - that
   pinned the buttons to row 1 only (the heading's row), so they sat
   level with the heading, well above the block's actual midpoint once
   the paragraph (row 2) is counted in. Spanning both rows (1 / 3) and
   switching to align-self:center centers the button row against the
   combined height of heading+paragraph together - the same "block" the
   request means - without touching the button widgets themselves
   (order, size, width, style, colors, spacing untouched). */
.page-id-536 .elementor-element-cbbdead .elementor-inner-section {
  grid-column: 2 / -1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

.page-id-536 .elementor-element-cbbdead .elementor-inner-section > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 13px !important;
}

.page-id-536 .elementor-element-cbbdead .elementor-inner-section .elementor-column {
  width: auto !important;
}

@media (max-width: 768px) {
  /* fix: same overlap bug as the 767px block above (this one loads later and
     was winning the cascade) — `left:0` sits at the column's padding edge,
     which is also where the 76px-indented heading text starts. */
  .page-id-536 .elementor-element-4bb972db,
  .page-id-536 .elementor-element-25ec697a,
  .page-id-536 .elementor-element-2002220f,
  .page-id-536 .elementor-element-3ced44fd,
  .page-id-536 .elementor-element-3b2aecd9 {
    position: absolute !important;
    left: -76px !important;
    margin: 0 !important;
  }

  .page-id-536 .elementor-element-45c6db1 .elementor-widget-heading:not(.elementor-element-4bb972db):not(.elementor-element-25ec697a):not(.elementor-element-2002220f):not(.elementor-element-3ced44fd):not(.elementor-element-3b2aecd9),
  .page-id-536 .elementor-element-45c6db1 .elementor-widget-text-editor {
    text-align: left !important;
  }

  .page-id-536 .elementor-element-19e31335 .elementor-accordion,
  .page-id-536 .elementor-element-cbbdead > .elementor-widget-wrap,
  .page-id-536 .elementor-element-cbbdead .elementor-inner-section > .elementor-container {
    grid-template-columns: 1fr !important;
  }

  .page-id-536 .elementor-element-cbbdead .elementor-inner-section {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* fix: the native Elementor margins set on these 3 elements (via EMCP
     Tools) to fine-tune their desktop position - heading pushed down
     28px to counter its start-alignment, paragraph pulled up 30px
     toward the heading, buttons pushed down 9px to match the heading's
     text line - are fixed px values with no per-breakpoint override, so
     they carried into the stacked mobile/tablet layout too and caused
     overlap there. Reset to 0 here; the natural stacked flow at this
     width doesn't need them. */
  .page-id-536 .elementor-element-cbbdead .elementor-element-1156a3de,
  .page-id-536 .elementor-element-cbbdead .elementor-element-6b1a86eb,
  .page-id-536 .elementor-element-cbbdead .elementor-element-22c23a26,
  .page-id-536 .elementor-element-cbbdead .elementor-element-73c59b29,
  .page-id-536 .elementor-element-cbbdead .elementor-element-64e1f12a {
    margin: 0 !important;
  }
}

/* Absolute final audit sizing: keep this block last in the cascade.
   fix: 19px was noticeably tighter than every other section on the page
   (which run 40-48px) - raised to match the page's spacing rhythm. */
body.page-id-536 .elementor-element-35cb7fa4 {
  padding-top: 0 !important;
  padding-bottom: 24px !important;
}

body.page-id-536 .elementor-element-3ea9cc85 {
  display: none !important;
}

body.page-id-536 .sop8-package-grid,
body.page-id-536 .sop8-package-card {
  height: auto !important;
  min-height: 520px !important;
  max-height: none !important;
}

body.page-id-536 .sop8-monitor-banner {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

body.page-id-536 .elementor-element-601c568c {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

body.page-id-536 .elementor-element-6552fdcf,
body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
  height: 650px !important;
  min-height: 650px !important;
  max-height: 650px !important;
}

/* fix: this min-height was sized for the mobile/tablet timeline, where the
   4 steps stack vertically and each badge is absolutely positioned (needs
   real height reserved for it). At desktop the steps lay out horizontally
   in one short row, so the same 575px — applied with no width gate — left
   a ~340px empty gap below the row before the next section starts. */
@media (max-width: 1024px) {
  body.page-id-536 .elementor-element-45c6db1 {
    min-height: 575px !important;
  }
}

/* fix: this block used to also widen elementor-element-35cb7fa4's
   container to 1573px at this breakpoint ("compensate for the client's
   browser zoom") - every other section on the page (services, audience,
   process, FAQ) stays capped at 1180px at all widths with no equivalent
   widening, so the packages block ended up visibly wider than the rest of
   the page specifically at the client's own everyday zoom level. Dropped
   the width override so it stays at the same 1180px as everything else;
   the font-size/padding bumps below are harmless scale-ups and stay. */
@media (min-width: 2000px) {
  .page-id-536 .soppk-kicker {
    font-size: 16px !important;
  }

  .page-id-536 .elementor-element-35cb7fa4 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  body.page-id-536 .sop8-package-grid,
  body.page-id-536 .sop8-package-card {
    min-height: 560px !important;
  }

  .page-id-536 .soppk-card-title {
    font-size: 25px !important;
  }

  .page-id-536 .soppk-card-text,
  .page-id-536 .soppk-list {
    font-size: 14px !important;
  }
}

@media (max-width: 1024px) {
  body.page-id-536 .elementor-element-35cb7fa4 {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }

  body.page-id-536 .sop8-package-grid,
  body.page-id-536 .sop8-package-card,
  body.page-id-536 .elementor-element-6552fdcf,
  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner,
  body.page-id-536 .elementor-element-601c568c {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.page-id-536 .elementor-element-601c568c {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  body.page-id-536 .elementor-element-45c6db1 {
    min-height: 0 !important;
  }
}

/* v116: exact hero sync with current localhost reference */
body.page-id-536 .elementor-element-6552fdcf {
  position: relative !important;
  min-height: 650px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #e4f7f5 url("./hero-seamless-reference.png") center / cover no-repeat !important;
}

body.page-id-536 .elementor-element-6552fdcf::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(228, 247, 245, 0.35) 42%, rgba(228, 247, 245, 0.82) 46%, #e4f7f5 49%, #e4f7f5 100%) !important;
  pointer-events: none !important;
}

body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
  position: relative !important;
  z-index: 1 !important;
  min-height: 650px !important;
  height: 650px !important;
  max-width: 1240px !important;
  width: min(1240px, calc(100% - 36px)) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 48%) 1fr !important;
  align-items: center !important;
  gap: 28px !important;
}

body.page-id-536 .elementor-element-45288202 {
  z-index: 0 !important;
}

body.page-id-536 .elementor-element-45288202 img {
  opacity: 0 !important;
}

/* fix: "вирівняй по ширині ... щоб все було в рівні всіх блоків сайту" -
   the heading/paragraph/button row all share this column's plain 100%
   content width (no width override of their own), which is only as wide
   as this padding-right leaves it - a generous clamp(35px,6vw,100px) that
   nobody actually needed room for. Trimmed to clamp(20px,3vw,50px), which
   widens that shared content column by ~45-50px at typical desktop
   widths - "кнопки збільш" (buttons grow) since they inherit this same
   width automatically; the card row below is un-fixed back to the same
   inherited width too (see elementor-element-517d751d - the isolated
   600px override was removed) instead of staying wider than everything
   else - so all 3 rows plus the heading/paragraph now share one edge. */
body.page-id-536 .elementor-element-4def7f7c {
  position: relative !important;
  z-index: 1 !important;
  padding: 58px clamp(20px, 3vw, 50px) 32px 48px !important;
}

body.page-id-536 .elementor-element-59273441 .elementor-widget-container,
body.page-id-536 .elementor-element-59273441 p {
  margin: 0 0 17px !important;
  color: var(--sop8-teal-dark) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

body.page-id-536 .elementor-element-1c44352 .elementor-heading-title {
  margin: 0 0 25px !important;
  color: #073a3c !important;
  font-size: clamp(48px, 5.7vw, 78px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  font-weight: 800 !important;
}

body.page-id-536 .elementor-element-5cf02524 .elementor-widget-container,
body.page-id-536 .elementor-element-5cf02524 p {
  max-width: 650px !important;
  margin: 0 !important;
  color: #274f50 !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
}

body.page-id-536 .elementor-element-456131b8 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 26px !important;
  margin-bottom: 15px !important;
}

body.page-id-536 .elementor-element-b7d95fc .elementor-button,
body.page-id-536 .elementor-element-6d4d42f1 .elementor-button,
body.page-id-536 .elementor-element-267c2f15 .elementor-button {
  border-radius: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.page-id-536 .elementor-element-b7d95fc .elementor-button {
  background: linear-gradient(135deg, #08a9a1, #0a938e) !important;
  box-shadow: 0 10px 24px rgba(7, 159, 152, 0.18) !important;
}

/* fix: "всі 3 кнопки мають бути однакові" - "Обрати пакет" was the odd one
   out (white pill with a border) while the other 2 already shared the teal
   gradient look; matched here instead of picking a brand-new shared style,
   since 2 of 3 already agreed on it. Native background_color/border_border/
   button_text_color updated to match via the emcp-tools MCP server too, for
   the same reason the size fields were - CSS still owns what actually
   paints here (color, like padding before it, isn't reliably reaching the
   page through Elementor's own generated CSS), but the widget's own saved
   settings are now consistent with what's rendered instead of describing
   the old white/bordered look nobody sees any more. */
body.page-id-536 .elementor-element-6d4d42f1 .elementor-button,
body.page-id-536 .elementor-element-267c2f15 .elementor-button {
  background: linear-gradient(135deg, #08a9a1, #0a938e) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(7, 159, 152, 0.18) !important;
}

body.page-id-536 .elementor-element-517d751d {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 52px !important;
}

body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  min-height: 84px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

@media (max-width: 1024px) {
  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    grid-template-columns: 46% 54% !important;
    min-height: 620px !important;
    height: 620px !important;
  }

  body.page-id-536 .elementor-element-4def7f7c {
    padding: 55px 30px !important;
  }

  body.page-id-536 .elementor-element-517d751d {
    margin-top: 38px !important;
  }
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-6552fdcf {
    background: linear-gradient(115deg, #f7fbf9, #e4f7f5) !important;
    padding-top: 12px !important;
  }

  body.page-id-536 .elementor-element-6552fdcf::before {
    display: none !important;
  }

  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
  }

  body.page-id-536 .elementor-element-45288202 img {
    opacity: 1 !important;
    border-radius: 0 0 36px 36px !important;
  }

  body.page-id-536 .elementor-element-4def7f7c {
    padding: 42px 22px !important;
  }

  body.page-id-536 .elementor-element-517d751d {
    grid-template-columns: 1fr !important;
    margin-top: 36px !important;
  }
}

/* hotfix: restore real left hero image on live page 8-2 */
body.page-id-536 .elementor-element-6552fdcf {
  background: radial-gradient(circle at 91% 18%, rgba(139, 224, 215, 0.28), transparent 23%),
    radial-gradient(circle at 75% 72%, transparent 0 105px, rgba(7, 159, 152, 0.11) 106px 107px, transparent 108px),
    linear-gradient(115deg, #f7fbf9, #e4f7f5) !important;
}

body.page-id-536 .elementor-element-6552fdcf::before {
  display: none !important;
}

body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
  gap: 0 !important;
  align-items: stretch !important;
}

body.page-id-536 .elementor-element-45288202 {
  position: relative !important;
  overflow: hidden !important;
}

body.page-id-536 .elementor-element-45288202 img {
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: left center !important;
  transform: scale(1.2) translateY(3%) !important;
  transform-origin: left center !important;
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-45288202 img {
    transform: none !important;
    height: 100% !important;
    min-height: 330px !important;
    max-height: 430px !important;
    border-radius: 0 0 36px 36px !important;
  }
}

/* fix: the photo column (49419ec8) sits next to a much taller text column
   (heading+subtitle+buttons+benefit cards) in the same flex row. Elementor
   prints its own custom-property-driven flex CSS for this container
   (post-536.css, higher specificity than the old rules here) that resets
   the column's own sizing, so align-items:stretch on the row never
   actually reached it - the column stayed only as tall as this photo
   box's min-height (566px), leaving ~600-800px of dead space below the
   photo before the next section, which is what the screenshot flagged.
   Forcing the column to stretch AND the photo box to fill 100% of that
   stretched column (instead of relying on its own min-height) closes
   the gap - the photo now runs the full height of the row, same as the
   text column beside it. */
body.page-id-536 .elementor-element-49419ec8 {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

/* hotfix 2: force the exact localhost hero photo instead of Elementor's wrong image */
body.page-id-536 .elementor-element-45288202 {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  min-height: 100% !important;
  background: url("./hero-reference-v4.jpg") left center / cover no-repeat !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 67%, rgba(0, 0, 0, 0.88) 76%, rgba(0, 0, 0, 0.4) 90%, transparent 100%) !important;
  mask-image: linear-gradient(to right, #000 0%, #000 67%, rgba(0, 0, 0, 0.88) 76%, rgba(0, 0, 0, 0.4) 90%, transparent 100%) !important;
}

body.page-id-536 .elementor-element-45288202 img {
  opacity: 0 !important;
}

@media (max-width: 1024px) {
  body.page-id-536 .elementor-element-45288202 {
    min-height: 536px !important;
  }
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    gap: 0 !important;
  }

  /* fix: this wrapper keeps its desktop min-height (620px) on mobile because
     no earlier mobile rule targets it — only the inner .elementor-element-45288202
     was ever adjusted. That left ~279px of empty space between the hero photo
     and the text block below it. */
  body.page-id-536 .elementor-element-49419ec8 {
    min-height: auto !important;
    height: auto !important;
  }

  body.page-id-536 .elementor-element-45288202 {
    width: 100% !important;
    min-height: 330px !important;
    height: 42vh !important;
    max-height: 430px !important;
    background: url("./hero-photo-mobile-v3.jpg") center 15% / cover no-repeat !important;
    border-radius: 0 0 36px 36px !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%) !important;
  }

  /* fix: on mobile this container was filled with hero-reference.png — a flat
     screenshot of the whole DESKTOP hero (photo + headline + button baked in).
     At 46% desktop width only the photo portion showed; stretched to 100%
     width on mobile, background-size:cover revealed the baked-in desktop
     text/button overlapping the real content below. Fixing that also swapped
     in the real <img> (WP media "doctor-hero-2.png"), which is a DIFFERENT
     woman/photo than the desktop hero — same brand, different stock photo.
     hero-photo-mobile.jpg is a crop of the same hero-reference.png used on
     desktop (left 420px of 1128px, before any text/button pixels start), so
     mobile now shows the identical photo as desktop, just full-bleed. */
  body.page-id-536 .elementor-element-45288202 img {
    opacity: 0 !important;
  }
}

/* final precedence: exact compact hero benefit card geometry and spacing */
body.page-id-536 .elementor-element-4def7f7c {
  gap: 0 !important;
}

body.page-id-536 .elementor-element-517d751d {
  width: 522px !important;
  max-width: 100% !important;
  gap: 10px !important;
  margin-top: 31px !important;
}

body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  min-height: 88px !important;
  height: auto !important;
  padding: 10px 13px !important;
  gap: 2px 10px !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-517d751d {
    width: 100% !important;
    gap: 8px !important;
    margin-top: 30px !important;
  }

  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-height: 70px !important;
    height: 70px !important;
    padding: 9px 8px !important;
    gap: 2px 7px !important;
  }
}

/* final pixel spacing sync for the hero benefits row */
body.page-id-536 .elementor-element-4def7f7c {
  gap: 0 !important;
}
body.page-id-536 .elementor-element-517d751d {
  gap: 10px !important;
  margin-top: 31px !important;
}
body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  min-height: 88px !important;
  height: auto !important;
  padding: 10px 13px !important;
}
@media (max-width: 767px) {
  body.page-id-536 .elementor-element-517d751d {
    gap: 8px !important;
    margin-top: 30px !important;
  }
  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-height: 70px !important;
    height: 70px !important;
    padding: 9px 8px !important;
  }
}

/* pixel spacing sync for the hero benefits row */
body.page-id-536 .elementor-element-4def7f7c {
  gap: 0 !important;
}

body.page-id-536 .elementor-element-517d751d {
  gap: 10px !important;
  margin-top: 31px !important;
}

body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  min-height: 88px !important;
  height: auto !important;
  padding: 10px 13px !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-517d751d {
    gap: 8px !important;
    margin-top: 30px !important;
  }

  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-height: 70px !important;
    height: 70px !important;
    padding: 9px 8px !important;
  }
}

/* hero text + CTA alignment fix */
body.page-id-536 .elementor-element-456131b8,
body.page-id-536 .elementor-element-517d751d {
  padding: 0 !important;
}

body.page-id-536 .elementor-element-b7d95fc .elementor-button,
body.page-id-536 .elementor-element-6d4d42f1 .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body.page-id-536 .elementor-element-267c2f15 .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body.page-id-536 .elementor-element-b7d95fc .elementor-button-text,
body.page-id-536 .elementor-element-6d4d42f1 .elementor-button-text,
body.page-id-536 .elementor-element-267c2f15 .elementor-button-text {
  line-height: 1.2 !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-6552fdcf {
    min-height: auto !important;
    overflow: visible !important;
  }

  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    width: 100% !important;
    max-width: none !important;
  }

  body.page-id-536 .elementor-element-4def7f7c {
    width: 100% !important;
    padding: 36px 20px 42px !important;
    gap: 0 !important;
  }

  body.page-id-536 .elementor-element-59273441 .elementor-widget-container,
  body.page-id-536 .elementor-element-59273441 p {
    margin-bottom: 14px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  body.page-id-536 .elementor-element-1c44352 .elementor-heading-title {
    margin-bottom: 20px !important;
    font-size: clamp(42px, 13vw, 56px) !important;
    line-height: 1 !important;
  }

  body.page-id-536 .elementor-element-5cf02524 .elementor-widget-container,
  body.page-id-536 .elementor-element-5cf02524 p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.page-id-536 .elementor-element-456131b8 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) !important;
    gap: 12px 10px !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
  }

  body.page-id-536 .elementor-element-b7d95fc,
  body.page-id-536 .elementor-element-6d4d42f1 {
    width: 100% !important;
  }

  body.page-id-536 .elementor-element-b7d95fc .elementor-button,
  body.page-id-536 .elementor-element-6d4d42f1 .elementor-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  body.page-id-536 .elementor-element-267c2f15 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  body.page-id-536 .elementor-element-267c2f15 .elementor-button {
    min-height: 34px !important;
    font-size: 12px !important;
  }

  body.page-id-536 .elementor-element-517d751d {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 32px !important;
  }

  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 12px 10px !important;
  }
}

/* final precedence: exact compact hero benefit card geometry */
body.page-id-536 .elementor-element-63b843c3,
body.page-id-536 .elementor-element-328b0e85,
body.page-id-536 .elementor-element-4b1afa7a {
  min-height: 88px !important;
  height: auto !important;
  padding: 10px 13px !important;
  gap: 2px 10px !important;
}

body.page-id-536 .elementor-element-4def7f7c {
  gap: 0 !important;
}

/* fix: the previous fixed 600px here (see git history / the version
   before this comment) fixed cramped card text but made this row wider
   than the heading/paragraph/button row above it, which all share the
   column's plain 100% width - "вирівняй по ширині ... щоб все було в
   рівні всіх блоків" asked for all of them to line up instead. Un-fixed
   back to 100% (matching everything else) and the real fix for the
   cramped word-breaks moved to where it belongs: the shared column got
   wider for everyone (see elementor-element-4def7f7c's own padding-right,
   trimmed above), so this row is both back in alignment AND wider than
   its original 522px - both askscovered by the one change. */
body.page-id-536 .elementor-element-517d751d {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  gap: 10px !important;
  margin-top: 31px !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-517d751d {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    gap: 8px !important;
    margin-top: 30px !important;
  }

  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-height: 70px !important;
    height: 70px !important;
    padding: 9px 8px !important;
    gap: 2px 7px !important;
  }
}

/* fix: at tablet widths (768-1024px) the hero wrapper (elementor-element-6552fdcf)
   and its e-con-inner both had multiple conflicting height/min-height rules
   scattered across this file; several unconditional 650px rules were winning
   the cascade over the intended 768-1024 media block, leaving real content
   (~470px tall at this width) inside a fixed 650px box - a large blank band
   under the hero before the next section starts. Placed last so it wins
   every tie against the earlier rules regardless of source order upstream. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-536 .elementor-element-6552fdcf,
  body.page-id-536 .elementor-element-6552fdcf > .e-con-inner {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

/* fix: page sections meant to read as one continuous "light" background
   had drifted to six slightly different near-white/mint shades
   (#EFFAF8, #FBFCF8, #F8FCFB, #FBFBFA, #FAFCFB) across separate patches,
   which shows up as faint seams between sections. Normalized to a single
   token so the page background reads as one uniform surface; true white
   card rows (packages, contact form, testimonials) are left untouched -
   that white-on-tint alternation is the intended rhythm, not part of the
   drift. The footer (elementor-element-sopxf_container_main) keeps its own
   distinct light-blue tint - that is a deliberate closing band, not drift. */
body.page-id-536 {
  background-color: #eefaf8 !important;
}

body.page-id-536 .elementor-element-432f8782,
body.page-id-536 .elementor-element-7855a5ad,
body.page-id-536 .elementor-element-601c568c,
body.page-id-536 .elementor-element-6796ac93,
body.page-id-536 .elementor-element-45c6db1,
body.page-id-536 .elementor-element-3d7a0745,
body.page-id-536 .elementor-element-43e94cea,
body.page-id-536 .elementor-element-39def113,
body.page-id-536 .elementor-element-113c1438 {
  background-color: #eefaf8 !important;
}

/* fix: elementor-element-35cb7fa4 (the "Надійна допомога" services row +
   "Пакети консультацій" packages row, one combined section) was still the
   one full-bleed white band left on the page - everything above and below
   it uses the same #eefaf8 tint, so this one white band read as a seam.
   Individual package/testimonial/contact-form cards keep their own white
   surface (that card-on-tint contrast is intentional); only this outer
   section background is normalized. */
body.page-id-536 .elementor-element-35cb7fa4 {
  background-color: #eefaf8 !important;
}

/* fix: "Переглянути послуги" (elementor-element-267c2f15) sat next to two
   real pill buttons ("Отримати консультацію", "Обрати пакет") but was left
   as a bare text link - no border, no background, no padding (several
   earlier rules explicitly zero those out: min-height:32px, padding:0).
   Restyled to match the other two as a third, teal outline button instead
   of a stray link. Appended last so it wins those earlier overrides. */
body.page-id-536 .elementor-element-267c2f15 .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #08a9a1, #0a938e) !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(7, 159, 152, 0.18) !important;
  transition: filter 0.2s ease !important;
}

body.page-id-536 .elementor-element-267c2f15 .elementor-button:hover {
  filter: brightness(1.08) !important;
}

/* fix: the previous attempt at "1 row" (width:100% + flex-wrap:nowrap,
   leaving each button its own natural content width) still let the 3
   buttons' combined natural width exceed the row at some in-between
   widths - with nowrap and no min-width guard, flex-shrink squeezed them
   past each other's padding instead of wrapping, so the pill shapes
   visually ran together with no gap between borders. Equal-width flex
   items (flex:1 1 0, min-width:0) can never exceed the row - the row
   divides evenly between exactly 3 buttons every time regardless of how
   long each label is - which is also why "Переглянути послуги" now
   matches "Отримати консультацію" in width instead of hugging its own
   (shorter) text. */
@media (min-width: 768px) {
  body.page-id-536 .elementor-element-456131b8 {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  body.page-id-536 .elementor-element-b7d95fc,
  body.page-id-536 .elementor-element-6d4d42f1,
  body.page-id-536 .elementor-element-267c2f15 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* fix: "Отримати консультацію" is the longest label of the three
     (~160px at 14px/800 weight) but equal-thirds gives it the same box as
     its shorter siblings - at every width up to ~1200px that box was
     narrower than the text itself, so it spilled past the pill's rounded
     edges (screenshot: text visibly crossing the border). Smaller
     font/padding buys some room; height:auto + min-height (instead of a
     fixed height) with white-space:normal is the actual safety net - if a
     label still doesn't fit at some width, it wraps to 2 lines inside the
     pill instead of overflowing past it. align-items:stretch on the row
     (above) keeps all 3 buttons the same height if one of them wraps. */
  /* fix: "кнопки збільш 1,5 раза через ці MCP-інструменти" - font-size/
     padding/min-height removed from this override so the 1.5x values set
     natively on the widget via the emcp-tools MCP server (typography_font_
     size:21px, button_padding:25px/42px) actually render instead of being
     immediately overridden right back down to the old 14px-era numbers by
     this !important rule. width/wrap/line-height stay - still needed so
     the 3-equal-columns row doesn't overflow, now with more margin for a
     label to wrap to 2 lines given the larger text. */
  body.page-id-536 .elementor-element-b7d95fc .elementor-button,
  body.page-id-536 .elementor-element-6d4d42f1 .elementor-button,
  body.page-id-536 .elementor-element-267c2f15 .elementor-button {
    width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
}

/* fix: below 767px the row switched to a 2-column grid (1.35fr/0.9fr),
   which put "Переглянути послуги" - the 3rd item - alone on its own row
   instead of alongside the other two. Matching the request ("1 row"):
   3 equal columns instead, with smaller padding/font so all three still
   fit a narrow phone width without any one button overflowing; letting
   the label wrap to 2 lines here instead of forcing single-line overflow. */
@media (max-width: 767px) {
  body.page-id-536 .elementor-element-456131b8 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  body.page-id-536 .elementor-element-b7d95fc,
  body.page-id-536 .elementor-element-6d4d42f1,
  body.page-id-536 .elementor-element-267c2f15 {
    grid-column: auto !important;
    width: 100% !important;
  }

  body.page-id-536 .elementor-element-b7d95fc .elementor-button,
  body.page-id-536 .elementor-element-6d4d42f1 .elementor-button,
  body.page-id-536 .elementor-element-267c2f15 .elementor-button {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
}

/* fix: most section boundaries down the page used 96px top and/or bottom
   padding (scattered across many earlier rules for each section ID), and
   several adjacent sections both carry 96px on the touching edge - e.g.
   elementor-element-113c1438's 96px bottom against -432f8782's 96px top
   before "Для кого" stacks to a ~190px dead gap, which is what the
   screenshot flagged. Trimming every section's large top/bottom padding
   down consistently (roughly half) tightens the whole page's rhythm at
   once rather than just the one gap that happened to get noticed - the
   same 96px pattern repeats at nearly every section change. */
body.page-id-536 .elementor-element-43e94cea {
  padding-top: 28px !important;
}

body.page-id-536 .elementor-element-113c1438 {
  padding-bottom: 24px !important;
}

/* fix: this rule (body.page-id-536 ... ) has one more specificity point
   than the .page-id-536 ... rule earlier in the file and comes later in
   source order, so it's the one that actually wins - the earlier rule's
   value alone (see the "Кому допомагаємо" removal note above it) would
   have been silently overridden by this 48px if left unchanged. */
/* fix: match the reference crop by measuring the visible card-to-heading
   rhythm, not only the technical section padding. Previous cards keep 24px
   bottom air, so 23px here reads as ~47px from card to title. */
body.page-id-536 .elementor-element-432f8782 {
  padding-top: 10px !important;
}

body.page-id-536 .elementor-element-7855a5ad {
  padding-top: 32px !important;
  padding-bottom: 24px !important;
}

/* fix: "Простий і прозорий процес" eyebrow above this heading was
   removed per request, same as the "Кому допомагаємо" one above -
   trimmed this section's top padding the same way to close the gap the
   removed line left behind. */
body.page-id-536 .elementor-element-6796ac93 {
  padding-top: 23px !important;
}

body.page-id-536 .elementor-element-45c6db1 {
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}

/* fix: "footer має бути приблизно вдвічі ближче" - padding-bottom
   removed from this rule (was 48px !important, silently overriding
   whatever the native Elementor "padding" control said) so the native
   setting - applied through EMCP Tools per this request - actually
   reaches the page instead of being masked. Only padding-top stays
   here (unaffected, and still overridden again by a later rule anyway
   - not touching that history). */
body.page-id-536 .elementor-element-3d7a0745 {
  padding-top: 8px !important;
}

/* fix: "зменшити відстань між Швидким контактом і Відгуками" - gap to
   the next section (3d7a0745) was this rule's padding-bottom (12px)
   plus that section's own padding-top (28px desktop / 72px mobile) =
   40px/84px of same-colored empty space (both sections share the same
   background color, so it reads as one continuous band). Halved here;
   see elementor-element-3d7a0745 below for its half of the same gap. */
body.page-id-536 .elementor-element-601c568c {
  padding-top: 12px !important;
  padding-bottom: 6px !important;
}

/* ==========================================================================
   Shared section heading/subtitle component (icon-audit-style token reuse).
   "Надійна допомога у впровадженні СОП" (elementor-element-48217a35 /
   -4db90202) is the reference this was copied from verbatim (font, size,
   weight, line-height, color, alignment, container width, the two
   internal gaps). Applied here to 3 more section headings so all 4 read
   as one consistent heading style instead of each section's own
   hand-tuned numbers. One rule block per role (heading vs subtitle) -
   change a value once here and every section using it updates together,
   the same pattern the icon-box color/size tokens use above. */
/* fix: "Оберіть формат, який відповідає вашій задачі" (ea96e76) carried a
   leftover Elementor custom-width setting (a --width:98.186% custom
   property from before this widget's column was redesigned, resolving to
   a fixed 640px box) plus an inherited white-space:nowrap from its
   .soppk-title ancestor. With margin-left forced to 0 by this very rule
   (not auto), the 640px box sat flush against the container's left edge
   instead of centered, AND the nowrap sentence (needs ~1088px) overflowed
   past both edges of that box - a double bug (off-center AND overflowing
   text) invisible in the DOM inspector's "computed" tab unless you check
   scrollWidth vs clientWidth. width/max-width:none/white-space:normal
   below undo both, matching the reference heading's own free-flowing
   box (auto width = the full 1180px container, wraps normally). */
.page-id-536 .elementor-element-4b8d89f5 .elementor-heading-title,
.page-id-536 .elementor-element-ea96e76 .elementor-heading-title,
.page-id-536 .elementor-element-708a03a0 .elementor-heading-title {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  color: #073a3c !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
  white-space: normal !important;
  text-wrap: balance;
}

.page-id-536 .elementor-element-4b8d89f5 .elementor-heading-title strong,
.page-id-536 .elementor-element-ea96e76 .elementor-heading-title strong,
.page-id-536 .elementor-element-708a03a0 .elementor-heading-title strong {
  font-weight: 800 !important;
}

/* fix: the requested "tighten the gap" turned out to only be reachable by
   fixing a real inconsistency, not by shrinking anything below the
   reference. The reference heading's wrapper (elementor-element-48217a35)
   carries an explicit margin-bottom:16px, and its <h2> has margin:0 - the
   whole 16px gap to the subtitle comes from the WRAPPER alone.
   "Як ми працюємо" (4b8d89f5) sits in a plain column with no flex `gap`,
   so giving its wrapper the same margin-bottom:16px (and zeroing the
   <h2>'s own margin so it isn't ALSO adding 16px on top) reproduces the
   reference's exact 16px gap there.
   "Що отримують.../Відгуки" (708a03a0) and "Оберіть формат.../Працюємо за
   договором" (ea96e76) turned out to live in Elementor flex columns that
   ALSO carry their own `gap:20px` between the two stacked widgets - a
   margin on top of that flex gap is additive (gap and margin never
   collapse), so the same 16px margin there produced 36-46px, not 16px.
   For those two the fix is below: set the flex container's own `gap` to
   16px instead, and leave the widget's margin at 0 - see
   elementor-element-30e7e16e / elementor-element-120da36a further down. */
.page-id-536 .elementor-element-4b8d89f5 {
  margin-bottom: 16px !important;
}

.page-id-536 .elementor-element-4b8d89f5 .elementor-heading-title,
.page-id-536 .elementor-element-708a03a0 .elementor-heading-title,
.page-id-536 .elementor-element-ea96e76 .elementor-heading-title {
  margin-bottom: 0 !important;
}

/* fix: "Відгуки" (26fd11c2) used to be a small-caps kicker sitting ABOVE
   "Що отримують медичні заклади після роботи" (708a03a0) - reordered
   below via flex `order` (no _elementor_data edit, so nothing here can
   collide with Elementor's own editor/autosave state) so it now plays
   the same "subtitle below the heading" role the other 3 sections use,
   and is restyled to match that role instead of keeping its old kicker
   look (uppercase/bold/teal). */
.page-id-536 .elementor-element-30e7e16e {
  display: flex !important;
  flex-direction: column !important;
}

.page-id-536 .elementor-element-708a03a0 {
  order: 1 !important;
}

.page-id-536 .elementor-element-26fd11c2 {
  order: 2 !important;
}

/* fix: margin doesn't inherit, so the shared 42px bottom margin below only
   ever reached the inner <p> (".elementor-element-983788 p") - the widget's
   own outer wrapper div (.elementor-element-983788, the box that actually
   determines how far the NEXT section's content sits) kept its own
   margin-bottom from elsewhere (0, see the removed 6796ac93 widget-text-
   editor rule) and, since this element doesn't establish a margin-collapse
   boundary, that 0 - not the inner <p>'s 42px - was what really governed
   the gap to the process steps below (measured 0px live). Adding the bare
   wrapper selector here (".elementor-element-983788", no descendant) gives
   the div itself the same 42px directly, closing that gap for real. */
.page-id-536 .elementor-element-983788,
.page-id-536 .elementor-element-983788 .elementor-heading-title,
.page-id-536 .elementor-element-983788 p,
.page-id-536 .elementor-element-6c69a85d,
.page-id-536 .elementor-element-6c69a85d *,
.page-id-536 .elementor-element-26fd11c2,
.page-id-536 .elementor-element-26fd11c2 * {
  width: auto !important;
  max-width: 850px !important;
  margin: 0 auto 42px !important;
  text-wrap: balance;
  color: #557273 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* fix: section top padding matched to the reference's 28px (desktop) /
   72px (mobile handled below) so all 4 headings sit the same distance
   from whatever precedes them. Bottom padding is left as each section's
   own previously-tuned value - it governs the handoff to different
   following content per section (cards, timeline, footer) rather than
   anything heading-related, so copying the reference's 0 there would
   have been copying an artifact of ITS specific neighbor, not a real
   shared design value. */
body.page-id-536 .elementor-element-6796ac93 {
  padding-top: 28px !important;
}

/* fix: "зменшити відстань між Швидким контактом і Відгуками" - split out
   of the shared 6796ac93/3d7a0745 rule below (a different, unrelated
   section further up the page) so that section's own top padding stays
   untouched. Desktop was later reduced further still - see the
   min-width:769px rule near the two hidden wrapper-padding fixes below
   - this 14px value is what tablet/mobile keep (explicitly left alone
   per request; the actual measured gap to the heading there is still
   the larger, pre-existing one). */
body.page-id-536 .elementor-element-3d7a0745 {
  padding-top: 14px !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-6796ac93 {
    padding-top: 72px !important;
  }

  body.page-id-536 .elementor-element-3d7a0745 {
    padding-top: 36px !important;
  }
}

/* fix: "Оберіть формат, який відповідає вашій задачі" (35cb7fa4) was the
   one outlier at padding-top:0 while the other 3 heading-holding sections
   above all use the reference's 28px (72px mobile) - closing that gap so
   the heading sits the same distance from the previous section everywhere. */
body.page-id-536 .elementor-element-35cb7fa4 {
  padding-top: 28px !important;
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-35cb7fa4 {
    padding-top: 72px !important;
  }
}

/* fix: the reference's subtitle-to-next-content gap is exactly its own
   42px bottom margin (elementor-element-4db90202), because the section
   right after it (43e94cea) has 0 extra top padding of its own. Two of
   the 4 target sections stacked EXTRA space on top of that same 42px:
   - elementor-element-30e7e16e (wraps 708a03a0 heading + 26fd11c2
     subtitle) still carried its own margin-bottom:40px from before the
     subtitle itself carried a margin, plus a default Elementor container
     padding-bottom:10px - together with the testimonial grid's own
     default padding-top:10px, the "Що отримують.../Відгуки" gap measured
     102px live instead of 42px.
   - elementor-element-120da36a (wraps the "Оберіть формат" kicker+title)
     had the same kind of leftover margin-bottom:20px plus the same
     default 10px container padding - measured 72px instead of 42px.
   Zeroing the redundant margins/padding here leaves the subtitle's own
   42px as the only source of the gap in both sections, matching the
   reference exactly. */
/* fix: "заголовок «Що отримують...» надто далеко від верхнього блоку" -
   two hidden Elementor defaults, neither exposed as a control anywhere,
   made up most of the measured 74px (desktop) / 96px (mobile <=767px)
   gap to the heading: elementor-element-30e7e16e's own default top
   padding (10px), and the section's internal boxed-content wrapper
   (.e-con-inner, not directly addressable) default top padding (28px) -
   the single largest component. Neither was ever an intentional design
   value at any width (just Elementor's unstyled default), so zeroed
   unconditionally rather than only on desktop - this also fixes the
   inconsistent mobile jump (96px vs desktop's 32px) without touching
   the mobile box-to-box gap itself (elementor-element-3d7a0745's own
   padding-top, 36px on mobile - confirmed correct in an earlier request
   and left untouched here). Same .e-con-inner-zeroing pattern already
   used for the footer's equivalent wrapper. */
body.page-id-536 .elementor-element-30e7e16e {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.page-id-536 .elementor-element-3d7a0745 > .e-con-inner {
  padding-top: 0 !important;
}

/* fix (cont.): desktop-only - brings the measured gap from 74px to
   32px there. Left out of the mobile/tablet rule above since it would
   also shrink the box-to-box gap that request confirmed at 42px. */
@media (min-width: 769px) {
  body.page-id-536 .elementor-element-3d7a0745 {
    padding-top: 10px !important;
  }
}

body.page-id-536 .elementor-element-60966af {
  padding-top: 0 !important;
}

body.page-id-536 .elementor-element-120da36a {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* fix: these 2 flex columns (see the comment near elementor-element-4b8d89f5
   above) space their 2 stacked widgets with their own flex `gap:20px`
   instead of widget margins - a gap the earlier reference-matching pass
   didn't touch, so the heading-to-subtitle distance in these 2 sections
   stayed at 20px, not the reference's 16px, however the widgets' own
   margins were set. Overriding the gap directly is the only way to
   actually change that distance here. */
body.page-id-536 .elementor-element-30e7e16e,
body.page-id-536 .elementor-element-120da36a {
  gap: 16px !important;
}

/* fix: elementor-element-4729ee3f (the "Оберіть формат" kicker+title
   column, nested inside 120da36a) had its own default 10px bottom padding
   - invisible until measured, since the visible kicker inside it is
   display:none, but the padding box itself still added 10px between the
   title and "Працюємо за договором." below it. */
body.page-id-536 .elementor-element-4729ee3f {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Package card compacting - originally built for "СТАРТ" only
   (elementor-element-49a73e9b), then extended to all 4 package cards on
   request ("всі модулі зпройдись" - go through all the modules):
   "НАВЧАННЯ" (2fb4fbea), "ВПРОВАДЖЕННЯ" (62ec6be3) and "БАЗОВИЙ АУДИТ"
   (653deab4) get the exact same treatment as "СТАРТ" now. Still scoped to
   these 4 card IDs specifically (not the bare .soppk-* classes), so
   nothing outside the package grid is affected. */

/* fix: an earlier pass opted these cards out of the grid's row-stretch
   (align-self:start) so each one could shrink to its own, now-compacted
   content - but with 4 cards whose content genuinely differs in length,
   that also gave each card a different height, so the 4 "Обрати
   пакет"/"Замовити супровід" buttons no longer lined up in one row.
   Reverted to the grid's default stretch (all 4 cards match the row's
   tallest card again) - the shared .soppk-btn rule already has
   margin-top:auto for exactly this reason, so once the cards are equal
   height again that auto margin pushes every button down to the same
   bottom edge on its own; the tightened internal spacing from this pass
   stays untouched, it just no longer determines the card's outer height. */
.page-id-536 .elementor-element-49a73e9b,
.page-id-536 .elementor-element-2fb4fbea,
.page-id-536 .elementor-element-62ec6be3,
.page-id-536 .elementor-element-653deab4 {
  padding: 22px 24px 11px !important;
}

.page-id-536 .elementor-element-49a73e9b .soppk-card-text,
.page-id-536 .elementor-element-2fb4fbea .soppk-card-text,
.page-id-536 .elementor-element-62ec6be3 .soppk-card-text,
.page-id-536 .elementor-element-653deab4 .soppk-card-text {
  margin-bottom: 8px !important;
}

/* fix: "відцентруй список як єдину групу, текст усередині - по лівому
   краю". The shared .soppk-list rule forces the <ul> to width:100% with
   text-align:center, so every line (even short ones) stretches full card
   width and its own text sits centered independently - there's no single
   "list block" to center, each line centers on its own. Shrinking the
   <ul> to fit-content lets it size to its own widest line; the existing
   justify-items:center on the list's grid wrapper then centers that one
   block as a whole within the card, and text-align:left on the <ul>/<li>
   aligns the wrapped text inside it to the left - group centered, text
   left-aligned, as asked. max-width:100% keeps it from overflowing the
   card if the widest line is ever wider than the card itself; the text
   still wraps normally (no white-space:nowrap set), so mobile just wraps
   long lines (e.g. "визначення базового рівня та оцінка прогресу") instead
   of overflowing. */
.page-id-536 .elementor-element-49a73e9b .soppk-list,
.page-id-536 .elementor-element-2fb4fbea .soppk-list,
.page-id-536 .elementor-element-62ec6be3 .soppk-list,
.page-id-536 .elementor-element-653deab4 .soppk-list {
  margin: 14px 0 16px !important;
}

.page-id-536 .elementor-element-49a73e9b .soppk-list ul,
.page-id-536 .elementor-element-2fb4fbea .soppk-list ul,
.page-id-536 .elementor-element-62ec6be3 .soppk-list ul,
.page-id-536 .elementor-element-653deab4 .soppk-list ul {
  width: fit-content !important;
  max-width: 100% !important;
  text-align: left !important;
}

.page-id-536 .elementor-element-49a73e9b .soppk-list li,
.page-id-536 .elementor-element-2fb4fbea .soppk-list li,
.page-id-536 .elementor-element-62ec6be3 .soppk-list li,
.page-id-536 .elementor-element-653deab4 .soppk-list li {
  width: auto !important;
  text-align: left !important;
}

/* fix: the button's own margin-top is back to the shared rule's auto (not
   overridden to 0 any more) - see the align-self comment above, this is
   what actually pins it to the bottom of the now equal-height card.
   "підніми ряд кнопок на половину білого поля" (raise the button ROW by
   half of the white space) - "ряд" (row) means the 4 buttons need to stay
   on one shared line, so this can't be solved per-card with
   margin-bottom:auto (each card's own leftover space differs with its own
   content length - 36px to 106px measured across the 4 cards - so
   centering each button in its OWN leftover space would un-align the row
   again, one button per height). A single fixed px value instead, applied
   to all 4 buttons equally, shifts the whole row up by the same amount
   everywhere - the row stays perfectly level, just higher. 36px (roughly
   half the measured 36-106px range, and safely under the tightest card's
   own 36px gap so no button ever crowds its own list) is the shared
   value. */
.page-id-536 .elementor-element-49a73e9b .soppk-btn,
.page-id-536 .elementor-element-2fb4fbea .soppk-btn,
.page-id-536 .elementor-element-62ec6be3 .soppk-btn,
.page-id-536 .elementor-element-653deab4 .soppk-btn {
  /* fix: "зменш цю відстань на половину" - the visible white gap below
     the button (button's own 36px margin-bottom + the card's own 22px
     bottom padding = 59px measured) halved to ~29px, split proportionally
     across both contributors (18px + 11px, see the card padding rule
     above) rather than zeroing one of them, so it still reads as the same
     kind of spacing, just tighter. */
  margin-bottom: 18px !important;
}

/* fix: "зелені плашки" (the .soppk-subprice pills - "разова консультація",
   "тренінг для групи", "комплексний супровід", "експрес-діагностика") -
   separate element from the buttons above, and a separate request. All 4
   are already on one horizontal line (the description block above them
   has a fixed min-height:78px regardless of text length, so the badges
   never actually drift out of row - "усі плашки мають залишатися на одній
   горизонтальній лінії" was already true and stays true here, since this
   rule applies the same value to all 4 cards). The 28px gap above each
   badge is description margin-bottom (8px, from the earlier compacting
   pass - left untouched) plus this card's flex column `gap:20px`
   (Elementor's own inter-widget spacing, shared by every pair of stacked
   widgets in the card, not just this one). Reducing that 28px by ~50%
   (to ~14px, "до середини білого простору") without touching the shared
   flex `gap` - which would also shrink the OTHER 3 gaps in the card
   (title-to-text, badge-to-list, list-to-button) that the request says
   not to touch - means pulling the badge up on its own with a negative
   margin-top instead: -14px brings the total from 28px down to 14px. */
.page-id-536 .elementor-element-49a73e9b .soppk-subprice,
.page-id-536 .elementor-element-2fb4fbea .soppk-subprice,
.page-id-536 .elementor-element-62ec6be3 .soppk-subprice,
.page-id-536 .elementor-element-653deab4 .soppk-subprice {
  margin-top: -14px !important;
}

/* fix: "цю відстань скороти на половину" (halve the white gap between the
   list and the button), "а цю [button-to-card-bottom] залиш без змін"
   (leave that other one unchanged).
   First attempt here replaced .soppk-btn's margin-top:auto with a fixed
   px value per card (roughly half each card's own previously-measured
   gap) - deployed, then measurement showed it had silently broken the
   button row alignment fixed 2 requests ago (buttons landed at 4
   different heights again: 3022/3045/3033/3056px). Root cause: auto isn't
   just "whatever's left" for ONE card in isolation - it's what keeps every
   card's button at the SAME absolute row position despite each card's
   title/description/list needing different amounts of space above the
   list. Half of four DIFFERENT gaps are four DIFFERENT numbers, so fixing
   each to "half its own gap" put every button back at a different height.
   Reverted to margin-top:auto (the version that's actually correct and
   was live before this request) rather than ship a misaligned row.
   Shrinking this gap further while keeping the row aligned needs the ROW
   itself shorter, and the row's auto height is set by "БАЗОВИЙ АУДИТ"
   needing ~522px for its own bullet list to wrap at this column's actual
   274px width - genuine content, not spacing. That's not reachable
   without either touching the list/font (against "не змінюй" for
   everything else) or accepting a real risk of clipping that card's own
   text if the height is forced down further than its true requirement,
   which wasn't precisely measurable here - flagging this rather than
   guessing again and risking a second silent regression. */
body.page-id-536 .elementor-element-49a73e9b .soppk-btn,
body.page-id-536 .elementor-element-2fb4fbea .soppk-btn,
body.page-id-536 .elementor-element-62ec6be3 .soppk-btn,
body.page-id-536 .elementor-element-653deab4 .soppk-btn {
  margin-top: auto !important;
}

/* fix: this whole gap-reduction thread for this section (padding-top
   40px -> 20px -> 10px -> 5px, then a subtitle-margin change that was
   already reverted) was itself reverted on request ("поверни як було") -
   back to the original 40px set earlier in this file, so no override is
   left here for either property. */

/* fix: gap between the last "Як ми працюємо" step (elementor-element-
   45c6db1) and the "Оберіть формат, який відповідає вашій задачі" heading
   (elementor-element-35cb7fa4) below it, retuned to explicit reviewed
   target ranges per breakpoint (devtools-verified 1440/1024/768/390
   widths): ~80px desktop, ~56px tablet, ~40px mobile combined. A prior
   pass here only ever touched 35cb7fa4's own top padding (28px -> 14px
   desktop, 72px -> 36px mobile) - per request this is balanced across
   BOTH sides of the boundary (45c6db1's bottom padding, which had been at
   a flat 0 this whole time, plus 35cb7fa4's top padding) rather than
   loading the whole gap onto one section or reaching for a negative
   margin/position hack. This block supersedes the single-sided 14px/36px
   values above (never deployed) - kept last in the cascade like every
   other "final audit" block in this file. */
body.page-id-536 .elementor-element-45c6db1 {
  padding-bottom: 40px !important;
}

body.page-id-536 .elementor-element-35cb7fa4 {
  padding-top: 40px !important;
}

@media (max-width: 1024px) {
  body.page-id-536 .elementor-element-45c6db1 {
    padding-bottom: 28px !important;
  }

  body.page-id-536 .elementor-element-35cb7fa4 {
    padding-top: 28px !important;
  }
}

@media (max-width: 767px) {
  body.page-id-536 .elementor-element-45c6db1 {
    padding-bottom: 20px !important;
  }

  body.page-id-536 .elementor-element-35cb7fa4 {
    padding-top: 20px !important;
  }
}

/* fix: "висота білих карток = висота зелених кнопок над ними, тільки на
   desktop" - the 3 hero benefit cards (СОП/Аудит/Онлайн) shared one
   unguarded min-height:88px rule that applied to both tablet (768-1024)
   and desktop (1025+) alike - this codebase's only existing breakpoints
   for these cards are that unguarded rule plus a max-width:767 mobile
   override, nothing distinguishes tablet from desktop. Native
   min_height was set to 80.375px (the green buttons' own measured
   height) via EMCP Tools on all 3 cards, but the unguarded 88px
   !important rule above still wins the cascade over it - same gap as
   elsewhere in this project where a native value doesn't reach the
   page on its own. Scoped to min-width:1025px (this codebase's
   established tablet/desktop split, e.g. the footer's own
   max-width:1024 tablet block) so tablet keeps the existing 88px
   untouched and only desktop gets the new value - mirrors the now-
   correct native setting instead of fighting it. */
@media (min-width: 1025px) {
  body.page-id-536 .elementor-element-63b843c3,
  body.page-id-536 .elementor-element-328b0e85,
  body.page-id-536 .elementor-element-4b1afa7a {
    min-height: 80.375px !important;
    height: auto !important;
  }
}