/* ════════════════════════════════════════════════════════════════════════
 * Automate Accounts — Responsive overrides
 * Loaded on every page AFTER inline styles, so we can override safely.
 * Breakpoints:
 *   tablet ≤ 1024px
 *   mobile ≤ 640px
 * Strategy: target structural inline styles via attribute selectors and
 * targeted descendant rules so we adapt the existing desktop design
 * without redesigning anything.
 * ════════════════════════════════════════════════════════════════════════ */

/* ─── HTML scroll padding for sticky header (mobile/tablet have shorter header) ─── */
@media (max-width: 1024px){
  html { scroll-padding-top: 72px; }
}
@media (max-width: 640px){
  html { scroll-padding-top: 64px; }
}

/* ════════ HEADER (shared-chrome.js) ════════ */
@media (max-width: 1024px){
  header > div {
    padding: 0 24px !important;
    height: 68px !important;
    gap: 12px !important;
  }
  header img[alt="Automate Accounts"] {
    height: 42px !important;
  }
  /* Hide nav links on tablet — collapse into mobile menu */
  header nav { display: none !important; }
  /* Keep CTAs visible on tablet but compact */
  header a[href*="#packages"]:not(.aa-nav-link) {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  header a[href="book-consultation.html"] {
    padding: 9px 16px !important;
    font-size: 13px !important;
  }
  /* Show hamburger */
  .aa-menu-toggle { display: inline-flex !important; }
}
@media (max-width: 640px){
  header > div {
    padding: 0 18px !important;
    height: 60px !important;
    gap: 8px !important;
  }
  header img[alt="Automate Accounts"] {
    height: 36px !important;
  }
  /* On phones: hide secondary "Browse Packages" pill */
  header a[href*="#packages"]:not(.aa-nav-link) { display: none !important; }
  /* Compact primary CTA */
  header a[href="book-consultation.html"] {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* ─── Mobile slide-out menu (rendered by shared-chrome.js when toggled) ─── */
.aa-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #e0e7f0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms;
}
.aa-menu-toggle:hover { background: #f0f2fa; }
.aa-menu-toggle svg { display: block; }

.aa-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,14,28,.55);
  backdrop-filter: blur(4px);
  display: none;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.16,1,.3,1);
}
.aa-mobile-menu.on { display: block; opacity: 1; }
.aa-mobile-menu-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: #fff;
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
  box-shadow: -12px 0 40px rgba(13,20,33,.18);
  overflow-y: auto;
}
.aa-mobile-menu.on .aa-mobile-menu-panel { transform: translateX(0); }
.aa-mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #edf1f7;
}
.aa-mobile-menu-head img { height: 40px; }
.aa-mobile-menu-close {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid #e0e7f0;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #0d1421;
}
.aa-mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 12px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0d1421;
  text-decoration: none;
  transition: background 180ms;
  min-height: 48px;
}
.aa-mobile-menu-link:hover,
.aa-mobile-menu-link:active { background: #f0f2fa; }
.aa-mobile-menu-link[data-active="true"] {
  background: #f0f2fa;
  color: #1b1464;
  font-weight: 700;
}
.aa-mobile-menu-link::after {
  content: "›";
  color: #8f9ab0;
  font-size: 22px;
  font-weight: 400;
}
.aa-mobile-menu-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf1f7;
}
.aa-mobile-menu-cta-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 99px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  min-height: 48px;
  transition: all 200ms;
}
.aa-mobile-menu-cta-row .aa-cta-primary {
  color: #fff;
  background: linear-gradient(135deg,#2baae2,#1b1464);
  box-shadow: 0 6px 24px rgba(27,20,100,.28);
}
.aa-mobile-menu-cta-row .aa-cta-secondary {
  color: #1b1464;
  background: #fff;
  border: 1.5px solid #c2cee0;
}

/* ════════ HERO (landing) ════════ */
@media (max-width: 1024px){
  #hero { min-height: calc(100vh - 68px) !important; padding: 64px 24px !important; }
  #hero #hh { font-size: 48px !important; }
  #hero p { font-size: 17px !important; }
  #hero img[alt="Automate Accounts"] { height: 64px !important; }
  #hero img[alt="Zoho Premium Partner"] { height: 48px !important; }
}
@media (max-width: 640px){
  #hero { min-height: auto !important; padding: 56px 20px 64px !important; }
  #hero #hh {
    font-size: 36px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 20px !important;
  }
  #hero p { font-size: 15px !important; line-height: 1.65 !important; max-width: 100% !important; margin-bottom: 28px !important; }
  #hero img[alt="Automate Accounts"] { height: 50px !important; }
  #hero img[alt="Zoho Premium Partner"] { height: 40px !important; }
  /* Hero CTAs full width on phone */
  #hero button {
    width: 100% !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
  }
  #hero > div > div:last-child { flex-direction: column !important; gap: 10px !important; }
}

/* ════════ STATS strip ════════ */
@media (max-width: 1024px){
  /* Class-based rules — reliably match the Landing Page React-rendered grid */
  .aa-stats-section { padding: 0 24px !important; }
  .aa-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    transform: translateY(-28px) !important;
  }
  .aa-stats-grid > .aa-stats-tile {
    border-right: none !important;
    border-bottom: 1px solid #e0e7f0;
    padding: 24px 18px !important;
  }
  .aa-stats-grid > .aa-stats-tile:nth-child(odd) {
    border-right: 1px solid #e0e7f0 !important;
  }
  .aa-stats-grid > .aa-stats-tile:nth-last-child(-n+2) {
    border-bottom: none;
  }
  /* The stats grid is a 4-col grid with translateY(-36px) — keep its structure */
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4, 1fr)"] ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4, 1fr)"] ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4, 1fr)"],
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    transform: translateY(-28px) !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4, 1fr)"] > div ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4, 1fr)"] > div,
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid #e0e7f0;
    padding: 24px 18px !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-child(odd) ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-child(odd) ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-child(odd),
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-child(odd) {
    border-right: 1px solid #e0e7f0 !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-last-child(-n+2) ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-last-child(-n+2) ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-last-child(-n+2),
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4, 1fr)"] > div:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 640px){
  /* Class-based phone rules for Landing Page Stats — match Case Studies behavior */
  .aa-stats-section { padding: 0 10px !important; }
  .aa-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    transform: translateY(-22px) !important;
    gap: 0 !important;
  }
  .aa-stats-grid > .aa-stats-tile {
    padding: 14px 6px !important;
    border-right: 1px solid #e0e7f0 !important;
    border-bottom: none !important;
    overflow: visible !important;
  }
  .aa-stats-grid > .aa-stats-tile:last-child {
    border-right: none !important;
  }
  .aa-stats-grid > .aa-stats-tile > div:first-child {
    font-size: 17px !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }
  .aa-stats-grid > .aa-stats-tile > div:not(:first-child) {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }
  /* Keep all 4 stats on one row — compact 4-col, smaller text */
  section[style*="padding:0 40px"],
  section[style*="padding:0px 40px"],
  section[style*="padding: 0 40px"] { padding: 0 10px !important; }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"],
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"],
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"],
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] {
    grid-template-columns: repeat(4, 1fr) !important;
    transform: translateY(-22px) !important;
    gap: 0 !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"] > * ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"] > * ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"] > *,
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] > * {
    padding: 14px 6px !important;
    border-right: 1px solid #e0e7f0 !important;
    border-bottom: none !important;
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"] > *:last-child ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"] > *:last-child ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"] > *:last-child,
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] > *:last-child {
    border-right: none !important;
  }
  /* Force equal columns even with Reveal wrappers — counters can blow out 1fr */
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"],
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"],
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"],
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"] > * > div:first-child ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"] > * > div:first-child ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"] > * > div:first-child,
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] > * > div:first-child {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
  }
  section[style*="padding: 0 40px"] > div > div[style*="repeat(4"] > * > div:not(:first-child) ,
  section[style*="padding: 0px 40px"] > div > div[style*="repeat(4"] > * > div:not(:first-child) ,
  section[style*="padding:0 40px"] > div > div[style*="repeat(4"] > * > div:not(:first-child),
  section[style*="padding:0px 40px"] > div > div[style*="repeat(4"] > * > div:not(:first-child) {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    margin-top: 2px !important;
    word-break: break-word !important;
  }
}

/* ════════ Generic section padding ════════ */
@media (max-width: 1024px){
  section[style*="padding: 96px 40px"],
  section[style*="padding:'96px 40px"],
  section[style*="padding: 96px 40px"] ,
  section[style*="padding:96px 40px"] {
    padding: 72px 28px !important;
  }
  section[style*="padding: 76px 40px"],
  section[style*="padding:'76px 40px"],
  section[style*="padding: 76px 40px"] ,
  section[style*="padding:76px 40px"] {
    padding: 60px 28px !important;
  }
  section[style*="padding: 64px 40px"],
  section[style*="padding:'64px 40px"],
  section[style*="padding: 64px 40px"] ,
  section[style*="padding:64px 40px"] {
    padding: 52px 28px !important;
  }
  section[style*="padding: 56px 40px"],
  section[style*="padding:'56px 40px"],
  section[style*="padding: 56px 40px"] ,
  section[style*="padding:56px 40px"] {
    padding: 44px 24px !important;
  }
  section[style*="padding: 80px 40px"],
  section[style*="padding:'80px 40px"],
  section[style*="padding: 80px 40px"] ,
  section[style*="padding:80px 40px"] {
    padding: 60px 28px !important;
  }
}
@media (max-width: 640px){
  section[style*="padding: 96px 40px"],
  section[style*="padding:'96px 40px"],
  section[style*="padding: 96px 40px"] ,
  section[style*="padding:96px 40px"] {
    padding: 56px 20px !important;
  }
  section[style*="padding: 76px 40px"],
  section[style*="padding:'76px 40px"],
  section[style*="padding: 76px 40px"] ,
  section[style*="padding:76px 40px"] {
    padding: 48px 20px !important;
  }
  section[style*="padding: 64px 40px"],
  section[style*="padding:'64px 40px"],
  section[style*="padding: 64px 40px"] ,
  section[style*="padding:64px 40px"] {
    padding: 44px 20px !important;
  }
  section[style*="padding: 56px 40px"],
  section[style*="padding:'56px 40px"],
  section[style*="padding: 56px 40px"] ,
  section[style*="padding:56px 40px"] {
    padding: 36px 20px !important;
  }
  section[style*="padding: 80px 40px"],
  section[style*="padding:'80px 40px"],
  section[style*="padding: 80px 40px"] ,
  section[style*="padding:80px 40px"] {
    padding: 48px 20px !important;
  }
  section[style*="padding: 40px 40px"],
  section[style*="padding:'40px 40px"],
  section[style*="padding: 40px 40px"] ,
  section[style*="padding:40px 40px"] {
    padding: 32px 20px !important;
  }
  section[style*="padding:'56px 40px 96px"],
  section[style*="padding:56px 40px 96px"] {
    padding: 40px 20px 64px !important;
  }
  section[style*="padding:'40px 40px 32px"],
  section[style*="padding:40px 40px 32px"] {
    padding: 32px 20px 24px !important;
  }
}

/* ════════ Headings — scale down ════════ */
@media (max-width: 1024px){
  h1[style*="font-size: 60px"],
  h1[style*="font-size:60px"],
  h1[style*="font-size: 60px"] { font-size: 44px !important; }
  h1[style*="font-size:56px"] { font-size: 40px !important; }
  h1[style*="font-size:46px"] { font-size: 36px !important; }
  h2[style*="font-size:46px"] { font-size: 36px !important; }
  h2[style*="font-size:44px"] { font-size: 34px !important; }
  h2[style*="font-size:42px"] { font-size: 32px !important; }
  h2[style*="font-size:40px"] { font-size: 30px !important; }
  h2[style*="font-size:38px"] { font-size: 28px !important; }
  h2[style*="font-size:36px"] { font-size: 28px !important; }
  h2[style*="font-size:28px"] { font-size: 24px !important; }
}
@media (max-width: 640px){
  h1[style*="font-size: 60px"],
  h1[style*="font-size:60px"],
  h1[style*="font-size: 60px"] { font-size: 32px !important; line-height: 1.12 !important; }
  h1[style*="font-size:56px"] { font-size: 30px !important; line-height: 1.12 !important; }
  h1[style*="font-size:46px"] { font-size: 28px !important; line-height: 1.15 !important; }
  h2[style*="font-size:46px"] { font-size: 28px !important; }
  h2[style*="font-size:44px"] { font-size: 26px !important; }
  h2[style*="font-size:42px"] { font-size: 26px !important; }
  h2[style*="font-size:40px"] { font-size: 24px !important; }
  h2[style*="font-size:38px"] { font-size: 24px !important; }
  h2[style*="font-size:36px"] { font-size: 22px !important; }
  h2[style*="font-size:28px"] { font-size: 22px !important; }
}

/* ════════ 2-col / 3-col grids inside sections ════════ */
@media (max-width: 1024px){
  /* Problem 2-col */
  div[style*="grid-template-columns: repeat(2, 1fr)"][style*="gap:18"] ,
  div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap: 18"] ,
  div[style*="grid-template-columns: repeat(2, 1fr)"][style*="gap:18"] ,
  div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap:18"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* StartingPoints 3-col -> stacked on tablet */
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap:20"],
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap: 20"],
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:20"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap:18"],
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap: 18"],
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:18"],
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap:24"] ,
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap: 24"] ,
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24"] {
    grid-template-columns: 1fr !important;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* WhyUs 2-col main */
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns:'1fr 1.1fr'"],
  div[style*="grid-template-columns: 1fr 1.1fr"] ,
  div[style*="grid-template-columns:1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* FAQ 2-col main */
  div[style*="grid-template-columns: 1fr 1.5fr"],
  div[style*="grid-template-columns:'1fr 1.5fr'"],
  div[style*="grid-template-columns: 1fr 1.5fr"] ,
  div[style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Testimonials 2-col */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap:18"],
  div[style*="grid-template-columns:'1fr 1fr'"][style*="gap: 18"],
  div[style*="grid-template-columns:'1fr 1fr'"][style*="gap:18"],
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap:18"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap: 18"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:18"] {
    grid-template-columns: 1fr !important;
  }
  /* Booking page 2-col */
  section[style*="grid-template-columns: 1fr 1.6fr"] ,
  section[style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Sticky cancel inside booking */
  section[style*="grid-template-columns: 1fr 1.6fr"] > div:first-child ,
  section[style*="grid-template-columns:1fr 1.6fr"] > div:first-child {
    position: static !important;
  }
}

@media (max-width: 640px){
  /* Problem cards stack */
  div[style*="grid-template-columns: repeat(2, 1fr)"][style*="gap:18"] ,
  div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap: 18"] ,
  div[style*="grid-template-columns: repeat(2, 1fr)"][style*="gap:18"] ,
  div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap:18"] {
    grid-template-columns: 1fr !important;
  }
  /* WhyUs internal 2-col -> 1-col on mobile */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap:14"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap: 14"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:14"] {
    grid-template-columns: 1fr !important;
  }
  /* Booking left-sidebar 2x2 stats keep 2-col but tighter */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap:12"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap: 12"] ,
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:12"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ════════ Featured Packages / Carousel ════════ */
@media (max-width: 1024px){
  /* Hide absolutely-positioned desktop arrows on mobile/tablet */
  #packages .pkg-arrow:not(.pkg-arrow-prev):not(.pkg-arrow-next) { display: none; }
  /* Reserve space below the carousel wrapper */
  #packages > div > div[style*="position: relative"],
  #packages > div > div[style*="position:relative"],
  #packages > div > div[style*="position: relative"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #packages .pkg-arrow {
    position: absolute !important;
    top: auto !important;
    bottom: -76px !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 6 !important;
  }
  #packages .pkg-arrow-prev { left: calc(50% - 110px) !important; right: auto !important; }
  #packages .pkg-arrow-next { right: calc(50% - 110px) !important; left: auto !important; }
  #packages .pkg-arrow:hover { transform: none !important; }
  #packages .pkg-dots {
    margin-top: 36px !important;
    min-height: 44px !important;
  }
  /* Carousel grid -> 1 col, fills available width */
  #packages div[style*="grid-template-columns: repeat(3, 1fr)"],
  #packages div[style*="grid-template-columns:repeat(3,1fr)"],
  #packages div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  #packages .pkg-card { width: 100% !important; }
  /* Tab pills wrap */
  #packages div[style*="flex-wrap: wrap"],
  #packages div[style*="flex-wrap:wrap"],
  #packages div[style*="flex-wrap: wrap"] { padding: 4px !important; }
  #packages div[style*="flex-wrap: wrap"] button,
  #packages div[style*="flex-wrap:wrap"] button,
  #packages div[style*="flex-wrap: wrap"] button {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 640px){
  /* Edge-to-edge: card fills viewport, with a 20px gutter */
  #packages { padding: 56px 0 !important; }
  #packages > div { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
  /* Center text/tabs/desc rows keep their gutter */
  #packages > div > div[style*="text-align: center"],
  #packages > div > div[style*="text-align:center"],
  #packages > div > div[style*="text-align: center"],
  #packages > div > div[style*="display:flex"][style*="justify-content: center"],
  #packages > div > div[style*="display: flex"][style*="justify-content:center"],
  #packages > div > div[style*="display:flex"][style*="justify-content:center"],
  #packages > div > div[style*="display: flex"][style*="justify-content: center"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Carousel wrapper: 20px gutter */
  #packages > div > div[style*="position: relative"],
  #packages > div > div[style*="position:relative"],
  #packages > div > div[style*="position: relative"] {
    padding: 0 20px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* React grid -> 1 col, full width */
  #packages div[style*="grid-template-columns: repeat(3, 1fr)"],
  #packages div[style*="grid-template-columns:repeat(3,1fr)"],
  #packages div[style*="grid-template-columns: repeat(3, 1fr)"] {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #packages .pkg-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 26px 22px !important;
    margin: 0 !important;
  }
  /* Move arrows in tighter on phone */
  #packages .pkg-arrow-prev { left: calc(50% - 96px) !important; }
  #packages .pkg-arrow-next { right: calc(50% - 96px) !important; }
}

/* ════════ How It Works — SVG path ════════ */
@media (max-width: 1024px){
  /* Hide curving path SVG on tablet/mobile (it's decorative & overflows) */
  svg[viewBox="0 0 1000 130"] { display: none !important; }
}

/* ════════ Cert grid (Zoho Expertise) ════════ */
@media (max-width: 1024px){
  #cert-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
}
@media (max-width: 640px){
  #cert-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  #cert-grid .cert-card { padding: 18px 14px 16px !important; }
  #cert-grid .cert-card .badge-img {
    width: 110px !important;
    height: 110px !important;
    margin: 8px 0 12px !important;
  }
  #cert-grid .cert-card h3 { font-size: 14px !important; }
  #cert-grid .cert-card div[style*="font-size:13px"] { font-size: 12px !important; }
}

/* ════════ FOOTER ════════ */
@media (max-width: 1024px){
  footer { padding: 56px 28px 24px !important; }
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] ,
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] ,
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child ,
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child ,
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px){
  footer { padding: 44px 20px 22px !important; }
  /* Brand block full-width; link cols 2-up; pills centered below */
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] ,
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] ,
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
  }
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child ,
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child ,
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1;
    width: 100%;
    text-align: left;
  }
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child p ,
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child p ,
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] > div:first-child p {
    max-width: 100% !important;
  }
  /* Email/Call us pills centered */
  footer div[style*="justify-content:center"][style*="flex-wrap: wrap"] ,
  footer div[style*="justify-content: center"][style*="flex-wrap:wrap"] ,
  footer div[style*="justify-content:center"][style*="flex-wrap:wrap"] {
    justify-content: center !important;
    margin-bottom: 24px !important;
  }
  footer .aa-footer-pill {
    padding: 11px 18px !important;
    font-size: 13px !important;
  }
  /* Bottom row: stack & center */
  footer div[style*="justify-content: space-between"] ,
  footer div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
}

/* ════════ Why Us — mobile reorder: text → cards → CTAs + full-width cards ════════ */
@media (max-width: 1024px){
  /* Promote Reveal children to direct grid children so we can reorder via flex `order` */
  .why-us-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .why-us-text { display: contents !important; }
  .why-us-text > * { order: 1; }
  .why-us-text > .why-us-ctas { order: 3 !important; margin-top: 16px !important; }
  .why-us-grid > [data-aa-mcar="why-us"],
  .why-us-grid > .aa-mcar-shell { order: 2 !important; }
  /* Why-Us carousel uses full width */
  .why-us-grid .aa-mcar-shell {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* CTAs full-width on phone */
  .why-us-text > .why-us-ctas button { flex: 1 1 auto; min-width: 200px; }
}
@media (max-width: 640px){
  .why-us-text > .why-us-ctas { flex-direction: column !important; align-items: stretch !important; }
  .why-us-text > .why-us-ctas button { width: 100% !important; }
}

/* ════════ FAQ — header above, accordion below on tablet/mobile ════════ */
@media (max-width: 1024px){
  #faq div[style*="grid-template-columns: 1fr 1.5fr"],
  #faq div[style*="grid-template-columns:'1fr 1.5fr'"],
  #faq div[style*="grid-template-columns: 1fr 1.5fr"] ,
  #faq div[style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
}
@media (max-width: 640px){
  #faq div[style*="grid-template-columns: 1fr 1.5fr"],
  #faq div[style*="grid-template-columns:'1fr 1.5fr'"],
  #faq div[style*="grid-template-columns: 1fr 1.5fr"] ,
  #faq div[style*="grid-template-columns:1fr 1.5fr"] {
    gap: 24px !important;
  }
  #faq div[style*="border-radius:14"] { border-radius: 12px !important; }
  #faq div[style*="padding:'18px 22px"] { padding: 16px 18px !important; }
  #faq div[style*="padding:'0 22px 18px"] { padding: 0 18px 16px !important; }
}

/* ════════ Final CTA ════════ */
@media (max-width: 1024px){
  #booking { padding: 72px 28px !important; }
}
@media (max-width: 640px){
  #booking { padding: 56px 20px !important; min-height: 0 !important; }
  #booking h2 { font-size: 28px !important; line-height: 1.12 !important; text-align: center !important; }
  #booking p { font-size: 15px !important; text-align: center !important; }
  #booking button { width: 100% !important; padding: 14px 22px !important; font-size: 15px !important; text-align: center !important; justify-content: center !important; display: inline-flex !important; align-items: center !important; }
  #booking div[style*="flex-wrap: wrap"][style*="gap:14"] ,
  #booking div[style*="flex-wrap:wrap"][style*="gap: 14"] ,
  #booking div[style*="flex-wrap:wrap"][style*="gap:14"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
}

/* ════════ Tweaks panel placement on small screens ════════ */
@media (max-width: 640px){
  #tw {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    padding: 16px !important;
  }
}

/* ════════ Booking modal on phones ════════ */
@media (max-width: 640px){
  #bk-modal { padding: 12px !important; }
  #bk-modal > div { max-height: 92vh !important; }
  #bk-modal #inline-container { height: 70vh !important; }
}

/* ════════ Booking page hero ════════ */
@media (max-width: 1024px){
  /* Hero typography on booking page */
  #bcHeroH { font-size: 38px !important; }
}
@media (max-width: 640px){
  #bcHeroH { font-size: 28px !important; line-height: 1.15 !important; }
  /* Booking sticky-bottom-CTA chrome adjusts on narrow */
  div[id="inline-container"] { min-height: 540px !important; }
}

/* ════════ Mobile/Tablet 1-up card carousel (data-aa-mcar) ════════ */
.aa-mcar-shell { display: none; position: relative; margin: 0 auto; max-width: 560px; }
@media (max-width: 1024px) {
  .aa-mcar-shell { display: block; }
}
.aa-mcar-viewport {
  overflow: hidden;
  border-radius: 22px;
  -webkit-overflow-scrolling: touch;
}
.aa-mcar-track {
  display: flex;
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.aa-mcar-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px 6px;
  box-sizing: border-box;
}
.aa-mcar-slide > * {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.aa-mcar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.aa-mcar-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid #c2cee0;
  background: #fff;
  color: #1b1464;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27,20,100,.10);
  transition: all 200ms cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
}
.aa-mcar-arrow:hover:not(:disabled),
.aa-mcar-arrow:active:not(:disabled) {
  background: linear-gradient(135deg,#2baae2,#1b1464);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(27,20,100,.32);
}
.aa-mcar-arrow:disabled { opacity: .35; cursor: not-allowed; }

/* On dark sections, swap arrow chrome */
section[style*="background: #0e1320"] .aa-mcar-arrow,
section[style*="background:'#0e1320"] .aa-mcar-arrow,
section[style*="background: #0e1320"]   .aa-mcar-arrow ,
section[style*="background:#0e1320"]   .aa-mcar-arrow {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
section[style*="background: #0e1320"] .aa-mcar-arrow:hover:not(:disabled),
section[style*="background:'#0e1320"] .aa-mcar-arrow:hover:not(:disabled),
section[style*="background: #0e1320"]   .aa-mcar-arrow:hover:not(:disabled) ,
section[style*="background:#0e1320"]   .aa-mcar-arrow:hover:not(:disabled) {
  background: linear-gradient(135deg,#2baae2,#1b1464);
  border-color: transparent;
}

.aa-mcar-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aa-mcar-dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  border: none;
  background: #c2cee0;
  cursor: pointer;
  padding: 0;
  transition: all 250ms cubic-bezier(.16,1,.3,1);
}
.aa-mcar-dot.on {
  width: 26px;
  background: linear-gradient(135deg,#2baae2,#1b1464);
}
section[style*="background: #0e1320"] .aa-mcar-dot,
section[style*="background:'#0e1320"] .aa-mcar-dot,
section[style*="background: #0e1320"]   .aa-mcar-dot ,
section[style*="background:#0e1320"]   .aa-mcar-dot {
  background: rgba(255,255,255,.22);
}
section[style*="background: #0e1320"] .aa-mcar-dot.on,
section[style*="background:'#0e1320"] .aa-mcar-dot.on,
section[style*="background: #0e1320"]   .aa-mcar-dot.on ,
section[style*="background:#0e1320"]   .aa-mcar-dot.on {
  background: linear-gradient(135deg,#7dd9f8,#2baae2);
}

/* ════════ Sticky mobile CTA bar ════════ */
.aa-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e0e7f0;
  box-shadow: 0 -4px 20px rgba(13,20,33,.06);
}
.aa-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 99px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,#2baae2,#1b1464);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(27,20,100,.32);
  min-height: 48px;
}
@media (max-width: 640px){
  .aa-sticky-cta { display: block; }
  /* Add bottom padding to body so content isn't covered */
  body { padding-bottom: 76px; }
  /* Footer needs its bottom padding adjusted to clear sticky CTA */
  footer { padding-bottom: 80px !important; }
}

/* ════════ Trust strip — keep ticker but reduce padding ════════ */
@media (max-width: 640px){
  /* Ticker items tighter spacing */
  div[style*="animation: ticker"] > div,
  div[style*="animation:ticker"] > div,
  div[style*="animation: ticker"] > div {
    padding: 0 18px !important;
  }
}

/* ════════ Misc: button paddings & taps ════════ */
@media (max-width: 640px){
  button, a[role="button"] { min-height: 44px; }
  /* Generic CTA buttons inside reveal blocks should fit */
  section button[style*="padding:'14px 32px"],
  section button[style*="padding:14px 32px"],
  section button[style*="padding:'15px 34px"],
  section button[style*="padding:15px 34px"],
  section button[style*="padding:'16px 36px"],
  section button[style*="padding:16px 36px"] {
    padding: 13px 22px !important;
    font-size: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * CASE STUDIES PAGE — page-specific responsive
 * ════════════════════════════════════════════════════════════════════════ */

/* ─── Hero CTAs ─── */
@media (max-width: 640px){
  section[style*="padding:76px 40px 96px"] #heroCtas,
  section[style*="padding: 76px 40px 96px"] #heroCtas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[style*="padding:76px 40px 96px"] #heroCtas a,
  section[style*="padding: 76px 40px 96px"] #heroCtas a {
    justify-content: center;
    width: 100%;
  }
}

/* ─── Featured Story 2-col → stack ─── */
@media (max-width: 1024px){
  section[style*="padding:8px 40px 80px"] > div[style*="grid-template-columns:1.05fr 1fr"],
  section[style*="padding: 8px 40px 80px"] > div[style*="grid-template-columns: 1.05fr 1fr"],
  section[style*="padding:8px 40px 80px"] > div[style*="grid-template-columns: 1.05fr 1fr"],
  section[style*="padding: 8px 40px 80px"] > div[style*="grid-template-columns:1.05fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighten the dark/light panel padding on tablet */
  section[style*="padding:8px 40px 80px"] > div[style*="grid-template-columns"] > div,
  section[style*="padding: 8px 40px 80px"] > div[style*="grid-template-columns"] > div {
    padding: 44px 32px !important;
    min-height: 0 !important;
  }
}
@media (max-width: 640px){
  section[style*="padding:8px 40px 80px"],
  section[style*="padding: 8px 40px 80px"] {
    padding: 0 16px 56px !important;
  }
  section[style*="padding:8px 40px 80px"] > div[style*="grid-template-columns"] > div,
  section[style*="padding: 8px 40px 80px"] > div[style*="grid-template-columns"] > div {
    padding: 32px 22px !important;
  }
  /* Headline inside featured story */
  section[style*="padding:8px 40px 80px"] h3[style*="font-size: 34px"],
  section[style*="padding: 8px 40px 80px"] h3[style*="font-size: 34px"],
  section[style*="padding:8px 40px 80px"] h3[style*="font-size:34px"],
  section[style*="padding: 8px 40px 80px"] h3[style*="font-size:34px"] {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }
  /* Inner stat tiles wrap nicely */
  section[style*="padding:8px 40px 80px"] div[style*="flex-wrap:wrap"][style*="gap:14"],
  section[style*="padding: 8px 40px 80px"] div[style*="flex-wrap:wrap"][style*="gap:14"] {
    gap: 10px !important;
  }
}

/* ─── Stories section: in-page carousel arrows on tablet/mobile ─── */
@media (max-width: 1024px){
  /* Already shown 1 card per page via JS; reposition arrows below */
  #stories #cs-prev.cs-arrow,
  #stories #cs-next.cs-arrow {
    position: absolute !important;
    top: auto !important;
    bottom: -68px !important;
    transform: none !important;
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,.06) !important;
  }
  #stories #cs-prev.cs-arrow:hover:not(:disabled),
  #stories #cs-next.cs-arrow:hover:not(:disabled) {
    transform: none !important;
  }
  #stories #cs-prev.cs-arrow { left: calc(50% - 110px) !important; right: auto !important; }
  #stories #cs-next.cs-arrow { right: calc(50% - 110px) !important; left: auto !important; }
  /* Pagination dots: extra margin to clear repositioned arrows */
  #stories #cs-dots {
    margin-top: 80px !important;
    flex-wrap: wrap !important;
    padding: 0 60px;
  }
  /* Single-card grid takes a sane max-width */
  #stories #cs-grid {
    max-width: 460px;
    margin: 0 auto;
  }
  /* Industry tab pills wrap */
  #stories #filters {
    flex-wrap: wrap !important;
    padding: 6px !important;
    gap: 4px !important;
    max-width: calc(100% - 16px);
  }
  #stories #filters .ind-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 640px){
  #stories #cs-prev.cs-arrow { left: calc(50% - 96px) !important; }
  #stories #cs-next.cs-arrow { right: calc(50% - 96px) !important; }
  #stories #cs-grid { max-width: 100%; }
  #stories #cs-dots {
    padding: 0 24px;
    margin-top: 80px !important;
  }
}

/* ─── Testimonials CSS-grid → carousel takeover ─── */
/* The desktop grid uses grid-template-areas; mobile-carousel.js will hide
   .cs-testimonials-grid and render its 3 children one at a time */
@media (max-width: 1024px){
  .cs-testimonials-grid {
    /* allow mobile-carousel.js to take over fully — it sets display:none on root */
  }
  /* Featured testimonial in carousel mode: tone down padding so it matches small cards */
  .aa-mcar-shell .cs-tst-feat {
    padding: 28px 24px !important;
  }
  .aa-mcar-shell .cs-tst-small {
    padding: 24px 22px !important;
  }
}

/* ─── Common Threads + How-it-works: card padding inside carousel ─── */
@media (max-width: 1024px){
  .aa-mcar-shell > .aa-mcar-viewport > .aa-mcar-track > .aa-mcar-slide > div[style*="border-radius:20"] {
    /* Common Threads cards */
    margin: 0 !important;
  }
}
@media (max-width: 640px){
  /* Common Threads card: lighten padding on phone */
  div[data-aa-mcar="common-threads"] > div,
  .aa-mcar-shell .aa-mcar-slide > div[style*="border-radius:20"][style*="padding:32"] {
    padding: 26px 22px !important;
  }
  /* How-it-works card */
  div[data-aa-mcar="how-it-works"] > div {
    padding: 22px 20px !important;
  }
}

/* ─── Hide decorative SVG path on tablet/mobile is already handled globally ─── */

/* ─── Hero canvas height: keep wave proportional ─── */
@media (max-width: 640px){
  #heroCanvas, #ctaCanvas { opacity: .85; }
}