body {
margin: 0;
    user-select: none;
  background: #F9F9F9;
 


}
button {
  outline:none;
}
a {
  text-decoration:none;
}

html {
  scroll-behavior: smooth;
}
br {
        user-select: none; /* For modern browsers */
            -webkit-user-select: none; /* For Safari */
            -moz-user-select: none; /* For Firefox */
}
#FIfl_ffa:hover {
  opacity:0.7;
}
* {
 transition: opacity 0.15s ease, background 0.15s ease, border 0.15s ease;
}
a {
  outline: none;
}
#asdsdA_ASDSA:hover {
  background:#e8e8e8 !important;
}

#asdsdA_ASDSA_dda:hover {
  opacity:0.7;
}


#asddA_ASDSA:hover {
  opacity:0.7;
}
#ADASASDA_AADAaa:hover {
  border:1px solid #d1d1d1 !important;
}
#asddA_ASDSA i {
  transition: transform 0.15s ease;
}



#asda_ALaaa:hover {
  border:1px solid #d1d1d1 !important;
}
#A_ca_acardd:hover {
    border:1px solid #d1d1d1 !important;
  transform:rotate(0deg) !important;
}
#asdD_ASDDASA:hover {
  text-decoration: underline !important;
}
#A_ca_acardd {
 transition: transform 0.20s ease;
}
  .faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
    .faq-item.open .faq-icon { transform: rotate(180deg); }

#AD_ADaaaa:hover {
  border:1px solid #d1d1d1 !important;
}
#A_Pdokaaa:hover {
  color:#2da157 !important;
}
#A_Pdokaaa {
  transition: color 0.10s ease;
}
#asda_ADaa:hover {
   text-decoration: underline !important;
}
@keyframes heroFadeSlideIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
#asdsdA_ASDSA {
  background: transparent !important;
}

#h1 {
  color:#2da157;
  font-family:sans-serif;
  font-weight:bold;
  font-size:130px;
  text-align:center;
  height:50px;
  margin-top:65px;
}

#h1_2 {
  
  color:black;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
  padding-top:18px;
  font-size:42px;
}

#h1_3 {
    font-size:27px;
  color:black;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  padding-top:0px;
}

#button {
  width:180px;
  height:51px;
  background-color:#2da157;
  border:none;
  cursor:pointer;
  color:white;
  font-family:sans-serif;
  font-weight:bold;
  font-size:22px;
      margin-left:0px;
  border-radius:11px;
  margin-top:35px;
}
#button:hover {
  opacity:0.7;
}
#asd_Apak___d:hover {
  text-decoration:underline !important;
}

/* ============================================================
   RESPONSIVE — @media only (zero HTML changes)
   Mobile nav actions row injected and toggled via script.js
   ============================================================ */
 
/* ---- Menu open/close transition (visibility+opacity, no display swap) ---- */
/* #mob-menu is always display:flex; hidden via opacity/visibility/pointer-events */
/* This lets CSS transitions animate both open AND close directions */
 
/* ---- Mobile action row: [Login] [Sign up] [☰] — hidden by default ---- */
#mob-nav-actions {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 6px;
  z-index: 10001;
}
 
/* ---- Hamburger button ---- */
#mob-ham {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #302f31;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
}
#mob-ham:hover { background: #ebebeb; }
#mob-ham i { display: inline-block; line-height: 1; }
 
/* ---- Inline Login button (hidden on small phones via 600px breakpoint) ---- */
#mob-login-btn {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #302f31;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
#mob-login-btn:hover { background: #ebebeb; }
 
/* ---- Inline Sign Up button (always shown on mobile) ---- */
#mob-signup-btn {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  background: #2da157;
  padding: 7px 13px;
  border-radius: 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
#mob-signup-btn:hover { opacity: 0.8; background: #2da157 !important; }
 
/* ---- Mobile dropdown menu ---- */
/* Always display:flex but hidden via opacity/visibility until mob-open is added */
#mob-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  background: rgba(249, 249, 249, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E7E7E7;
  z-index: 9998;
  padding: 6px 0 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  /* Hidden/closed state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  /* Transition: on close, delay visibility so opacity can fade first */
  transition: opacity 0.22s ease,
              transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s 0.24s;
}
/* Open state: no delay on visibility, animate in */
#mob-menu.mob-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.22s ease,
              transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s 0s;
}
#mob-menu a {
  padding: 12px 22px;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #302f31;
  display: block;
}
#mob-menu a:hover { background: #f2f2f2; }
.mob-menu-divider {
  height: 1px;
  background: #E7E7E7;
  margin: 6px 0;
}
#mob-menu .mob-menu-signup {
  color: white !important;
  background: #2da157;
  margin: 6px 16px 0;
  border-radius: 10px;
  text-align: center;
}
#mob-menu .mob-menu-signup:hover {
  background: #2da157 !important;
  opacity: 0.85;
}
 
/* Prevent horizontal scroll site-wide */
body { overflow-x: hidden; }
 
/* ================================================================
   max-width: 1200px  —  large tablet / narrow desktop
   ================================================================ */
@media (max-width: 1200px) {
  /* Navbar inner shrinks to 100% */
  #mob-nav-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  /* Banner image */
  #__Ppcaaaaadad {
    width: calc(100% - 40px) !important;
  }
  /* Footer inner container */
  div[style*="width:960px"] {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
}
 
/* ================================================================
   max-width: 1024px  —  tablet landscape
   ================================================================ */
@media (max-width: 1024px) {
  /* Pricing cards: stack to column */
  div:has(> div[style*="height:590px"]) {
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  div[style*="height:590px"] {
    width: min(380px, 100%) !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: 400px !important;
  }
  div[style*="height:590px"] #asddA_ASDSA {
    width: min(310px, calc(100% - 70px)) !important;
    margin-left: 35px !important;
  }
 
  /* Feature cards */
  #asda_ALaaa {
    width: calc(100% - 40px) !important;
    max-width: 750px !important;
    box-sizing: border-box !important;
  }
  div[style*="width:450px"] {
    width: auto !important;
    max-width: 100% !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
 
  /* Footer columns: wrap */
  div[style*="width:960px"] > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 30px !important;
  }
  div[style*="margin-left:200px"] { margin-left: 0 !important; }
  div[style*="margin-left:100px"] { margin-left: 0 !important; }
}
 
/* ================================================================
   max-width: 900px  —  tablet portrait + large phones
   NAV: show action row, hide desktop links
   ================================================================ */
@media (max-width: 900px) {
  /* Show mobile action row; hide desktop nav sections */
  #mob-nav-actions { display: flex !important; }
  #mob-center-nav  { display: none !important; }
  #mob-auth-wrap   { display: none !important; }
 
  /* Login is shown inline at this size → hide from dropdown */
  #mob-menu .mob-menu-login { display: none !important; }
 
  /* HERO headline */
  h1 {
    font-size: clamp(32px, 8vw, 60px) !important;
    padding: 0 20px !important;
    margin-top: 55px !important;
    line-height: 1.15 !important;
  }
 
  /* HERO subtext */
  div[style*="font-size:19.5px"] {
    font-size: 15.5px !important;
    padding: 0 24px !important;
    line-height: 1.6 !important;
  }
 
  /* Banner image */
  #__Ppcaaaaadad { width: calc(100% - 32px) !important; }
 
  /* "Rank higher on" icon row */
  div:has(> #ADASASDA_AADAaa) {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 20px !important;
  }
  #ADASASDA_AADAaa { margin-left: 0 !important; }
 
  /* All section H2 headings */
  h2 {
    font-size: clamp(22px, 5.5vw, 39px) !important;
    padding: 0 20px !important;
  }
 
  /* FEATURE cards */
  #asda_ALaaa {
    width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
  }
  div[style*="width:450px"] {
    width: auto !important;
    max-width: calc(100vw - 80px) !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
 
  /* COMPARE cards: stack, remove rotation */
  div:has(> #A_ca_acardd) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    padding: 0 20px !important;
  }
  #A_ca_acardd {
    width: min(340px, calc(100vw - 40px)) !important;
    margin-left: 0 !important;
    transform: rotate(0deg) !important;
  }
  /* Re-centre the "BEST VALUE" badge */
  div[style*="position:absolute"][style*="margin-left:136px"] {
    left: 50% !important;
    margin-left: -62px !important;
  }
 
  /* PRICING cards: stack */
  div:has(> div[style*="height:590px"]) {
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  div[style*="height:590px"] {
    width: min(380px, calc(100vw - 40px)) !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: 400px !important;
  }
  div[style*="height:590px"] #asddA_ASDSA {
    width: min(310px, calc(100% - 70px)) !important;
  }
 
  /* ABOUT text block */
  div[style*="width:600px"] {
    width: calc(100% - 40px) !important;
    max-width: 600px !important;
    box-sizing: border-box !important;
  }
 
  /* BOTTOM CTA section */
  div[style*="height:600px"] {
    height: auto !important;
    padding-bottom: 50px !important;
  }
  div[style*="margin-top:152px"] {
    margin-top: 0 !important;
    padding: 40px 20px 0 !important;
    font-size: clamp(22px, 5vw, 35px) !important;
    box-sizing: border-box !important;
  }
 
  /* FOOTER */
  div[style*="height:290px"] {
    height: auto !important;
    padding-bottom: 40px !important;
  }
  div[style*="width:960px"] {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  div[style*="width:960px"] > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 30px !important;
  }
  div[style*="margin-left:200px"] { margin-left: 0 !important; }
  div[style*="margin-left:100px"] { margin-left: 0 !important; }
 
  /* FAQ container */
  div[style*="max-width: 775px"] {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
}
 
/* ================================================================
   max-width: 600px  —  small phones
   Login too wide for navbar → moves to dropdown menu only
   ================================================================ */
@media (max-width: 600px) {
  /* Hide inline login, restore it in dropdown */
  #mob-login-btn { display: none !important; }
  #mob-menu .mob-menu-login { display: block !important; }
 
  h1 {
    font-size: clamp(24px, 9vw, 38px) !important;
    margin-top: 40px !important;
  }
  h2 { font-size: clamp(20px, 6vw, 30px) !important; }
 
  div[style*="font-size:19.5px"] { font-size: 14.5px !important; }
 
  /* Feature card category badges: tighter padding + left margin */
  div[style*="padding:20px 30px"] {
    padding: 14px 18px !important;
    margin-left: 20px !important;
    margin-top: 20px !important;
  }
 
  /* Pricing card buttons + inner spacing */
  div[style*="height:590px"] #asddA_ASDSA {
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
  }
  div[style*="height:590px"] hr {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
 
  /* Bottom CTA heading */
  div[style*="margin-top:152px"] {
    font-size: clamp(19px, 6vw, 26px) !important;
  }
 
  /* Footer column gap */
  div[style*="width:960px"] > div[style*="display:flex"] {
    gap: 20px !important;
  }
}

    /* ── Responsive overrides — @media only, no HTML changes ──────────── */
 
    /*
      Core fix: max-width constrains the inline width:1350px without !important.
      box-sizing ensures padding doesn't cause overflow.
    */
    #D_dlod {
      max-width: 100%;
      box-sizing: border-box;
    }
 
    /* ── Large tablets (≤ 1400px) ──────────────────────────────────────── */
    @media (max-width: 1400px) {
      #D_dlod {
        padding: 0 40px;
      }
    }
 
    /* ── Tablets (≤ 1024px) ────────────────────────────────────────────── */
    @media (max-width: 1024px) {
      #D_dlod {
        padding: 0 28px;
      }
 
      #D_dlod h1 { font-size: 2rem; }
      #D_dlod h2 { font-size: 1.45rem; }
      #D_dlod h3 { font-size: 1.1rem; }
 
      #D_dlod p,
      #D_dlod li {
        font-size: 0.97rem;
        line-height: 1.75;
      }
    }
 
    /* ── Mobile landscape / large phones (≤ 768px) ─────────────────────── */
    @media (max-width: 768px) {
      #D_dlod {
        padding: 0 20px;
        margin-top: 10px !important; /* override inline margin-top:15px */
      }
 
      #D_dlod h1 { font-size: 1.65rem; }
      #D_dlod h2 { font-size: 1.2rem; }
      #D_dlod h3 { font-size: 1rem; }
 
      #D_dlod p,
      #D_dlod li {
        font-size: 0.92rem;
        line-height: 1.75;
      }
 
      #D_dlod ul {
        padding-left: 20px;
      }
    }
 
    /* ── Mobile portrait (≤ 480px) ─────────────────────────────────────── */
    @media (max-width: 480px) {
      #D_dlod {
        padding: 0 14px;
      }
 
      #D_dlod h1 { font-size: 1.35rem; }
      #D_dlod h2 { font-size: 1.05rem; }
      #D_dlod h3 { font-size: 0.92rem; }
 
      #D_dlod p,
      #D_dlod li {
        font-size: 0.84rem;
        line-height: 1.7;
      }
 
      #D_dlod ul {
        padding-left: 16px;
      }
 
      /* Stack long links so they don't overflow narrow viewports */
      #D_dlod a {
        word-break: break-word;
      }
    }