*,
*::before,
*::after {
  box-sizing: border-box;
}

header {
  background-color: #F7F7F7 !important;
}

.hero-wrapper {
  background-color: #F7F7F7;
  background-image: url("/assets/images/landing/index/hero-bg.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
}

.hero-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
  margin: auto;
  height: max-content;
  padding-bottom: 121px;
  padding-top: 121px;
  /* Add consistent bottom padding */
}

.hero-sect-one {
  max-width: 631px;
  display: flex;
  justify-items: center;
  flex-direction: column;
  gap: 20px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 100px;
  /* Compensate for fixed header */
  font-family: "Inter_28pt-Regular";
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* removed !important, removed html selector */
  width: 100%;
}

/* Scroll Offset for Fixed Header */
#how-it-works,
#what-stopreg-check,
#why-stopreg,
#gdpr-data-protection,
#api,
#pricing,
#wordpress-plugin,
#fags,
#about {
  scroll-margin-top: 120px;
}

.hero-header {
  font-size: 56px;
  font-family: "Inter_18pt-Bold";
  line-height: 66.8px;
}

.header-inner {
  color: var(--tertiary-color);
}

.hero-title {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: var(--color-three);
  line-height: 24px;
}

.hero-btn-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 16px;
}

.hero-btn-wrapper .hero-btn-link,
.hero-btn-wrapper>button,
.view-docs-btn {
  height: 58px;
  padding-left: 32px;
  border: none;
  font-size: 16px;
  padding-right: 32px;
  font-family: "Inter_28pt-SemiBold";
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-btn-wrapper .hero-btn-link {
  background-color: var(--secondary-color);
  color: var(--color-one);
  border-radius: 8px;
  width: max-content;
}

.hero-btn-wrapper .hero-btn-link.signup-overlay-btn {
  background-color: var(--secondary-color) !important;
  color: var(--color-one) !important;
  border-radius: 8px;
}

.view-docs-btn {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid #1452CA !important;
  border-radius: 8px;
  color: #1452CA !important;
}

.hero-sect-two {
  height: max-content !important;
  width: 100%;
  max-width: 606px !important;
  box-shadow: 20px 20px 40px 0px #25252514;
  background-color: white;
  border-radius: 16px;
  padding: 20px;

}

.hero-sect-two-inner-one {
  position: absolute;
  top: 25px;
  left: 26px;
  border: 2px solid rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.5);
  height: 440px;
  width: 498px;
  border-radius: 25px;
}

.efea-wrapper {
  padding-left: var(--desktop-padding);
  padding-right: var(--desktop-padding);
  overflow: hidden;
  background: radial-gradient(circle at 0% 0%, #E3EFFF 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, #E3EFFF 0%, transparent 50%),
    linear-gradient(180deg, #E3EFFF 0%, #FFFFFF 100%);
}

.hero-sect-two-inner-two {
  height: 100%;
  width: 100%;
  border-radius: 25px;
  box-shadow: 0px 20px 40px 0px var(--color-five);
  background-color: var(--color-six);
  position: relative;
  top: 0px;
  right: 0px;
}

.folder-ico-cont {
  display: flex;
  align-items: center;
  justify-items: center;
  height: 32px;
  width: 32px;
  padding-top: 57px;
  margin: 0px auto 18px auto;
}

.folder-ico-cont>img {
  width: 100%;
  height: 100%;
}

.hero-sect-two-inner-two-title {
  color: #252525;
  font-family: "Inter_28pt-SemiBold";
  font-size: 24px;
  margin: 0px auto 20px auto;
  margin-bottom: 12px;
}

.api-live-demo-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.api-live-demo-input {
  outline: none;
  height: 50px;
  width: 100%;
  border: 0.3px solid #737373;
  border-radius: 8px;
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #252525;
  padding-left: 16px;
  margin-bottom: 12px;
}

.api-live-demo-input::placeholder {
  color: #737373;
}

.api-live-demo-btn {
  height: 50px;
  width: 52px;
  background-color: black;
  border-radius: 10px;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}

.api-live-demo-btn>img {
  height: 24px;
  width: 24px;
  margin-left: 3px;
}


/* Spinner styles for API button */
.stopreg-btn-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.api-live-demo-cloudflaire-cont {
  width: 300px;
  height: 65px;
  border: 1px solid #E0E0E0;
}

.api-live-demo-result-cont {
  height: 300px;
  margin-top: 24px;
  background-color: #0d0d0d;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid #333;
}

.terminal-header {
  background: #1e1e1e;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #333;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f56;
}

.terminal-dot.yellow {
  background: #ffbd2e;
}

.terminal-dot.green {
  background: #27c93f;
}

.terminal-title {
  color: #999;
  font-size: 12px;
  font-family: "Inter_28pt-Regular";
  margin-left: 8px;
}

.terminal-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #d4d4d4;
  text-align: left;
}

/* Initially center the placeholder */
.terminal-body.placeholder-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Syntax Highlighting */
.json-key {
  color: #9cdcfe;
}

.json-string {
  color: #ce9178;
}

.json-boolean {
  color: #569cd6;
}

.json-number {
  color: #b5cea8;
}

.json-null {
  color: #569cd6;
}


.api-live-demo-result-default-tle,
.api-live-demo-result-default-stle {
  color: #FDFDFD;
  text-align: center;
}

.api-live-demo-result-default-tle {
  font-size: 24px;
  font-family: "Inter_18pt-Bold";
}

.api-live-demo-result-default-stle {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
}

.hero-review-one {
  width: 100%;
}

.hero-review-two {
  width: 80%;
}

.hero-review-three {
  width: 50%;
}

.hero-review-four {
  width: 20%;
}

.hero-review-five {
  width: 10%;
}

.wd-pr-lb-wrapper {
  background-color: var(--color-ten);
  padding-top: 100px;
  padding-bottom: 100px;
}

.wd-pr-lb-cont {
  max-width: var(--max-width);
  margin: auto;
}

/* WordPress Plugin Styles */
.tools-header {
  font-size: 40px;
  font-family: "Inter_28pt-SemiBold";
  color: var(--color-four);
  text-align: center;
  line-height: 64px;
  margin-bottom: 64px;
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wd-pr-lb-cont-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.wd-pr-lb-cont-inner-item {
  border-radius: 12px;
  background-color: var(--color-six);
  display: flex;
  height: 180px;
  width: 100%;
  max-width: 183.3px;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: 24px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

a.wd-pr-lb-cont-inner-item {
  cursor: pointer;
}

a.wd-pr-lb-cont-inner-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border-color: var(--secondary-color);
  background-color: #fcfcfc;
}

.wd-item-icon-container {
  height: 120px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.wd-item-title {
  font-size: 16px;
  font-family: "PlusJakartaSans-ExtraBold";
  text-align: center;
  line-height: 1.2;
}

.wd-pr-lb-item-multiline {
  font-size: 16px !important;
  font-family: "PlusJakartaSans-Bold" !important;
}

.wd-pr-lb-sub {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: black;
}

.wd-pr-html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter_28pt-Regular";
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

/* Plugin Icons Dimensions */
.wd-icon-wp,
.wd-icon-laravel,
.wd-icon-http {
  width: 100px;
  height: 100px;
}

.wd-icon-zapier {
  width: 117.87px;
  height: 32px;
}

.wd-icon-make {
  width: 120px;
  height: 45px;
}

.wd-icon-php,
.wd-icon-js {
  width: 99.82px;
  height: 94px;
}

.wd-icon-npm {
  width: 100px;
  height: 58px;
}

.wd-icon-question {
  width: 48px;
  height: 48px;
}

/* Left Aligned Item Special Case */
.wd-item-left-align {
  align-items: flex-start;
  padding-left: 12px;
  padding-right: 12px;
  gap: 4px;
  max-width: 183px;
  box-sizing: border-box;
}

.wd-item-left-align .wd-item-title {
  text-align: left;
}

.wd-item-left-align .wd-item-icon-container {
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin: 0;
  margin-bottom: 8px;
}


.efea-wrapper-sct-one {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  max-width: 1000px;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 64px;
}

.efea-wrapper-sct-one-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.efea-wrapper-sct-one-item>p:first-child {
  font-size: 40px;
  font-family: "PlusJakartaSans-ExtraBold";
}

.efea-wrapper-sct-one-item>p:nth-child(2) {
  font-size: 20px;
  font-family: "PlusJakartaSans-ExtraBold";
}

.efea-wrapper-sct-one-item>p:nth-child(3) {
  font-size: 20px;
}

.efea-wrapper-sct-two {
  max-width: var(--max-width);
  width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  flex-direction: row;
  justify-content: space-between;
}

.efea-wrapper-sct-two-inner-one {
  max-width: 619px;
  width: 100%;
  gap: 24px;
  display: flex;
  flex-direction: column;
}

.efea-header-title {
  line-height: 60px;
  font-family: "Inter_18pt-Bold";
  font-size: 40px;
}



.efea-header-desc {
  color: #595959;
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
}

.efea-wrapper-sct-two-inner-one>.efea-btn-link {
  background-color: var(--secondary-color);
  height: 54px;
  width: max-content;
  padding-left: 32px;
  padding-right: 32px;
  color: var(--color-one);
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-family: "Inter_28pt-SemiBold";
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.efea-wrapper-sct-two-inner-one>.efea-btn-link.signup-overlay-btn {
  background-color: var(--secondary-color) !important;
  color: var(--color-one) !important;
}

.efea-wrapper-sct-two-inner-two {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 506px;
  width: 506px;
}

.efea-wrapper-sct-two-inner-two>img {
  height: 100%;
  width: 100%;
}

.bdeiw-wrapper {
  max-width: var(--max-width);
  margin: auto;
}

.bdeiw-wrapper-hd {
  font-size: 40px;
  color: var(--primary-color);
  font-family: "PlusJakartaSans-ExtraBold";
  line-height: 56px;
  margin-bottom: 8px;
  text-align: center;
  margin-top: 200px;
}

.bdeiw-wrapper-tle {
  color: var(--color-eleven);
  font-size: 20px;
  font-family: "Inter_28pt-Regular";
  text-align: center;
  margin-bottom: 66px;
}

.bdeiw-wrapper-sect {
  display: flex;
  flex-direction: row;
  gap: 64px;
}

.bdeiw-wrapper-sect-two {
  flex: 1;
}

.bdeiw-wrapper-sect-img {
  flex: 1;
  height: 461px;
}

.bdeiw-wrapper-sect-img>img {
  width: 100%;
  height: 100%;
}

.bdeiw-wrapper-sect-two-title {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 40px;
}

.bdeiw-wrapper-sect-two-inner-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 12px;
}

.bdeiw-wrapper-sect-two-inner-item>div:first-child {
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdeiw-wrapper-sect-two-inner-item>div:first-child>img {
  height: 100%;
  width: 100%;
}

.bdeiw-wrapper-sect-two-inner-item>p:nth-child(2) {
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 16px;
  color: var(--primary-color);
}

.bdeiw-wrapper-sect-two-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.bdeiw-btn {
  background-color: var(--secondary-color);
  color: var(--color-one);
  font-family: "Inter_28pt-SemiBold";
  height: 54px;
  border-radius: 8px;
  padding-left: 32px;
  padding-right: 32px;
  border: none;
  font-size: 16px;
}

.wci-wrapper {
  max-width: var(--max-width);
  margin: auto;
  margin-top: 200px;
}

.wci-wrapper-hd {
  font-size: 40px;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--primary-color);
  line-height: 56px;
  text-align: center;
  margin-bottom: 15px;
}

.wci-wrapper-tle {
  font-size: 20px;
  font-family: "Inter_28pt-Regular";
  color: var(--color-twelve);
  margin-bottom: 40px;
  text-align: center;
}

.wci-wrapper-grd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 200px;
}

.wci-wrapper-grd-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  gap: 24px;
  padding: 48px 24px;
  background-color: var(--color-fourteen);
}

.wci-wrapper-grd-item-icon {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
}

.wci-wrapper-grd-item-icon>img {
  width: 28px;
  height: 28px;
}

.wci-wrapper-grd-item-hd {
  font-size: 20px;
  font-family: "Inter_28pt-SemiBold";
  color: var(--primary-color);
}

.wci-wrapper-grd-item-tle {
  color: var(--color-thirteen);
  font-size: 16px;
  line-height: 24px;
}


.fasi-wrapper {
  max-width: 1280px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 96px;
  padding-bottom: 100px;
  padding-top: 100px;
}

.fasi-sect-one {
  flex: 1;
}

.fasi-sect-one-hd {
  font-size: 48px;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--primary-color);
  line-height: 67.2px !important;
  margin-bottom: 20px;
  padding: 0px;
}

.fasi-sect-one-tle {
  font-size: 16px;
  color: var(--primary-color);
  line-height: 22.4px;
  font-family: "Inter_28pt-Regular";
}

.fasi-sect-two {
  flex: 1;
  height: 440px;
}

.fasi-sect-two>img {
  width: 100%;
  height: 100%;
}

/* Code Snippet Container */
.code-snippet-container {
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.auth-container {
  width: 90%;
  max-width: 440px;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin: 0;
  /* Reset margin */
  position: relative;
  /* Anim init */
  opacity: 0;
  transform: translateY(10px);
}

.code-snippet-content {
  position: relative;
  padding: 20px;
  overflow: auto;
  background-color: #1e1e1e;
  flex: 1;
}

.code-snippet-tabs {
  display: flex;
  gap: 0;
  background-color: #252526;
  border-top: 1px solid #3e3e42;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.code-snippet-tabs::-webkit-scrollbar {
  display: none;
}

.code-tab {
  padding: 12px 20px;
  background-color: transparent;
  border: none;
  color: #858585;
  font-size: 16px;
  font-family: "Inter_28pt-SemiBold";
  font-weight: 600;
  font-style: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-top: 2px solid transparent;
  position: relative;
  flex-shrink: 0;
}

.code-tab:hover {
  color: #cccccc;
  background-color: #2d2d30;
}

.code-tab.active {
  color: #ffffff;
  background-color: #1e1e1e;
  border-top-color: var(--secondary-color);
}

.code-copy-btn {
  position: absolute;
  bottom: 60px;
  right: 12px;
  background-color: #000000;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  z-index: 10;
  opacity: 0.7;
  color: #ffffff;
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  font-weight: 600;
  pointer-events: auto;
}


.code-copy-btn:hover {
  opacity: 1;
}




.code-copy-btn:active {
  transform: scale(0.95);
}

.code-copy-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

.code-copy-btn span {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.code-block {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: "PlusJakartaSans-SemiBold", "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: #d4d4d4;
  overflow-x: auto;
  white-space: pre;
  overflow-x: auto;
}

.code-block * {
  font-family: "PlusJakartaSans-SemiBold", "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px !important;
  white-space: pre;
}

/* Syntax highlighting colors - matching the image */
.code-block .keyword {
  color: #c586c0;
  /* Purple/Magenta for keywords */
}

.code-block .string {
  color: #6a9955;
  /* Green for strings */
}

.code-block .function {
  color: #dcdcaa;
  /* Yellow for functions */
}

.code-block .comment {
  color: #6a9955;
  /* Green for comments */
}

.code-block .variable {
  color: #d4d4d4;
  /* White/Light gray for variables (default text color) */
}

.code-block .operator {
  color: #d4d4d4;
  /* Light gray for operators */
}

.code-block .number {
  color: #d4d4d4;
  /* White/Light gray for numbers */
}

.land-pricing-wrapper {
  max-width: var(--max-width);
  margin: auto;
  margin-bottom: 235px;
}

.land-pricing-hd {
  max-width: 646px;
  margin: auto;
  text-align: center;
  font-size: 40px;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--color-fifteen);
  line-height: 56px;
  margin-bottom: 40px;
}

.land-pricing-hd-inner {
  color: var(--secondary-color);
}

.land-pricing-sect {
  height: 62px;
  width: 214px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-shadow: 0px 10px 15px 0px var(--color-sixteen);
  border-radius: 27px;
  background-color: var(--color-six);
}

.lpssut {
  position: absolute;
  top: 50%;
  right: -120px;
  color: var(--secondary-color);
  font-size: 12px;
  font-family: "Inter_28pt-SemiBold";
  text-transform: uppercase;
  transform: translateY(-50%);
}

.lpssut-pointer {
  position: absolute;
  bottom: -7px;
  right: -30px;
}

.land-pricing-sect-mth,
.land-pricing-sect-yr {
  font-size: 16px;
  cursor: pointer;
  height: 100%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--color-twenty-three);
  background-color: transparent;
  border: none;
  font-family: "Inter_28pt-SemiBold";
}

.land-pricing-sect-mth.active-btn,
.land-pricing-sect-yr.active-btn {
  color: var(--color-six);
}

.land-pricing-sect-mth {
  position: absolute;
  padding-left: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Validation Error Styles */
.custom-input-error {
  color: #d92d20;
  font-size: 16px;
  /* Increased legibility */
  margin-top: 8px;
  /* Pull closer to input */
  margin-bottom: 12px;
  /* Push next content down */
  font-family: "Inter_28pt-SemiBold";
  /* slightly bolder */
  animation: inputErrorFadeIn 0.3s ease-in-out forwards;
}

.input-error-border {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 4px #fee4e2 !important;
}

/* Fix spacing for Live API Demo Input */
.api-live-demo-input {
  margin-bottom: 0 !important;
  /* Remove internal margin */
}

.api-live-demo-row {
  margin-bottom: 12px;
  /* Move spacing to row */
  transition: margin-bottom 0.2s;
}

/* When error follows row, reduce row margin to connect them */
.api-live-demo-row:has(+ .custom-input-error) {
  margin-bottom: 8px;
}

@keyframes inputErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.land-pricing-sect-yr {
  position: absolute;
  top: 50%;
  right: 0px;
  padding-right: 5px;
  transform: translateY(-50%);
}

.land-pricing-sect-selctor {
  position: absolute;
  height: 46px;
  width: 103px;
  border-radius: 32px;
  /* margin-left: 8px;
    margin-right: 8px; */
  transform: translateX(10%);
  background-color: var(--secondary-color);
  transition: transform 0.3s ease;
}

.fags-wrapper {
  background-color: var(--color-seventeen);
  padding-top: 100px;
  padding-bottom: 100px;
}

.land-pricing-container {
  position: absolute;
  z-index: 9;
  width: 100%;
  top: -180px;
}

.land-cont-mnth,
.land-cont-yr {
  display: none;
  width: 100%;
  flex-direction: row;
  justify-items: center;
  justify-content: center;
  gap: 22px;
  transition: all 0.5s ease;
  opacity: 0;
  transform: scale(0.9);
}

.land-cont-mnth.active,
.land-cont-yr.active {
  display: flex;
  opacity: 1;
  transition: opacity 0.3s ease;
  transition: all 0.5s ease;
  opacity: 1;
  transform: scale(1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.land-cont-mnth.active,
.land-cont-yr.active {
  animation: fadeIn 0.5s ease;
}

.land-cont-yr {
  display: none;
}

.land-pricing-container-sectone {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 22px;
}

.lpcsr-remm {
  font-size: 16px;
  height: 34px;
  width: 100%;
  text-align: center;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-six);
  box-shadow: 0px 2px 5px 0px var(--color-twenty-one);
}

.land-pricing-container-item,
.land-pricing-container-item-recomm {
  border-bottom: 8px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 361px;
}

.land-pricing-container-item-recomm {
  background-color: var(--color-twenty-two);
}

.land-pricing-container-item,
.land-pricing-container-sectone-recomm {
  border-radius: 8px;
  box-shadow: 8px 8px 40px 0px var(--color-eighteen);
  overflow: hidden;
}

.land-pricing-container-item {
  border: 1px solid var(--color-twenty);
  background-color: var(--color-six);
}

.land-pricing-container-item-hd {
  font-size: 24px;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--color-fifteen);
  text-align: center;
  margin-bottom: 12px;
}

.land-pricing-container-item-tle {
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: var(--color-ninteen);
  margin-bottom: 40px;
  max-width: 235.5px;
}

.land-pricing-container-item-sub-tle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-align: center;
  color: var(--color-fifteen);
  margin-bottom: 40px;
}

.pr-do-si {
  font-family: "Inter_28pt-SemiBold";
  font-size: 23px;
}

.pr-do-am {
  font-size: 32px;
  font-family: "PlusJakartaSans-ExtraBold";
  margin-right: 10px;
}

.land-pricing-container-item-btn,
.land-pricing-container-item-btn-recomm {
  font-family: "Inter_28pt-SemiBold";
  width: 100%;
  height: 54px;
  font-size: 16px;
  border-radius: 8px;
}

.land-pricing-container-item-btn {
  border: 1px solid var(--secondary-color);
  background-color: transparent;
  color: var(--secondary-color);
}

.land-pricing-container-item-btn-recomm {
  background-color: var(--secondary-color);
  color: var(--color-one);
  border: none;
}

.fags-hd,
.fags-docs {
  font-size: 48px;
  color: var(--color-one);
  font-family: "PlusJakartaSans-ExtraBold";
  text-align: center;
  margin-bottom: 13px;

}

.fags-docs {
  padding-top: 100px;
}

.fags-tle {
  font-size: 16px;
  color: var(--color-twenty);
  text-align: center;
  margin-bottom: 40px;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 816px;
  margin: auto;
}

.accordion-button {
  width: 100%;
  height: 104px;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
  border: none;
  font-size: 16px;
  text-align: left;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--color-one);
}

/* .accordion-button:hover {
    background: #e7e7e7;
} */

.accordion-icon {
  transition: transform 0.3s ease-out;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  color: var(--color-one);
  transition: max-height 0.3s ease-out;
}

.accordion-content p {
  margin: 0;
  padding: 15px;
}

.accordion-content.show {
  max-height: 150px;
}

.accordion-button.active .accordion-icon {
  transform: rotate(180deg);
}

.docs-header-wrapper,
.docume-content-wrapper {
  padding-left: var(--desktop-padding);
  padding-right: var(--desktop-padding);
}

.docs-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  max-width: var(--max-width);
  margin: auto;
  gap: 10px;
  padding-top: 55px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-twenty);
  justify-content: space-between;
}

.docs-header-sect-one-hd {
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 48px;
  line-height: 67.2px;
  color: var(--primary-color);
}

.docs-header-sect-one-tle {
  font-family: "Inter_28pt-Regular";
  font-size: 20px;
  color: var(--color-three);
  font-weight: 400;
}

.docs-header-img {
  height: 320px;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docs-header-img>img {
  height: 100%;
  width: 100%;
}

.docume-content-container {
  max-width: 1312px;
  height: max-content;
  position: relative;
  top: 20px;
  margin: auto;
  padding-top: 50px;
  top: 0px;
  margin-bottom: 116px;
}

.docume-content-container-hd>p {
  font-size: 24px;
  font-family: "PlusJakartaSans-ExtraBold";
  color: var(--primary-color);
}

.documem-content-inner {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  gap: 92px;
}

.docume-content-nav {
  padding-top: 24px;
  position: -webkit-sticky;
  position: sticky;
  top: 130px;
  /* Adjusted to clear header */
  right: 0;
  width: 100%;
  max-width: 320px;
  height: max-content;
  border-right: 1px solid #CCCCCC;
  align-self: flex-start;
  /* CRITICAL: prevents stretching */
  z-index: 10;
}

/* Force ancestors to have visible overflow and NO transform/filter for sticky to work */
html,
body,
main,
.docume-content-wrapper,
.docume-content-container,
.documem-content-inner {
  overflow: visible !important;
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  contain: none !important;
}

.docume-content-nav>button {
  white-space: nowrap;
  height: 56px;
  width: 100%;
  font-size: 20px;
  color: #252525;
  font-family: "Inter_28pt-Regular";
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  background-color: transparent;
  border: none;
  border-radius: 8px;
}

.documen-content-item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 12px;
  flex: 1;
}

.error-modal {
  display: none;
  width: fit-content;
  padding: 12px 14px;
  border: 1px solid #ff4d4d;
  background-color: #fff0f0;
  color: #b30000;
  border-radius: 8px;
  width: fit-content;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(255, 77, 77, 0.1);
  animation: slideDown 0.3s ease-in-out;
  margin: 0px 30px 30px 30px;
}

/* Error icon inside modal */
.error-modal svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: #ff4d4d;
}

/* Fade/slide animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-spinner {
  border: 3px solid #fff;
  border-top: 3px solid #666;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.documen-content-item {
  width: 100%;
  max-width: 100%;
  /* Force constraint */
  box-sizing: border-box;
  /* Include padding in width */
  margin-bottom: 30px;
}

.documen-content-item pre {
  max-width: 100%;
  /* Ensure pre doesn't overflow */
  white-space: pre-wrap;
  /* Optional: wrap long lines if desired, or keep scrolling */
  box-sizing: border-box;
  font-size: 16px;
  /* Desktop code font size */
}

.documen-content-item code {
  font-size: 16px;
  /* Ensure code tag matches pre */
  font-family: inherit;
  /* Or a monospace font */
}

.documen-content-item h3 {
  font-family: "Inter_18pt-Bold";
  font-size: 24px;
  color: #252525;
  margin-top: 24px;
  margin-bottom: 12px;
}

.documen-content-item>h2 {
  font-size: 32px;
  font-family: "Inter_18pt-Bold";
  color: #252525;
  line-height: 44.8px;
  margin-top: 0;
  margin-bottom: 16px;
}

.documen-content-item>p {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: #252525;
  line-height: 24px;
  /* Adjusted for 16px font */
  white-space: normal;
  /* Fixed 'wrap' typo to 'normal' */
}

/* Documentation List Styling */
.documen-content-item ul,
.documen-content-item ol {
  margin-top: 16px;
  margin-bottom: 24px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Spacing between items */
}

.documen-content-item li {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: #252525;
  line-height: 24px;
}


.docs-content-list {
  display: flex;
  flex-direction: column;
  gap: 83px;
  flex: 1;
  overflow-x: hidden;
  /* Stronger than clip */
  min-width: 0;
  /* Critical for flex container to clip children */
  padding-right: 2px;
  /* Safety buffer */
}

/* Active Sidebar Button Style (Restored) */
.docume-content-nav button.active-docume-list-item {
  background-color: var(--color-twenty-five) !important;
  color: var(--secondary-color) !important;
  font-family: "Inter_18pt-Bold";
}

/* Animation 3: Zoom In Reveal (Safe, premium, no overflow) */
@keyframes docAnimZoomIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
    /* Slight zoom out effect */
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.doc-anim-blur {
  /* Class name kept for JS compatibility */
  animation: docAnimZoomIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  filter: none;
}

#otp-dialog {
  display: none;
  /* hidden by default like others */
}

.auth-logo {
  width: 192px;
  height: 107px;
  margin: auto;
  margin-bottom: 16px;
  padding-top: 40px;
}

.auth-logo>img {
  height: 100%;
  width: 100%;
}

.cr-auth-header {
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 32px;
  line-height: 44.8px;
  align-items: center;
  margin-bottom: 6px;
  text-align: center;
}

.cr-auth-tle {
  text-align: center;
  font-size: 16px;
  font-family: "Inter_28pt-SemiBold";
  color: var(--color-three);
  margin-bottom: 42px;
}

.auth-container {
  width: 100%;
  max-width: 608px;
  box-shadow: 24px 24px 40px 0px var(--color-twenty-six);
  background-color: var(--color-six);
  border-radius: 8px;
  position: relative;
  margin-top: 380px;
  margin-bottom: 100px;
  padding-bottom: 24px;
}

.otp-container {
  width: 100%;
  max-width: 608px;
  box-shadow: 24px 24px 40px 0px var(--color-twenty-six);
  background-color: var(--color-six);
  border-radius: 8px;

  position: relative;
  padding-bottom: 24px;

}

.otp-email {
  color: var(--color-two)
}

.auth-close-btn {
  height: 56px;
  width: 56px;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -55px;
  top: -55px;
}

.form-container {
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-item>label {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: var(--custom-five);
}

.form-item>input,
.password-container>input {
  height: 48px;
  width: 100%;
  font-size: 16px;
  border-radius: 8px;
  font-family: "Inter_28pt-Regular";
  border: 0.3px solid rgba(115, 115, 115, 0.3);
  box-sizing: border-box;
  padding-left: 17px;
}



.cr-auth-auth {
  color: var(--color-two);
  cursor: pointer;
}

.form-item>input:focus {
  outline: 0.3px solid var(--color-twenty-seven);
}

.form-item-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-item-inner>label {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: var(--primary-color);
}

.password-container {
  position: relative;
}

.password-container>img {
  position: absolute;
  top: 18px;
  right: 20px;
  cursor: pointer;
}

.password-container>input:focus {
  outline: 0.3px solid var(--color-twenty-seven);
}

.password-icon {
  height: 16px;
  width: 18.19px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

input[type="password"]::-webkit-textfield-decoration-container {
  display: 0.3px solid var(--color-twenty-seven);
}

.cr-btn {
  background-color: var(--color-two);
  border: none;
  height: 46px;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Inter_28pt-SemiBold";
  color: var(--color-six);
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notfound-contianer {
  height: calc(100vh - 97px);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-image: url("/assets/images/landing/index/404.svg");
  background-repeat: no-repeat;
  background-position: center;
}


.notfound-tle {
  font-size: 48px;
  font-family: "PlusJakartaSans-ExtraBold";
  margin-bottom: 8px;
  line-height: 67.2px;
}

.notfound-stle {
  max-width: 374.99px;
  font-size: 16px;
  text-align: center;
  line-height: 22.4px;
  font-family: "Inter_28pt-SemiBold";
  color: var(--color-thirteen);
  margin-bottom: 20px;
}

.notfound-hme-lnk {
  display: flex;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  padding-left: 32px;
  padding-right: 32px;
  height: 54px;
  background-color: var(--color-two);
  color: var(--color-one);
}


/* ------------------------------------------------------------------
   New Pricing Section Styles
   ------------------------------------------------------------------ */
.pricing-section {
  background-color: #F7F7F7;
  padding: 72px 0;
  width: 100%;
}

.pricing-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.pricing-header {
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 48px;
  color: #101828;
  margin-bottom: 90px;
  line-height: 1.6;
  max-width: 646px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-header-highlight {
  color: #1452CA;
}

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

.pricing-card {
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 8px 8px 40px 0px #FDFDFD14;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.12);
}

.pricing-card.recommended {
  border: 1px solid #1452CA;
  background-color: #ECF2FD;
  padding-top: 58px;
  /* 20px base + 38px offset */
  overflow: hidden;
}

/* Offset ONLY for Grid Layout (Desktop/Tablet Landscape) */
@media only screen and (min-width: 701px) {
  .pricing-card.recommended {
    margin-top: -38px;
  }
}

.pricing-badge {
  background-color: #1452CA;
  color: #FFFFFF;
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  padding: 8px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-title {
  font-family: "Inter_18pt-Bold";
  font-size: 24px;
  color: #101828;
  margin-bottom: 12px;
}

.pricing-price {
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 32px;
  color: #0B2110;
  margin-bottom: 12px;
}

.pricing-period {
  font-size: 20px;
  color: #0B2110;
  font-weight: normal;
  font-family: "Inter_28pt-Regular";
}

.pricing-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-details p {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #475467;
  line-height: 1.5;
}

.pricing-features {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #475467;
  text-align: left;
  line-height: 1.5;
}

/* Checkmark icon sizing */
.pricing-features li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  /* Align with text */
}

.pricing-btn {
  display: block;
  width: 100%;
  padding: 16px 16px;
  border-radius: 8px;
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s;
  text-align: center;
  margin-top: auto;
  box-sizing: border-box;
}

.btn-pricing-outline {
  background: #FFFFFF;
  border: 1px solid #1452CA;
  color: #1452CA;
}

.btn-pricing-outline:hover {
  background-color: #F9FAFB;
  border-color: #D0D5DD;
}

.btn-pricing-filled {
  background: #1452CA;
  border: 1px solid #1452CA;
  color: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-pricing-filled:hover {
  opacity: 0.9;
}

@media only screen and (max-width: 1272px) {

  .hero-container,
  .wd-pr-lb-cont,
  .bdeiw-wrapper,
  .wci-wrapper,
  .land-pricing-wrapper,
  .accordion {
    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
  }
}

@media only screen and (max-width: 1208px) {

  .land-cont-mnth,
  .land-cont-yr {
    flex-direction: column;
    align-items: center;
  }

  .land-pricing-container {
    top: -580px;
  }

  .land-pricing-wrapper {
    margin-bottom: 601px;
  }
}

@media only screen and (max-width: 1170px) {
  .hero-container {
    overflow: hidden;
  }
}

@media only screen and (max-width: 1064px) {
  .hero-container {
    padding-top: 80px;
    padding-bottom: 80px;
    flex-direction: column;
    gap: 100px;
  }

  .hero-sect-one {
    max-width: 100%;
    gap: 16px;
  }

  .efea-wrapper-sct-one {
    grid-template-columns: repeat(2, 1fr);
    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
    gap: 16px;
  }
}

@media only screen and (max-width: 980px) {
  .efea-wrapper-sct-two-inner-one {
    padding-left: 0px;
    gap: 12px;
  }

  .bdeiw-wrapper-sect-img {
    display: none;
  }

  .efea-wrapper-sct-two {
    flex-direction: column;
    align-items: start;
    /* Center items horizontally in column layout */
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    /* Remove user debug border & ensure no border adds width */
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Clip any children that might still try to overflow */
  }

  .efea-wrapper {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .efea-wrapper-sct-two-inner-two {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 506px;
    /* Keep desktop max-width if desired, or just let it shrink */
  }

  .fasi-wrapper {
    flex-direction: column;
  }
}

@media only screen and (max-width: 880px) {
  .auth-logo {
    display: none;
  }

  .overlay {
    margin-top: 70px;
  }

  .auth-container {
    width: 100%;
    height: 100%;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

@media only screen and (max-width: 852px) {

  /* Global Box Sizing Safety */
  * {
    box-sizing: border-box;
  }

  .docs-header-sect-one-hd {
    font-size: 32px !important;
    /* Reduce from 48px to prevent overflow */
    line-height: 1.2;
    word-break: break-word;
    margin-bottom: 16px !important;
    /* Protect main header spacing */
  }

  /* Ensure main wrapper doesn't force width */
  .docume-content-wrapper {
    overflow: visible !important;
    contain: none !important;
    height: auto !important;
    width: 100%;
  }

  .docs-content-list {
    width: 100%;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
    display: block !important;
    gap: 32px;
    /* Tighter spacing for mobile */
  }

  .docume-content-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 70px !important;
    /* Adjust based on mobile header height */
    z-index: 9999 !important;
    /* Higher than content */
    background-color: white !important;
    /* STICKY STABILITY FIXES */
    transition: none !important;
    animation: none !important;
    transform: none !important;
    border-right: none;
    border-bottom: 1px solid #CCCCCC;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
    gap: 16px;
  }

  /* Hide scrollbar for cleaner look if desired, or keep default */
  .docume-content-nav::-webkit-scrollbar {
    display: none;
  }

  /* Adjust buttons for horizontal flow */
  /* Mobile Overflow Safety Net */
  .documen-content-item {
    word-break: break-word;
    /* Ensure long words break */
    overflow-wrap: break-word;
    max-width: 100%;
    /* Ensure long words break */
    overflow-wrap: break-word;
    max-width: 100%;
    overflow: visible !important;
    height: auto !important;
    /* Clip internal content */
    margin-bottom: 0 !important;
    /* Remove double spacing (rely on gap) */
  }

  .documen-content-item pre,
  .documen-content-item code {
    white-space: pre-wrap;
    /* Force wrap */
    word-break: break-all;
    /* Force break if needed */
    max-width: 100%;
    font-size: 13px !important;
    /* Mobile code font size */
  }

  .documen-content-item h3 {
    font-size: 16px !important;
    line-height: 24px;
    margin-bottom: 0px !important;
    /* 0px Spacing */
    margin-top: 16px !important;
  }

  .documen-content-item>h2 {
    font-size: 16px !important;
    /* Ensure size */
    line-height: 24px !important;
    /* Fix inherited large line-height */
    margin-bottom: 0px !important;
    /* 0px Spacing */
  }

  .documen-content-item>p {
    margin-top: 0 !important;
    line-height: 28px !important;
    /* Increased from 24px for better readability */
  }

  .docume-content-container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    overflow: visible !important;
    contain: none !important;
    height: auto !important;
    /* Prevent container expansion */
  }

  .documem-content-inner {
    display: block !important;
    height: auto !important;
    padding-top: 0 !important;
  }



  .wd-pr-lb-cont-inner,
  .wci-wrapper-grd {
    grid-template-columns: repeat(2, 1fr);
  }

  .docs-header {
    flex-direction: column;
  }

  /* Mobile Typography Overrides */
  .documen-content-item>h2 {
    font-size: 16px;
    line-height: 24px;
    /* Adjusted for smaller font */
  }

  .documen-content-item>p {
    font-size: 14px;
    line-height: 24px;
  }

  /* Mobile List Overrides */
  .documen-content-item li {
    font-size: 14px;
    line-height: 24px;
  }


  .docs-header-img {
    margin: auto;
  }

  .hero-title {
    font-size: 16px;
    line-height: 26px;
  }

  .hero-header {
    font-size: 52px;
    line-height: 70.8px;
  }
}

@media only screen and (max-width: 628px) {
  .land-pricing-container-sectone {
    flex-direction: column;
  }

  .land-pricing-container {
    top: -1300px;
  }

  .land-pricing-wrapper {
    margin-bottom: 1351px;
  }

}

@media only screen and (max-width: 550px) {
  .docs-header-img {
    display: none;
  }

  .hero-container,
  .wd-pr-lb-cont,
  .bdeiw-wrapper,
  .wci-wrapper,
  .fasi-wrapper,
  .efea-wrapper-sct-one,
  .land-pricing-wrapper,
  .accordion {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .hero-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero-sect-two {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero-header {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 3px;
  }

  .hero-title {
    font-size: 12px;
    line-height: 16.8px;
  }

  .hero-btn-wrapper>button,
  .hero-btn-link {
    height: 54px;
    padding-left: 10px;
    font-size: 14px;
    padding-right: 10px;
    width: 100% !important;
  }

  .hero-sect-two-inner-two-title {
    font-size: 16px;
  }

  .api-live-demo-btn>img {
    height: 20px;
    width: 20px;
  }

  .api-live-demo-input,
  .api-live-demo-btn {
    height: 46px;
    font-size: 14px;
  }

  .api-live-demo-result-cont {
    margin-top: 16px;
    gap: 4px;
  }

  .api-live-demo-result-default-tle {
    font-size: 16px;
  }

  .api-live-demo-result-default-stle {
    font-size: 12px;
  }

  .hero-sect-two {
    height: max-content;
    width: 100%;
  }

  .folder-ico-cont {
    padding-top: 24px;
  }

  .hero-container {
    padding-bottom: 60px;
    padding-top: 60px;
    gap: 24px;
    height: max-content;
  }


  .hero-sect-two-inner-two-badge-two-wrapper {
    bottom: -115px;
    right: 0px;
    width: 278px;
    height: 107px;
    padding: 10px 25px;
  }

  .hero-sect-two-inner-two-badge-two-inner-two-item {
    margin-bottom: 5px;
  }

  .hero-sect-two-inner-two-badge-two-inner-one>div:first-child>p:first-child {
    font-size: 32px;
    font-family: "Inter_28pt-SemiBold";
  }

  .tools-header {
    font-size: 16px;
    line-height: 22.4px;
    margin-bottom: 24px;
  }

  .wd-pr-lb-cont-inner-item>div:first-child {
    height: 64px;
    width: 64px;
  }

  .wd-pr-lb-cont-inner-item>p:last-child {
    font-size: 16px;
  }

  .wd-pr-lb-cont-inner-item {
    height: 164px;
    gap: 16px;
  }

  .wd-pr-lb-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero-wrapper {
    background-size: 400px;
  }

  .efea-wrapper-sct-one-item {
    gap: 8px;
  }

  .efea-wrapper-sct-one-item>p:first-child {
    font-size: 24px;
  }

  .efea-wrapper-sct-one-item>p:nth-child(2) {
    font-size: 16px;
  }

  .efea-wrapper-sct-one-item>p:nth-child(3) {
    font-size: 12px;
  }

  .efea-wrapper-sct-one {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .efea-wrapper-sct-two {
    padding-top: 65px;
    padding-bottom: 30px;
  }

  .efea-wrapper-sct-two-inner-two {
    width: 242.58px;
    height: 242.58px;
  }

  .efea-header-title {
    line-height: 28px;
    font-size: 20px;
    margin-bottom: 8px;
  }

  .efea-header-desc {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .efea-wrapper-sct-two-inner-one>.efea-btn-link {
    height: 49px;
    border-radius: 8px;
    font-size: 12px;
  }

  .bdeiw-wrapper-hd {
    font-size: 22px;
    line-height: 28px;
    margin-top: 80px;
  }

  .bdeiw-wrapper-tle {
    font-size: 13px;
    margin-top: 8px;
    margin-bottom: 40px;
  }

  .bdeiw-wrapper-sect-two-title {
    font-size: 14px;
    line-height: 19.6px;
    margin-bottom: 20px;
  }

  .bdeiw-wrapper-sect-two-inner-item>p:nth-child(2) {
    font-size: 14px;
  }

  .bdeiw-wrapper-sect-two-inner {
    gap: 16px;
    margin-bottom: 20px;
  }

  .bdeiw-btn {
    height: 41px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
  }

  .wci-wrapper {
    margin-top: 80px;
  }

  .land-pricing-hd {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
  }

  .wci-wrapper-hd {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .wci-wrapper-tle {
    font-size: 12px;
    line-height: 16.8px;
    margin: auto;
    margin-bottom: 16px;
    max-width: 343px;
  }

  .wci-wrapper {
    margin-top: 80px;
  }

  .wci-wrapper-grd {
    grid-template-columns: repeat(1, 1fr);
  }

  .wci-wrapper-grd-item {
    gap: 12px;
    padding: 16px 12px;
  }

  .wci-wrapper-grd-item-hd {
    font-size: 14px;
  }

  .wci-wrapper-grd-item-tle {
    font-size: 12px;
    line-height: 18px;
  }

  .fasi-sect-one-hd {
    font-size: 23px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .fasi-wrapper {
    gap: 20px;
    /* margin-bottom: 80px; */
  }

  .fasi-sect-two {
    height: 400px;
    width: 100%;
    overflow: hidden;
  }

  .code-snippet-container {
    height: 100%;
    width: 100%;
    max-width: 100%;
  }

  .code-snippet-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .code-tab {
    padding: 10px 16px;
    font-size: 12px;
  }

  .code-snippet-content {
    padding: 16px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
  }

  .code-block {
    font-size: 12px;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
    word-break: normal;
    white-space: pre;
  }

  .code-copy-btn {
    bottom: 50px;
    right: 8px;
    padding: 6px;
  }

  .wci-wrapper-grd {
    margin-bottom: 80px;
  }

  .lpssut {
    font-size: 10px;
    position: absolute;
    top: 70%;
    right: -80px;
    transform: translateY(50%);
  }

  .lpssut-pointer {
    position: absolute;
    bottom: -30px;
    right: -1px;
  }

  .land-pricing-container-sectone,
  .land-pricing-container-item,
  .land-pricing-container-item-recomm {
    width: 87%;
  }

  .land-pricing-container-sectone-recomm {
    width: 100%;
  }

  .land-pricing-container-item-hd {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .land-pricing-container-item-tle {
    font-size: 14px;
    line-height: 19.6px;
    margin-bottom: 16px;
  }

  .land-pricing-container-item-sub-tle {
    font-size: 12px;
    margin-bottom: 27px;
  }

  .pr-do-si {
    font-size: 20px;
  }

  .pr-do-am {
    font-size: 28px;
  }

  .land-pricing-container-item,
  .land-pricing-container-item-recomm {
    height: 208px;
  }

  .land-pricing-container-item-btn,
  .land-pricing-container-item-btn-recomm {
    height: 41px;
    font-size: 12px;
  }

  .land-pricing-container {
    top: -590px;
  }

  .land-pricing-wrapper {
    margin-bottom: 651px;
  }

  .fags-hd {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .fags-tle {
    font-size: 12px;
    margin-bottom: 24px;
  }

  .accordion-button {
    height: 52px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }

  .accordion-content p {
    font-size: 12px;
  }

  .accordion {
    padding-bottom: 40px;
  }

  .hero-container {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .docs-header-sect-one-hd {
    font-size: 24px !important;
    line-height: 28px;
  }

  .docs-header-sect-one-tle {
    font-size: 12px;
  }

  .docs-header {
    padding-top: 45px;
    padding-bottom: 30px;
    align-items: start;
  }

  .docs-header-wrapper,
  .docume-content-wrapper {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .docume-content-container-hd>p {
    font-size: 16px;
  }

  .docume-content-nav>button {
    height: 41px;
    font-size: 12px;
  }

  .active-docume-list-item {
    background-color: var(--color-twenty-five) !important;
    color: var(--secondary-color);
    font-family: "PlusJakartaSans-ExtraBold" !important;
  }

  .docume-content-container {
    margin-bottom: 56px;
  }

  .documem-content-inner {
    gap: 40px;
  }

  .documen-content-item>p:first-child {
    font-size: 16px;
    line-height: 22.4px;
  }

  .documen-content-item>p {
    font-size: 12px;
    line-height: 16.8px;
  }

  .fags-docs {
    padding-top: 70px;
  }

  .form-container {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
    gap: 20px;
  }

  .cr-auth-header {
    margin-top: 20px;
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 22.4px;
  }

  .cr-auth-tle,
  .form-item>label,
  .form-item>input,
  .password-container>input {
    font-size: 12px;
  }

  .notfound-contianer {
    background-size: 450px;
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .notfound-tle {
    font-size: 28px;
    line-height: 39.2px;
  }

  .notfound-stle {
    font-size: 14px;
    line-height: 19.6px;
  }

  .notfound-hme-lnk {
    width: 100%;
    padding: 0px;
    font-size: 14px;
  }

  /* .form-item>input,
.password-container>input {
    height: 48px;
    width: 100%;
    font-size: 16px;
    border-radius: 8px;
    font-family: 'Inter_28pt-Regular';
    border: 0.3px solid rgba(115, 115, 115, .3);
    box-sizing: border-box;
    padding-left: 9px;

} */


}

/* Validation Card Styles */
.validation-card-container {
  background: #ffffff;
  border-radius: 20px;
  /* box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1); */
  padding: 0;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-family: "Inter_28pt-Regular";
}

.validation-card-header {
  display: flex;
  justify-content: space-between;
  padding: 24px 32px 16px 32px;
  background-color: #F9FAFB;
  border-bottom: 1px solid #F2F4F7;
  font-size: 16px;
  color: #667085;
  font-weight: 500;
}

.validation-card-list {
  display: flex;
  flex-direction: column;
}

.validation-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid #F2F4F7;
  font-size: 16px;
}

.validation-card-row:last-child {
  border-bottom: none;
}

.validation-email {
  color: #344054;
  font-weight: 500;
}

.validation-status {
  font-weight: 600;
  text-align: right;
}

.status-free {
  color: #12B76A;
  /* Green */
}

.status-disposable {
  color: #F04438;
  /* Red */
}

.status-gray {
  color: #667085;
  /* Gray */
}

.status-ok {
  color: #12B76A;
  /* Green */
}

/* Hero Image Styles */

/* Update Hero Section Container Dimensions */
.hero-sect-two {
  height: max-content;
  width: 524px;
  position: relative;
}

/* Hero Image Styles */
.hero-sect-two-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.hero-sect-image {
  width: 100%;
  height: 464px;
  object-fit: contain;
  object-position: top center;
}

@media only screen and (max-width: 550px) {
  .hero-sect-image {
    width: 100%;
    /* Allow shrinking */
    max-width: 357.51px;
    /* Target width */
    height: 296px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    /* Ensure content scales inside without cropping */
  }

  .hero-sect-two {
    width: 100%;
    padding: 12px;
  }


}

/* How Stopreg.com Works Section */
#how-it-works {
  background:
    radial-gradient(circle at 0% 0%, #EFF4FF 0%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(circle at 100% 0%, #EFF4FF 0%, rgba(255, 255, 255, 0) 50%),
    #FFFFFF;
  padding-top: 133px;
  padding-bottom: 55px;
}

.how-it-works-wrapper {
  max-width: var(--max-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.how-it-works-header {
  text-align: center;
  margin-bottom: 80px;
}

.hiw-header-title {
  font-family: "Inter_18pt-Bold";
  font-size: 40px;
  color: #252525;
  margin-bottom: 12px;
}

.hiw-header-subtitle {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #595959;
  ;
}

.how-it-works-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  width: 100%;
  gap: 20px;
  /* Ensure max-width works effectively */
  /* max-width will be set individually below */
  position: relative;
  z-index: 2;
}

/* Specific Step Widths */
.hiw-step-1 {
  max-width: 226px !important;
}

.hiw-step-2 {
  max-width: 225px !important;
}

.hiw-step-3 {
  max-width: 200px !important;
}

.hiw-step-4 {
  max-width: 222px !important;
}

.hiw-step-5 {
  max-width: 225px !important;
}

.hiw-icon-box {
  width: 59px;
  height: 64px;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0px 8px 24px 0px #1452CA3D;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Specific Icon Dimensions */
.hiw-step-1 .hiw-icon-box img {
  width: 27.53px;
  height: 27.53px;
}

.hiw-step-2 .hiw-icon-box img {
  width: 27.71px;
  height: 27.71px;
}

.hiw-step-3 .hiw-icon-box img {
  width: 28.33px;
  height: 28.33px;
}

.hiw-step-4 .hiw-icon-box img {
  width: 29.4px;
  height: 29.4px;
}

.hiw-step-5 .hiw-icon-box img {
  width: 26.23px;
  height: 26.23px;
}

.hiw-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background-color: #1452CA;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "PlusJakartaSans-ExtraBold";
  font-size: 16px;
  border: 2px solid #ffffff;
}

.hiw-step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hiw-step-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 20px;
  color: var(--color-four);
  margin-bottom: 0;
  line-height: 1.4;
}

.hiw-step-desc {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #717171;
  line-height: 1.8;
}

.hiw-step a {
  color: #667085;
  text-decoration: underline;
}

.hiw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40px;
  /* Default Low Position (Odd Arrows) */
  width: 120px;
  pointer-events: none;
  z-index: 1;
}

.hiw-arrow img {
  width: 100%;
}

/* Arrow 1 (Odd: Low, Normal) */
.hiw-arrow-1 {
  left: 20%;
  transform: translateX(-50%);
}

/* Arrow 2 (Even: High, Flipped) */
.hiw-arrow-2 {
  left: 40%;
  top: 0px;
  transform: translateX(-50%) scaleY(-1);
}

/* Arrow 3 (Odd: Low, Normal) */
.hiw-arrow-3 {
  left: 60%;
  transform: translateX(-50%);
}

/* Arrow 4 (Even: High, Flipped) */
.hiw-arrow-4 {
  left: 80%;
  top: 0px;
  transform: translateX(-50%) scaleY(-1);
}

/* What Stopreg Checks Section */
#what-stopreg-check {
  background-color: #F7F7F7;
  /* Light grey to distinguish */
  padding-top: 100px;
  padding-top: 100px;
  padding-left: var(--desktop-padding);
  padding-right: var(--desktop-padding);
}

.wsc-wrapper {
  max-width: 1280px;
  width: 100%;
  margin: auto;

}

.wsc-header {
  text-align: center;
  margin-bottom: 80px;
}

.wsc-header-title {
  font-family: "Inter_18pt-Bold";
  font-size: 40px;
  color: #252525;
  margin-bottom: 12px;
}

.wsc-header-subtitle {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #717171;
}

.wsc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wsc-card {
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
  /* subtle shadow optional, but image looks clean/flat or very subtle */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

.wsc-icon-box {
  width: 50px;
  height: 50px;
  background-color: #1452CA;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wsc-icon-box img {
  width: 28px;
  height: 28px;
}

.wsc-card-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 20px;
  color: #101828;
  margin-bottom: 0;
}

.wsc-card-desc {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #475467;
  line-height: 1.6;
  max-width: 336px;
}

/* Responsive Styles for What Stopreg Checks */
@media only screen and (max-width: 1024px) {
  .wsc-header-title {
    font-size: 32px;
  }

  .wsc-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .wsc-card {
    align-items: center;
    text-align: center;
  }
}

/* Why Stopreg.com Section */
#why-stopreg {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #FDFDFD;
  position: relative;
  overflow: hidden;
  padding-left: var(--desktop-padding);
  padding-right: var(--desktop-padding);

}

.why-wrapper {
  max-width: 1280px;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;

}

.why-wrapper-sect-one {
  width: 100%;
}

.why-wrapper-sect-two {
  max-width: 524px;
  width: 100%;
  position: relative;
  z-index: 1;

}

.why-wrapper-sect-two::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(20, 82, 202, 0.16) 2.44%, rgba(20, 82, 202, 0.48) 100%);
  filter: blur(80px);
  z-index: -1;
  border-radius: 50%;
  opacity: 0.6;
}

.why-wrapper-sect-two img {
  width: 100%;
  position: relative;
  z-index: 2;
}

.why-header {
  margin-bottom: 40px;
}

.why-header-title {
  font-family: "Inter_18pt-Bold";
  font-size: 40px;
  color: #252525;
  margin-bottom: 14px;
}

.why-stopreg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8px;
  row-gap: 16px;
}

.why-stopreg-grid-item {
  padding-top: 16px;
  padding-bottom: 16px;
}

@media only screen and (max-width: 768px) {
  .why-stopreg-grid {
    grid-template-columns: 1fr;
  }

  .why-stopreg-grid-item {
    border-bottom: 1px solid #EDEDED;
  }
}

.why-stopreg-grid-tle {
  font-family: "Inter_28pt-SemiBold";
  font-size: 20px;
  color: #252525;
  margin-bottom: 8px;
}

.why-stopreg-grid-stle {
  font-family: "Inter_28pt-Regular";
  font-weight: 400;
  font-size: 15px;
  color: #737373;
  line-height: 150%;
}

.why-header-subtitle {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #717171;
}

.why-content-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.why-bg-image {
  position: absolute;
  top: 50%;
  left: 2.5%;
  /* Adjusted to be visibly on the left */
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.why-bg-image img {
  max-width: 400px;
  /* Adjust based on visual key */
  opacity: 1;
}

.why-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04);
  max-width: 640px;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: left;
}

.why-item {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAECF0;
}

.why-item-last {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.why-item-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 20px;
  color: #252525;
  margin-bottom: 8px;
}

.why-item-desc {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #737373;
  line-height: 1.6;
}

@media only screen and (max-width: 1024px) {
  .why-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .why-header {
    text-align: center;
  }

  .why-wrapper-sect-two {
    margin: auto;
    /* Center container horizontally when column */
  }

  .why-bg-image {
    display: none;
  }

  .why-card {
    padding: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .why-wrapper-sect-two {
    margin-left: auto;
    margin-right: 0;
  }

  .why-stopreg-grid-tle {
    font-family: "Inter_28pt-Regular";
    font-size: 16px;
  }

  .why-stopreg-grid-stle {
    font-family: "Inter_28pt-Regular";
    font-size: 14px;
    line-height: 20px;
  }
}

/* API Section */
.fasi-wrapper {
  /* padding-top: 100px;
  padding-bottom: 100px; */
  max-width: 1280px;
  margin: auto;
  /* padding-left: var(--mobile-padding);
  padding-right: var(--mobile-padding); */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 96px;
  justify-content: space-between;
}

.fasi-sect-one {
  width: 100%;
  max-width: 602px;
}

.fasi-sect-one-hd {
  font-family: "Inter_18pt-Bold";
  font-size: 56px;
  color: #101828;
  margin-bottom: 40px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.fasi-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fasi-api-item {
  background-color: #FAFCFE;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media only screen and (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 700px) {
  .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    row-gap: 20px !important;
    max-width: 400px;
  }

  .pricing-header {
    font-size: 32px;
    margin-bottom: 40px;
  }

  /* Reset recommended card offset as soon as we hit single column */
  .pricing-card.recommended {
    margin-top: 0 !important;
    padding-top: 36px !important;
    /* Compact mobile padding */
  }

  /* Ensure all cards have no margin so grid gap controls spacing */
  .pricing-card {
    margin: 0 !important;
    transform: none !important;
    /* Disable all scaling/translating on mobile */
  }

  /* Disable hover effects on mobile to prevent sticky states */
  .pricing-card:hover {
    transform: none !important;
  }

  .pricing-badge {
    font-size: 11px !important;
    padding: 6px 0 !important;
  }
}

.fasi-api-item-last {
  margin-bottom: 0;
}

.fasi-api-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 20px;
  color: #252525;
}

.fasi-api-desc {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #404040;
  line-height: 1.6;
}

.fasi-sect-two {
  width: 100%;
  max-width: 550px;
}

/* GDPR & Data Protection Section */
#gdpr-data-protection {
  background: linear-gradient(0deg, #FFFFFF 0%, #E8F2FF 100%);
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: var(--desktop-padding);
  padding-right: var(--desktop-padding);

}

.gdpr-wrapper {
  max-width: 1280px;
  width: 100%;
  margin: auto;
  /* padding-left: 20px;
  padding-right: 20px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.gdpr-content {
  max-width: 569px;
  width: 100%;
}

.gdpr-title {
  font-family: "Inter_18pt-Bold";
  font-size: 48px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #252525 0%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gdpr-subtitle {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #475467;
  line-height: 1.6;
}

.gdpr-image img {
  width: 620px;
  height: 538px;
  max-width: 100%;
  height: auto;
}


/* Responsive Styles for API Section */
@media only screen and (max-width: 1024px) {
  .fasi-wrapper {
    flex-direction: column;
    /* padding-top: 60px;
    padding-bottom: 60px; */
  }

  .fasi-sect-one {
    max-width: 100%;
    margin-bottom: 24px;
    text-align: center;
  }

  .fasi-sect-one-hd {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .fasi-api-item {
    text-align: left;
  }

  .gdpr-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .gdpr-content {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .hiw-header-title {
    font-size: 20px;
  }

  .hiw-arrow {
    display: none;
    /* Hide arrows on tablet/mobile as spacing gets tight */
  }
}

@media only screen and (max-width: 838px) {
  .how-it-works-steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
}

@media only screen and (max-width: 550px) {
  #how-it-works {
    padding-top: 80px;
    padding-bottom: 55px;
  }

  .how-it-works-wrapper {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .how-it-works-header {
    margin-bottom: 40px;
  }

  .how-it-works-header h2 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .how-it-works-header p {
    font-size: 12px;
  }

  .how-it-works-steps {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .hiw-step {
    max-width: 100%;
    width: 100%;
    gap: 16px;
  }

  .hiw-icon-box {
    width: 56px;
    height: 56px;
  }

  .hiw-step h3 {
    font-size: 16px;
  }

  .hiw-step p {
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 1152px) {
  .wd-pr-lb-cont-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (max-width: 880px) {
  .wd-pr-lb-cont-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 550px) {
  .wd-pr-lb-cont-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  #what-stopreg-check {
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  .wsc-header {
    margin-bottom: 15px;
  }

  .wsc-header-title {
    font-size: 20px;
  }

  .wsc-header-subtitle {
    font-size: 12px;
  }

  .wsc-card {
    text-align: left;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .wsc-card-title {
    font-size: 16px;
  }

  .wsc-card-desc {
    font-size: 14px;
  }

  .wsc-grid {
    gap: 12px;
  }

  #why-stopreg {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .why-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .why-header {
    margin-bottom: 12px;
  }

  .why-header-title {
    font-size: 20px;
  }

  .why-header-subtitle {
    font-size: 12px;
  }

  .why-item-title {
    font-size: 16px;
  }

  .why-item-desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .why-bg-image {
    display: block !important;
    width: 200px !important;
    height: 200px !important;
    position: absolute !important;
    top: 50% !important;
    left: -110px !important;
    /* Peeking from left */
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    /* Full opacity if it's a structural element */
    z-index: 0 !important;
    /* Behind text/card */
    /* Behind text/card */
    pointer-events: none !important;
  }

  .why-bg-image img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important;
  }

  .gdpr-content {
    margin-bottom: 12px;
  }

  .gdpr-title {
    font-size: 20px;
  }

  .gdpr-subtitle {
    font-size: 14px;
  }

  .fasi-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .fasi-sect-one-hd {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
  }

  .fasi-api-item {
    padding: 12px;
  }

  .fasi-api-title {
    font-size: 16px;
  }

  .fasi-api-desc {
    font-size: 14px;
  }

  .fasi-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin-top: 0;
    height: auto !important;
    justify-content: flex-start !important;
  }

  .fasi-api-item {
    margin: 0 !important;
  }

  .fasi-api-item:first-child {
    margin-bottom: 20px !important;
  }
}

/* How It Works Animation Styles */

/* General Elements - Initial hidden states */
.how-it-works-header,
.hiw-step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Arrow Images - Animate inner image to preserve parent positioning */
.hiw-arrow img {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Icon initial state */
.hiw-icon-box img {
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Badge initial state */
.hiw-badge {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Animation active state for Steps and Header ONLY */
/* We exclude .hiw-arrow because it needs to keep its specific translateX/scale positioning */
.how-it-works-header.hiw-animate-in,
.hiw-step.hiw-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Animation active state for Arrow Images */
/* The container .hiw-arrow keeps its position, we just animate the child image */
.hiw-arrow.hiw-animate-in img {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Trigger children animations when parent has animate-in */
.hiw-step.hiw-animate-in .hiw-icon-box img {
  transform: scale(1);
}

.hiw-step.hiw-animate-in .hiw-badge {
  transform: scale(1);
  transition-delay: 0.2s;
  /* Badge pops in slightly after icon */
}

/* Hover effects for lasting engagement */
.hiw-step:hover .hiw-icon-box img {
  transform: scale(1.1);
}

.hiw-step:hover .hiw-badge {
  transform: scale(1.1) rotate(5deg);
}

/* Premium Hero Animation Styles */

/* Initial States */
.hero-header,
.hero-title,
.hero-btn-wrapper {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

.hero-sect-image {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

/* Active Animation States */
.hero-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.hero-sect-image.hero-animate-in {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* Staggered Delays (handled via class addition or CSS delays if preferred) */
/* We will use CSS delays for simplicity and reliability when the parent section triggers */
.hero-header.hero-animate-in {
  transition-delay: 0s;
}

.hero-title.hero-animate-in {
  transition-delay: 0.2s;
}

.hero-btn-wrapper.hero-animate-in {
  transition-delay: 0.4s;
}

.hero-sect-image.hero-animate-in {
  transition-delay: 0.2s;
}

/* What Stopreg Checks Animation Styles */

/* Initial States */
.wsc-header,
.wsc-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Icon Initial State (for hover effect) */
.wsc-icon-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active Animation States */
.wsc-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hover Effects */
.wsc-card:hover .wsc-icon-box {
  transform: scale(1.1);
}

/* Why Stopreg Animation Styles */

/* Initial States */
.why-header,
.why-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Background Image inner img - offset to create slide effect */
/* We animate the img, not the container, to preserve the container's centering */
.why-bg-image img {
  opacity: 0;
  transform: scale(0.9) translateX(-20px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

/* Active Animation States */
.why-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.why-bg-image img.why-animate-in {
  opacity: 1 !important;
  transform: scale(1) translateX(0) !important;
}

/* GDPR Animation Styles */

/* Initial States */
.gdpr-title,
.gdpr-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.gdpr-image img {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Active Animation States */
.gdpr-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.gdpr-image img.gdpr-animate-in {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* API Animation Styles */

/* Initial States */
.fasi-sect-one-hd,
.fasi-api-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.fasi-sect-two {
  opacity: 0;
  transform: translateX(20px);
  /* Smooth entrance from right for code block */
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Active Animation States */
.fasi-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.fasi-sect-two.fasi-animate-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Pricing Animation Styles */

/* Initial States */
.pricing-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.pricing-card {
  opacity: 0;
  /* Base transform, overridden by specific child rules below */
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Unique Entry Transforms */
/* Unique Entry Transforms */
.pricing-card.pricing-card-1 {
  transform: translateX(-60px);
}

.pricing-card.pricing-card-2 {
  transform: scale(0.85);
}

/* Recommended Card */
.pricing-card.pricing-card-3 {
  transform: translateX(60px);
}

.pricing-card.pricing-card-4 {
  transform: translate(-30px, 40px);
}

.pricing-card.pricing-card-5 {
  transform: translateY(60px);
}

.pricing-card.pricing-card-6 {
  transform: translate(30px, 40px);
}

/* Special initial state for recommended card to account for its scaling - Overridden by nth-child(2) but kept for specificity safety if needed, though nth-child usually wins if same specificity. actually class selector is higher spec. */
/* .pricing-card.recommended is 0,0,2. .pricing-card:nth-child(2) is 0,0,2. Last wins. So I'll remove the specific class rule to rely on the generic nth-child or ensure nth-child is after or stronger. */
/* Actually, let's just let the nth-child rules handle the start state. */

/* Active Animation States */
.pricing-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure recommended card maintains its emphasis scale when animated */
/* Ensure recommended card maintains its emphasis scale when animated */
.pricing-card.recommended.pricing-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Tools (Integrations) Animation Styles */

/* Initial States */
.tools-header,
.wd-pr-lb-cont-inner-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Icon initial state for micro-interaction */
.wd-item-icon-container img {
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Last item emphasis initial state */
.wd-pr-lb-cont-inner-item:last-child {
  transform: translateY(20px) scale(0.95);
}

/* Active Animation States */
.tools-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Icon animate in */
.tools-animate-in .wd-item-icon-container img {
  transform: scale(1);
}

/* Last item emphasis active state */
.wd-pr-lb-cont-inner-item:last-child.tools-animate-in {
  transform: translateY(0) scale(1.05) !important;
}

/* Get Started Animation Styles */

/* Initial States */
.efea-header-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.efea-header-desc {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Bouncy pop */
  will-change: opacity, transform;
}

.efea-wrapper .signup-overlay-btn {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Bouncy pop */
  will-change: opacity, transform;
}

.efea-wrapper-sct-two-inner-two img {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Active Animation States */
.efea-animate-in {
  opacity: 1 !important;
  transform: none !important;
  /* Resets translate */
}

/* Button specific animate in (needs scale reset not none) */
.signup-overlay-btn.efea-animate-in {
  transform: scale(1) !important;
}

/* FAQ Animation Styles */

/* Initial States */
.fags-hd,
.fags-tle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.accordion-item {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Unique Animation Patterns (Repeat of 3) */
.accordion-item:nth-child(3n+1) {
  transform: translateX(-50px);
}

.accordion-item:nth-child(3n+2) {
  transform: scale(0.9) translateY(20px);
}

.accordion-item:nth-child(3n+3) {
  transform: translateX(50px);
}

/* Active Animation States */
.fags-animate-in,
.faq-item-animate-in {
  opacity: 1 !important;
  transform: none !important;
}

/* CRITICAL MOBILE OVERRIDES - Must be at end to override animations */
@media only screen and (max-width: 550px) {
  .fasi-items-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  .fasi-api-item {
    margin: 0 !important;
  }

  .fasi-api-item:first-child {
    margin-bottom: 20px !important;
  }

  .fasi-wrapper {
    gap: 20px !important;
    /* Reduced from 96px */
    margin-bottom: 0px !important;
    /* Reduced from 200px */
    flex-direction: column !important;
    /* Ensure vertical stack */
  }

  .fasi-sect-one {
    margin-bottom: 0 !important;
  }

  .pricing-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .pricing-header {
    font-size: 20px !important;
    margin-bottom: 32px !important;
  }

  .pricing-card {
    padding: 14px !important;
  }

  .pricing-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .pricing-price {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }

  .pricing-period {
    font-size: 14px !important;
  }

  .pricing-details {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  .pricing-details p {
    font-size: 14px !important;
  }

  .pricing-features {
    margin-bottom: 24px !important;
  }

  .pricing-features li {
    font-size: 14px !important;
  }

  .pricing-btn {
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* Tools Section Mobile Grid Overrides */
  .wd-pr-lb-cont-inner {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 20px !important;
    column-gap: 8px !important;
  }

  .wd-pr-lb-cont-inner-item {
    height: 120px !important;
  }

  /* Specific Tool Icon Dimensions for Mobile */
  .wd-icon-wp {
    width: 64px !important;
    height: 64px !important;
  }

  .wd-icon-laravel {
    width: 64px !important;
    height: 64px !important;
  }

  .wd-icon-zapier {
    width: 88px !important;
    height: 24px !important;
  }

  .wd-icon-http {
    width: 64px !important;
    height: 64px !important;
  }

  .wd-icon-make {
    width: 85px !important;
    height: 32px !important;
  }

  .wd-icon-php {
    width: 68px !important;
    height: 64px !important;
  }

  .wd-icon-js {
    width: 68px !important;
    height: 64px !important;
  }

  .wd-icon-npm {
    width: 69px !important;
    height: 40px !important;
  }

  .wd-icon-question {
    width: 32px !important;
    height: 32px !important;
  }

  /* Tools Typography Mobile Overrides */
  .wd-item-title,
  .wd-pr-lb-sub {
    font-size: 12px !important;
  }

  /* Specific padding for the last item "Need another tool?" */
  .wd-pr-lb-cont-inner-item:last-child {
    padding: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0px !important;
  }

  .wd-pr-lb-cont-inner-item:last-child .wd-item-icon-container {
    margin-bottom: 4px !important;
    height: auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    display: block !important;
  }

  .wd-pr-lb-cont-inner-item:last-child .wd-item-title {
    margin-bottom: 4px !important;
    text-align: left !important;
  }

  .wd-pr-lb-cont-inner-item:last-child .wd-pr-lb-sub {
    margin-top: 0px !important;
  }

  /* --- Hero Overflow Fix --- */
  .hero-wrapper,
  .hero-container {

    overflow-x: hidden !important;
    width: 100% !important;
  }


  .hero-sect-two {
    width: 100% !important;
    padding-bottom: 40px !important;
  }

  .hero-sect-two-inner-one {
    width: 100% !important;
    height: 380px !important;
    max-width: 100% !important;
    left: 0 !important;
  }

  .hero-sect-two-inner-two {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-sect-two-inner-two-badge-two-wrapper {
    transform: scale(0.7) !important;
    bottom: -60px !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: 90% !important;
    /* Prevent full width overflow */
  }

  /* --- Animation Overflow Fix (Mobile) --- */
  html,
  body {
    overflow-x: visible !important;
    /* Global safe-guard - changed to visible to allow position: sticky to work */
  }

  /* Reset Pricing Cards Horizontal Start */
  /* Pricing Cards Horizontal Start Reset - REMOVED to fix gap consistency */

  /* Reset FAQ Items Horizontal Start */
  .accordion-item:nth-child(3n+1),
  .accordion-item:nth-child(3n+3) {
    transform: translateY(20px) !important;
  }

  /* Reset API Section Horizontal Start */
  .fasi-sect-two {
    transform: translateY(20px) !important;
  }

  /* Active States ensure reset to 0 */
  .pricing-animate-in,
  .fags-animate-in,
  .faq-item-animate-in,
  .fasi-sect-two.fasi-animate-in {
    transform: translateY(0) !important;
  }

  /* --- Hero Buttons Mobile --- */
  .hero-btn-wrapper {
    flex-direction: row !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-btn-wrapper .hero-btn-link,
  .view-docs-btn {
    flex: 1 !important;
    /* Take available width */
    width: auto !important;
    height: 54px !important;
    font-size: 14px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }


  .fags-wrapper {
    padding-top: 40px !important;
    padding-bottom: 0px !important;
  }

  .fags-wrapper {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
    /* Clip this section explicitly */
    box-sizing: border-box;
  }

  /* Reset accordion spacing */
  .accordion {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* --- Premium Header Animations --- */
  @keyframes docHeaderSlideUp {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.98);
      filter: blur(2px);
      /* Slight blur for cinematic feel */
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes docHeaderImagePop {
    0% {
      opacity: 0;
      transform: scale(0.9) rotate(-2deg);
    }

    60% {
      transform: scale(1.02) rotate(1deg);
      /* Slight overshoot/elasticity */
    }

    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  .doc-anim-header-text {
    animation: docHeaderSlideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .doc-anim-header-img {
    animation: docHeaderImagePop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* Elastic ease */
  }

  .land-foot-wrapp {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Reset outer footer padding to prevent double spacing */
  .land-foot {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .land-foot-wrapp-sct-one {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .foot-desc {
    font-size: 12px !important;
  }

  .foot-hd,
  .foot-link {
    font-size: 12px !important;
  }

  .foot-links-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  /* Make columns take up roughly half width */
  .foot-links-group .foot-col {
    width: 45% !important;
    margin-bottom: 20px !important;
  }
}

/* =========================================
   Premium Documentation Scroll Animations
   ========================================= */

/* Initial hidden state */
.doc-animate-init {
  opacity: 0 !important;
  /* Force invisible */
  transform: translateY(30px);
  will-change: opacity, transform, filter;
  transition: opacity 0.1s;
  /* Tiny base transition */
}

/* Animation 1: Premium Fade Up */
@keyframes docAnimFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.doc-anim-fade-up {
  animation: docAnimFadeUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Animation 2: Soft Scale Reveal */
@keyframes docAnimScale {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.doc-anim-scale {
  animation: docAnimScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animation 3: Blur Slide Reveal */
@keyframes docAnimBlur {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.doc-anim-blur {
  animation: docAnimBlur 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* =========================================
   Privacy Policy Spacing Updates
   ========================================= */

.privacy-section {
  margin-bottom: 60px;
}

.privacy-list-custom {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 24px;
}

.privacy-list-custom li {
  margin-bottom: 12px;
  line-height: 1.6;
  position: relative;
  padding-left: 0;
}



@media only screen and (max-width: 768px) {
  .privacy-section {
    margin-bottom: 40px;
  }

  /* FAQ Mobile Spacing & Animation Fixes */
  /* FAQ Mobile Spacing & Animation Fixes */
  .accordion {
    display: block !important;
    /* Switch to block to ensure margins work standardly if flex is failing */
    width: 100% !important;
  }

  .accordion-item {
    display: block !important;
    margin-bottom: 20px !important;
    /* Increased spacing */
    background-color: var(--primary-color) !important;
    border-radius: 12px;
    overflow: hidden;
    width: 100% !important;
    transform: none !important;
    /* Reset any potential transforms */
  }

  .accordion-item:nth-child(n) {
    transform: none !important;
    /* Specific reset for nth-child rules */
  }

  .accordion-button {
    height: auto !important;
    min-height: 60px;
    padding: 20px 20px !important;
    font-size: 15px !important;
    margin-bottom: 0 !important;
    /* Button itself has no margin */
    line-height: 1.4;
    white-space: normal !important;
    align-items: flex-start;
    /* Align text and icon to top */
  }

  .accordion-icon {
    margin-top: 4px;
    /* Align with text */
    flex-shrink: 0;
    margin-left: 16px;
  }

  .accordion-content.show {
    max-height: 1000px !important;
    /* Allow expansion */
  }

  /* Force animations to be visible and stable on mobile */
  .fags-hd.box,
  .fags-tle.box {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .fags-wrapper {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    gap: 20px;
  }
}