/* Starla additions on top of the Counsolve theme (home_3 colours). */
:root {
  --st-teal: #208c84;
  --st-teal-light: #e6f4f2;
  --st-dark: #262b35;
  --st-green: #5cc58f;
  --st-muted: #6f7680;
}

.st-logo { height: 34px; width: auto; display: block; }
.main-header .logo-box img.st-logo { max-width: none; }
.footer-logo .st-logo { height: 38px; }

/* Header CTA: keep on one line */
.main-header .menu-right-content .btn-box .theme-btn { white-space: nowrap; }

/* Integrations strip */
.st-integrations .clients-logo-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; }
.st-integrations .clients-logo-list li { float: none; width: auto; }
.st-int { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.75); font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 20px; }
.st-int img { width: 26px; height: 26px; opacity: .75; }

/* Problem */
.st-problem { padding-top: 100px; }
.st-problem-title { max-width: 760px; margin: 0 auto 60px; }
.st-problem-title p { margin-top: 18px; font-size: 17px; line-height: 28px; }
.st-problem .funfact-block-two .count-outer .count-text { font-size: 48px; }
.st-problem .funfact-block-two p strong { color: var(--st-dark); font-weight: 700; }

/* How it works step text */
.st-steps .service-block-two { margin-bottom: 30px; }
.st-step-text { margin-top: 18px; color: var(--st-muted); font-size: 15px; line-height: 24px; padding-right: 30px; }

/* Story */
.st-story-intro { margin-top: 16px; font-size: 16px; line-height: 26px; }
.st-thumb-starla { background: #fff; display: flex !important; align-items: center; justify-content: center; }
.st-thumb-starla img { width: 70% !important; height: auto !important; border-radius: 0 !important; }
.testimonial-style-three .text-box h5 span { display: inline-block; font-size: 22px; margin: 4px 0; }

/* Dashboard card */
.st-dash { background: #fff; border: 1px solid #e5eaee; border-radius: 30px; padding: 32px; box-shadow: 0 20px 50px rgba(38,43,53,.06); }
.st-dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.st-dash-title { display: flex; align-items: center; gap: 10px; font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 20px; color: var(--st-dark); }
.st-dash-title img { width: 26px; height: 26px; }
.st-dash-note { font-size: 13px; color: var(--st-muted); }
.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 26px; }
.st-kpi { background: var(--st-teal-light); border-radius: 16px; padding: 16px 18px; }
.st-kpi span { display: block; font-size: 13px; color: var(--st-muted); }
.st-kpi strong { display: block; font-family: 'Urbanist', sans-serif; font-size: 28px; line-height: 1.2; color: var(--st-dark); margin-top: 4px; font-variant-numeric: tabular-nums; }
.st-dash-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.st-dash h6 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 15px; color: var(--st-dark); margin-bottom: 14px; }
.st-bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.st-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.st-bars span { width: 100%; background: var(--st-teal); border-radius: 8px 8px 3px 3px; }
.st-bars small { font-size: 12px; color: var(--st-muted); }
.st-reasons ul li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #edf0f2; font-size: 14px; }
.st-reasons ul li b { color: var(--st-dark); }

/* Security band */
.st-security .text-box h2 { margin-bottom: 6px; }
.st-sec-link { color: #fff !important; font-weight: 600; }
.st-sec-link i { font-size: 11px; margin-left: 4px; }
.st-sec-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; position: relative; z-index: 2; }
.st-sec-list li { color: #fff; font-family: 'Urbanist', sans-serif; font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 12px; }
.st-sec-list li i { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }

/* FAQ on the homepage */
.st-faq { padding-top: 110px; }
.st-faq .faq-content { padding-top: 10px; }

/* CTA form */
.st-cta-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-cta-form input { flex: 1 1 220px; min-width: 0; height: 54px; border-radius: 30px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; padding: 0 22px; font-size: 15px; }
.st-cta-form input::placeholder { color: rgba(255,255,255,.6); }
.st-form-note { flex-basis: 100%; color: var(--st-green) !important; font-weight: 600; margin: 0; min-height: 1px; }

@media (max-width: 991px) {
  .st-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-dash-body { grid-template-columns: 1fr; }
  .st-sec-list { margin-top: 20px; }
}
@media (max-width: 575px) {
  .st-dash { padding: 22px; border-radius: 22px; }
  .st-sec-list { grid-template-columns: 1fr; }
  .st-int { font-size: 16px; }
}

/* Header CTA (the template hides it on home 3) */
@media (min-width: 992px) {
  .header-style-three .btn-box { display: block !important; margin-right: 0; }
}
.header-style-three .btn-box .theme-btn { background: var(--st-teal) !important; color: #fff !important; padding: 12px 30px; text-transform: none; }

/* Keep sentence case on buttons and nav, as in the copy */
.theme-btn, .main-menu .navigation > li > a { text-transform: none !important; }

/* FAQ accents in the home 3 teal */
.st-faq .accordion .acc-btn.active .icon-box { background: var(--st-teal) !important; }
.st-faq .faq-content:before, .st-faq .faq-content:after { background: var(--st-teal-light) !important; }
.st-faq .accordion-content { background: transparent; }
.st-faq .accordion-box { background: linear-gradient(90deg, #e6f4f2, #eef7f5 100%) !important; }

/* The template hides the home 3 logo on small screens; Starla needs it */
@media (max-width: 1199px) {
  .header-style-three .logo-box { display: block !important; }
  .header-style-three .menu-area { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .header-style-three .outer-box { width: 100%; }
  .header-style-three .mobile-nav-toggler { order: 2; margin-left: auto; }
}

/* Header: match the 1200px content width instead of running edge to edge */
.header-style-three .header-lower .outer-container,
.header-style-three .sticky-header .outer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.header-style-three .header-lower .outer-box,
.header-style-three .sticky-header .outer-box { padding-left: 0 !important; padding-right: 0 !important; }

/* Header: a white floating bar, slightly wider than the 1200px content */
.header-style-three .header-lower { padding-top: 18px; }
.header-style-three .header-lower .outer-container,
.header-style-three .sticky-header .outer-container {
  max-width: 1290px;
  background: #ffffff;
  border-radius: 40px;
  padding: 10px 14px 10px 30px !important;
  box-shadow: 0 10px 30px rgba(38, 43, 53, 0.08);
}
.header-style-three .sticky-header { background: transparent !important; box-shadow: none !important; padding-top: 10px; }
@media (max-width: 1330px) {
  .header-style-three .header-lower .outer-container,
  .header-style-three .sticky-header .outer-container { margin-left: 15px; margin-right: 15px; }
}
/* Slimmer bar */
.header-style-three .logo-box { padding-top: 14px !important; padding-bottom: 14px !important; }
.header-style-three .main-menu .navigation > li > a { padding-top: 14px !important; padding-bottom: 14px !important; }
.header-style-three .header-lower .outer-box { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 1199px) {
  .header-style-three .header-lower .outer-container { padding: 6px 16px 6px 22px !important; }
}
.header-style-three .main-menu .navigation > li > a:before { top: 14px !important; }
.header-style-three .btn-box .theme-btn, .header-style-three .btn-box .theme-btn:before { border-radius: 30px !important; }

/* ---- Hero background colour ----
   Saved original (Counsolve home 3 light teal): #e7f5f5
   To try another colour, change --st-hero-bg. To go back, set --st-hero-bg and --st-hero-panel to their -original values. */
:root {
  --st-hero-bg-original: #e7f5f5;
  --st-hero-panel-original: #d7eaea;
  --st-hero-bg: #efe4d6;     /* warm sand (trial) */
  --st-hero-panel: #e4d3bf;  /* deeper warm tone for the right-hand panel (trial) */
}
/* Hero shapes take their colour from the tokens above */
.banner-style-three .pattern-layer .pattern-1 {
  background-image: none !important; background-color: var(--st-hero-panel);
  -webkit-mask: url(../images/shape/shape-21.png) no-repeat; mask: url(../images/shape/shape-21.png) no-repeat;
}
.banner-style-three .pattern-layer .pattern-3 {
  background-image: none !important; background-color: var(--st-hero-bg);
  -webkit-mask: url(../images/shape/shape-23.png) no-repeat; mask: url(../images/shape/shape-23.png) no-repeat;
}
.banner-style-three { background: var(--st-hero-bg) !important; }

/* Hero quarter circle: Starla yellow (brand guidelines). Original was green #57c396. */
:root { --st-hero-quarter-original: #57c396; --st-hero-quarter: #f8d247; }
.banner-style-three .image-box .shape .shape-1 {
  background-image: none !important; background-color: var(--st-hero-quarter);
  -webkit-mask: url(../images/shape/shape-19.png) no-repeat; mask: url(../images/shape/shape-19.png) no-repeat;
}

/* Header bar: wider and slimmer */
.header-style-three .header-lower .outer-container,
.header-style-three .sticky-header .outer-container { max-width: 1380px; padding: 6px 8px 6px 28px !important; }
.header-style-three .logo-box { padding-top: 8px !important; padding-bottom: 8px !important; }
.header-style-three .main-menu .navigation > li > a { padding-top: 10px !important; padding-bottom: 10px !important; }
.header-style-three .main-menu .navigation > li > a:before { top: 10px !important; }
.header-style-three .btn-box .theme-btn { padding: 10px 26px !important; }
@media (max-width: 1420px) {
  .header-style-three .header-lower .outer-container,
  .header-style-three .sticky-header .outer-container { margin-left: 15px; margin-right: 15px; }
}

/* Hero quarter circle (bottom right): Voxly Blue. Original was purple #955894. */
:root { --st-hero-quarter2-original: #955894; --st-hero-quarter2: #0066ff; }
.banner-style-three .image-box .shape .shape-2 {
  background-image: none !important; background-color: var(--st-hero-quarter2);
  -webkit-mask: url(../images/shape/shape-20.png) no-repeat; mask: url(../images/shape/shape-20.png) no-repeat;
}

/* Header bar: slightly see-through white with a soft blur */
.header-style-three .header-lower .outer-container,
.header-style-three .sticky-header .outer-container {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header-style-three .sticky-header, .main-header .sticky-header { border-bottom: 0 !important; }

/* Nav: no arrow icon on the active/hovered item */
.main-menu .navigation > li > a:before { display: none !important; content: none !important; }
.main-menu .navigation > li > a { padding-left: 0 !important; }
.header-style-three .main-menu .navigation > li { margin: 0 22px !important; }

/* Hero: spots / talks / keeps steps */
.st-hero-steps { display: flex; align-items: stretch; gap: 10px; margin: 18px 0 36px; flex-wrap: wrap; }
.st-hero-step { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.75); border-radius: 18px; padding: 12px 16px 12px 12px; box-shadow: 0 8px 22px rgba(38,43,53,.06); flex: 1 1 0; min-width: 0; }
.st-hero-step b { display: block; font-family: 'Urbanist', sans-serif; font-size: 18px; font-weight: 700; color: #262b35; line-height: 1.1; }
.st-hero-step span:not(.st-hs-icon) { display: block; font-size: 13px; line-height: 1.35; color: #6f7680; margin-top: 2px; }
.st-hs-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #e6f4f2; color: #208c84; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.st-hs-arrow { align-self: center; color: #208c84; font-size: 12px; opacity: .7; }
.st-hs-keep { background: #208c84; }
.st-hs-keep b, .st-hs-keep span:not(.st-hs-icon) { color: #fff !important; }
.st-hs-keep .st-hs-icon { background: #f8d247; color: #262b35; }
@media (max-width: 767px) {
  .st-hero-steps { flex-direction: column; }
  .st-hs-arrow { transform: rotate(90deg); margin-left: 26px; }
}
@media (min-width: 768px) { .st-hero-step span:not(.st-hs-icon) { white-space: nowrap; } .st-hero-step { flex: 0 1 auto; } }

/* Hero steps v2: lead-in, equal widths, clean connectors */
.st-hero-lead { font-family: 'Urbanist', sans-serif; font-size: 17px; font-weight: 600; color: #262b35; margin: 22px 0 12px !important; }
.st-hero-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0 !important; }
.st-hero-step { position: relative; flex: none !important; padding: 12px 12px 12px 10px; gap: 10px; }
.st-hero-step span:not(.st-hs-icon) { white-space: normal !important; }
.st-hs-icon { flex: 0 0 36px; width: 36px; height: 36px; font-size: 16px; }
/* connector: small white disc with a thin chevron, sitting in the gap */
.st-hero-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -15px; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px #efe4d6, 0 2px 6px rgba(38,43,53,.15);
  transform: translateY(-50%);
}
.st-hero-step:not(:last-child)::before {
  content: ""; position: absolute; top: 50%; right: -10px; z-index: 3;
  width: 5px; height: 5px; border-top: 1.5px solid #208c84; border-right: 1.5px solid #208c84;
  transform: translate(-1px, -50%) rotate(45deg);
}
@media (max-width: 767px) {
  .st-hero-steps { grid-template-columns: 1fr; gap: 14px; }
  .st-hero-step:not(:last-child)::after { top: auto; bottom: -15px; right: auto; left: 50%; transform: translateX(-50%); }
  .st-hero-step:not(:last-child)::before { top: auto; bottom: -10px; right: auto; left: 50%; transform: translate(-50%, 0) rotate(135deg); }
}
.st-hero-step:not(:last-child)::after { width: 22px; height: 22px; right: -19px; }
.st-hero-step:not(:last-child)::before { width: 7px; height: 7px; right: -10px; border-width: 2px; }
@media (max-width: 767px) {
  .st-hero-step:not(:last-child)::after { bottom: -18px; right: auto; }
  .st-hero-step:not(:last-child)::before { bottom: -9px; right: auto; }
}

/* Hero: concentric background rings, as on voxlyvision.com */
.banner-style-three { position: relative; overflow: hidden; }
.banner-style-three::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 28% 18%, transparent 0 159px, rgba(120, 90, 60, 0.13) 159px 160.5px);
  -webkit-mask-image: radial-gradient(circle at 28% 18%, #000 30%, transparent 85%);
  mask-image: radial-gradient(circle at 28% 18%, #000 30%, transparent 85%);
}
.banner-style-three .pattern-layer, .banner-style-three .auto-container { position: relative; z-index: 1; }
.banner-style-three .pattern-layer { position: absolute; }
.banner-style-three .pattern-layer { position: absolute !important; left: 0; top: 0; width: 100%; height: 100%; }
/* Rings centred on the page, raised towards the top (Voxly Vision style), drawn over the side panel */
.banner-style-three::before {
  z-index: 1;
  background-image: repeating-radial-gradient(circle at 50% 12%, transparent 0 159px, rgba(120, 90, 60, 0.14) 159px 160.5px) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 12%, #000 35%, transparent 90%) !important;
  mask-image: radial-gradient(circle at 50% 12%, #000 35%, transparent 90%) !important;
}
.banner-style-three .pattern-layer { z-index: 0 !important; }
.banner-style-three .auto-container { z-index: 2 !important; }
/* Rings sit directly on the background, behind every other hero layer */
.banner-style-three::before { z-index: 0 !important; }
.banner-style-three .pattern-layer { z-index: 1 !important; }
.banner-style-three::before { display: none !important; } /* rings removed */

/* Hero steps v3: photo on top, icon + copy below */
.st-hero-step { flex-direction: column; align-items: stretch !important; padding: 0 !important; gap: 0 !important; overflow: visible; border-radius: 18px; }
.st-hs-photo { height: 118px; border-radius: 18px 18px 0 0; overflow: hidden; }
.st-hs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.08); display: block; }
.st-hs-body { display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px; }
.st-hs-keep { background: #208c84; }
.st-hs-keep .st-hs-photo { border-bottom: 0; }
/* connectors sit level with the photo/body seam */
.st-hero-step:not(:last-child)::after { top: 118px !important; }
.st-hero-step:not(:last-child)::before { top: 118px !important; }
@media (max-width: 767px) {
  .st-hs-photo { height: 150px; }
  .st-hero-step:not(:last-child)::after { top: auto !important; }
  .st-hero-step:not(:last-child)::before { top: auto !important; }
}

/* Buttons: no sliding colour overlay on hover; a quick lift and shadow instead */
.theme-btn:before, .theme-btn:after { display: none !important; }
.theme-btn, .st-cta-form button { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important; }
.theme-btn:hover, .st-cta-form button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(32, 140, 132, 0.35);
  filter: brightness(1.06);
  color: #fff !important;
}
.theme-btn:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 10px rgba(32, 140, 132, 0.25); }

/* Hero cards: one consistent colour across the row, Starla Red (brand guidelines #D54637) */
:root { --st-card-colour: #d54637; }
.st-hero-step, .st-hs-keep { background: var(--st-card-colour) !important; box-shadow: 0 10px 24px rgba(213, 70, 55, 0.18); }
.st-hero-step b, .st-hero-step span:not(.st-hs-icon) { color: #fff !important; }
.st-hero-step span:not(.st-hs-icon) { opacity: .85; }
.st-hero-step .st-hs-icon, .st-hs-keep .st-hs-icon { background: #fff !important; color: var(--st-card-colour) !important; }
.st-hero-step:not(:last-child)::before { border-color: var(--st-card-colour) !important; }

/* All buttons: fully rounded (no squared bottom-right corner); hover pops without a shadow */
.theme-btn, .theme-btn:before, .st-cta-form button { border-radius: 30px !important; }
.theme-btn:hover, .st-cta-form button:hover, .theme-btn:active { box-shadow: none !important; }

/* Hero spacing: give the lead-in and the cards room to breathe */
.st-hero-lead { margin: 26px 0 22px !important; }
.st-hero-steps { margin-bottom: 44px !important; }

/* Hero: the thin teal line sits exactly on the panel edge (acts as its border) */
.banner-style-three .pattern-layer .pattern-2 {
  width: 776px !important; background-image: none !important; background-color: #208c84;
  -webkit-mask: url(../images/shape/shape-21-edge.png) no-repeat; mask: url(../images/shape/shape-21-edge.png) no-repeat;
}

/* Hero above the fold: tighter top padding, slightly smaller headline, shorter card photos */
@media (min-width: 992px) {
  .banner-style-three { padding-top: 160px !important; padding-bottom: 90px !important; }
  .banner-style-three .content-box h2 { font-size: 72px !important; line-height: 82px !important; margin-bottom: 0 !important; }
  .st-hs-photo { height: 100px; }
  .st-hero-step:not(:last-child)::after, .st-hero-step:not(:last-child)::before { top: 100px !important; }
  .st-hero-steps { margin-bottom: 30px !important; }
  .banner-style-three .content-box .support-box { margin-bottom: 26px !important; }
}
@media (min-width: 992px) {
  .banner-style-three .image-box { margin-top: 36px !important; }
  .banner-style-three .content-box .support-box { margin-bottom: 34px !important; }
}
.banner-style-three .content-box .support-box .shape { display: none !important; } /* curly arrow clashed with the button */

/* Hero cards: Starla light blue (the star segment next to yellow), replacing Starla Red */
:root { --st-card-colour: #35a6dd; }
.st-hero-step, .st-hs-keep { box-shadow: 0 10px 24px rgba(53, 166, 221, 0.20) !important; }

/* ---- Eyebrow labels as pills ---- */
.sec-title .sub-title{
  padding: 7px 18px 6px !important;
  border-radius: 30px !important;
  background: rgba(27,140,140,0.10) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  letter-spacing: 0.04em;
  margin-bottom: 16px !important;
}
.sec-title .sub-title:before{ display: none !important; }
.sec-title.light .sub-title{ background: rgba(255,255,255,0.14) !important; }

/* ---- Problem section: photos instead of icons ---- */
.st-problem .funfact-block-two .inner-box{ padding-left: 0 !important; margin-bottom: 30px; }
.st-problem .st-problem-photo{
  position: relative; height: 220px; border-radius: 20px; overflow: hidden; margin-bottom: 26px;
}
.st-problem .st-problem-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.st-problem .funfact-block-two:hover .st-problem-photo img{ transform: scale(1.04); }
.st-problem .funfact-block-two .inner-box .count-outer{ padding-top: 0 !important; }
.st-problem .funfact-block-two .inner-box .count-outer:before{ display: none !important; }
@media (max-width: 767px){ .st-problem .st-problem-photo{ height: 200px; } }

/* Monitoring section: keep the small overlapping photo at template size */
.about-style-three .image-box .image-2{ width: 250px !important; height: 400px !important; }
.about-style-three .image-box .image-2 img{ width: 250px !important; height: 400px !important; object-fit: cover; object-position: 60% center; }
.st-hs-photo img[src*="hero-dashboard"]{ object-position: center top !important; transform: none !important; }
.st-hs-photo img[src*="hero-contact"]{ object-position: center 35% !important; transform: none !important; }

/* How it works cards: warm brown instead of pale teal */
.st-steps .service-block-two .inner-box,
.st-steps .service-block-two .link-box{ background: var(--st-hero-bg) !important; }
.st-steps .service-block-two .link-box a{ background: var(--st-hero-panel) !important; }
.st-steps .service-block-two:hover .inner-box,
.st-steps .service-block-two:hover .link-box{ background: #fff !important; }

/* Story image: realistic photo, softer corners */
.testimonial-style-three .image-box .image,
.testimonial-style-three .image-box .image img{ border-radius: 30px 30px 0 30px !important; }
.testimonial-style-three .image-box .image img{ height: 640px; object-fit: cover; object-position: 30% center; }
@media (max-width: 767px){ .testimonial-style-three .image-box .image img{ height: 440px; } }
.testimonial-style-three .image-box .text-box h5{ font-size: 15px !important; line-height: 24px !important; }

/* Segment line in hero */
.st-hero-seg{ display:inline-block; margin: 0 0 14px !important; padding: 6px 16px; border-radius: 30px; background: rgba(255,255,255,0.6); color: #1b8c8c; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: .02em; }
.st-hero-seg{ margin: 24px 0 0 !important; }
.st-hero-seg + .st-hero-lead{ margin-top: 16px !important; }

/* How it works: rectangular photos instead of circles */
.st-steps .service-block-two .inner-box{ padding-right: 0 !important; }
.st-steps .service-block-two .inner-box .image-box{ display: block !important; border-radius: 18px !important; overflow: hidden; margin: 6px 0 4px; }
.st-steps .service-block-two .inner-box .image-box img{ display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 18px !important; }
.st-steps .service-block-two .inner-box .image-box{ width: calc(100% + 50px) !important; max-width: none !important; position: relative; z-index: 2; }
.st-steps .service-block-two .inner-box .image-box img{ height: 160px; }

/* ===================== Team page ===================== */
.st-team-hero{ background: var(--st-hero-bg); padding: 170px 0 90px; position: relative; overflow: hidden; }
.st-team-hero:after{ content:''; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; background: var(--st-hero-panel); z-index:0; }
.st-team-hero .auto-container{ position: relative; z-index: 1; }
.st-pill{ display:inline-block; padding: 7px 18px 6px; border-radius: 30px; background: rgba(27,140,140,0.10); color:#1b8c8c; font-family:'Urbanist',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom: 18px; }
.st-team-hero h1{ font-size: 64px; line-height: 72px; font-weight: 600; color:#262b35; margin-bottom: 22px; }
.st-team-lead{ font-size: 18px; line-height: 30px; color:#4c5360; max-width: 520px; margin-bottom: 34px; }
.st-team-hero-image{ position: relative; }
.st-team-hero-image img{ width:100%; height: 440px; object-fit: cover; border-radius: 30px 30px 0 30px; display:block; }
.st-hq-badge{ position:absolute; left:-30px; bottom:30px; background:#fff; border-radius: 20px; padding: 16px 22px; display:flex; gap:14px; align-items:center; box-shadow: 0 15px 40px rgba(38,43,53,.15); }
.st-hq-badge i{ width:46px; height:46px; border-radius:50%; background:#2c9497; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.st-hq-badge b{ display:block; font-family:'Urbanist',sans-serif; font-size:18px; color:#262b35; }
.st-hq-badge span{ font-size:14px; color:#6b7280; }
.st-team-about{ padding: 70px 0 10px; }
.st-team-about p{ font-size: 18px; line-height: 32px; color:#4c5360; margin-bottom: 20px; }
.st-team-people .row > div{ margin-bottom: 30px; }
.st-person{ background: var(--st-hero-bg); border-radius: 30px 30px 0 30px; overflow:hidden; height:100%; transition: transform .3s ease, box-shadow .3s ease; }
.st-person:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(38,43,53,.10); }
.st-person-photo{ margin:0; height: 300px; overflow:hidden; }
.st-person-photo img{ width:100%; height:100%; object-fit:cover; object-position: center 20%; display:block; }
.st-person-body{ padding: 24px 26px 28px; }
.st-person-role{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#1b8c8c; margin-bottom: 6px; }
.st-person-body h3{ font-size: 24px; line-height: 32px; font-weight:600; color:#262b35; margin-bottom: 10px; }
.st-person-body p{ font-size: 15px; line-height: 26px; color:#5b6270; margin:0; }
.st-team-life{ padding: 30px 0 100px; }
.st-life-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 20px; }
.st-life-grid figure{ margin:0; overflow:hidden; border-radius: 24px; }
.st-life-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.st-life-grid figure:hover img{ transform: scale(1.04); }
.st-life-grid .g1{ grid-row: 1 / span 2; }
.st-life-grid .g4{ grid-column: 2 / span 1; }
.st-team-contact{ padding: 0 0 110px; }
.st-contact-card{ background:#262b35; border-radius: 30px 30px 0 30px; padding: 46px 54px; display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap: wrap; }
.st-contact-card h3{ color:#fff; font-size: 32px; line-height: 40px; margin-bottom: 8px; }
.st-contact-card p{ color: rgba(255,255,255,.75); margin:0; max-width: 560px; }
@media (max-width: 991px){
  .st-team-hero{ padding: 130px 0 60px; }
  .st-team-hero h1{ font-size: 44px; line-height: 52px; }
  .st-team-hero-image{ margin-top: 40px; }
  .st-team-hero-image img{ height: 320px; }
  .st-hq-badge{ left: 16px; bottom: 16px; }
  .st-life-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .st-life-grid figure{ height: 200px; }
  .st-life-grid .g1{ grid-row: auto; grid-column: 1 / span 2; height: 260px; }
  .st-life-grid .g4{ grid-column: auto; }
}
@media (max-width: 575px){ .st-contact-card{ padding: 34px 26px; } .st-contact-card h3{ font-size: 26px; line-height: 34px; } }

/* How it works: corner arrow buttons are decorative only */
.st-steps .service-block-two .link-box a{ pointer-events: none !important; cursor: default !important; }

/* Hero: no teal border line; brown panel becomes a full circle around the arrow */
.banner-style-three .pattern-layer .pattern-2{ display: none !important; }
.banner-style-three .pattern-layer .pattern-1{
  -webkit-mask: none !important; mask: none !important; background-image: none !important;
  background-color: var(--st-hero-panel) !important;
  width: 460px !important; height: 460px !important; border-radius: 50% !important;
  top: 47px !important; right: 5px !important; left: auto !important;
}

/* ================= Texture pass 1: hero + problem ================= */
:root{
  --st-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --st-dark: #262b35;
}
/* Hero: soft colour blobs + paper grain */
.banner-style-three{ position: relative; isolation: isolate; }
.banner-style-three::before{
  display: block !important; content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 420px at 8% 18%, rgba(44,148,151,0.20), transparent 70%),
    radial-gradient(380px 380px at 46% 92%, rgba(248,210,71,0.28), transparent 70%),
    radial-gradient(300px 300px at 38% 8%, rgba(240,128,96,0.16), transparent 70%);
  filter: blur(10px); border: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; transform: none !important;
}
.banner-style-three::after{
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--st-grain); background-size: 220px 220px; opacity: .10; mix-blend-mode: multiply;
}
.banner-style-three .pattern-layer{ z-index: 0; }
.banner-style-three .auto-container{ position: relative; z-index: 2; }

/* Problem: deep dark band, dot grid, glow */
.st-problem{ background: var(--st-dark); position: relative; isolation: isolate; overflow: hidden; padding-bottom: 110px !important; }
.st-problem::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1.2px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
.st-problem::after{
  content:''; position:absolute; z-index:0; pointer-events:none; width: 700px; height: 700px; left: 50%; top: -380px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(240,128,96,0.22), transparent 65%); filter: blur(20px);
}
.st-problem .auto-container{ position: relative; z-index: 1; }
.st-problem .sec-title h2, .st-problem .funfact-block-two .count-outer, .st-problem .funfact-block-two .count-outer .text, .st-problem .title-box h6{ color:#fff !important; }
.st-problem .sec-title p, .st-problem .funfact-block-two p{ color: rgba(255,255,255,0.72) !important; }
.st-problem .funfact-block-two p strong{ color:#fff !important; }
.st-problem .sec-title .sub-title{ background: rgba(255,255,255,0.10) !important; color: #f8d247 !important; }
.st-problem .title-box .line{ background: rgba(255,255,255,0.15) !important; }
.st-problem .funfact-block-two .count-outer .count-text{ color: #f8d247 !important; }
.banner-style-three::after{ opacity: .06 !important; mix-blend-mode: soft-light !important; }
.banner-style-three::before{
  background:
    radial-gradient(520px 520px at 4% 12%, rgba(44,148,151,0.30), transparent 70%),
    radial-gradient(460px 460px at 44% 96%, rgba(248,210,71,0.45), transparent 70%),
    radial-gradient(360px 360px at 40% 4%, rgba(240,128,96,0.26), transparent 70%) !important;
  filter: blur(30px) !important;
}
/* Problem: replace dot grid with film grain + giant ghosted word */
.st-problem::before{
  content: 'churn' !important; background: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%); inset: auto;
  font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 360px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.07);
}
.st-problem .st-grain{ display:none; }
.st-problem{ background-image: var(--st-grain) !important; background-size: 220px 220px !important; background-blend-mode: soft-light; background-color: var(--st-dark) !important; }
@media (max-width: 767px){ .st-problem::before{ font-size: 160px; top: 60px; } }
.st-problem::before{ inset: auto !important; left: 50% !important; top: 30px !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; -webkit-text-stroke: 1.5px rgba(255,255,255,0.06) !important; }
.st-problem{ background-blend-mode: overlay !important; }

/* ================= Texture pass 2: rest of homepage ================= */
:root{
  --st-grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --st-grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --st-teal: #2c9497; --st-yellow: #f8d247; --st-coral: #f08060;
}

/* Integrations strip: grain to match the problem band */
.st-integrations{ background-image: var(--st-grain-dark) !important; background-size: 220px 220px !important; }

/* Monitoring: grain + soft teal / yellow glows */
#monitoring{
  background:
    var(--st-grain-light),
    radial-gradient(560px 460px at 18% 55%, rgba(44,148,151,0.13), transparent 70%),
    radial-gradient(420px 380px at 88% 20%, rgba(248,210,71,0.18), transparent 70%),
    #fffdf9 !important;
  background-size: 220px 220px, auto, auto, auto !important;
}

/* How it works: grain on the dark band, ghosted words, white tail becomes warm */
.service-style-three{ background: var(--st-grain-dark), #272e39 !important; background-size: 220px 220px, auto !important; overflow: hidden; isolation: isolate; }
.service-style-three:before{ background: var(--st-grain-light), #fffdf9 !important; background-size: 220px 220px, auto !important; z-index: 0; }
.service-style-three::after{
  content: 'always on'; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 0; pointer-events: none;
  font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 230px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.06);
}
.service-style-three .auto-container{ position: relative; z-index: 1; }

/* Channels: warm sand with grain + yellow/teal glows; cards stay white */
.chooseus-style-three{
  background:
    var(--st-grain-light),
    radial-gradient(600px 480px at 0% 0%, rgba(44,148,151,0.14), transparent 70%),
    radial-gradient(560px 460px at 100% 100%, rgba(248,210,71,0.26), transparent 70%),
    var(--st-hero-bg) !important;
  background-size: 220px 220px, auto, auto, auto !important;
}

/* Jess story: warm coral-to-yellow wash instead of pale teal */
.testimonial-style-three{ background: var(--st-grain-light), #fffdf9 !important; background-size: 220px 220px, auto !important; }
.testimonial-style-three:before{
  background: var(--st-grain-light), linear-gradient(160deg, #fbe3d6 0%, #fbe9b8 100%) !important;
  background-size: 220px 220px, auto !important;
}

/* Dashboard section: grain + coral glow */
#dashboard{
  background: var(--st-grain-light), radial-gradient(520px 420px at 92% 30%, rgba(240,128,96,0.12), transparent 70%), radial-gradient(480px 400px at 5% 90%, rgba(44,148,151,0.10), transparent 70%), #fffdf9 !important;
  background-size: 220px 220px, auto, auto, auto !important;
}

/* Security band + FAQ */
.st-security{ background: var(--st-grain-light), #fffdf9 !important; background-size: 220px 220px, auto !important; }
.st-security .inner-container, .st-security .outer-container{ background-image: var(--st-grain-dark) !important; background-size: 220px 220px !important; }
.st-faq{ background: var(--st-grain-light), radial-gradient(600px 500px at 50% 0%, rgba(248,210,71,0.14), transparent 70%), #fffdf9 !important; background-size: 220px 220px, auto, auto !important; }

/* CTA: bold Starla teal with yellow + coral glows */
.cta-section{ background: var(--st-grain-light), #fffdf9 !important; background-size: 220px 220px, auto !important; }
.cta-section .outer-container{
  background:
    var(--st-grain-dark),
    radial-gradient(520px 520px at 12% 15%, rgba(248,210,71,0.45), transparent 70%),
    radial-gradient(520px 520px at 90% 90%, rgba(240,128,96,0.40), transparent 70%),
    var(--st-teal) !important;
  background-size: 220px 220px, auto, auto, auto !important;
}
.cta-section .outer-container .pattern-layer{ opacity: .25; mix-blend-mode: soft-light; }
.cta-section .content-box .inner-box p{ color: rgba(255,255,255,0.88) !important; }
.cta-section .st-cta-form input{ background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.35) !important; color: #fff !important; }
.cta-section .st-cta-form input::placeholder{ color: rgba(255,255,255,0.75) !important; }
.home_3 .cta-section .content-box .inner-box .theme-btn, .cta-section .st-cta-form .theme-btn{ background: var(--st-yellow) !important; color: #262b35 !important; }

/* Footer: grain */
.footer-style-three{ background-image: var(--st-grain-dark) !important; background-size: 220px 220px !important; }
.chooseus-style-three .pattern-layer{ display: none !important; }
.cta-section .outer-container{
  background:
    var(--st-grain-dark),
    radial-gradient(560px 480px at 10% 0%, rgba(255,255,255,0.22), transparent 70%),
    radial-gradient(420px 420px at 95% 100%, rgba(248,210,71,0.30), transparent 70%),
    linear-gradient(135deg, #34a3a6 0%, #2c9497 45%, #1f7478 100%) !important;
  background-size: 220px 220px, auto, auto, auto !important;
}
.cta-section .outer-container{
  background: var(--st-grain-dark), radial-gradient(560px 480px at 10% 0%, rgba(255,255,255,0.22), transparent 70%), linear-gradient(135deg, #34a3a6 0%, #2c9497 45%, #1f7478 100%) !important;
  background-size: 220px 220px, auto, auto !important;
}
@media (max-width: 767px){ .service-style-three::after{ font-size: 110px; top: 40px; } }

/* Channels: photography at the top of each card */
#channels .chooseus-block-three .inner-box{ overflow: hidden; }
#channels .chooseus-block-three .inner-box:before{ display: none !important; }
#channels .st-ch-photo{ margin: -41px -40px 26px; height: 190px; overflow: hidden; }
#channels .st-ch-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
#channels .chooseus-block-three .inner-box:hover .st-ch-photo img{ transform: scale(1.05); }
#channels .chooseus-block-three .inner-box h3{ padding-top: 0 !important; }
#channels .chooseus-block-three .inner-box h3:before{ display: none !important; }
#channels .chooseus-block-three .inner-box .count-text{ top: 14px !important; right: 14px !important; background: #fff !important; box-shadow: 0 6px 18px rgba(38,43,53,.15); z-index: 2; }
#channels .row{ align-items: stretch; }
#channels .chooseus-block-three, #channels .chooseus-block-three .inner-box{ height: calc(100% - 30px); }
#channels .chooseus-block{ margin-bottom: 30px; }
#channels .chooseus-block-three .inner-box{ margin-bottom: 0 !important; height: 100% !important; }
#channels .chooseus-block-three{ height: 100% !important; }

/* Footer stands on its own, with breathing room above it (all pages) */
body{ background: #fffdf9; }
.footer-style-three{ margin-top: 110px !important; clear: both; isolation: isolate; }
@media (max-width: 767px){ .footer-style-three{ margin-top: 70px !important; } }

/* FAQs: plain section, every answer visible */
.st-faq .row > div{ margin-bottom: 24px; }
.st-faq-item{ background:#fff; border-radius: 24px 24px 0 24px; padding: 30px 34px; height: 100%; box-shadow: 0 10px 30px rgba(38,43,53,0.05); }
.st-faq-item h4{ font-size: 21px; line-height: 30px; font-weight: 600; color:#262b35; margin-bottom: 10px; }
.st-faq-item p{ font-size: 16px; line-height: 27px; color:#5b6270; margin:0; }

/* ================= Hero v2 ================= */
.banner-style-three .content-box .st-hero-seg{ margin: 0 0 22px !important; background: #fff; box-shadow: 0 6px 18px rgba(38,43,53,.06); }
.st-hero-sub{ font-size: 20px; line-height: 32px; color: #3d4350; max-width: 560px; margin: 22px 0 26px !important; }
.st-hero-flow{ list-style: none; padding: 0; margin: 0 0 34px; display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; counter-reset: none; }
.st-hero-flow li{ display: inline-flex; align-items: center; gap: 10px; font-family: 'Urbanist', sans-serif; font-weight: 600; font-size: 16px; color: #262b35;
  background: rgba(255,255,255,.7); border: 1px solid rgba(44,148,151,.18); border-radius: 30px; padding: 6px 16px 6px 6px; position: relative; }
.st-hero-flow li + li{ margin-left: 22px; }
.st-hero-flow li + li:before{ content: '→'; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); color: #2c9497; font-weight: 700; }
.st-hf-icon{ width: 34px; height: 34px; border-radius: 50%; background: #2c9497; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.st-hf-icon i{ line-height: 1; }
.st-hero-cta{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.st-text-link{ font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 17px; color: #262b35; }
.st-text-link span{ display: inline-block; transition: transform .2s ease; color: #2c9497; }
.st-text-link:hover{ color: #2c9497; } .st-text-link:hover span{ transform: translateX(4px); }
.st-hero-micro{ margin: 14px 0 0 !important; font-size: 14px; color: #5b6270; }
.st-hero-proof{ margin: 26px 0 0 !important; padding-top: 18px; border-top: 1px solid rgba(38,43,53,.10); font-size: 14px; color: #6b7280; max-width: 520px; }
.st-hero-proof b{ color: #262b35; font-weight: 700; }
/* hide old hero elements if any remain */
.banner-style-three .support-box, .banner-style-three .st-hero-steps, .banner-style-three .st-hero-lead{ display: none !important; }

/* Right side: product conversation over the photo */
.banner-style-three .image-box{ position: relative; }
.st-chat{ position: absolute; left: 40px; bottom: 30px; width: 340px; z-index: 5; background: #fff; border-radius: 24px; padding: 16px 16px 14px; box-shadow: 0 30px 60px rgba(38,43,53,.22); font-size: 14px; line-height: 21px; }
.st-chat-head{ display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f0ebe4; }
.st-chat-avatar{ width: 36px; height: 36px; border-radius: 50%; background: #efe4d6; display: inline-flex; align-items: center; justify-content: center; }
.st-chat-avatar img{ width: 22px; height: 22px; }
.st-chat-head b{ display: block; font-family: 'Urbanist', sans-serif; font-size: 15px; color: #262b35; line-height: 18px; }
.st-chat-head span{ font-size: 12px; color: #8a8f99; }
.st-bubble{ max-width: 86%; padding: 9px 13px; border-radius: 16px; margin-bottom: 8px; color: #262b35; }
.st-out{ background: #e3f4ef; border-bottom-left-radius: 4px; }
.st-in{ background: #f3f0eb; margin-left: auto; border-bottom-right-radius: 4px; }
.st-typing{ display: inline-flex; gap: 4px; padding: 10px 12px; background: #e3f4ef; border-radius: 14px; border-bottom-left-radius: 4px; }
.st-typing i{ width: 6px; height: 6px; border-radius: 50%; background: #2c9497; opacity: .4; animation: stdot 1.2s infinite; }
.st-typing i:nth-child(2){ animation-delay: .2s; } .st-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes stdot{ 0%,60%,100%{ opacity:.25; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }
.st-toast{ position: absolute; right: 30px; top: 90px; z-index: 6; display: flex; gap: 12px; align-items: center; background: #262b35; color: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 20px 40px rgba(38,43,53,.25); animation: stfloat 5s ease-in-out infinite; }
.st-toast-icon{ width: 38px; height: 38px; border-radius: 50%; background: #f8d247; color: #262b35; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.st-toast b{ display: block; font-family: 'Urbanist', sans-serif; font-size: 16px; line-height: 20px; }
.st-toast span{ font-size: 13px; color: rgba(255,255,255,.7); }
@keyframes stfloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@media (max-width: 991px){
  .st-chat{ position: relative; left: auto; bottom: auto; width: auto; max-width: 380px; margin: -80px auto 0; }
  .st-toast{ right: 16px; top: 16px; }
  .st-hero-flow li + li{ margin-left: 0; } .st-hero-flow li + li:before{ display: none; }
}
.st-hero-flow{ flex-wrap: nowrap; }
.st-hero-flow li{ font-size: 15px; white-space: nowrap; }
.banner-style-three .content-box p.st-hero-micro{ font-size: 14px !important; line-height: 22px !important; }
.banner-style-three .content-box p.st-hero-proof{ font-size: 15px !important; line-height: 24px !important; }
@media (max-width: 575px){ .st-hero-flow{ flex-wrap: wrap; } }
.st-chat-avatar.st-yb-logo{ background: none; width: 36px; height: 36px; }
.st-chat-avatar.st-yb-logo svg{ display: block; border-radius: 10px; }
#channels .chooseus-block-three .inner-box h3{ font-size: 30px !important; line-height: 38px !important; margin-bottom: 14px !important; }

/* ===================== Pricing page ===================== */
.st-price-hero{ position: relative; padding: 170px 0 40px; background:
  var(--st-grain-light),
  radial-gradient(520px 420px at 8% 10%, rgba(44,148,151,0.18), transparent 70%),
  radial-gradient(460px 400px at 92% 6%, rgba(248,210,71,0.30), transparent 70%),
  var(--st-hero-bg); background-size: 220px 220px, auto, auto, auto; }
.st-price-head{ text-align: center; max-width: 720px; margin: 0 auto 50px; }
.st-price-head h1{ font-size: 60px; line-height: 68px; font-weight: 600; color:#262b35; margin-bottom: 18px; }
.st-price-head .st-team-lead{ margin: 0 auto 30px; }
.st-billing-toggle{ display: inline-flex; background: #fff; border-radius: 40px; padding: 6px; box-shadow: 0 8px 24px rgba(38,43,53,.08); }
.st-billing-toggle button{ border: 0; background: transparent; padding: 10px 22px; border-radius: 30px; font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 15px; color: #4c5360; cursor: pointer; transition: background .2s, color .2s; }
.st-billing-toggle button span{ font-size: 12px; font-weight: 700; color: #1b8c8c; background: rgba(44,148,151,.12); border-radius: 20px; padding: 3px 8px; margin-left: 6px; }
.st-billing-toggle button.active{ background: #262b35; color: #fff; }
.st-billing-toggle button.active span{ background: #f8d247; color: #262b35; }
.st-plans > div{ margin-bottom: 30px; }
.st-plan{ position: relative; background: #fff; border-radius: 30px 30px 0 30px; padding: 34px 28px 30px; height: 100%; box-shadow: 0 14px 40px rgba(38,43,53,.07); display: flex; flex-direction: column; }
.st-plan h3{ font-size: 26px; line-height: 32px; font-weight: 700; color:#262b35; margin-bottom: 6px; }
.st-plan-tag{ display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1b8c8c; margin-bottom: 12px; }
.st-plan-blurb{ font-size: 15px; line-height: 24px; color: #5b6270; min-height: 48px; margin-bottom: 20px; }
.st-price{ display: flex; align-items: baseline; gap: 6px; }
.st-amt{ font-family: 'Urbanist', sans-serif; font-size: 46px; line-height: 1; font-weight: 700; color: #262b35; letter-spacing: -0.02em; }
.st-per{ font-size: 15px; color: #6b7280; }
.st-bill{ font-size: 13px; color: #6b7280; margin: 8px 0 22px; min-height: 20px; }
.st-plan .theme-btn{ width: 100%; text-align: center; justify-content: center; margin-bottom: 24px; }
.st-btn-outline{ background: transparent !important; color: #262b35 !important; border: 2px solid #262b35 !important; }
.st-btn-outline:hover{ background: #262b35 !important; color: #fff !important; }
.st-plan-feats{ list-style: none; padding: 20px 0 0; margin: 0; border-top: 1px solid #f0ebe4; }
.st-plan-feats li{ position: relative; padding-left: 26px; font-size: 15px; line-height: 23px; color: #3d4350; margin-bottom: 11px; }
.st-plan-feats li:before{ content: '✓'; position: absolute; left: 0; top: 0; color: #2c9497; font-weight: 800; }
.st-pop{ background: #262b35; box-shadow: 0 24px 60px rgba(38,43,53,.30); transform: translateY(-10px); }
.st-pop h3, .st-pop .st-amt{ color: #fff; }
.st-pop .st-plan-blurb, .st-pop .st-per, .st-pop .st-bill{ color: rgba(255,255,255,.72); }
.st-pop .st-plan-feats{ border-color: rgba(255,255,255,.12); }
.st-pop .st-plan-feats li{ color: rgba(255,255,255,.9); }
.st-pop .st-plan-feats li:before{ color: #f8d247; }
.st-pop-badge{ position: absolute; top: 20px; right: 20px; background: #f8d247; color: #262b35; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 5px 12px; }
.st-pop .theme-btn{ background: #f8d247 !important; color: #262b35 !important; }
.st-price-note{ text-align: center; font-size: 14px; color: #6b7280; margin-top: 6px; }
/* Comparison table */
.st-compare{ background: var(--st-grain-light), #fffdf9; background-size: 220px 220px, auto; }
.st-cmp-wrap{ overflow-x: auto; border-radius: 24px; background: #fff; box-shadow: 0 14px 40px rgba(38,43,53,.06); }
.st-cmp{ width: 100%; min-width: 820px; border-collapse: collapse; font-size: 15px; }
.st-cmp thead th{ position: sticky; top: 0; background: #fff; font-family: 'Urbanist', sans-serif; font-size: 20px; font-weight: 700; color: #262b35; padding: 24px 18px; text-align: center; border-bottom: 2px solid #f0ebe4; }
.st-cmp thead th:first-child{ text-align: left; }
.st-cmp th[scope=row]{ text-align: left; font-weight: 500; color: #3d4350; padding: 15px 24px; width: 36%; }
.st-cmp td{ text-align: center; padding: 15px 18px; color: #3d4350; }
.st-cmp tbody tr:not(.st-cmp-group){ border-bottom: 1px solid #f4f0ea; }
.st-cmp-group th{ background: #faf6f0; text-align: left; font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1b8c8c; padding: 14px 24px; }
.st-cmp .st-cmp-pop{ background: rgba(44,148,151,.06); }
.st-cmp thead .st-cmp-pop{ background: #262b35; color: #fff; border-radius: 0; }
.st-yes{ font-style: normal; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #2c9497; color: #fff; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.st-no{ font-style: normal; color: #c3c7cd; font-size: 18px; }
@media (max-width: 1199px){ .st-pop{ transform: none; } }
@media (max-width: 767px){ .st-price-hero{ padding-top: 130px; } .st-price-head h1{ font-size: 40px; line-height: 48px; } }
.st-plan .theme-btn{ padding: 14px 16px !important; font-size: 16px !important; white-space: nowrap; line-height: 24px !important; }
.st-pop-badge{ top: -14px; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 6px 16px rgba(38,43,53,.2); }
.st-cmp{ table-layout: fixed; }
.st-cmp th[scope=row], .st-cmp thead th:first-child{ width: 34%; }

/* ---------- Legal pages (privacy, terms, cookies) ---------- */
.st-legal-hero { background: var(--st-hero-bg); padding: 170px 0 70px; }
.st-legal-hero h1 { font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 52px; line-height: 1.1; color: var(--st-dark); margin: 16px 0 14px; }
.st-legal-hero p { max-width: 640px; font-size: 18px; line-height: 28px; color: var(--st-dark); opacity: .8; }
.st-legal-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.st-legal-tabs a { padding: 8px 18px; border-radius: 30px; border: 1px solid rgba(38,43,53,.18); color: var(--st-dark); font-weight: 600; font-size: 15px; background: #fff; transition: all .2s; }
.st-legal-tabs a:hover, .st-legal-tabs a.active { background: var(--st-teal); border-color: var(--st-teal); color: #fff; }
.st-legal-body { padding: 70px 0 110px; }
.st-legal-content { max-width: 780px; }
.st-legal-updated { font-size: 14px; color: var(--st-muted); margin-bottom: 36px; }
.st-legal-content h2 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 26px; color: var(--st-dark); margin: 44px 0 14px; }
.st-legal-content h3 { font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 19px; color: var(--st-dark); margin: 26px 0 10px; }
.st-legal-content p, .st-legal-content li { font-size: 16px; line-height: 27px; color: #4a515c; }
.st-legal-content p { margin-bottom: 14px; }
.st-legal-content ul { margin: 0 0 18px 0; padding-left: 0; }
.st-legal-content ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.st-legal-content ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--st-teal); }
.st-legal-content a { color: var(--st-teal); text-decoration: underline; text-underline-offset: 2px; }
.st-legal-content strong { color: var(--st-dark); }
@media (max-width: 767px) {
  .st-legal-hero { padding: 130px 0 50px; }
  .st-legal-hero h1 { font-size: 38px; }
  .st-legal-body { padding: 50px 0 80px; }
}