/* ============================================================
   IMPORTS
   Google Fonts: Archivo (body) + Ledger (headings)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Ledger&display=swap');


/* ============================================================
   GLOBAL DESIGN TOKENS
   All CSS custom properties live here.
   Reference these vars throughout — never hard-code values.
============================================================ */
:root {
  /* ── Color palette ── */
  --heading-color:      #565157;
  --blue-color:         #012f46;
  --hblue-color:        #243872;
  --black-color:        #000000;
  --white-color:        #ffffff;
  --grey-color:         #f3f2f3;
  --dgrey-color:        #ececec;
  --link-color:         #ff0202;
  --link-hover-color:   #000000;
  --lblue-color:        #224160;
  --accent-color:       #f64c20;   /* stat numbers, quote text, CTA backgrounds */
  --muted-color:        #8d8282;   /* labels, dividers, secondary text */
  --stats-bg:           #f5ebe1;   /* warm cream — section backgrounds */
  --card-heading-color: #565157;   /* card/section headings */
  --dark-heading-color: #1D1828;   /* dark CTA buttons, footer */

  /* ── Typography ── */
  --heading-font: "Ledger", serif;
  --body-font:    "Archivo", sans-serif;

  /* ── Letter-spacing presets ── */
  --ls-heading:  -1.08px;           /* large display headings */
  --ls-body:     0.32px;             /* default body copy */
  --ls-label:    0.4px;              /* feature titles, author names */

  /* ── Border radii ── */
  --radius-card:  20px;              /* large cards & panels */
  --radius-btn:   10px;              /* buttons, small cards */
  --radius-pill:  999px;             /* fully rounded pill toggles */

  /* ── Borders ── */
  --border-cream: 1px solid var(--stats-bg);

  /* ── Easing ── */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Power section ── */
  --power-divider: #ECE3D8;        /* warm hairline between rows */
  /* darkened --accent-color for CTA hover */

  /* ── YCS comparison table ── */
  /* ---- Provided tokens ---- */
  --dark:            #1D1828;                        /* feature header cell */
  --orange:          #F64C20;                        /* YCS header + CTA */
  --grey:            #8D8282;                         /* competitor header cells */
  --ycs-cell:        #FFF3E8;                         /* YCS body column */
  --stripe:          rgba(245, 235, 225, 0.50);       /* alternating body row */
  --cell-border:     rgba(141, 130, 130, 0.10);       /* body cell hairlines */
  --header-divider:  rgba(255, 255, 255, 0.30);       /* between header cells */
  --ycs-text:        #C4550A;                         /* YCS value text + CTA hover */

  /* ---- Derived neutrals (from --dark, not invented brand values) ---- */
  --feature-text:    #1D1828;
  --value-text:      rgba(29, 24, 40, 0.72);
  --header-text:     #FFFFFF;
  --title-text:      #1D1828;
  --page-bg:         #FFFFFF;

  --radius:          14px;
  --ff-display:      "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body:         "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* ============================================================
   BASE RESET & GLOBAL DEFAULTS
============================================================ */
html {
  scroll-behavior: smooth;
  overflow-x:      hidden;
}

body {
  font-family: var(--body-font);
  font-size:   16px;
  line-height: 1.65;
  overflow-x:  hidden;
  color:       var(--muted-color);
}

p            { margin-bottom: 10px; }
p:last-child { margin-bottom: 0 !important; }

a       { color: var(--link-color);       text-decoration: none; }
a:hover { color: var(--link-hover-color); }

ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

/* Heading scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color:       var(--heading-color);
  font-weight: 700;
  line-height: 1.2;
  margin:      0 0 0px;
}

h1 { font-size: 60px; }
h2 { font-size: 48px; }
h3 { font-size: 36px; }
h4 { font-size: 30px; }
h5 { font-size: 24px; }
h6 { font-size: 20px; }

/* Tablet heading scale */
@media only screen and (max-width: 991px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }
  h4 { font-size: 24px; }
  h5 { font-size: 22px; }
  h6 { font-size: 20px; }
}

/* Mobile heading scale */
@media only screen and (max-width: 599px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }
  h4 { font-size: 24px; }
  h5 { font-size: 22px; }
  h6 { font-size: 20px; }
}

@media only screen and (min-width: 1024px) {
	
	h2.fs-36{
		font-size:36px;
	}
	
	
}
.border-top{
	border-color: #F5EBE1 !important;
}
.bg-beige{
	background:var(--stats-bg);
}
.page-section{
	display:flex;
	flex-direction:column;
	gap:5rem;
}
.section-border-top{
	border-top:1px solid #F5EBE1;
}
.section-border-bottom{
	border-bottom:1px solid #F5EBE1;
}
.text-dark{
	color:  var(--dark-heading-color);
}
.section-title-block,
.section-title-container{
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}
.section-title-container p{
	color: #565157;

font-size: 18px;

font-weight: 400;

}
.eyebrow label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 28px;

  border-radius: 999px;
  border: 1px solid #F64C20;


  color: #F64C20;
  text-align: left;

  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.7px;
  text-transform: uppercase;

}
.border-top-f5ebe1{
	border-top: 1px solid #F5EBE1;
}
.multiple-cta-wrapper{
	display:flex;
	align-items:center;
	gap:20px;
}
@media (max-width: 599px) {
.multiple-cta-wrapper{
	flex-direction:column;
	gap:16px;
}
}
/* ============================================================
   UTILITY — SECTION PADDING
============================================================ */
.section-padding { padding: 80px 0; }
.section-padding-l { padding: 100px 0; }
.section-padding-xl { padding: 140px 0; }
.section-wrapper{
	display:flex;
	flex-direction:column;
	gap:4rem;
}
@media (max-width: 991px) {
.section-padding,
.section-padding-l,
.section-padding-xl  { padding: 50px 0; }
.section-wrapper{
	gap:2.5rem;
}
}

    /* Lead-form popup styles */

      .lead-popup {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
      }
      .lead-popup.is-open { display: flex; }
      .lead-popup__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #F64C20 19.09%, rgba(246, 76, 32, 0.00) 100.05%);
        cursor: pointer;
      }
      .lead-popup__dialog {
        position: relative;
        display: flex;
        width: 29.5rem;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        background: #FFF;
        border-radius: 15px;

box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.05);
        max-height: calc(100vh - 2rem);
      
      }
      .lead-popup__title {
        margin: 0;
        color: #1D1828;
        font-family: "Archivo", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.4;
      }
      .lead-popup__close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 2rem;
        height: 2rem;
        border: 0;
        background: transparent;
        font-size: 1.5rem;
        line-height: 1;
        color: #565157;
        cursor: pointer;
        padding: 0;
      }
      .lead-popup__close:hover { color: #1D1828; }
      .hs-form-target { width: 100%; }
      body.has-popup-open { overflow: hidden; }

      @media (max-width: 480px) {
        .lead-popup__dialog {
          width: 100%;
          padding: 1.25rem;
          gap: 1.25rem;
		  overflow-y:auto;
        }
      }


/* ============================================================
   NAVBAR
   Sticky top header with logo lockup + language switcher + CTA.
============================================================ */
header {
  padding:       15px 0px;
  border-bottom: var(--border-cream);
}

.site-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
  background:      var(--white-color);
  position:        sticky;
  top:             0;
  z-index:         100;
}

/* ── Logo lockup ── */
.site-nav__logo {
  display:         flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
}

.site-nav__logo img {
  height: 32px;
  width:  auto;
}

.site-nav__logo-wordmark {
  font-family: var(--body-font);
  font-size:   18px;
  font-weight: 400;
  color:       var(--muted-color);
  line-height: normal;
}

.site-nav__logo-brand {
  color:       var(--accent-color);
  font-weight: 500;
}

/* ── CTA button ── */
.site-nav__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 18px 13px;
  border-radius:   var(--radius-btn);
  background:      var(--accent-color);
  border:          none;
  font-family:     var(--body-font);
  font-size:       18px;
  line-height:     1.2;
  font-weight:     500;
  color:           var(--white-color);
  text-decoration: none;
  cursor:          pointer;
  transition:
    background 0.25s ease,
    transform  0.30s var(--ease-bounce);
}

.site-nav__cta:hover {
  background: var(--dark-heading-color);
  color:      var(--white-color);
  transform:  translateY(-2px);
}

/* Arrow icon */
.site-nav__cta::after {
  content:             '';
  flex-shrink:         0;
  width:               18px;
  height:              18px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  transition:          transform 0.30s var(--ease-bounce);
}

.site-nav__cta:hover::after {
  transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  header { padding: 16px 0px; }
}

@media (max-width: 575px) {
  .site-nav__cta-text { display: none; }
  .site-nav__cta      { padding: 12px; border-radius: 8px; }
}


.site-nav__menu {
  display:     flex;
  align-items: center;
  gap:         64px;
  margin:      0 auto;          /* center the menu in the nav bar */
  padding:     0;
  list-style:  none;
}
 
.site-nav__link {
  color:        #565157;
  font-family:  Archivo, var(--body-font);
  font-size:    16px;
  font-style:   normal;
  font-weight:  400;
  line-height:  140%;           /* 22.4px */
  text-decoration: none;
  transition:   color 0.2s ease;
}
 
.site-nav__link:hover {
  color: var(--accent-color);
}
 
/* Offset anchored sections so they aren't hidden under the sticky header */
#products,
#solutions,
#pricing,
#resources {
  scroll-margin-top: 0px;
}
 
@media (max-width: 991px) {
  .site-nav__menu { display: none; }   /* hide link row on small screens */
}
 
/* ============================================================
   LANGUAGE SWITCHER
   Pill-shaped toggle in the header with flag + language code.
   Active state: white background, orange border.
============================================================ */
.lang-switch {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  border-radius: var(--radius-pill);
  background:    var(--stats-bg);
  margin-right:  auto;
  margin-left:   16px;
}

.lang-switch__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         6px 12px;
  border:          none;
  border-radius:   var(--radius-pill);
  background:      transparent;
  font-family:     var(--body-font);
  font-size:       14px;
  font-weight:     500;
  color:           var(--muted-color);
  line-height:     1;
  cursor:          pointer;
  transition:      background 0.2s ease, color 0.2s ease;
}

.lang-switch__btn:hover {
  color: var(--card-heading-color);
}

.lang-switch__btn.is-active {
  color:      var(--dark-heading-color);
  border:     1px solid var(--accent-color);
  background: var(--white-color);
}

.lang-switch__flag {
  font-size:   14px;
  line-height: 1;
}

.lang-switch__code {
  font-size:      13px;
  letter-spacing: 0.5px;
}

@media (max-width: 575px) {
  .lang-switch       { margin-right: 4px; }
  .lang-switch__btn  { padding: 5px 8px; }
  .lang-switch__code { font-size: 12px; }
}


/* ============================================================
   HERO SECTION
   Two-column layout: left = copy + CTA, right = photo.
   Background-image varies per market (usa / thailand).
============================================================ */
.hero.usa {
 /* background:          url(../../uploads/images/usa/hero.webp);
  background-size:     41% 100%;
  background-repeat:   no-repeat;
  background-position: center right; */
}

.hero.thailand {
	/*
  background:          url(../../uploads/images/thailand/hero.webp);
  background-size:     41% 100%;
  background-repeat:   no-repeat;
  background-position: center right; */
}

.hero-section {
  display:    flex;

}
.hero-content-top-info{
	  display: flex;
  align-items: center;
  gap:24px;
}
.hero-separator{
	    background: #F5EBE1;
    height: 100%;
    width: 1px;
}
.hero-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px between logo col and info col */
}

.hero-rating__logo img {
  display: block;
  width: 2rem;   /* 32px */
  height: 2rem;  /* 32px */
}
.hero-rating__brand{

}
.hero-rating__info {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px between stars and text */
}

.hero-rating__stars img {
  display: block;
}

.hero-rating__text {
  display: flex;
  align-items: center;
  gap: 0.3125rem; /* 5px between score and reviews */
}

.hero-rating__score {
  color: #1D1828;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;     /* 16px */
  font-weight: 400;
  line-height: 1.4;    /* 140% — 22.4px */
}

.hero-rating__reviews {
  color: #565157;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;     /* 16px */
  font-weight: 400;
  line-height: 1.4;    /* 140% — 22.4px */
}

.hero-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem; /* 10px */
}

.hero-features li {
  color: #1D1828;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;     /* 16px */
  font-weight: 400;    /* regular for the trailing text */
  line-height: 1.4;    /* 140% — 22.4px */
}

.hero-features li strong {
  font-weight: 700;    /* bold for the lead word(s) */
}

.hero-features li:not(:first-child)::before {
  content: "•";
  color: #F54B1E;
  font-weight: 400;
  margin-right: 0.625rem; /* 10px between bullet and text */
}
@media (max-width: 575px) {
	.hero-features{
		flex-direction:column;
	}
	.hero-features li::before {
  content: "•";
  color: #F54B1E;
  font-weight: 400;
  margin-right: 0.625rem; /* 10px between bullet and text */
}
.hero-content-top-info{
	    flex-direction: column;
		align-items:flex-start;
}
.hero-separator {
	width:120px;
	height:1px;
}

}

/* ── Left column: copy + CTA ── */
.hero-content {
  background:      var(--white-color);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             40px;
  padding:         40px 0px 0px 12px;
  width:           59%;
      justify-content: space-between;
}
.hero-content-top{
	 display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             40px;
      width: 51rem;
	  height: calc(100% - 180px);
   

}
.hero-content p {
  color: var(--card-heading-color);
}

.hero-title {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.hero-eyebrow {
  font-family:    var(--body-font);
  font-size:      14px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin:         0;
}

.hero-heading {
  font-family:    var(--heading-font);
  font-size:      46px;
  font-weight:    400;
  color:          var(--accent-color);
  line-height:    1.2;
  letter-spacing: -2.8px;
  margin:         0;
}

.hero-body {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.hero-body p {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.4;
  margin:         0;
}

/* Hero CTA button */
.hero-cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         14px 20px 15px;
  border-radius:   var(--radius-btn);
  background:      var(--dark-heading-color);
  border:          none;
  font-family:     var(--body-font);
  font-size:       18px;
  line-height:     1.2;
  font-weight:     500;
  color:           var(--stats-bg);
  text-decoration: none;
  cursor:          pointer;
  align-self:      flex-start;
  transition:
    background 0.25s ease,
    transform  0.30s var(--ease-bounce);
}

.hero-cta:hover {
  background: #000;
  color:      var(--stats-bg);
  transform:  translateY(-2px);
}

.hero-cta::after {
  content:             '';
  flex-shrink:         0;
  width:               18px;
  height:              18px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='%23F5EBE1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  transition:          transform 0.30s var(--ease-bounce);
}

.hero-cta:hover::after {
  transform: translateX(4px);
}

/* ── Right column: photo ── */
.hero-media {
  position: relative;
  overflow: hidden;
  width:    41%;
}

.hero-media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.hero-media::after {
  content:  '';
  position: absolute;
  inset:    0;
}

/* ── Floating stat badge ── */
.hero-stat {
  position:    absolute;
  bottom:      40px;
  left:        20%;
  z-index:     2;
  display:     inline-flex;
  align-items: center;
  gap:         24px;
  width:       80%;
}

.hero-stat__circle {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           90px;
  height:          90px;
  border-radius:   50%;
  border:          1.5px solid rgba(255, 255, 255, 0.60);
  padding:         24px;
  flex-shrink:     0;
}

.hero-stat__number {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--white-color);
  line-height:    1.1;
  letter-spacing: -1.8px;
}

.hero-stat__text {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  color:       var(--white-color);
  line-height: 1.4;
  max-width:   380px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .hero          { background: var(--white-color) !important; }
  .hero-content-top{
	  width:100%;
	height: auto;
  }
  .hero-section  { flex-direction: column; }
  .hero-content  { padding: 48px 0px 0; width: 100%; }
    .hero-content-top{padding:0px 12px;}
  .hero-heading  { font-size: 40px; }
  .hero-media    { min-height: 400px; width: 100%; }
  .hero-stat     { bottom: 24px; left: 24px; }
}

@media (max-width: 575px) {
  .hero-content      { padding: 40px 0px 0; gap: 30px; }
  .hero-body         { margin-bottom: 0px; }
  .hero-heading      { font-size: 32px; letter-spacing: -1.5px; }
  .hero-stat__circle { width: 70px; height: 70px; }
  .hero-stat__number { font-size: 28px; }
}


/* ============================================================
   TRUSTED BY
   Auto-scrolling logo marquee. Logos duplicated in HTML for
   seamless infinite loop. Pauses on hover.
============================================================ */
.trusted-section {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: flex-start;
  gap:             24px;
  background:      var(--white-color);
  border-top:      var(--border-cream);
  overflow:        hidden;
  padding:         20px 0px;
}
.truseted-fw{
	padding:0;
	 border-top:      var(--border-cream);
	 border-bottom:   var(--border-cream);
	 align-items:center;
}
.trusted-label {
  font-family:    var(--body-font);
  font-size:      14px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.1;
  letter-spacing: 1.4px;
  text-transform: uppercase;

  margin:         0px;
        width: 50rem;
	      margin-left: auto;
}
.trusted-label.trusted-label-new{
	text-transform:unset !important;
	color:rgba(86, 81, 87, 0.40);
	margin:0 0 10px 0 !important;
	font-size:16px;
}
.trusted-marquee {
  width:    100%;
  overflow: hidden;
  position: relative;
}
.truseted-fw .trusted-label{
	font-size: 20px;
    width: 100%;
    text-align: center;
		text-transform:unset !important;
	color:#565157;
margin-bottom:40px !important;
}

/* Soft fade masks on left and right edges (hidden by default) */
.trusted-marquee::before,
.trusted-marquee::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          80px;
  z-index:        2;
  height:100%;
  pointer-events: none;

}

.trusted-marquee::before {
  left:       0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
}

.trusted-marquee::after {
  right:      0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  transform:rotate(180deg);
}

/* Scrolling track — -50% works because logos are duplicated */
.trusted-track {
  display:   flex;
  gap:       20px;
  width:     max-content;
  animation: marquee 28s linear infinite;
}

.trusted-marquee:hover .trusted-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trusted-logo {
  width:           180px;
  height:          98px;
  flex-shrink:     0;
  border-radius:   var(--radius-btn);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.trusted-logo img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.trusted-marquee.height-auto .trusted-track .trusted-logo{
	height:auto;
}
.trusted-marquee.height-auto .trusted-track .trusted-logo img{
	width:auto;
	height:auto;
}
@media (max-width: 991px) {
  .trusted-section          { }
  .trusted-marquee::before,
  .trusted-marquee::after   { width: 60px; }
  .trusted-label{width:100%;}
  .trusted-label.trusted-label-new{

	margin:0 0 40px 0 !important;

}
}


/* ============================================================
   PARTNER BADGES
   Single row of OTA / platform partner logos.
============================================================ */
.partners-section {

  border-top:  var(--border-cream);
}
.partners-section.border-bottom{
	
  border-top:  var(--border-cream);
	
}
.partners-section img {
  width: 100%;
}

.partners-row {
  gap:         20px;
  flex-wrap:   nowrap;
  align-items: center;
}
.partners-row.partners-grid-5-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px  80px;
    align-items: center;
}
.partner-badge { text-align: center; }
.partner-badge-120{
max-width:120px;
}
@media (max-width: 991px) {
  .partners-row      { flex-wrap: wrap; }
  .partners-row .col { flex: 0 0 calc(50% - 10px); }
    .partners-row.partners-grid-5-cols {
        grid-template-columns: repeat(3, 1fr);
        gap:  24px 40px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .partners-row.partners-grid-5-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Small Mobile */
@media (max-width: 479px) {
    .partners-row.partners-grid-5-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* ============================================================
   STATS / COUNTERS
   Animated counter items in a flex row with hairline dividers.
   Items fade + slide in on scroll via .visible class (set by JS).
============================================================ */
.stats-section { background-color: var(--stats-bg); }

.stats-row {
  display:         flex;
  justify-content: center;
}

.stat-item {
  flex:       1;
  text-align: center;
  position:   relative;
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.stat-item.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Staggered entrance delays */
.stat-item:nth-child(1) { transition-delay: 0.00s; }
.stat-item:nth-child(2) { transition-delay: 0.15s; }
.stat-item:nth-child(3) { transition-delay: 0.30s; }
.stat-item:nth-child(4) { transition-delay: 0.45s; }

/* Vertical divider between items */
.stat-item:not(:last-child)::after {
  content:    '';
  position:   absolute;
  right:      0;
  top:        50%;
  transform:  translateY(-50%);
  height:     70px;
  width:      0.5px;
  background: var(--muted-color);
}

.stat-number {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--accent-color);
  line-height:    1;
  margin-bottom:  16px;
  display:        block;
  text-transform: uppercase;
}

.stat-label {
  font-size:      14px;
  font-weight:    400;
  letter-spacing: 0.18em;
  color:          var(--muted-color);
  text-transform: uppercase;
  display:        block;
}

@media (max-width: 991px) {
  .stats-row   { flex-wrap: wrap; gap: 30px; }
  .stat-item   { flex: 0 0 calc(50% - 40px); }
  .stat-item:not(:last-child)::after { display: none; }
  .stat-number { font-size: 2.2rem; }
}

@media (max-width: 480px) {
  .stat-item { flex: 0 0 100%; }
}


/* ============================================================
   VIDEO TESTIMONIAL
   Full-width iframe + centred pull-quote below.
============================================================ */
.video-container {
  display:        flex;
  flex-direction: column;
  gap:            80px;
}

.video-wrapper iframe {
  border-radius: var(--radius-card);
  overflow:      hidden;
}

.quote-block { text-align: center; }

.quote-text {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--accent-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  max-width:      1200px;
  margin:         0 auto 40px;
}

.quote-author {
  font-family:    var(--body-font);
  font-size:      14px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display:        block;
}

@media (max-width: 991px) {
  .video-container      { gap: 40px; }
  .video-wrapper iframe { height: 220px; }
  .quote-text           { font-size: 24px; margin-bottom: 24px; }
}


/* ============================================================
   LEAN HOTEL TEAMS
   Two-column layout: left photo, right content card.
   Content card contains body copy + nested integrations card.
============================================================ */
.lean-section {
  border-top: var(--border-cream);
}

.lean-grid {
  display:     flex;
  gap:         20px;
  align-items: stretch;
}

.lean-card {
  border-radius:  var(--radius-card);
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  padding:        0;
  gap:            24px;
}

/* ── Photo card ── */
.lean-card--photo {
  padding: 0;
  width:   52%;
    overflow:       hidden;
}

.lean-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Content card ── */
.lean-card--content { width: 48%; }

.lean-heading {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin-bottom:  0;
}

.lean-body {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin-bottom:  0;
}

/* ── Integrations card (nested in content card) ── */
.lean-card--integrations {
  border-radius: var(--radius-card);
  border:        0.5px solid rgba(141, 130, 130, 0.21);
  width:         100%;
  padding:       24px;
  margin-top:    16px;
}

.integrations-top {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  width:          100%;
}

.integrations-count {
  font-family: var(--heading-font);
  font-size:   36px;
  font-weight: 400;
  color:       var(--card-heading-color);
  line-height: 1;
  display:     block;
}

.integrations-desc {
  font-family:   var(--body-font);
  font-size:     20px;
  color:         var(--muted-color);
  line-height:   1.4;
  margin-bottom: 0;
}

.integrations-divider {
  border:     none;
  border-top: var(--border-cream);
  width:      100%;
  margin:     16px 0px;
  opacity:    1;
}

.integrations-logos {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   16px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .lean-grid              { grid-template-columns: 1fr 1fr; flex-direction: column; }
  .lean-card--photo       { grid-column: 1 / -1; min-height: 280px; }
  .lean-card              { min-height: auto; width: 100%; }
  .lean-heading           { font-size: 28px; }
  .integrations-count     { font-size: 48px; }
  .integrations-logos     { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 575px) {
  .lean-grid              { grid-template-columns: 1fr; }
  .lean-card--photo       { grid-column: auto; min-height: 240px; }
  .integrations-logos     { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   FEATURE CHECKLIST
   Cream circular bullets with white check-mark SVG.
   Used inside .lean-body for dense, scannable feature bullets.
============================================================ */
.feature-checklist {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  list-style:     none;
  padding:        0;
  margin:         16px 0;
}

.feature-checklist li {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  color:       var(--muted-color);
  line-height: 1.4;
}

.feature-checklist li::before {
  content:             '';
  flex-shrink:         0;
  width:               14px;
  height:              14px;
  border-radius:       50%;
  background:          var(--stats-bg);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M11.2841 3.39893L12.1093 4.22412L12.1971 4.31299L5.83289 10.6772L5.745 10.5884L2.0321 6.87646L1.94421 6.7876L2.94617 5.78564L3.03406 5.87451L5.83289 8.67334L11.1952 3.31104L11.2841 3.39893Z' fill='white' stroke='white' stroke-width='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     14px 14px;
}


/* ============================================================
   STAY COMPLIANT SECTION
   Cream background, centred heading, two-card grid.
============================================================ */
.compliant-section {
  border-top: var(--border-cream);
  background: var(--stats-bg);
}

.compliant-heading {
  font-family:    var(--heading-font);
  font-size:      48px;
  font-weight:    400;
  color:          var(--card-heading-color);
  text-align:     center;
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0 auto 100px;
}

.compliant-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
}

.compliant-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            16px;
  padding:        24px 24px 40px;
  border-radius:  var(--radius-card);
  border:         0.5px solid var(--muted-color);
  background:     var(--white-color);
}

.compliant-card__title {
  color:          var(--card-heading-color);
  font-family:    var(--body-font);
  font-size:      20px;
  font-style:     normal;
  font-weight:    400;
  line-height:    140%;
  letter-spacing: var(--ls-label);
  margin:         0;
}

.compliant-card__body {
  color:          var(--muted-color);
  font-family:    var(--body-font);
  font-size:      16px;
  font-style:     normal;
  font-weight:    400;
  line-height:    140%;
  letter-spacing: var(--ls-body);
  margin:         0;
}

@media (max-width: 991px) {
  .compliant-heading { font-size: 36px; margin-bottom: 40px; }
}

@media (max-width: 575px) {
  .compliant-heading { font-size: 28px; }
  .compliant-grid    { grid-template-columns: 1fr; }
}


/* ============================================================
   REVENUE CALCULATOR
   Dark gradient section with two-column layout:
     left  – slider controls
     right – current revenue + growth forecast table
============================================================ */
.calc-section {
  background: linear-gradient(180deg, #8D8282 -3.22%, #565157 253.78%);
}

.calc-inner {
  display:               grid;
  grid-template-columns: 380px 1fr;
  gap:                   60px;
  align-items:           center;
}

/* ── Left column: sliders ── */
.calc-left {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            40px;
}

.calc-heading {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--white-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0;
}

.calc-sliders {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            20px;
  width:          100%;
}

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

.calc-slider-label {
  display:         flex;
  justify-content: space-between;
  width:           100%;
  font-family:     var(--body-font);
  font-size:       16px;
  font-weight:     400;
  color:           var(--white-color);
  line-height:     1.4;
  letter-spacing:  var(--ls-body);
}

.calc-slider-label span { font-weight: 500; }

/* Range input track */
.calc-range {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             1px;
  background:         var(--stats-bg);
  outline:            none;
  border:             none;
  cursor:             pointer;
}

/* Range thumb — Webkit */
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              16px;
  height:             16px;
  border-radius:      50%;
  background:         var(--accent-color);
  border:             1.5px solid var(--stats-bg);
  cursor:             pointer;
  transition:         transform 0.2s ease;
}

/* Range thumb — Firefox */
.calc-range::-moz-range-thumb {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--accent-color);
  border:        1.5px solid var(--stats-bg);
  cursor:        pointer;
}

.calc-range::-webkit-slider-thumb:hover { transform: scale(1.25); }

/* ── Right column: results panel ── */
.calc-right {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items:     flex-start;
  height:          350px;
  padding:         24px;
  border-radius:   var(--radius-card);
  background:      var(--stats-bg);
  gap:             40px;
}

.calc-right__top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  width:           100%;
  gap:             24px;
}

.calc-desc {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  color:       var(--muted-color);
  line-height: 1.4;
  max-width:   280px;
  margin:      0;
  opacity:     0.85;
}

.calc-table-wrap { width: 100%; }

.calc-revenue-block {
  text-align:  right;
  flex-shrink: 0;
}

.calc-revenue-label {
  font-family:    var(--body-font);
  font-size:      12px;
  font-weight:    400;
  color:          var(--muted-color);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display:        block;
  margin-bottom:  4px;
}

.calc-revenue-value {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.1;
  letter-spacing: var(--ls-heading);
  display:        block;
  transition:     all 0.3s ease;
}

/* Growth forecast table */
.calc-table {
  width:           100%;
  border-collapse: collapse;
}

.calc-table th,
.calc-table td {
  font-family:  var(--body-font);
  font-size:    14px;
  font-weight:  400;
  color:        var(--card-heading-color);
  line-height:  1.4;
  padding:      10px 12px;
  border:       0.5px solid var(--muted-color);
  text-align:   right;
}

.calc-table th:first-child,
.calc-table td:first-child {
  text-align: left;
  color:      var(--muted-color);
}

.calc-table th {
  font-size:      12px;
  letter-spacing: 0.5px;
  text-align:     center;
}

.calc-table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1199px) {
  .calc-inner { grid-template-columns: 1fr; }
  .calc-right { height: auto; }
}

@media (max-width: 991px) {
  .calc-heading { font-size: 28px; }
  .calc-right   { height: auto; }
}

@media (max-width: 575px) {
  .calc-inner         { gap: 40px; }
  .calc-right         { gap: 30px; }
  .calc-right__top    { flex-direction: column; }
  .calc-revenue-block { text-align: left; }
  .calc-revenue-value { font-size: 28px; }
  .calc-table-wrap    { width: 80vw; }
  .calc-table th,
  .calc-table td      { font-size: 12px; padding: 8px; }
}


/* ============================================================
   FEATURES
   3-column grid of six feature cards.
   Each card: icon box + title + body copy.
============================================================ */
.features-section { background: var(--white-color); }
.features-section.bg-f5ebe1{ background: var(--stats-bg);}
.features-heading {
  font-family:    var(--heading-font);
  font-size:      48px;
  font-weight:    400;
  color:          var(--card-heading-color);
  text-align:     center;
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0 auto 100px;
}

.features-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap:               64px;
  column-gap:            64px;
}
.features-grid.featured-grid-rounded{
	  row-gap:              24px;
  column-gap:          24px;
}
.feature-item {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            24px;
}

.feature-icon {
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-card);
  background:      var(--stats-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.feature-icon svg {
  width:           24px;
  height:          24px;
  stroke:          var(--card-heading-color);
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.feature-title {
  font-family:    var(--body-font);
  font-size:      20px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.4;
  letter-spacing: var(--ls-label);
  margin:         0;
}

.feature-body {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin:         0;
}

.features-grid.featured-grid-rounded .feature-item {
border-radius: 8px;
border: 0.5px solid #8d82827a;
background: #FFF;
padding: 24px;
}
.features-grid.featured-grid-rounded .feature-icon{
	width:48px;
	height:48px;
	background:#FCE6DD;
	border-radius: 12.923px;
}
.features-grid.featured-grid-rounded .feature-title{

}
@media (min-width: 1024px) {
	
.features-grid.featured-grid-rounded{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
 align-items: stretch;  
}

.features-grid.featured-grid-rounded > * {
    flex: 0 0 calc((100% - 128px) / 3);
}
	
}
@media (max-width: 991px) {
  .features-heading { font-size: 36px; margin-bottom: 40px; }
  .features-grid    { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

@media (max-width: 575px) {
  .features-heading { font-size: 28px; }
  .features-grid    { grid-template-columns: 1fr; }
  .feature-item     { align-items: center; gap: 16px; text-align: center; justify-content: center; }
}



/* ============================================================
   MANAGING
   Two-column layout: left photo, right content.
   Bullet list uses ::before circle-tick icon (accent orange).
 ============================================================ */  
 .manage-section{
border-top: 1px solid #F5EBE1;
overflow-x:hidden;
 }
.manage-heading{
	    font-family: var(--heading-font);
    font-size: 36px;
    font-weight: 400;
    color: var(--accent-color);
    line-height: 1.2;
    letter-spacing: var(--ls-heading);
    margin: 0;
}
.manage-content{

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
 
}




  .phone-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 264.988px;
    flex-shrink: 0;
	margin:0px auto;
  }

  /* ── Phone Stage ── */
  .phone-stage {
    position: relative;
    width: 100%;
    user-select: none;
  }

  /* Phone frame sits on top */
  .phone-frame {
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
    pointer-events: none;
  }

  /* Screen area behind frame */
  .phone-screen {
    position: absolute;
    top: 2.2%;
    left: 5.6%;
    width: 88.8%;
    height: 96%;

    overflow: hidden;
    z-index: 1;
    background: #1a0a2e;
  }

  /* ── Slides ── */
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .slide.active {
    opacity: 1;
  }

  /* ── Dots ── */
  .dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .dot {
    width: 8px;
    height: 8px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #8D8282;
    background: #F5EBE1;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
  }

  .dot.active {
    background: #F64C20;
    border-color: #F64C20;
  }

  /* ══════════════════════════════
     RESPONSIVE
  ══════════════════════════════ */

  /* Tablet — scale down slightly */
  @media (max-width: 768px) {
    .phone-carousel {
      width: 220px;
      gap: 32px;
    }
	 .manage-section .row{
		 gap:40px;
	 }
  }

  /* Mobile — fit full width with padding */
  @media (max-width: 480px) {
    .phone-carousel {
      width: min(264.988px, calc(100vw - 48px));
      gap: 24px;
    }

    .dot {
      width: 7px;
      height: 7px;
    }
  }

  /* Very small screens */
  @media (max-width: 320px) {
    .phone-carousel {
      width: calc(100vw - 32px);
      gap: 20px;
    }
  }





/* ============================================================
   SWITCHING / ONBOARDING
   Two-column layout: left photo, right content.
   Bullet list uses ::before circle-tick icon (accent orange).
============================================================ */
.switching-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            560px;
}

.switching-media {
  position: relative;
  overflow: hidden;
}

.switching-media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.switching-content {
  background:      var(--white-color);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             24px;
  padding:         80px 72px;
  border-top:      var(--border-cream);
}

.switching-heading {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--accent-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0;
}

.switching-body {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin:         0 0 16px 0;
  max-width:      520px;
}

.switching-list {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  list-style:     none;
  padding:        0;
  margin:         0;
}

.switching-list li {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
}

/* Circle tick icon */
.switching-list li::before {
  content:             '';
  flex-shrink:         0;
  width:               22px;
  height:              22px;
  border-radius:       50%;
  background:          var(--accent-color);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     13px 13px;
}

@media (max-width: 991px) {
  .switching-section { grid-template-columns: 1fr; }
  .switching-media   { min-height: 320px; }
  .switching-content { padding: 48px 32px; }
  .switching-heading { font-size: 36px; }
}

@media (max-width: 575px) {
  .switching-content { padding: 40px 20px; }
  .switching-heading { font-size: 28px; }
}


/* ============================================================
   PRICING & PLANS
   Four-card grid (Classic / Elite / Star / Champion).
   On hover: card flips to accent orange, icons swap, CTA darkens.
============================================================ */
.pricing-section { background: var(--stats-bg); }

.pricing-eyebrow {
  font-family:    var(--body-font);
  font-size:      14px;
  font-weight:    400;
  color:          var(--muted-color);
  text-align:     center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  40px;
  display:        block;
}

.pricing-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  align-items:           center;
}

.pricing-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            40px;
  padding:        24px;
  border-radius:  var(--radius-card);
  border:         0.5px solid var(--muted-color);
  transition:     background 0.25s ease, border-color 0.25s ease;
  position: relative;
}

.pricing-card:hover {
  background:   var(--accent-color);
  border-color: var(--accent-color);
}

.pricing-card__name {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--dark-heading-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0;
  transition:     color 0.25s ease;
}

.pricing-card__name span{font-size: 16px;color: var(--mediumGrey); margin: 0; display: block;}

.pricing-card:hover .pricing-card__name { color: var(--white-color); }

.pricing-features {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  list-style:     none;
  padding:        0;
  margin:         0;
  width:          100%;
}
.price {
  font-size: 24px;
  font-weight: 800;
  color: var(--dark-heading-color);
  margin: 0;
}

.price small {font-size: 14px;color: var(--muted-color) ;margin: 0;font-weight: 400;display: block;}
.pricing-card:hover .price, .pricing-card:hover .price small {
    color: var(--white-color);
}

.popular {
    display: inline-block;
    background: var(--accent-color);
    color: var(--white-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    margin-bottom: 10px;
    position: absolute;
    top: -12px;
}
.pricing-card:hover .popular {
    color: var(--accent-color);
    background: var(--white-color);
}

.pricing-features li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  line-height: 1.4;
  transition:  color 0.25s ease;
}

.pricing-features li::before {
  content:             '';
  flex-shrink:         0;
  width:               18px;
  height:              18px;
  border-radius:       50%;
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  transition:          background-image 0.25s ease;
}

.pricing-features li.is-active         { color: var(--muted-color); }
.pricing-features li.is-active::before { background-image: url("../../uploads/images/active-check.svg"); }

.pricing-features li.is-dim            { color: rgba(141, 130, 130, 0.40); }
.pricing-features li.is-dim::before    { background-image: url("../../uploads/images/dim-check.svg"); }

.pricing-card:hover .pricing-features li.is-active         { color: var(--white-color); }
.pricing-card:hover .pricing-features li.is-active::before { background-image: url("../../uploads/images/hover-active-check.svg"); }

.pricing-card:hover .pricing-features li.is-dim            { color: rgba(255, 255, 255, 0.40); }
.pricing-card:hover .pricing-features li.is-dim::before    { background-image: url("../../uploads/images/hover-dim-check.svg"); }

.pricing-card__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 20px 15px;
  border-radius:   var(--radius-btn);
  border:          1px solid var(--muted-color);
  background:      transparent;
  font-family:     var(--body-font);
  font-size:       18px;
  font-weight:     500;
  color:           var(--muted-color);
  line-height:     normal;
  cursor:          pointer;
  text-decoration: none;
  gap:             8px;
  width:           100%;
  position:        relative;
  transition:      background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pricing-card__cta::after {
  content:             '';
  flex-shrink:         0;
  width:               12px;
  height:              12px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9.129 5.0835L5.106 1.0605L6.1665 0L12 5.8335L6.1665 11.667L5.106 10.6065L9.129 6.5835H0V5.0835H9.129Z' fill='%238D8282'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     12px 12px;
  transition:          background-image 0.25s ease;
}

.pricing-card:hover .pricing-card__cta {
  background:   var(--dark-heading-color);
  border-color: var(--dark-heading-color);
  color:        var(--white-color);
}

.pricing-card:hover .pricing-card__cta::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9.129 5.0835L5.106 1.0605L6.1665 0L12 5.8335L6.1665 11.667L5.106 10.6065L9.129 6.5835H0V5.0835H9.129Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

@media (max-width: 1199px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
  .pricing-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   TESTIMONIALS
   Horizontally scrollable card track with scroll-snap.
   Cards highlight cream + orange stars on hover / .is-active.
   Progress bar width updated by JS on scroll.
============================================================ */
.testimonials-section {
  padding-left:  12px;
  padding-right: 12px;
  overflow:      hidden;
}

.testimonials-header {
  margin-bottom:  64px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            34px;
}

.testimonials-quote-icon {
  display: block;
  width:   48px;
  height:  auto;
}

.testimonials-heading {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.2;
  letter-spacing: var(--ls-heading);
  margin:         0;
}

.testimonials-track {
  display:                    grid;
  grid-auto-flow:             column;
  grid-auto-columns:          413px;
  gap:                        20px;
  margin-bottom:              64px;
  overflow-x:                 auto;
  scroll-snap-type:           x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
  scroll-behavior:            smooth;
}

.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  display:           flex;
  flex-direction:    column;
  justify-content:   space-between;
  align-items:       flex-start;
  width:             413px;
  height:            420px;
  padding:           24px 24px 40px;
  border-radius:     var(--radius-card);
  background:        var(--white-color);
  border:            0.5px solid var(--dgrey-color);
  scroll-snap-align: start;
  flex-shrink:       0;
  gap:               24px;
}

.testimonial-card:hover,
.testimonial-card.is-active {
  background:   var(--stats-bg);
  border-color: transparent;
}

.testimonial-card__top {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            24px;
  align-self:     stretch;
}

.testimonial-stars {
  display: flex;
  gap:     4px;
}

.testimonial-stars svg {
  width:  20px;
  height: 20px;
  fill:   var(--muted-color);
}

.testimonial-card.is-active .testimonial-stars svg,
.testimonial-card:hover .testimonial-stars svg {
  fill:  var(--accent-color);
  color: var(--accent-color);
}

.testimonial-card__quote {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin:         0;
}

.testimonial-card__author {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.testimonial-card__name {
  font-family:    var(--body-font);
  font-size:      20px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.4;
  letter-spacing: var(--ls-label);
  margin:         0;
}

.testimonial-card__role {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin:         0;
}

/* Progress bar */
.testimonials-progress {
  display:      flex;
  align-items:  center;
  gap:          8px;
  width:        100%;
  stroke-width: 1px;
  background:   var(--stats-bg);
}

.progress-track {
  width:         100%;
  height:        2px;
  background:    var(--dgrey-color);
  border-radius: 2px;
  position:      relative;
  overflow:      hidden;
}

.progress-fill {
  position:      absolute;
  left:          0;
  top:           0;
  height:        100%;
  width:         33%;
  background:    var(--accent-color);
  border-radius: 2px;
  transition:    width 0.4s ease;
}

@media (max-width: 991px) {
  .testimonials-header  { gap: 24px; margin-bottom: 40px; }
  .testimonials-track   { grid-auto-columns: 320px; margin-bottom: 40px; }
  .testimonial-card     { width: 320px; height: auto; }
  .testimonials-heading { font-size: 28px; }
}


/* ============================================================
   CTA BANNER
   Full-width accent-orange conversion strip.
   Headline + sub-line centred; dark button with arrow icon.
============================================================ */
.cta-banner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             56px;
  padding:         100px 80px;
  background:      var(--accent-color);
  text-align:      center;
}

.cta-banner__text {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            24px;
}

.cta-banner__heading {
  font-family:    var(--heading-font);
  font-size:      36px;
  font-weight:    400;
  color:          var(--white-color);
  line-height:    1.15;
  letter-spacing: var(--ls-heading);
  margin:         0;
}

.cta-banner__sub {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--white-color);
  line-height:    1.4;
  letter-spacing: var(--ls-body);
  margin:         0;
  opacity:        0.85;
}

.cta-banner__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         14px 28px 15px;
  border-radius:   var(--radius-btn);
  background:      var(--dark-heading-color);
  border:          none;
  font-family:     var(--body-font);
  font-size:       18px;
  font-weight:     500;
  color:           var(--stats-bg);
  line-height:     normal;
  text-decoration: none;
  cursor:          pointer;
  transition:
    background 0.25s ease,
    transform  0.30s var(--ease-bounce);
}
.cta-banner__btn.cta-whatsapp{
	background:#25D366;
}
.cta-banner__btn.cta-bordered{
background: transparent;
border: 1px solid var(--Light-grey, #8D8282);
color:#8D8282;
}
.cta-banner__btn:hover {
  background: #000;
  color:      var(--stats-bg);
  transform:  translateY(-2px);
}

.cta-banner__btn::after {
  content:             '';
  flex-shrink:         0;
  width:               18px;
  height:              18px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='%23F5EBE1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  transition:          transform 0.30s var(--ease-bounce);
}
.cta-banner__btn.cta-whatsapp::after{
	display:none;
}
.cta-banner__btn:hover::after { transform: translateX(4px); }

@media (max-width: 991px) {
  .cta-banner          { padding: 60px 32px 80px; gap: 40px; }
  .cta-banner__heading { font-size: 36px; }
}

@media (max-width: 575px) {
  .cta-banner          { padding: 48px 20px; }
  .cta-banner__heading { font-size: 30px; }
  .cta-banner__btn     {  justify-content: space-between; }
}


/* ============================================================
   FOOTER
   Accent-orange bar: copyright left, legal nav links right.
============================================================ */
footer {
    padding: 15px 0;
    background: var(--dark-heading-color);
    text-align: center;
    color: var(--muted-color);
    border-top: 1px solid #e6e6e6;
    font-size: 14px;
  /* background: var(--accent-color);
  border-top: 0.5px solid var(--stats-bg); */
}

.site-footer {
  padding:         0px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             24px;
  text-align: center;
}

.site-footer__copy,
.site-footer__nav a {
  font-family:     var(--body-font);
  font-size:       14px;
  font-weight:     400;
  color:           var(--stats-bg);
  line-height:     1.4;
  letter-spacing:  0.2px;
  text-decoration: none;
  opacity:         0.90;
  margin:          0;
}

.site-footer__nav {
  display:     flex;
  align-items: center;
  gap:         40px;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.site-footer__nav a:hover {
  opacity:         1;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .site-footer {
    flex-direction: column;
    align-items:    center;
    padding:        24px 0px;
    text-align:     center;
    gap:            16px;
  }

  .site-footer__nav { gap: 24px; }
}

@media (max-width: 1440px) {
	.container{
		max-width:100%;
	}
	
}
@media (min-width: 1440px) {
.hero-content-top{
    margin-left: auto;
}

}
@media (min-width: 1024px) {
.mw-390{
	max-width:390px;
}

}


/* ============================================================
   FAQ
   Centered heading + Bootstrap 5 accordion, restyled flat.
   Overrides Bootstrap's default borders, chevron, blue active
   state, and shadows to match the site's minimal design.
   Collapsed rows show the supplied "+" icon; open row rotates
   it 45deg into an "×".
============================================================ */
.faq-section {
  background: var(--white-color);
  border-top: var(--border-cream);
}
.faq-section.bg-beige{
	background:var(--stats-bg);
}

.faq-header {
  margin-bottom: 80px;
}

/* ── Reset Bootstrap accordion chrome ── */
.faq-accordion {
  --bs-accordion-bg:               transparent;
  --bs-accordion-border-color:     transparent;
  --bs-accordion-border-width:     0;
  --bs-accordion-border-radius:    0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x:    0;
  --bs-accordion-btn-padding-y:    28px;
  --bs-accordion-btn-bg:           transparent;
  --bs-accordion-active-bg:        transparent;
  --bs-accordion-active-color:     var(--dark-heading-color);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon:         none;
  --bs-accordion-btn-active-icon:  none;
  --bs-accordion-body-padding-x:   0;
  --bs-accordion-body-padding-y:   0;
}

.faq-item {
  background:    transparent;
  border:        0;
  border-bottom: var(--border-cream);
}
.faq-section.bg-beige .faq-item {
	 border-color:#8D8282;
}
/* ── Question (Bootstrap accordion-button) ── */
.faq-question.accordion-button {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             40px;
  width:           100%;
  background:      transparent;
  box-shadow:      none;
  font-family:     var(--body-font);
}

.faq-question.accordion-button:focus {
  box-shadow:   none;
  border-color: transparent;
}

/* Kill Bootstrap's default chevron pseudo-icon */
.faq-question.accordion-button::after {
  display: none;
  content: none;
}

.faq-question__text {
  font-family:    var(--body-font);
  font-size:      20px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.4;
  letter-spacing: var(--ls-label);
  transition:     color 0.2s ease;
}



/* ── Toggle icon (supplied "+" SVG) ── */
.faq-icon {
  flex-shrink: 0;
  width:       12px;
  height:      12px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M5 5V0H6.66667V5H11.6667V6.66667H6.66667V11.6667H5V6.66667H0V5H5Z' fill='%23F64C20'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     12px 12px;
  transition:          transform 0.3s var(--ease-bounce);
}

/* Open state: rotate "+" into "×" */
.faq-question.accordion-button:not(.collapsed) .faq-icon {
  transform: rotate(45deg);
}

/* ── Answer body ── */
.faq-answer.accordion-body {
  padding: 0 48px 28px 0;
}

.faq-answer__body {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.5;
  letter-spacing: var(--ls-body);
  margin:         0;
  max-width:      1240px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .faq-header { margin-bottom: 40px; }
  .faq-accordion {
    --bs-accordion-btn-padding-y: 22px;
  }
  .faq-question.accordion-button { gap: 24px; }
  .faq-question__text            { font-size: 18px; }
  .faq-answer.accordion-body     { padding: 0 24px 22px 0; }
}

@media (max-width: 575px) {
  .faq-question__text        { font-size: 16px; }
  .faq-answer.accordion-body { padding: 0 16px 20px 0; }
}

  
/* ============================================================
   HERO FORM PANEL
   Orange "Get a free demo" panel that replaces the hero image.
   Sits in the right column of .hero-section, full height.
   Hexagon pattern background + language toggle + HubSpot form.
============================================================ */
.country_form.gForm {width: 100%;}
.hero-form-panel {
  width: 41%;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 64px 56px;
  background: #F64C20;
  overflow: hidden;
}
.hero-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../uploads/images/cambodia/hex-pattern.png");
  background-repeat: repeat;
  background-size: 420px auto;
  opacity: 0.2;            /* white-line pattern; raise/lower for line strength */
  /* NO blend mode — the PNG is already white-lines-on-transparent */
  pointer-events: none;
}
/* ── Panel heading + language toggle ── */
.hero-form-head {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  text-align:     center;
}
 
.hero-form-title {
  font-family:    var(--heading-font);
  font-size:      44px;
  font-weight:    400;
  color:          var(--white-color);
  line-height:    1.1;
  letter-spacing: var(--ls-heading);
  margin:         0;
}
 
.hero-form-lang {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  justify-content: center;
}
 
.hero-form-lang__label,
.hero-form-lang__or {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  color:       var(--white-color);
  line-height: 1.4;
}
 
/* Language chip (KM / EN) */
.hero-lang-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 14px 6px 8px;
  border:        none;
  border-radius: var(--radius-pill);
  background:   transparent;
  font-family:   var(--body-font);
  font-size:     15px;
  font-weight:   600;
  color:          var(--white-color);
  border:1px solid var(--white-color);
  line-height:   1;
  cursor:        pointer;
  transition:    transform 0.2s ease, opacity 0.2s ease;
}
 
.hero-lang-chip:not(.is-active) {
  opacity: 0.92;
}
 
.hero-lang-chip:hover {
  transform: translateY(-1px);
}
 
.hero-lang-chip__flag {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
}
 
/* ── White form card ── */
.hero-form-card {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             32px;
  align-self:      stretch;
  padding:         0;
  border-radius:   10.897px;
  background:      #F8FAFF;
  box-shadow:
    1.816px 1.816px 0 0 rgba(255, 255, 255, 0.40) inset,
    3.632px 3.632px 0 0 rgba(81, 113, 162, 0.20);
	width:100%;
	max-width:480px;
	margin:0px auto;
}
 
/* ── HubSpot form skinning (mounted into .hs-form-hero) ── */
.hs-form-hero { width: 100%; }
 
.hs-form-hero form {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  width:          100%;
}
 
.hs-form-hero .hs-form-field { width: 100%; }
 
/* Hide HubSpot field labels (design uses placeholders only) */
.hs-form-hero .hs-form-field > label {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0 0 0 0);
  white-space: nowrap;
  border:   0;
}
 
/* Inputs / textarea / selects */
.hs-form-hero input[type="text"],
.hs-form-hero input[type="email"],
.hs-form-hero input[type="tel"],
.hs-form-hero input[type="number"],
.hs-form-hero textarea,
.hs-form-hero select {
  width:           100%;
  padding:         16px 18px;
  border:          1px solid #E2E6F0;
  border-radius:   var(--radius-btn);
  background:      var(--white-color);
  font-family:     var(--body-font);
  font-size:       16px;
  font-weight:     400;
  color:           var(--dark-heading-color);
  line-height:     1.4;
  outline:         none;
  transition:      border-color 0.2s ease, box-shadow 0.2s ease;
}
 
.hs-form-hero input::placeholder,
.hs-form-hero textarea::placeholder {
  color:   var(--muted-color);
  opacity: 0.85;
}
 
.hs-form-hero input:focus,
.hs-form-hero textarea:focus,
.hs-form-hero select:focus {
  border-color: var(--accent-color);
  box-shadow:   0 0 0 3px rgba(246, 76, 32, 0.12);
}
 
/* Inline validation errors */
.hs-form-hero .hs-error-msgs,
.hs-form-hero .hs-error-msg {
  list-style:  none;
  margin:      6px 0 0;
  padding:     0;
  font-size:   13px;
  color:       var(--accent-color);
}
 
/* Submit button ("Book a Demo") */
.hs-form-hero .hs-submit { width: 100%; }
 
.hs-form-hero .hs-button,
.hs-form-hero input[type="submit"] {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         16px 24px;
  border:          none;
  border-radius:   var(--radius-btn);
  background:      var(--dark-heading-color);
  font-family:     var(--body-font);
  font-size:       18px;
  font-weight:     500;
  color:           var(--white-color);
  line-height:     1.2;
  cursor:          pointer;
  margin-top:      8px;
  transition:      background 0.25s ease, transform 0.30s var(--ease-bounce);
}
 
.hs-form-hero .hs-button:hover,
.hs-form-hero input[type="submit"]:hover {
  background: #000;
  transform:  translateY(-2px);
}
 
/* ── Responsive ── */
@media (max-width: 991px) {
  .hero-form-panel {
    width:   100%;
    padding: 48px 24px 56px;
    gap:     28px;
  }
  .hero-form-title { font-size: 36px; }
}
 
@media (max-width: 575px) {
  .hero-form-panel { padding: 40px 16px 48px; }
  .hero-form-title { font-size: 30px; }
  .hero-form-card  { padding: 20px 16px 28px; }
}
 
.power-section { background: var(--white-color); }
 
.power-grid {
  display:     flex;
  align-items: flex-start;
  gap:         96px;
}
 
/* ── Left column: intro ─────────────────────────────────── */
.power-intro {
  flex:      0 0 40%;
  max-width: 460px;
}
 
.power-intro__heading {
 
  margin:         0 0 28px;
}
 
.power-intro__body {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--card-heading-color);
  line-height:    1.6;
  letter-spacing: var(--ls-body);
  margin:         0 0 32px;
}
 
/* Orange CTA variant */
.power-intro__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         15px 26px;
  border-radius:   var(--radius-btn);
  background:      var(--accent-color);
  border:          none;
  font-family:     var(--body-font);
  font-size:       17px;
  line-height:     1.2;
  font-weight:     500;
  color:           var(--white-color);
  text-decoration: none;
  cursor:          pointer;
  transition:
    background 0.25s ease,
    transform  0.30s var(--ease-bounce);
}
 
.power-intro__cta:hover {
  background: var(--dark-heading-color);
  color:      var(--white-color);
  transform: translateY(-2px);
}
 
.power-intro__cta::after {
  content:             '';
  flex-shrink:         0;
  width:               18px;
  height:              18px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  transition:          transform 0.30s var(--ease-bounce);
}
 
.power-intro__cta:hover::after { transform: translateX(4px); }
 
/* ── Right column: feature list ─────────────────────────── */
.power-list {
  flex:           1 1 auto;
  display:        flex;
  flex-direction: column;
}
 
.power-item {
  display:       flex;
  align-items:   flex-start;
  gap:           18px;
  padding-block: 24px;
}
.power-item:first-child          { padding-top: 4px; }
.power-item:not(:last-child)     { border-bottom: 1px solid var(--power-divider); }
 
.power-item__icon {
  flex-shrink:     0;
  width:           48px;
  height:          48px;
  border-radius:   12.923px;
  background:      #FCE6DD;         /* same peach chip as .featured-grid-rounded */
  display:         flex;
  align-items:     center;
  justify-content: center;
}
 
.power-item__icon svg {
  width:           22px;
  height:          22px;
  stroke:          var(--accent-color);
  fill:            none;
  stroke-width:    1.6;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
/* solid corner square in the grid icon */
.power-item__icon svg .fill-accent {
  fill:   var(--accent-color);
  stroke: none;
}
 
.power-item__content {
  display:        flex;
  flex-direction: column;
}
 
.power-item__title {
  font-family:    var(--body-font);
  font-size:      20px;
  font-weight:    700;
  color:          var(--dark-heading-color);
  margin:         0 0 8px;
}

 
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .power-grid           { flex-direction: column; gap: 40px; }
  .power-intro          { flex: 1 1 auto; max-width: 640px; }

}
 
@media (max-width: 575px) {
  .power-grid           { gap: 32px; }

  .power-item           { gap: 16px; padding-block: 22px; }
  .power-item__icon     { width: 44px; height: 44px; }
}
 
/* ============================================================
   OPERATION SECTION  ("Global Platform. Local Sri Lanka Operation.")
   Dark indigo band. Reuses .page-section, .section-title-block,
   .fs-36 and .section-border-top from the existing sheet.
   All light-on-dark values are scoped to .operation-section, so
   no global rule is modified.
============================================================ */
.operation-section {
  --op-heading: #F7F4F0;   /* warm white — heading + bold lead-ins   */
  --op-body:    #D6D2DA;   /* soft light grey — intro copy           */
  --op-muted:   #B8B2BE;   /* muted grey — item continuation text    */
  background: var(--Indigo-Blue, #1D1828);
}

/* light text — scoped overrides for the dark background only */
.operation-section .section-title-container h2 { color: var(--op-heading); }
.operation-section .section-title-container p  {
  color:       var(--op-body);
  font-size:   16px;            /* mockup intro is 16px, not the sheet default 18px */
  line-height: 1.5;
  max-width:   760px;
}

/* two-column row */
.operation-columns {
  display:     flex;
  align-items: flex-start;
  gap:         58px;
}

/* single column */
.operation-col {
  display:        flex;
  width:          590px;
  flex-direction: column;
  align-items:    flex-start;
  gap:            26px;
}

/* orange kicker label (plain text, not the bordered .eyebrow pill) */
.operation-col__label {
  font-family:    var(--body-font);
  font-size:      17px;
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          var(--accent-color);
  margin:         0;
}

/* list row: icon + text */
.operation-item {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  width:       100%;
}

.operation-item__icon {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  margin-top:  2px;               /* optical align to first text line */
}

.operation-item__icon svg {
  width:           20px;
  height:          20px;
  stroke:          var(--accent-color);
  fill:            none;
  stroke-width:    1.6;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.operation-item__text {
  flex:           1 1 auto;
  min-width:      0;
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  line-height:    1.5;
  letter-spacing: var(--ls-body);
  color:          var(--op-muted);
  margin:         0;
}

.operation-item__text strong {
  color:       var(--op-heading);
  font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
  .operation-columns { gap: 40px; }
  .operation-col     { width: auto; flex: 1 1 0; }
}

@media (max-width: 767px) {
  .operation-columns { flex-direction: column; gap: 40px; }
  .operation-col     { width: 100%; flex: none; }
}

/* ── Awards / certifications row (below the two columns) ── */
.operation-awards {
  display:     flex;
  flex-wrap:   wrap;
  gap:         20px;
    max-width: 1100px;
  padding-top: 5rem;
  border-top:  1px solid  #565157;   /* derived divider on dark band */
}

.operation-award {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 20px;
  border:        1px solid rgba(255, 255, 255, 0.14);  /* derived pill border on dark band */
  border-radius: var(--radius-pill);
}

.operation-award__icon {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  display:     inline-flex;
}

.operation-award__icon svg {
  width:           18px;
  height:          18px;
  stroke:          var(--accent-color);
  fill:            none;
  stroke-width:    1.6;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.operation-award__text {
  font-family:    var(--body-font);
  font-size:      15px;
  font-weight:    400;
  line-height:    1.2;
  letter-spacing: var(--ls-body);
  color:          var(--op-heading);
  white-space:    nowrap;
}

@media (max-width: 767px) {
  .operation-awards      { padding-top: 1.5rem; }
  .operation-award__text { white-space: normal; }
}

/* ============================================================
   MIGRATION SECTION  ("Switching From Your Current PMS in 14 Days…")
   White band — intro, 4-step timeline with a connector rail,
   a cream "What's included" card, then the dark CTA.
   Reuses .page-section, .section-title-block, .fs-36,
   .section-border-top and .hero-cta. All new rules are scoped
   to .migration-section, so no global rule is modified.
============================================================ */
.migration-section { background: var(--white-color); }

/* heading keeps the sheet default colour (--heading-color); the two-line
   break is handled by the .d-lg-block span in the markup */

/* intro — lighter + smaller than the sheet default (18px/#565157) */
.migration-section .section-title-block p {
  color:       var(--muted-color);
  font-size:   16px;
  line-height: 1.5;
  max-width:   640px;
}

/* ── Timeline ───────────────────────────────────────────── */
.migration-timeline {
  position:              relative;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:            32px;
}

/* the horizontal rail, sitting at the badge's vertical centre */
.migration-timeline::before {
  content:    '';
  position:   absolute;
  top:        13px;
  left:       0;
  right:      0;
  height:     1px;
  background: #E7E1D9;
  z-index:    0;
}

.migration-step {
  position:       relative;   /* lift above the rail */
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

/* orange pill — shared by the day badges and the "at zero charge" tag */
.migration-step__badge,
.migration-included__tag {
  display:        inline-flex;
  align-items:    center;
  padding:        6px 16px;
  border-radius:  var(--radius-pill);
  background:     var(--accent-color);
  color:          var(--white-color);
  font-family:    var(--body-font);
  font-size:      13px;
  font-weight:    600;
  line-height:    1;
  letter-spacing: 0.2px;
  white-space:    nowrap;
}

.migration-step__badge { margin-bottom: 30px; }

.migration-step__title {
  font-family:    var(--body-font);
  font-size:      20px;
  font-weight:    600;
  color:          var(--dark-heading-color);
  line-height:    1.3;
  letter-spacing: 0;
  margin:         0 0 16px;
}

.migration-step__body {
  font-family:    var(--body-font);
  font-size:      15px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.5;
  letter-spacing: var(--ls-body);
  margin:         0;
}

/* ── "What's included" card ─────────────────────────────── */
.migration-included {
  background:    var(--stats-bg);
  border:        1px solid rgba(141, 130, 130, 0.50);;
  border-radius: 8px;
  padding:       32px 32px 40px;
}

.migration-included__head {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin:      0 0 28px;
}

.migration-included__title {
  font-family: var(--body-font);
  font-size:   20px;
  font-weight: 600;
  color:       var(--dark-heading-color);
  line-height: 1.2;
  margin:      0;
}

.migration-included__tag { font-size: 14px; }

.migration-included__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            48px;
  row-gap:               24px;
}

.migration-checkitem {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
}

.migration-checkitem__icon {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  margin-top:  1px;
}

.migration-checkitem__icon svg {
  width:           20px;
  height:          20px;
  stroke:          #62C195;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
  margin-top:-5px;
}

.migration-checkitem__text {
  font-family:    var(--body-font);
  font-size:      15px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.5;
  letter-spacing: var(--ls-body);
  margin:         0;
}

.migration-checkitem__text strong {
  color:       var(--dark-heading-color);
  font-weight: 600;
}

/* ── CTA (reuses .hero-cta) ─────────────────────────────── */
.migration-cta-wrap { margin-top: 40px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .migration-timeline           { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 44px; }
  .migration-timeline::before   { display: none; }   /* rail only reads across one row */
  .migration-included__grid     { grid-template-columns: 1fr; row-gap: 22px; }
  .migration-included           { padding: 28px 24px 32px; }
}

@media (max-width: 575px) {
  .migration-timeline { grid-template-columns: 1fr; row-gap: 36px; }
  .migration-step__badge{
	  margin-bottom:20px;
  }
}


/* ============================================================
   PRICING TABLE SECTION  ("Pricing That Matches How You Actually Operate")
   Cream band — centred title, a 3-column rate table with an
   orange header and alternating warm rows, an Add-ons note,
   then the dark CTA. Reuses .section-title-block, .fs-36,
   .text-center and .hero-cta. All new rules are scoped to
   .pricing-table-section, so no global rule is modified.
============================================================ */
.pricing-table-section { background: var(--stats-bg); }

/* heading keeps the sheet default (--heading-color / fs-36) */

/* subtext — lighter than the sheet default (18px/#565157) */
.pricing-table-section .section-title-block p {
  color:     var(--muted-color);
  font-size: 16px;
}

/* ── Rate table ─────────────────────────────────────────── */
.pricing-table-wrap {
  margin-top:    40px;
  border-radius: 14px;
  overflow:      hidden;                       /* clip cells to rounded corners */
  border:        1px solid rgba(141, 130, 130, 0.40);
}

.pricing-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--body-font);
}

.pricing-table th,
.pricing-table td {
  padding:     20px 24px;
  text-align:  center;
  border:      1px solid rgba(141, 130, 130, 0.40);
  line-height: 1.4;
}

/* header row */
.pricing-table thead th {
  padding:        13px 20px;
  background:     var(--accent-color);
  color:          var(--white-color);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0.3px;
  border-color:   rgba(255, 255, 255, 0.22);   /* subtle dividers on the orange */
}

/* alternating body rows — option 1 / option 2 fills */
.pricing-table tbody tr:nth-child(odd)  td { background: #FFF3E8; }
.pricing-table tbody tr:nth-child(even) td { background: #FFE9D0; }

/* body cell text */
.pricing-table td {
  font-size: 13px;
  font-weight: 400;
  color:     var(--dark-heading-color);
}

/* first column (room ranges) — darker + bolder */
.pricing-table td.pricing-table__rooms {
  font-weight: 600;
}

/* custom-pricing / enterprise cells in accent */
.pricing-table__accent { color: var(--accent-color); }

/* ── Add-ons note ───────────────────────────────────────── */
.pricing-addons {
  margin-top:     48px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            24px;
}

.pricing-addons__title {
  font-family:  var(--heading-font);
  font-size:    24px;
  font-weight:  400;
  color:        var(--muted-color);
  line-height:  1.2;
  margin:       0 0 4px;
}

.pricing-addons p {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  color:          var(--muted-color);
  line-height:    1.5;
  letter-spacing: var(--ls-body);
  margin:         0;
  max-width:      920px;
}
.pricing-table td.pricing-table__accent{
	color:#C4550A;
}
.pricing-table__rooms.pricing-table__accent{
	font-weight:600;
}
/* ── Add-ons: left-aligned + lined heading (opt-in modifier) ──
   Add "pricing-addons--lined" to the existing .pricing-addons
   container. Original .pricing-addons rules above stay untouched. */
.pricing-addons.pricing-addons--lined {
  align-items: flex-start;   /* was center */
  text-align:  left;         /* was center */
  gap:         20px;
}

.pricing-addons--lined .pricing-addons__title {
  display:     flex;
  align-items: center;
  gap:         16px;
  width:       100%;
  font-family: var(--body-font);          /* image shows bold sans, not the serif default */
  font-size:   20px;
  font-weight: 700;
  color:       var(--dark-heading-color); /* #1D1828 */
  margin:      0;
}

.pricing-addons--lined .pricing-addons__title::after {
  content:    "";
  flex:       1 1 auto;
  height:     1px;                          /* your stroke-width: 1px */
  background: rgba(141, 130, 130, 0.40);    /* your stroke color */
}
/* ── CTA (reuses .hero-cta) ─────────────────────────────── */
.pricing-cta-wrap {
  margin-top: 72px;
  text-align: center;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .pricing-table th,
  .pricing-table td       { padding: 14px 12px; }
  .pricing-table thead th { font-size: 13px; padding: 11px 10px; }
  .pricing-table td       { font-size: 14px; }
  .pricing-addons         { margin-top: 40px; }
  .pricing-cta-wrap       { margin-top: 48px; }
}
 
  /* Horizontal scroll wrapper for narrow viewports; corners clipped by the inner shell */
  .ycs-compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    animation: ycs-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
 
  .ycs-table-inner {
    min-width: 940px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(141, 130, 130, 0.14);
    box-shadow: 0 22px 46px -30px rgba(29, 24, 40, 0.28);
  }
 
  table.ycs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
  }
 
  /* ---------- Header ---------- */
  table.ycs thead th {
    color: var(--header-text);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 20px 22px;
    text-align: center;
    border-right: 1px solid var(--header-divider);
    white-space: nowrap;
  }
  table.ycs thead th:last-child { border-right: none; }
 
  th.col-feature { background: var(--dark);   text-align: left; }
  th.col-ycs     { background: var(--orange); }
  th.col-comp    { background: var(--grey); }
 
  /* ---------- Body ---------- */
  table.ycs tbody th,
  table.ycs tbody td {
    padding: 20px 22px;
    border-bottom: 1px solid var(--cell-border);
    border-right: 1px solid var(--cell-border);
    vertical-align: middle;
  }
  table.ycs tbody th:last-child,
  table.ycs tbody td:last-child { border-right: none; }
  table.ycs tbody tr:last-child th,
  table.ycs tbody tr:last-child td { border-bottom: none; }
 
  /* Feature (row label) */
  table.ycs tbody th[scope="row"] {
    text-align: left;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.4;
    padding-left: 24px;
    width: 27%;
  }
 
  /* Competitor values */
  table.ycs tbody td:not(.ycs) {
    text-align: center;
    font-weight: 400;
    color: var(--value-text);
    line-height: 1.4;
  }
 
  /* Zebra — targets feature + competitor cells only, never the YCS column */
  table.ycs tbody tr:nth-child(odd)  th[scope="row"],
  table.ycs tbody tr:nth-child(odd)  td:not(.ycs) { background: #FFFFFF; }
  table.ycs tbody tr:nth-child(even) th[scope="row"],
  table.ycs tbody tr:nth-child(even) td:not(.ycs) { background: var(--stripe); }
 
  /* YCS column — solid highlight on every row */
  table.ycs tbody td.ycs {
    background: var(--ycs-cell);
    text-align: center;
    font-weight: 600;
    color: var(--ycs-text);
    line-height: 1.4;
  }
 
  /* ---------- CTA ---------- */
  .ycs-cta-wrap { text-align: center; margin-top: 52px; }
 
  .ycs-cta {
	display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: var(--radius-btn);
    background: var(--accent-color);
    border: none;
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--white-color);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.30s var(--ease-bounce);
  }
  .ycs-cta::after{
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    transition: transform 0.30s var(--ease-bounce);
  }
  .ycs-cta:hover {
    background:var(--dark-heading-color);
    transform: translateY(-2px);
    color: var(--white-color);
  }
  .ycs-cta .arrow { transition: transform 0.2s ease; }
  .ycs-cta:hover .arrow { transform: translateX(4px); }
 
  @keyframes ycs-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .ycs-compare { animation: none; }
    .ycs-cta, .ycs-cta .arrow { transition: none; }
  }
 
  @media (max-width: 640px) {
    .ycs-section { padding: 48px 18px 72px; }
  }

/* =========================================================================
   TEAM SECTION  ("Meet Your Team in Sri Lanka")   ← keep this block
   Full-bleed two-tone split — a white intro column on the left, a muted-grey
   panel on the right holding a card carousel with dot pagination. Reuses
   .section-title-block, .fs-36 and .fw-normal. All rules scoped to
   .team-section, so no global rule is modified.
========================================================================= */
.team-section {
  --team-panel-bg: var(--muted-color);   /* #8d8282 — right panel        */
  --team-icon:     #525252;              /* row-icon stroke + row labels */
  background: var(--white-color);
  overflow:   hidden;
}
 
/* ── Split layout ─────────────────────────────────────────── */
.team-split {
  display:     flex;
  align-items: stretch;
}
 
/* left — intro copy, vertically centred */
.team-intro {
  flex:            1 1 46%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         72px 56px 72px clamp(20px, 6vw, 104px);
}
 
.team-intro .section-title-container { max-width: 420px; margin:0 auto; }
 
/* intro paragraph — a touch smaller than the sheet default (18px) */
.team-intro .section-title-container p {
  font-size:   16px;
  line-height: 1.6;
  max-width:   360px;
  margin:      0;
}
 
/* right — grey carousel panel, bleeds to the viewport edge */
.team-panel {
  flex:            1 1 54%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             28px;
  padding:         72px clamp(24px, 5vw, 64px);
  background:      var(--team-panel-bg);
}
 
/* ── Carousel viewport + track ────────────────────────────── */
.team-carousel {
  width:     100%;
  max-width: 496px;
  overflow:  hidden;
}
 
.team-track {
  display:     flex;
  transition:  transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
 
.team-slide {
  flex:            0 0 100%;
  display:         flex;
  justify-content: center;
}
 
/* ── Card ─────────────────────────────────────────────────── */
.team-card {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  gap:            24px;
  width:          100%;
  max-width:      448px;
  padding:        24px 24px 32px;
  background:     var(--white-color);
  border:         1px solid var(--stats-bg);
  border-radius:  var(--radius-card);
  box-shadow:     0 18px 40px rgba(29, 24, 40, .16);
}
 
/* header — avatar + name / role */
.team-card__head {
  display:     flex;
  align-items: center;
  gap:         16px;
}
 
.team-card__avatar {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--accent-color);
}
 
.team-card__avatar svg {
  width:           30px;
  height:          30px;
  stroke:          var(--white-color);
  fill:            none;
  stroke-width:    2.667;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
 
.team-card__id { display: flex; flex-direction: column; gap: 4px; }
 
.team-card__name {
  font-family:    var(--body-font);
  font-size:      18px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: 0;
  color:          var(--dark-heading-color);
  margin:         0;
}
 
.team-card__role {
  font-family: var(--body-font);
  font-size:   14px;
  font-weight: 400;
  line-height: 1.4;
  color:       var(--team-icon);
  margin:      0;
}
 
/* hairline divider */
.team-card__divider {
  height:     1px;
  width:      100%;
  background: var(--stats-bg);
  border:     0;
  margin:     0;
}
 
/* info rows */
.team-card__rows {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
 
.team-card__row {
  display:     flex;
  align-items: center;
  gap:         12px;
}
 
.team-card__icon {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-btn);
  background:      var(--grey-color);
}
 
.team-card__icon svg {
  width:           20px;
  height:          20px;
  stroke:          var(--team-icon);
  fill:            none;
  stroke-width:    1.667;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
 
.team-card__meta { display: flex; flex-direction: column; gap: 2px; }
 
.team-card__label {
  font-family:    var(--body-font);
  font-size:      13px;
  font-weight:    400;
  line-height:    1.2;
  letter-spacing: var(--ls-body);
  color:          var(--team-icon);
}
 
.team-card__value {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 600;
  line-height: 1.3;
  color:       var(--dark-heading-color);
  word-break:  break-word;
}
 
/* ── Dot pagination ───────────────────────────────────────── */
.team-dots {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}
 
.team-dots__dot {
  width:         8px;
  height:        8px;
  padding:       0;
  border:        1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0);
  cursor:        pointer;
  transition:    background .25s ease, transform .25s ease;
}
 
.team-dots__dot:hover { background: rgba(255, 255, 255, 1); }
 
.team-dots__dot.is-active {
  background: rgba(255, 255, 255, 1);
  transform:  scale(1.15);
}
 
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .team-split { flex-direction: column; }
  .team-intro {
    flex:        none;
    align-items: flex-start;
    padding:     40px 20px 32px;
  }
  .team-intro .section-title-block,
  .team-intro .section-title-block p { max-width: 100%; }
  .team-panel { flex: none; gap: 24px; padding: 48px 20px; }
}
 
@media (max-width: 575px) {
  .team-panel { padding: 40px 16px; }
  .team-card  { padding: 20px 20px 28px; }
}

/* =========================================================================
   SIDE-BY-SIDE DEMO SECTION  ("See YCS Side-by-Side With Your Current…")
   Full-bleed orange band. Left column = .section-title-container (heading +
   subtitle). Right column = lead copy, a check list, and a dark CTA. Reuses
   .container, .section-padding, .fs-36 and .fw-normal. All rules scoped to
   .sidebyside-section.
========================================================================= */
.sidebyside-section { background: var(--accent-color); }
 
/* two-column row */
.sidebyside-grid {
  display:     flex;
  align-items: flex-start;
  gap:         clamp(40px, 6vw, 96px);
}
 
/* ── Left: title container ────────────────────────────────── */
.sidebyside-left { flex: 1 1 50%; }
.sidebyside-left .section-title-container { max-width: 580px; }
 
.sidebyside-section .section-title-container h2 { color: var(--white-color); }
 
.sidebyside-section .section-title-container p.sidebyside-subtitle {

  font-size:   20px;

  color:       var(--white-color);
  margin:      0;
}
 
/* ── Right: lead + list + CTA ─────────────────────────────── */
.sidebyside-right {
  flex:           1 1 50%;
  display:        flex;
  flex-direction: column;
  gap:            32px;
}
 
.sidebyside-lead {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  line-height: 1.6;
  color:       var(--white-color);
  max-width:   560px;
  margin:      0;
}
 
/* check list */
.sidebyside-list {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}
 
.sidebyside-item {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
}
 
.sidebyside-item__icon {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  margin-top:  2px;              /* optical align to first text line */
}
 
.sidebyside-item__icon svg { width: 20px; height: 20px; display: block; }
.sidebyside-item__icon svg circle { fill: var(--white-color); }
.sidebyside-item__icon svg path {
  fill:            none;
  stroke:          var(--accent-color);
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
 
.sidebyside-item__text {
  font-family: var(--body-font);
  font-size:   16px;
  font-weight: 400;
  line-height: 1.5;
  color:       var(--white-color);
  margin:      0;
}
 
/* dark CTA */
.sidebyside-cta {
position:relative;
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  align-self:      flex-start;
  margin-top:      8px;
  padding:         15px 26px;
  border-radius:   var(--radius-btn);
  background:      var(--dark-heading-color);
  color:           var(--white-color);
  font-family:     var(--body-font);
  font-size:       16px;
  font-weight:     600;
  line-height:     1;
  letter-spacing:  0.2px;
  text-decoration: none;
  transition:      transform .2s ease, background .2s ease, box-shadow .2s ease;
}
 

.sidebyside-cta::after{
	    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M12.129 8.25L8.106 4.227L9.1665 3.1665L15 9L9.1665 14.8335L8.106 13.773L12.129 9.75H3V8.25H12.129Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    transition: transform 0.30s var(--ease-bounce);
}
 
.sidebyside-cta svg { width: 18px; height: 18px; }
.sidebyside-cta svg path {
  fill:            none;
  stroke:          var(--white-color);
  stroke-width:    1.667;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
.sidebyside-cta:hover {
  background: #000000;
  transform:  translateY(-1px);
  color: var(--white-color);

}
.sidebyside-cta:hover::after {
    transform: translateX(4px);
} 

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebyside-grid { flex-direction: column; gap: 40px; }
  .sidebyside-left,
  .sidebyside-right { flex: none; width: 100%; }
  .sidebyside-left .section-title-container,
  .sidebyside-lead { max-width: 100%; }
}

/* ── Language availability pills (left column) ──────────────
   New, scoped to .sidebyside-section. Sits under the subtitle. */
.sidebyside-langs {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         14px;
  margin-top:  24px;
  font-family: var(--heading-font);        /* serif, matches the heading */
  color:       var(--white-color);
}

.sidebyside-langs__word {
  font-size:   30px;
  font-weight: 400;
  line-height: 1;
}

.sidebyside-lang {
  display:       inline-flex;
  align-items:   center;
  gap:           12px;
  padding:       6px 24px 6px 10px;
  border-radius: var(--radius-pill);
  background:    rgba(255, 255, 255, 0.12);   /* translucent white on the orange band */
  border:        1px solid rgba(255, 255, 255, 0.30);
}

.sidebyside-lang__flag {
  flex-shrink:   0;
  width:         34px;
  height:        34px;
  border-radius: 50%;
  overflow:      hidden;
  display:       block;
}

.sidebyside-lang__flag svg { width: 100%; height: 100%; display: block; }

.sidebyside-lang__label {
  font-size:   30px;
  font-weight: 400;
  line-height: 1;
  color:       var(--white-color);
}

@media (max-width: 575px) {
  .sidebyside-langs__word,
  .sidebyside-lang__label { font-size: 24px; }
  .sidebyside-lang__flag  { width: 28px; height: 28px; }
}
/* =========================================================================
   TRUST TICKER  ("Trusted by 33,000+ Hoteliers Worldwide • …")
   Full-bleed beige strip, single line, scrolls right-to-left and loops
   seamlessly. Pauses on hover; respects reduced-motion.
========================================================================= */
.trust-ticker {
  position:   relative;
  overflow:   hidden;
  padding:    18px 0;
  background: var(--stats-bg);
  border-top: 0.5px solid var(--stats-bg);
}
 
/* soft beige fades on both edges */
.trust-ticker::before,
.trust-ticker::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          80px;
  z-index:        2;
  pointer-events: none;
}
.trust-ticker::before { left:  0; background: linear-gradient(90deg,  var(--stats-bg) 0%, rgba(245, 235, 225, 0) 100%); }
.trust-ticker::after  { right: 0; background: linear-gradient(270deg, var(--stats-bg) 0%, rgba(245, 235, 225, 0) 100%); }
 
/* scrolling track — -50% works because the item set is duplicated */
.trust-ticker__track {
  display:     flex;
  align-items: center;
  gap:         16px;
  width:       max-content;
  animation:   trust-ticker-scroll 40s linear infinite;
}
 
.trust-ticker:hover .trust-ticker__track { animation-play-state: paused; }
 
@keyframes trust-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
 
.trust-ticker__item {
  font-family:    var(--body-font);
  font-size:      16px;
  font-weight:    400;
  line-height:    1.4;                 /* 140% → 22.4px */
  letter-spacing: var(--ls-body);
  color:          var(--muted-color);
  white-space:    nowrap;
}
 
.trust-ticker__dot {
  flex-shrink: 0;
  color:       var(--muted-color);
  opacity:     .6;
  font-size:   16px;
  line-height: 1;
  user-select: none;
}
 
@media (prefers-reduced-motion: reduce) {
  .trust-ticker__track { animation: none; }
}
 

@media (max-width: 767px) {
  .trust-ticker { padding: 14px 0; }
  .trust-ticker::before,
  .trust-ticker::after { width: 48px; }
}

/* ============================================================
   PROPERTIES BAND — "Trusted by Properties Across" city pills.
   Reuses .container. All rules scoped to .properties-band, so
   no global rule is modified. Tokens: --orange, --power-divider,
   --dark-heading-color, --heading-font, --body-font.
============================================================ */
.properties-band { background: var(--orange); }

.properties-band .container {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 56px; padding: 100px 80px;
}
.properties-band__heading {
  margin: 0; font-family: var(--heading-font); font-weight: 400;
  font-size: 36px; line-height: 1.15; color: #fff; text-align: center;
}
.properties-band__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 16px; margin: 0; padding: 0; list-style: none;
}
.properties-band__pill {
  display: inline-flex; justify-content: center; align-items: center; gap: 9px;
  padding: 11.7px 23px 13.5px; border-radius: 999px;
  border: 1.3px solid var(--power-divider); background: #fff;
  font-family: var(--body-font);   /* ← swap to "Plus Jakarta Sans", sans-serif for exact Figma match */
  font-weight: 600; font-size: 20px; line-height: 1.3;
  color: var(--dark-heading-color);
}
.properties-band__pill svg { flex: 0 0 auto; }

@media (max-width: 767px) {
  .properties-band .container { padding: 56px 20px; gap: 32px; }
  .properties-band__heading   { font-size: 28px; }
  .properties-band__pill      { font-size: 16px; padding: 9px 18px 10px; }
}


@media (max-width: 991px) {
.page-section{
	gap:3rem;
}
}
@media (max-width: 575px) {
.page-section{
	gap:1.5rem;
}
}
.room-pricing-section { background: var(--stats-bg, #f5ebe1); }
.room-pricing-table { margin-top: 40px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(141,130,130,0.25); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.room-pricing-table table { width: 100%; border-collapse: collapse; }
.room-pricing-table thead th { background: var(--accent-color, #f64c20); color: #fff; font-family: var(--body-font, "Archivo", sans-serif); font-weight: 600; font-size: 15px; padding: 18px 24px; text-align: center; }
.room-pricing-table tbody td { padding: 20px 24px; text-align: center; font-size: 16px; color: var(--dark-heading-color, #1D1828); border-bottom: 1px solid rgba(141,130,130,0.15); }
.room-pricing-table tbody tr:last-child td { border-bottom: none; }
.room-pricing-table tbody tr:nth-child(odd) { background: #fbf3ea; }
.room-pricing-table tbody tr:nth-child(even) { background: #f6e1cc; }
.room-pricing-table tbody tr:last-child td { font-weight: 600; }
.room-pricing-table tbody tr:last-child td:not(:first-child) { color: var(--accent-color, #f64c20); }
.room-pricing-table td:first-child { font-weight: 600; }
.room-pricing-addons { text-align: center; margin-top: 48px; }
.room-pricing-addons h3 { font-family: var(--heading-font, "Ledger", serif); font-size: 24px; color: var(--dark-heading-color, #1D1828); margin-bottom: 16px; font-weight: 400; }
.room-pricing-addons p { color: var(--muted-color, #8d8282); max-width: 680px; margin: 0 auto 8px; }
.room-pricing-cta { display: flex; justify-content: center; margin-top: 40px; }


div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {display: none !important;}