/* ============================================================
   VISITMAKER — Redesign layer v3 (UI only)
   Loaded AFTER assets/css/app.css on every page (last = wins).
   Goal: match the redesigned reference (1st screenshot) —
   compact page density, LARGER bold navy headings, large hero
   illustration, pastel business tiles (no fake cards), tinted
   Features band with white cards, orange-bordered pricing
   cards, segmented Monthly/Quarterly/Yearly toggle, tinted
   footer. Fixes the excessive white space of the current site
   (2nd screenshot, ~54% taller for the same content).
   No content / JS / API / routing behaviour is affected.
   See VM_WEBSITE_UI_ANALYSIS.md for the full audit + plan.
   ============================================================ */

/* ---------- 1. Design tokens (from the reference) ---------- */
:root{
  --vm-orange:#f57c00; --vm-orange-2:#fe9a22;
  --vm-ink:#23235f; --vm-navy:#2c2c51; --vm-body:#677294;
  --vm-tint:#eef6fd;                 /* Features + footer band */
  --vm-border:#f2a33c;               /* pricing-card border */
  --vm-shadow:0 6px 22px rgba(8,2,46,.08);
  --vm-shadow-hover:0 12px 30px rgba(8,2,46,.12);
  --vm-sp-section:48px;              /* desktop rhythm (was 90-205px) */
  --vm-sp-section-md:32px;
  --vm-sp-section-sm:28px;
  --vm-container:1240px;             /* guideline: 1200-1280px */
  --vm-header-h:68px;                /* guideline: 64-72px */
  --vm-radius:12px;                  /* guideline: 10-14px */
  --vm-gap:20px;                     /* guideline: 16-24px grid gap */
}

/* ---------- 2. Global typography ---------- */
html,body{overflow-x:clip}   /* no horizontal scroll/clipped text on phones */
body{font-size:15px;line-height:1.65;color:var(--vm-body)}
h1,h2,h3,h4,h5,h6{color:var(--vm-navy);letter-spacing:-.01em}
p{margin-bottom:14px}
img{max-width:100%;height:auto}

/* One unified, bold section-heading system (reference: ~32-34px navy).
   The old CSS shrank these to ~20px visually and wasted 70-80px below. */
.section-heading,.section-title-two,.section-title-ana,.section-heading-two{
  margin-bottom:24px !important;padding-bottom:0}
.section-heading .section-title,.section-title-two h2,.section-title-ana h2,
.section-heading-two .section-title,.section-title-three h2{
  font-size:32px !important;line-height:1.2 !important;font-weight:800;
  color:var(--vm-ink);margin-bottom:6px}
body.dark-mode .section-heading .section-title,body.dark-mode .section-title-two h2{color:var(--vm-orange-2)}
.section-heading .subtitle{font-size:12px;letter-spacing:2.5px;margin-bottom:8px}
.section-heading p,.section-title-two p{font-size:15px;line-height:1.65;margin-top:8px}

/* Forms: tighter fields (was margin-bottom:30px) */
input,textarea{padding:11px 14px;margin-bottom:16px;border-radius:10px;font-size:14px}
textarea{height:130px}

/* ---------- 3. Header (guideline: 64-72px bar, vertically centred) ---------- */
.site-header .site-logo a{padding:10px 0 !important;display:flex;align-items:center}
.site-header .header-inner{min-height:var(--vm-header-h)}
/* NOTE: header layout/display is intentionally NOT touched —
   app.css owns the desktop flex nav + mobile off-canvas states,
   and the reference header spacing comes from that structure. */
.site-header.header-fixed.showed{background:#fff;box-shadow:0 4px 20px rgba(8,2,46,.07)}
body.dark-mode .site-header.header-fixed.showed{background:#181A20}

/* Mobile Sticky Header */
@media (max-width: 991px) {
  .site-header.header-fixed.showed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(8, 2, 46, 0.08) !important;
    -webkit-transform: none !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
  }

  body.dark-mode .site-header.header-fixed.showed {
    background: #181A20 !important;
  }

  .site-header.header-fixed.showed .site-logo {
    display: flex !important;
    align-items: center !important;
  }

  .site-header.header-fixed.showed .site-logo .logo-title {
    display: block !important;
    color: var(--vm-ink) !important;
  }

  body.dark-mode .site-header.header-fixed.showed .site-logo .logo-title {
    color: #ffffff !important;
  }

  .site-header.header-fixed.showed .astriol-burger-menu {
    display: block !important;
    cursor: pointer !important;
  }

  .site-header.header-fixed.showed .astriol-burger-menu span {
    background: #2c2c51 !important;
  }

  body.dark-mode .site-header.header-fixed.showed .astriol-burger-menu span {
    background: #ffffff !important;
  }

  .mobile-header.header-fixed.showed .main-nav-container {
    z-index: 10002 !important;
  }
}
.site-header:not(.mobile-header) .astriol-main-menu>li>a{font-size:13.5px;font-weight:600;color:var(--vm-navy)}
.logo-title{font-size:16px !important}
.nav-right{display:flex;align-items:center}

/* ---------- 4. Buttons (reference: compact orange, radius ~8px) ---------- */
.get-start-button,.toggle-button,.toggle-btn{
  width:auto !important;min-height:42px;padding:10px 22px !important;margin:0;
  border-radius:8px;font-size:14px;font-weight:600;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center}
.gp-btn{padding:11px 24px;font-size:14px;font-weight:600;border-radius:8px}
.site-header .get-start-button,.nav-right .get-start-button{min-height:40px;padding:9px 20px !important;border-radius:8px}

/* ---------- 5. Hero (reference: large title + large illustration,
      almost no dead space under the CTA) ---------- */
.main-banner{height:auto !important;margin-top:0 !important}
.banner-saas-main{padding:96px 0 32px !important;overflow:hidden}
.banner-content-wrapper{margin:0 !important}              /* removes -700px hack */
.banner-saas-main .banner-content-sass .subtitle-top{
  font-size:11px !important;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:600;margin-bottom:12px}
.banner-saas-main .banner-content-sass .banner-title,.banner-title{
  font-size:clamp(36px,3.4vw,44px) !important;line-height:1.15 !important;
  font-weight:800;color:var(--vm-ink);margin-bottom:16px !important}
.banner-saas-main .banner-content-sass .description{
  font-size:14.5px;line-height:1.7;margin-bottom:22px;max-width:530px}
.banner-content-sass .get-start-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 26px !important;
  width:auto !important;
  min-width:140px;
}
.banner-content-sass .get-start-button::after{
  content:"\2192";
  margin-left:8px;
  font-weight:700;
  display:inline-block;
  line-height:1;
}
/* Reference illustration fills its column (~640px), it is NOT a thumbnail */
.banner-image{max-width:640px !important;width:100%;height:auto;margin:0 auto;display:block}
.banner-sass-svg-bg svg{max-height:620px}

/* ---------- 6. Section rhythm (homepage sections) ---------- */
.category{padding:40px 0 16px !important}
.pricings-two-page,.pricings-two,.pricing-page{padding:40px 0 48px !important}
.feature-page,.faq-page,.social-pricing-page,.cofounder,
.contact-form-page,#call-to-action-three,.featured-inner,.analytics-box{
  padding-top:var(--vm-sp-section) !important;padding-bottom:var(--vm-sp-section) !important}
#social-activity{padding:var(--vm-sp-section) 0 !important}

/* ---------- 7. Business Categories (reference: pastel tile + label,
      NO surrounding white card / shadow) ---------- */
#business .section-title-two{margin-bottom:22px !important}
#business .row>[class*="col-"]{margin-bottom:10px}
.icon-box.style-five{
  padding:6px 4px 2px !important;background:transparent !important;
  border:none !important;box-shadow:none !important;border-radius:0;
  text-align:center}
.icon-box.style-five:hover{background:transparent !important;box-shadow:none !important}
.icon-box.style-five .icon-container,.business-icon{
  height:76px !important;width:76px;line-height:normal;border-radius:18px;
  margin:0 auto 12px !important;display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease}
.icon-box.style-five:hover .icon-container{transform:translateY(-3px)}
.business-icon img,.icon-box.style-five .icon-container img{
  width:38px !important;height:38px;object-fit:contain}
.icon-box.style-five .box-content .box-title,.business-title{
  font-size:15px;font-weight:700;color:var(--vm-navy);margin-bottom:0 !important}

/* Exact pastel backgrounds from the reference screenshot */
.color-one .icon-container { background: #d4f6e8 !important; }  /* Salon - mint green */
.color-two .icon-container { background: #fde6ee !important; }  /* Nail - soft pink */
.color-three .icon-container { background: #e4effc !important; }/* Spa - soft blue */
.color-four .icon-container { background: #fef3d6 !important; } /* Barber - golden yellow */
.color-five .icon-container { background: #daf3f5 !important; } /* Photography - soft teal */
.color-six .icon-container { background: #f0e8fd !important; }  /* Makeup - soft lavender */

body.dark-mode .color-one .icon-container { background: rgba(52, 211, 153, 0.22) !important; }
body.dark-mode .color-two .icon-container { background: rgba(244, 114, 182, 0.22) !important; }
body.dark-mode .color-three .icon-container { background: rgba(96, 165, 250, 0.22) !important; }
body.dark-mode .color-four .icon-container { background: rgba(251, 191, 36, 0.22) !important; }
body.dark-mode .color-five .icon-container { background: rgba(45, 212, 191, 0.22) !important; }
body.dark-mode .color-six .icon-container { background: rgba(167, 139, 250, 0.22) !important; }

/* Subtitle helper */
.accent-orange { color: var(--vm-orange) !important; }
.section-subtitle {
  font-size: 14.5px !important;
  color: #64748b !important;
  margin-top: 4px !important;
  margin-bottom: 24px !important;
  text-align: center;
  font-weight: 400;
}
body.dark-mode .section-subtitle { color: #94a3b8 !important; }

/* ---------- 8. Features (reference: pale-blue band, white cards) ---------- */
.feature-comminity-two{
  padding:44px 0 48px !important;background:var(--vm-tint)}
body.dark-mode .feature-comminity-two{background:#181A20}
.feature-comminity-two .section-heading{margin-bottom:22px !important}
.featrure-list-items{margin-bottom:0 !important}
.featrure-list-items .row{display:flex;flex-wrap:wrap;justify-content:center}
.featrure-list-items .row>[class*="col-"]{display:flex}
.feature-list-item{
  padding:14px 18px;margin-bottom:var(--vm-gap);border-radius:14px;background:#fff;
  border:1px solid #edf1f7;box-shadow:0 3px 12px rgba(15, 23, 42, 0.04);
  width:100%;align-items:center;min-height:72px}
.feature-list-item:hover{box-shadow:var(--vm-shadow-hover)}
.feature-list-item .icon-container{
  height:48px;width:48px;line-height:48px;margin-right:14px;flex:0 0 48px;
  border-radius:10px;background:#fff6ee !important;
  display:flex;align-items:center;justify-content:center}
.feature-list-item .icon-container img{width:26px;height:26px;object-fit:contain}
.feature-list-item .list-title{font-size:13.5px;font-weight:700;color:var(--vm-navy);line-height:1.35;margin:0}

/* ---------- 9. Pricing (reference: segmented toggle, orange-bordered
      equal-height cards, green ticks / red crosses) ---------- */
#pricing{scroll-margin-top:90px}
.pricings-two-page{position:relative}
.pricings-two-page .container{position:relative}
.pricings-two-page .section-heading{margin-bottom:18px !important}
.period-toggle-group{
  gap:4px;flex-wrap:wrap;margin:0 auto 20px;align-items:center;
  background:#f1f4f9;border-radius:999px;padding:4px;width:fit-content;display:flex}
body.dark-mode .period-toggle-group{background:#1e2028}
.toggle-button,.toggle-btn{
  min-width:104px;min-height:38px;padding:8px 20px !important;
  border:none !important;border-radius:999px !important;
  background:transparent !important;color:var(--vm-navy);font-weight:600;font-size:13.5px;
  cursor:pointer;transition:all .2s ease}
.toggle-button.active,.toggle-btn.active{
  background:var(--vm-orange) !important;color:#fff !important;
  box-shadow:0 4px 14px rgba(245,124,0,.35) !important}
.toggle-button:hover:not(.active),.toggle-btn:hover:not(.active){background:#e6ebf4 !important;color:var(--vm-navy)}
body.dark-mode .toggle-button:hover:not(.active){background:#2a2c36 !important;color:#fff}
.announcement-bar{font-size:14.5px !important;font-weight:700;color:#1e293b}
.plan-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.plan-header .drop-down{float:none;margin-left:auto}
.dropdown-container{
  position:relative;
  width:220px;
  max-width:100%;
  cursor:pointer;
}
.dropdown-container input{
  margin-bottom:0;
  height:42px;
  background:#fff;
  border:1.5px solid #cbd5e1 !important;
  border-radius:10px;
  font-size:14px;
  padding:8px 38px 8px 14px;
  color:#0f172a;
  font-weight:600;
  width:100%;
  cursor:pointer !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.dropdown-container input:hover{
  border-color:var(--vm-orange) !important;
}
.dropdown-container input:focus,
.dropdown-container.open input{
  outline:none;
  border-color:var(--vm-orange) !important;
  box-shadow:0 0 0 3px rgba(245,124,0,.15);
}
.dropdown-chevron{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--vm-orange);
  font-size:12px;
  transition:transform .2s ease;
}
.dropdown-container.open .dropdown-chevron{
  transform:translateY(-50%) rotate(180deg);
}
#country-dropdown{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0;
  width:100%;
  max-height:220px;
  overflow-y:auto;
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
  border-radius:10px !important;
  box-shadow:0 10px 25px -5px rgba(0,0,0,.12),0 8px 10px -6px rgba(0,0,0,.04) !important;
  display:none;
  z-index:1000;
  padding:6px !important;
}
#country-dropdown div{
  padding:9px 12px !important;
  font-size:13.5px;
  font-weight:500;
  border-radius:6px;
  cursor:pointer !important;
  transition:background-color .15s ease,color .15s ease;
}
#country-dropdown div:hover{
  background-color:#fff7ed !important;
  color:var(--vm-orange) !important;
}

/* Carousel wrapper & track */
.plans-carousel-wrapper{position:relative;width:100%;margin:0 auto}
#plans-container{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  align-items:stretch !important;justify-content:flex-start;
  overflow-x:hidden !important;overflow-y:hidden !important;
  scroll-behavior:smooth !important;scrollbar-width:none !important;-ms-overflow-style:none !important;
  width:100% !important;margin:0 !important;padding:12px 2px 24px 2px !important;gap:24px !important}
#plans-container::-webkit-scrollbar{display:none !important}

/* Desktop: exactly 3 complete cards (2 gaps of 24px = 48px) */
@media (min-width:992px){
  #plans-container{gap:24px !important}
  #plans-container>div,#plans-container>[class*="col-"]{
    flex:0 0 calc((100% - 48px) / 3) !important;
    max-width:calc((100% - 48px) / 3) !important;
    width:calc((100% - 48px) / 3) !important;
    box-sizing:border-box !important;margin:0 !important;padding:0 !important}
}

/* Tablet: exactly 2 complete cards (1 gap of 20px) */
@media (min-width:576px) and (max-width:991px){
  #plans-container{gap:20px !important}
  #plans-container>div,#plans-container>[class*="col-"]{
    flex:0 0 calc((100% - 20px) / 2) !important;
    max-width:calc((100% - 20px) / 2) !important;
    width:calc((100% - 20px) / 2) !important;
    box-sizing:border-box !important;margin:0 !important;padding:0 !important}
}

/* Mobile: exactly 1 complete card */
@media (max-width:575px){
  #plans-container{gap:16px !important}
  #plans-container>div,#plans-container>[class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;margin:0 !important;padding:0 !important}
}

.pricing-table,.pricing-table.style-two{
  position:relative;padding:26px 20px 24px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.04);
  display:flex !important;flex-direction:column !important;width:100% !important;height:100% !important;
  min-height:510px;box-sizing:border-box !important;
  margin:0 !important;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.pricing-table:hover{box-shadow:0 8px 26px rgba(0,0,0,.08)}
.pricing-table.most-popular-card{
  border:1.5px solid var(--vm-orange) !important;
  box-shadow:0 6px 24px rgba(245,124,0,.12)}
.popular-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--vm-orange);color:#fff;font-size:11px;font-weight:700;
  padding:3px 14px;border-radius:6px;letter-spacing:.3px;white-space:nowrap;z-index:2}
.pricing-table .price-header{padding-bottom:2px;margin-bottom:4px}
.pricing-table .price-header .price-title,
.pricing-table.style-two .price-header .price-title,
.pricing-table .price-title{
  font-size:15.5px !important;
  font-weight:800 !important;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#0f172a !important;
  margin-bottom:6px !important;
}
body.dark-mode .pricing-table .price-header .price-title,
body.dark-mode .pricing-table.style-two .price-header .price-title,
body.dark-mode .pricing-table .price-title{
  color:#f8fafc !important;
}
.pricing-table.style-two.color-theme .price-save{
  display:none !important;
}
.pricing-table.style-two .price-header .price,.pricing-table .price,
.pricing-table.style-two.color-theme .price{
  font-size:32px !important;line-height:1.2;font-weight:800;color:var(--vm-orange) !important;margin-bottom:4px !important}
.pricing-table .billed-text{font-size:11px !important;color:#94a3b8;margin-bottom:4px !important}
.pricing-table .original-price{font-size:14px}
.pricing-table .price-feature{margin:10px 0 16px;padding:0;list-style:none;text-align:left;flex-grow:1 !important}
.pricing-table .price-feature li,.pricing-table.style-two .price-feature li{
  font-size:13px;line-height:2.05;color:#334155;display:flex;align-items:center}
.pricing-table .price-feature li i.ei-icon_check{color:#22c55e !important;font-size:14px;margin-right:8px;font-weight:700}
.pricing-table .price-feature li i.ei-icon_close,
.pricing-table .price-feature li i.icon_close{color:#ef4444 !important;font-size:14px;margin-right:8px;font-weight:700}
.pricing-table br{display:none}
.card-footer-action{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto !important;padding-top:10px}
.card-footer-action a,.pricing-table>a{align-self:center;font-size:13.5px;font-weight:600;color:#2563eb;text-decoration:none}
.card-footer-action a:hover,.pricing-table>a:hover{text-decoration:underline}
.pricing-table .get-start-button,.pricing-table .gp-btn{
  margin-top:auto;align-self:center;width:100% !important;min-width:160px;max-width:200px;
  height:42px;border-radius:999px !important;background:var(--vm-orange) !important;
  color:#fff !important;font-weight:700;font-size:14px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}
.pricing-table .get-start-button:hover{background:#e65100 !important;transform:translateY(-1px)}

/* Plan Arrows: Vertically centred on the carousel cards, smooth elevation */
#btn-left,#btn-right{
  position:absolute;top:50% !important;bottom:auto !important;transform:translateY(-50%) !important;
  width:44px !important;height:44px !important;border-radius:50% !important;
  background:#fff !important;border:1px solid #e2e8f0 !important;
  box-shadow:0 4px 14px rgba(0,0,0,.12) !important;color:#475569 !important;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:25 !important;
  transition:all .2s ease;padding:0 !important;font-size:14px !important}
#btn-left i,#btn-right i,#btn-left .left-arrow{
  margin:0 !important;padding:0 !important;line-height:1 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important}
#btn-left{left:-22px !important}
#btn-right{right:-22px !important}
#btn-left:hover,#btn-right:hover{
  background:#f8fafc !important;color:var(--vm-orange) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18) !important;transform:translateY(-50%) scale(1.05) !important}
@media (max-width:1260px){
  #btn-left{left:-12px !important}
  #btn-right{right:-12px !important}
}

/* ---------- 10. How VisitMaker Works ---------- */
.how-it-works-section{
  padding:54px 0 46px !important;background:#ffffff}
body.dark-mode .how-it-works-section{background:#111317}
.how-it-works-flow{
  display:flex;align-items:flex-start;justify-content:center;gap:18px;
  margin-top:30px;max-width:980px;margin-left:auto;margin-right:auto}
.how-step-item{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.step-icon-circle{
  width:60px;height:60px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .2s ease}
.step-icon-circle:hover{transform:scale(1.06)}
.step-circle-orange{background:#f97316}
.step-circle-blue{background:#3b82f6}
.step-circle-green{background:#10b981}
.step-circle-purple{background:#8b5cf6}
.how-step-item .step-title{
  font-size:15px;font-weight:800;color:#1e2028;margin-bottom:6px}
body.dark-mode .how-step-item .step-title{color:#f1f5f9}
.how-step-item .step-desc{
  font-size:13px;line-height:1.55;color:#64748b;margin:0;max-width:215px}
body.dark-mode .how-step-item .step-desc{color:#94a3b8}
.step-arrow-divider{
  display:flex;align-items:center;justify-content:center;margin-top:18px;color:#cbd5e1}

/* ---------- 11. Bottom CTA Banner ---------- */
.bottom-cta-section{
  padding:8px 0 54px !important;background:#ffffff}
body.dark-mode .bottom-cta-section{background:#111317}
.cta-banner-card{
  background:#fdf6ee;border:1px solid #fee8d6;border-radius:20px;
  padding:36px 48px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;box-shadow:0 6px 20px rgba(245,124,0,.05);position:relative}
body.dark-mode .cta-banner-card{
  background:#1e1f26;border-color:#2d303e}
.cta-banner-content{max-width:650px}
.cta-pill-badge{
  display:inline-block;background:#fde8d4;color:#c25e00;font-size:12px;
  font-weight:700;padding:4px 14px;border-radius:999px;margin-bottom:10px}
body.dark-mode .cta-pill-badge{background:#3b2818;color:#f59e0b}
.cta-banner-title{
  font-size:27px;font-weight:800;line-height:1.25;color:#1e1b4b;margin-bottom:6px;letter-spacing:-.02em}
body.dark-mode .cta-banner-title{color:#f8fafc}
.cta-banner-sub{font-size:14.5px;color:#64748b;margin:0}
.cta-banner-action{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.cta-rays-graphic{
  position:absolute;
  top:-15px;
  left:-16px;
  pointer-events:none;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.95;
  transition:transform .2s ease;
}
.cta-banner-action:hover .cta-rays-graphic{
  transform:scale(1.08) rotate(-3deg);
}
.cta-try-now-btn{
  background:var(--vm-orange);color:#fff !important;font-size:15px;font-weight:700;
  padding:13px 32px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(245,124,0,.35);text-decoration:none !important;transition:all .2s ease}
.cta-try-now-btn:hover{background:#e65100;transform:translateY(-2px);box-shadow:0 8px 22px rgba(245,124,0,.45)}

/* ---------- 12. Footer (reference: pale-blue band, compact) ---------- */
body:not(.dark-mode) #footer-saas.gp-site-footer{background:var(--vm-tint)}
.gp-site-footer,.footer-container{padding:36px 0 20px !important}
.footer-widgets .widget{margin-bottom:20px !important}
.footer-widgets .widget-title,#footer-saas .footer-widgets .widget-title{
  font-size:14px !important;font-weight:700;color:var(--vm-navy);margin-bottom:12px !important}
.footer-widgets .footer-menu li{line-height:28px}
.footer-widgets .footer-menu li a{font-size:13px}
.footer-widgets .copyright-text{font-size:12.5px;line-height:1.6}
.footer-widgets .footer-logo{margin-bottom:12px}

/* ---------- 13. Inner pages (same rhythm, no logic changes) ---------- */
.page-banner,.page-banner-two,.page-banner-three{padding:96px 0 40px !important}
.page-banner .page-title-wrapper .page-title,.page-banner-two .page-title-wrapper .page-title,
.page-banner-three .page-title-wrapper .page-title{font-size:32px !important;line-height:1.25}
.policy-content,.terms-container{padding:28px 0 48px !important;max-width:860px;margin:0 auto}
#policy,#terms{padding-top:80px !important}
.icon-box{margin-bottom:20px}
.cofounder-boxes .cofounder-box{padding:26px 12px 18px;margin-bottom:18px;border-radius:14px}

/* ---------- 14. Dark-mode parity ---------- */
body.dark-mode .icon-box.style-five{background:transparent !important}
body.dark-mode .pricing-table,body.dark-mode .pricing-table.style-two{
  background:#1e2028;box-shadow:none;border-color:#2d303e !important}
body.dark-mode .pricing-table.most-popular-card{border-color:var(--vm-orange) !important}
body.dark-mode .pricing-table .price-feature li{color:#e8e8ee}
body.dark-mode .feature-list-item{background:#1e2028;border-color:#2d303e;box-shadow:none}
body.dark-mode .feature-list-item .list-title{color:#f1f5f9}
body.dark-mode .feature-list-item .icon-container{background:#2a2c36 !important}
body.dark-mode .toggle-button,body.dark-mode .toggle-btn{color:#fff}
body.dark-mode .announcement-bar{color:#fff}
body.dark-mode .dropdown-container input{background:#1e2028;border-color:#2d303e !important;color:#f1f5f9}
body.dark-mode #btn-left,body.dark-mode #btn-right{background:#1e2028 !important;border-color:#2d303e !important;color:#cbd5e1 !important}

/* ---------- 15. Responsive ---------- */
@media (min-width:1200px){
  .home-saas-main .container{max-width:var(--vm-container)}
}
#business .row,.featrure-list-items .row{margin-left:-10px;margin-right:-10px}
#business .row>[class*="col-"],.featrure-list-items .row>[class*="col-"]{padding-left:10px;padding-right:10px}

@media (max-width:991px){
  .feature-page,.faq-page,.pricing-page,.social-pricing-page,.cofounder,
  .contact-form-page,#call-to-action-three,.featured-inner,.analytics-box,
  #social-activity{padding-top:var(--vm-sp-section-md) !important;padding-bottom:var(--vm-sp-section-md) !important}
  .banner-saas-main{padding:84px 0 28px !important}
  .banner-content-sass{text-align:center}
  .banner-saas-main .banner-content-sass .description{margin-left:auto;margin-right:auto}
  .banner-content-sass .get-start-button{margin-left:auto;margin-right:auto}
  .banner-image{max-width:520px !important;margin-top:22px}
  .page-banner,.page-banner-two,.page-banner-three{padding:84px 0 36px !important}
  .section-heading .section-title,.section-title-two h2{font-size:28px !important}
  .how-it-works-flow{flex-wrap:wrap;gap:28px 16px}
  .step-arrow-divider{display:none}
  .how-step-item{flex:1 1 40%}
  .cta-banner-card{padding:30px 28px}
}
@media (max-width:768px){
  .plan-header{justify-content:center;text-align:center}
  .plan-header .drop-down{margin-left:0}
  .dropdown-container{width:min(300px,86vw)}
  #btn-left,#btn-right{top:50% !important;transform:translateY(-50%)}
  .cta-banner-card{flex-direction:column;text-align:center}
  .cta-banner-action{flex-direction:column;width:100%}
  .cta-try-now-btn{width:100%;justify-content:center}
  .cta-rays-graphic{display:none}
}
@media (max-width:575px){
  .category{padding-top:var(--vm-sp-section-sm) !important}
  .feature-comminity-two,.pricings-two-page{padding-top:30px !important;padding-bottom:34px !important}
  .banner-saas-main .banner-content-sass .banner-title,.banner-title{
    font-size:29px !important;line-height:1.18 !important}
  .section-heading .section-title,.section-title-two h2{font-size:26px !important}
  .icon-box.style-five .icon-container,.business-icon{height:64px !important;width:64px;border-radius:16px}
  .business-icon img,.icon-box.style-five .icon-container img{width:34px !important;height:34px}
  .period-toggle-group .toggle-button,.period-toggle-group .toggle-btn{
    flex:1 1 30%;min-width:0;padding:9px 6px !important;font-size:13px}
  .announcement-bar{font-size:13.5px !important;text-align:center}
  .feature-list-item{padding:14px;margin-bottom:12px}
  .pricing-table{padding:24px 16px 22px !important}
  .gp-site-footer{padding:30px 0 16px !important}
  .how-step-item{flex:1 1 100%}
  .cta-banner-title{font-size:22px}

  /* Mobile carousel container & arrow positioning: outside cards, zero overlap */
  .plans-carousel-wrapper{
    position:relative !important;
    width:calc(100% + 20px) !important;
    max-width:calc(100% + 20px) !important;
    margin:0 -10px !important;
    padding:0 50px !important;
    box-sizing:border-box !important}
  #plans-container{
    gap:16px !important;
    padding:14px 0 24px 0 !important;
    width:100% !important}
  #plans-container>div,#plans-container>[class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important}
  #btn-left,#btn-right{
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:0 3px 12px rgba(0,0,0,.12) !important;
    color:#334155 !important;
    font-size:13px !important;
    z-index:25 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important}
  #btn-left{left:5px !important;right:auto !important}
  #btn-right{right:5px !important;left:auto !important}
}
@media (max-width:360px){
  .plans-carousel-wrapper{
    width:calc(100% + 20px) !important;
    max-width:calc(100% + 20px) !important;
    margin:0 -10px !important;
    padding:0 42px !important}
  #btn-left,#btn-right{
    width:32px !important;
    height:32px !important;
    font-size:11px !important}
  #btn-left{left:4px !important}
  #btn-right{right:4px !important}
}
@media (prefers-reduced-motion:reduce){
  .icon-box.style-five .icon-container,.feature-list-item,.pricing-table{transition:none}
  .icon-box.style-five:hover .icon-container{transform:none}
}