body {
  	margin: 0;
  	line-height: normal;
}

.privassistant-landing-page {
  	width: 100%;
  	position: relative;
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	text-align: left;
  	font-size: 13px;
  	color: #fff;
  	font-family: Inter;
}




/************************************************************
 * MOBILE MENU
 ************************************************************/
.mobile-menu {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;

  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 24px;

  background: #ffffff;
  z-index: 2500;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-link {
  font-size: 16px;
  text-decoration: none;
  color: inherit;
}

/************************************************************
 * MOBILE ACCORDION
 ************************************************************/
.mobile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-section-header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-panel {
  padding: 16px;
  background: #F3F8F5;
  border-radius: 8px;
}

/************************************************************
 * RESPONSIVE RULES
 ************************************************************/
@media (max-width: 768px) {

  .home-parent,
  .button-parent,
  .dropdown-panel {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-menu,
  .mobile-menu-toggle {
    display: none;
  }
}

.image-1-icon {
  	width: 239px;
  	position: relative;
  	max-height: 100%;
  	object-fit: cover;
}
.home-parent {
  	display: flex;
  	align-items: center;
  	gap: 32px;
}
.home {
  	position: relative;
}
.products-parent {
  	display: flex;
  	align-items: center;
  	gap: 8px;
}
.vector-icon {
  	height: 5px;
  	width: 10px;
  	position: relative;
}
.button-parent {
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
  	gap: 24px;
  	color: #fff;
}
.button {
  	border-radius: 74px;
  	background-color: #008b00;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 16px 24px;
}
.request-a-demo {
  	position: relative;
  	font-weight: 500;
}
.en-parent {
  	display: flex;
  	align-items: center;
  	gap: 8px;
  	color: #000319;
}


/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;

}


.hero-illustration {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    z-index: 0;
}

/* soft white overlay so title sits nicely on top */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(246, 247, 248, 0.92) 0%,
        rgba(246, 247, 248, 0.82) 26%,
        rgba(246, 247, 248, 0.35) 48%,
        rgba(246, 247, 248, 0.08) 70%,
        rgba(246, 247, 248, 0.02) 100%
    );
    z-index: 1;
}


/* Optional: improve readability */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* dark overlay */
    z-index: 1;
}


/* Overlay content */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
}

.hero-title {
    margin: 0;
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.05em;
    line-height: 120%;
    font-family: Manrope;
    /* color: #000319; */

    color: white;
}

.pa-hero-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* adjust as needed */
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


/* Full background video */
.pa-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.how-it-works {
   max-width: 654px;
   width: 100%;
   position: relative;
   font-size: 56px;
   letter-spacing: -0.05em;
   line-height: 120%;
   font-weight: 500;
   font-family: Manrope;
   color: #000319;
   text-align: center;
   margin: 0 auto;
}



/* large screens */
@media (min-width: 1600px) {
    .hero {
        min-height: 460px;
        padding: 70px 110px;
        background-size: 74%;
    }
}

/* laptop */
@media (max-width: 1200px) {
    .hero {
        min-height: 380px;
        padding: 50px 60px;
        background-size: 82%;
    }
}

/* tablet */
@media (max-width: 900px) {
    .hero {
        min-height: 340px;
        padding: 40px 36px;
        background-position: center center;
        background-size: 95%;
    }

    .hero-content {
        max-width: 520px;
    }

    .hero-title {
        font-size: clamp(34px, 6vw, 52px);
    }
}

/* mobile */
@media (max-width: 600px) {
    .hero {
        min-height: 300px;
        padding: 32px 22px;
        background-size: 120%;
        background-position: center top;
    }

    .hero::before {
        background: linear-gradient(
            to right,
            rgba(246, 247, 248, 0.94) 0%,
            rgba(246, 247, 248, 0.88) 40%,
            rgba(246, 247, 248, 0.55) 70%,
            rgba(246, 247, 248, 0.18) 100%
        );
    }

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

    .hero-title {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.08;
    }
}


/* ==========================================
   LARGE SCREENS
   ========================================== */

@media (min-width: 1600px) {

.hero {
    padding-left: 140px;
    min-height: 460px;
}

.hero-title {
    font-size: 68px;
}

}


/* ==========================================
   LAPTOP
   ========================================== */

@media (max-width: 1200px) {

.hero {
    grid-template-columns: 55% 45%;
    padding-left: 60px;
}

.hero-title {
    font-size: clamp(36px, 4vw, 52px);
}

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

.hero {
    grid-template-columns: 1fr;
    padding: 80px 40px;
}

.hero-content {
    justify-content: center;
    text-align: center;
}

.hero-image {
    height: 240px;
    background-position: center;
}

.hero-title {
    max-width: 640px;
}

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

.hero {
    padding: 60px 24px;
}

.hero-title {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.1;
}

.hero-image {
    height: 200px;
}

}

.lorem-ipsum-is {
  	width: 642px;
  	position: relative;
  	font-size: 17px;
  	line-height: 120%;
  	display: inline-block;
}
.button2 {
  	border-radius: 74px;
  	background-color: #008b00;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 16px 24px;
  	text-align: left;
  	font-size: 16px;
}



.how-to-setup {
  width: 100%;
  align-self: stretch;   /* IMPORTANT */
  background-color: #f1f6f7;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 48px 16px;
  box-sizing: border-box;
  gap: 48px;

  font-family: Inter, sans-serif;
}




.how-to-setup > .frame-parent,
.how-to-setup > .frame-group,
.how-to-setup > .button {
  width: 100%;
  max-width: 1200px;
}


.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.setting-it-up-wrapper {
  border-radius: 30px;
  background-color: rgba(211, 211, 211, 0.1);
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}

.setting-it-up {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
}

.how-it-works-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  font-size: 40px;
  color: #000319;
  font-family: Manrope;
}


.how-it-works {
   max-width: 654px;
   width: 100%;
   position: relative;
   font-size: 56px;
   letter-spacing: -0.05em;
   line-height: 120%;
   font-weight: 500;
   font-family: Manrope;
   color: #000319;
   text-align: center;
   margin: 0 auto;
}


.frame-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: center;
  font-size: 14px;
  color: #000319;
  font-family: Manrope;
}

.frame-container {
  align-self: stretch;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  gap: 16px;
}

.frame-div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.step-1-wrapper {
  border-radius: 32px;
  border: 1px solid #cdcdcd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  white-space: nowrap; /* prevent label breaking */
}

.step-1 {
  line-height: 120%;
  font-weight: 600;
}

.simple-questionnaire {
  align-self: stretch;
  font-size: 24px;
  letter-spacing: -0.05em;
  line-height: 120%;
  font-weight: 600;
  color: #000;
  text-align: left;
}

.privassistant-guides-you {
  align-self: stretch;
  font-size: 15px;
  line-height: 120%;
  font-family: Inter;
  text-align: left;
  opacity: 0.6;
}

.image-14-wrapper {
  width: 259px;
  height: 193px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.image-14-icon {
  position: absolute;
  top: 14px;
  left: 49px;
  width: 161px;
  height: 161px;
  object-fit: cover;
}



.how-to-setup .button3 {
  border-radius: 74px;
  background-color: #008b00;   /* exact Figma green */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  font-size: 16px;
  color: #fff;                 /* force white text */
}


.how-to-setup .request-a-demo {
  color: #fff;                 /* prevent inheritance override */
  font-weight: 500;
}



/* ================= DESKTOP (FIGMA EXACT) ================= */

@media (min-width: 1024px) {

  .how-to-setup {
    padding: 96px 120px;
  }

  .how-it-works-parent {
    font-size: 56px;
  }

  .how-it-works {
    width: 654px;
    display: inline-block;
  }

  .frame-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  .frame-container {
    flex: 1;
    align-items: flex-start;
  }

}



@media (min-width: 1440px) {

  .how-to-setup {
    padding-left: 0;
    padding-right: 0;
  }

  .how-to-setup > .frame-parent,
  .how-to-setup > .frame-group,
  .how-to-setup > .button {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ================= CHAT ASSISTANT ================= */

.chat-assistant {
  position: fixed;
  bottom: 42px;
  right: 32px;
  z-index: 9999;
}

/* Chat bubble */
.chat {
  position: relative; /* IMPORTANT for badge positioning */
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 16px 24px;
  border-radius: 20px;

  background-color: #008b00;
  color: #fff;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  font-family: Inter, sans-serif;
}

/* Profile image */
.chat-child {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* Text container */
.need-help-parent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.need-help {
  font-size: 15px;
  font-weight: 600;
}

.lets-chat {
  font-size: 18px;
  opacity: 0.95;
}

/* Floating badge icon */
.comment-01-icon {
  position: absolute;
  top: -12px;
  right: -12px;

  width: 44px;
  height: 44px;

  padding: 8px;
  border-radius: 12px;
  background: #fff;

  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}



@media (max-width: 768px) {
  .chat-assistant {
    bottom: 16px;
    right: 16px;
  }

  .chat {
    padding: 10px 14px;
    font-size: 14px;
  }
}


/* ===================================== */
/* Base Styles (Mobile First)            */
/* ===================================== */

.how-to-setup2 {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  box-sizing: border-box;
  gap: 48px;
  font-family: Inter, sans-serif;
}

/* Header */
.frame-parent,
.frame-parent8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #000318;
}

.features-wrapper {
  border-radius: 30px;
  background-color: rgba(211, 211, 211, 0.1);
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}

.features {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
  font-size: 13px;
}

.what-makes-us-different-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  font-size: 40px;
  color: #000319;
  font-family: Manrope, sans-serif;
}

.what-makes-us {
  letter-spacing: -0.05em;
  line-height: 120%;
  font-weight: 500;
}

.lorem-ipsum-is {
  font-size: 16px;
  line-height: 120%;
  color: #000318;
}

/* Cards Wrapper */
.how-to-setup2 .frame-group,
.how-to-setup2 .frame-parent9 {

  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: Manrope, sans-serif;
}



/* Shared Card Style */
.centralized-compliance-dashboa-parent,
.task-assignment-and-role-manag-parent,
.dynamic-dashboard-updates-parent,
.smart-questionnaire-integratio-parent {
  width: 100%;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  color: #fff;
}

/* Individual Backgrounds */
.centralized-compliance-dashboa-parent {
  background: linear-gradient(258.62deg, #35b1e6, #3b4cea);
  border: 1px solid #d9dae6;
}

.task-assignment-and-role-manag-parent,
.smart-questionnaire-integratio-parent {
  background: linear-gradient(90deg, #3ca128, #8bcd28 92.31%);
  border: 1px solid #e9f2e7;
}

.dynamic-dashboard-updates-parent {
  background: linear-gradient(258.62deg, #f4ae3d, #d78c00);
  border: 1px solid #e6e6d9;
}

/* Titles */
.centralized-compliance-dashboa {
  font-size: 24px;
  letter-spacing: -0.05em;
  line-height: 120%;
  font-weight: 600;
  text-align: center;
}

/* Descriptions */
.stay-on-top,
.efficient-compliance-managemen,
.our-ai-powered-dashboard {
  font-size: 15px;
  line-height: 120%;
  font-family: Inter, sans-serif;
  opacity: 0.85;
  text-align: center;
}

/* Base visual */
.mask-group-icon {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}


/* shared screenshot style for regular cards only */
.visual-screen {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.visual-dashboard {
  display: block;
  width: min(460px, 100%);
  height: auto;
  border-radius: 0;
  box-shadow: none;
  margin-top: 12px;
}

/* 3D treatment */
.visual-3d {
  max-width: 260px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.10));
}


.visual-task {
  max-width: 250px;
}

.visual-ai {
  max-width: 300px;
}

.visual-incident {
  max-width: 360px;
}


.centralized-compliance-dashboa-parent .visual-dashboard {
  margin-top: 12px;
}
.centralized-compliance-dashboa-parent,
.task-assignment-and-role-manag-parent,
.dynamic-dashboard-updates-parent,
.smart-questionnaire-integratio-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button4 {
  border-radius: 74px;
  background-color: #008b00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;

  text-decoration: none;   /* remove underline */
  color: #fff;             /* keep text white */
}

.button4:link,
.button4:visited {
  text-decoration: none;
  color: #fff;
}

.button4:hover {
  background-color: #0aa30a;
}

.request-a-demo {
  font-weight: 500;
}


/* ===================================== */
/* Desktop Styles (1024px and up)       */
/* ===================================== */

@media (min-width: 1024px) {

  .how-to-setup2,
  .how-to-setup2B {
    padding: 96px 120px;
  }

  .what-makes-us-different-parent {
    font-size: 56px;
  }

  /* Layout Rows */
  .frame-parent10 {
    width: 100%;
    display: flex;
    gap: 24px;
  }

  .frame-group,
  .frame-parent9 {
    gap: 24px;
  }

  /* Large Feature Cards */
  .centralized-compliance-dashboa-parent,
  .dynamic-dashboard-updates-parent {
    width: 750px;
  }

  /* Side Cards */
  .task-assignment-and-role-manag-parent,
  .smart-questionnaire-integratio-parent {
    flex: 1;
  }


}

/* ===================================== */
/* Setting it Up Section                 */
/* ===================================== */

.how-to-setup2B {
  align-self: stretch;
  background: linear-gradient(
    135deg,
    #ffffff 75%,
    #f8f1dd 90%,
    #f6faf6 100%
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 120px;
  position: relative;
  isolation: isolate;
  gap: 96px;
}

/* Background decorative layer */
.how-to-setup2B .background {
  width: 1439.5px;
  height: 955px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 418px);
  left: calc(50% - 720px);
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.03;
  z-index: 0;
}

.how-to-setup2B .rectangle-parent {
  position: absolute;
  top: -0.03px;
  left: 59px;
  width: 1334px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.how-to-setup2B .frame-child {
  width: 1px;
  height: 955px;
  position: relative;
  background-color: #e9e9e9;
}

.how-to-setup2B .background-child {
  position: absolute;
  top: 58.81px;
  left: 0;
  width: 1439.5px;
  height: 837.3px;
  object-fit: contain;
}

.how-to-setup2B .background-item {
  position: absolute;
  top: 596.97px;
  left: 193px;
  width: 66px;
  height: 59px;
  background-color: #d9d9d9;
}

.how-to-setup2B .background-inner {
  position: absolute;
  top: 237.97px;
  left: 259px;
  width: 66px;
  height: 59px;
  background-color: #d9d9d9;
}

.how-to-setup2B .background-child2 {
  position: absolute;
  top: 657.97px;
  left: 925px;
  width: 66px;
  height: 59px;
  background-color: #d9d9d9;
}

.how-to-setup2B .background-child3 {
  position: absolute;
  top: 238.97px;
  left: 1125px;
  width: 66px;
  height: 59px;
  background-color: #d9d9d9;
}

/* Section heading */
.how-to-setup2B .frame-parent12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
  flex-shrink: 0;
}

.how-to-setup2B .setting-up-wrapper {
  border-radius: 30px;
  background-color: rgba(211, 211, 211, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: grey;
}

.how-to-setup2B .the-benefits-you-get-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  font-size: 56px;
  font-family: Manrope, sans-serif;
}

.how-to-setup2B .lorem-ipsum-is4 {
  align-self: stretch;
  position: relative;
  font-size: 17px;
  line-height: 120%;
  font-family: Inter, sans-serif;
}

/* ===================================== */
/* Steps layout                          */
/* ===================================== */

.how-to-setup2B .frame-parent13 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  z-index: 2;
  flex-shrink: 0;
  position: relative;
  font-family: Manrope, sans-serif;
}

.how-to-setup2B .frame-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.how-to-setup2B .frame-div {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.how-to-setup2B .step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}

.how-to-setup2B .frame-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.how-to-setup2B .step-label {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #000319;
  font-family: Manrope, sans-serif;
}

.how-to-setup2B .setup-steps {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #000319;
  font-family: Manrope, sans-serif;
}

.how-to-setup2B .setup-desc {
  font-size: 16px;
  line-height: 1.35;
  color: #000319;
  opacity: 0.6;
  font-family: Inter, sans-serif;
}

/* ===================================== */
/* Simple connector line                 */
/* ===================================== */



/* connector between steps */
.how-to-setup2B .frame-wrapper.step-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -22px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 139, 0, 0.18) 0%,
    rgba(0, 139, 0, 0.55) 50%,
    rgba(0, 139, 0, 0.18) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* small arrow head */
.how-to-setup2B .frame-wrapper.step-card:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 33px;
  right: -22px;
  width: 10px;
  height: 10px;
  border-top: 3px solid rgba(0, 139, 0, 0.55);
  border-right: 3px solid rgba(0, 139, 0, 0.55);
  transform: rotate(45deg);
  z-index: 2;
  pointer-events: none;
}

/* CTA button */
.how-to-setup2B .button5 {
  border-radius: 74px;
  background-color: #008b00;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  z-index: 3;
  flex-shrink: 0;
  font-size: 16px;
}

/* Decorative blur */
.how-to-setup2B .how-to-setup-child {
  width: 731px;
  height: 138px;
  position: absolute;
  margin: 0 !important;
  top: -96px;
  left: 343px;
  filter: blur(80px);
  border-radius: 50%;
  background-color: #75c9e3;
  z-index: 4;
  flex-shrink: 0;
}


/* ===================================== */
/* Responsive                            */
/* ===================================== */

/* Large screens */
@media (min-width: 1440px) {
  .how-to-setup2B {
    padding: 96px 140px;
  }
}

/* Desktop */
@media (max-width: 1439px) {
  .how-to-setup2B {
    padding: 80px 60px;
  }

  .how-to-setup2B .frame-parent13 {
    gap: 24px;
  }

  .how-to-setup2B .frame-wrapper.step-card:not(:last-child)::after {
    right: -12px;
    width: 24px;
  }
}

/* Tablet */
@media (max-width: 1023px) {
  .how-to-setup2B {
    padding: 70px 40px;
    gap: 70px;
  }

  @media (max-width: 1023px) {
  .how-to-setup2B .frame-wrapper::before,
  .how-to-setup2B .frame-wrapper::after {
    display: none;
  }
}

  .how-to-setup2B .frame-parent13 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .how-to-setup2B .frame-wrapper {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .how-to-setup2B .the-benefits-you-get-parent {
    font-size: 42px;
  }

  
}

/* Mobile large */
@media (max-width: 767px) {
  .how-to-setup2B {
    padding: 60px 24px;
    gap: 60px;
  }

  .how-to-setup2B .frame-parent13 {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .how-to-setup2B .frame-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .how-to-setup2B .frame-div {
    align-items: center;
  }

  .how-to-setup2B .step-row {
    justify-content: center;
    min-height: auto;
  }

  .how-to-setup2B .the-benefits-you-get-parent {
    font-size: 36px;
  }

  .how-to-setup2B .setup-steps {
    font-size: 20px;
  }

  .how-to-setup2B .frame-wrapper::after {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .how-to-setup2B {
    padding: 50px 18px;
    gap: 50px;
  }

  .how-to-setup2B .the-benefits-you-get-parent {
    font-size: 30px;
  }

  .how-to-setup2B .frame-icon {
    width: 60px;
    height: 60px;
  }

  .how-to-setup2B .step-label {
    font-size: 24px;
  }

  .how-to-setup2B .setup-desc {
    font-size: 14px;
  }

  .how-to-setup2B .button5 {
    width: 100%;
    justify-content: center;
  }
}



.how-to-setup3 {
  	align-self: stretch;
  	background: linear-gradient(180deg, #285dba, #122a54);
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 96px 120px;
  	position: relative;
  	isolation: isolate;
  	gap: 96px;
}

.how-to-setup3 .how-it-works {
   max-width: 654px;
   width: 100%;
   position: relative;
   font-size: 56px;
   letter-spacing: -0.05em;
   line-height: 120%;
   font-weight: 500;
   font-family: Manrope;
   color: white;
   text-align: center;
   margin: 0 auto;
}
.background {
  	width: 1439.5px;
  	height: 955px;
  	position: absolute;
  	margin: 0 !important;
  	top: calc(50% - 418px);
  	left: calc(50% - 720px);
  	overflow: hidden;
  	flex-shrink: 0;
  	opacity: 0.03;
  	z-index: 0;
}
.rectangle-parent {
  	position: absolute;
  	top: -0.03px;
  	left: 59px;
  	width: 1334px;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: 20px;
}
.frame-child {
  	height: 955px;
  	width: 1px;
  	position: relative;
  	background-color: #e9e9e9;
}
.background-child {
  	position: absolute;
  	top: 58.81px;
  	left: 0px;
  	width: 1439.5px;
  	height: 837.3px;
  	object-fit: contain;
}
.background-item {
  	position: absolute;
  	top: 596.97px;
  	left: 193px;
  	background-color: #d9d9d9;
  	width: 66px;
  	height: 59px;
}
.background-inner {
  	position: absolute;
  	top: 237.97px;
  	left: 259px;
  	background-color: #d9d9d9;
  	width: 66px;
  	height: 59px;
}
.background-child2 {
  	position: absolute;
  	top: 657.97px;
  	left: 925px;
  	background-color: #d9d9d9;
  	width: 66px;
  	height: 59px;
}
.background-child3 {
  	position: absolute;
  	top: 238.97px;
  	left: 1125px;
  	background-color: #d9d9d9;
  	width: 66px;
  	height: 59px;
}

.how-to-setup3 .frame-parent12 {
    display: flex;
    flex-direction: column;
    align-items: center;   /* ✅ center horizontally */
    text-align: center;    /* ✅ center text */
}

.how-to-setup3 .frame-wrapper {
    align-items: center;   /* override flex-start */
}


/* .benefits-wrapper {
  	border-radius: 30px;
  	background-color: rgba(211, 211, 211, 0.1);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 8px 12px;
} */

/* .the-benefits-you-get-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: 24px;
  	text-align: center;
  	font-size: 56px;
  	font-family: Manrope;
} */

/* =========================
   Responsive title fix addon
   ========================= */

/* Parent wrapper */
.how-to-setup3 .frame-parent12,
.how-to-setup3 .benefits-wrapper,
.how-to-setup3 .the-benefits-you-get-parent {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Title block */
.how-to-setup3 .the-benefits-you-get-parent {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

/* Actual title text */
.how-to-setup3 .the-benefits-you-get-parent h1,
.how-to-setup3 .the-benefits-you-get-parent h2,
.how-to-setup3 .the-benefits-you-get-parent h3,
.how-to-setup3 .the-benefits-you-get-parent .title,
.how-to-setup3 .the-benefits-you-get-parent .heading {
  width: 100%;
  max-width: 100%;
  margin: 0;

  font-size: clamp(28px, 7vw, 64px);
  line-height: 1.12;
  font-weight: 300;

  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Tablet */
@media (max-width: 991px) {
  .how-to-setup3 .the-benefits-you-get-parent {
    padding: 0 20px;
  }

  .how-to-setup3 .the-benefits-you-get-parent h1,
  .how-to-setup3 .the-benefits-you-get-parent h2,
  .how-to-setup3 .the-benefits-you-get-parent h3,
  .how-to-setup3 .the-benefits-you-get-parent .title,
  .how-to-setup3 .the-benefits-you-get-parent .heading {
    font-size: clamp(24px, 6vw, 48px);
    line-height: 1.15;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .how-to-setup3 .frame-parent12,
  .how-to-setup3 .benefits-wrapper,
  .how-to-setup3 .the-benefits-you-get-parent {
    width: 100%;
    max-width: 100%;
  }

  .how-to-setup3 .the-benefits-you-get-parent {
    padding: 0 12px;
  }

  .how-to-setup3 .the-benefits-you-get-parent h1,
  .how-to-setup3 .the-benefits-you-get-parent h2,
  .how-to-setup3 .the-benefits-you-get-parent h3,
  .how-to-setup3 .the-benefits-you-get-parent .title,
  .how-to-setup3 .the-benefits-you-get-parent .heading {
    font-size: clamp(20px, 8vw, 34px);
    line-height: 1.18;
  }
}

/* Very small devices */
@media (max-width: 480px) {
  .how-to-setup3 .the-benefits-you-get-parent {
    padding: 0 12px;
  }

  .how-to-setup3 .the-benefits-you-get-parent h1,
  .how-to-setup3 .the-benefits-you-get-parent h2,
  .how-to-setup3 .the-benefits-you-get-parent h3,
  .how-to-setup3 .the-benefits-you-get-parent .title,
  .how-to-setup3 .the-benefits-you-get-parent .heading {
    font-size: clamp(18px, 7.2vw, 28px);
    line-height: 1.2;
  }
}

.lorem-ipsum-is4 {
  	align-self: stretch;
  	position: relative;
  	font-size: 17px;
  	line-height: 120%;
  	font-family: Inter;
}
.how-to-setup3 .frame-parent13 {
  	align-self: stretch;
  	display: flex;
  	align-items: flex-start;
  	gap: 32px;
  	z-index: 2;
  	flex-shrink: 0;
  	font-size: 24px;
  	font-family: Manrope;
}




.text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}



.frame-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}


.frame-wrapper {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
}
.frame-icon {
  	width: 72px;
  	height: 72px;
  	position: relative;
}
.effortless-compliance {
  	align-self: stretch;
  	position: relative;
  	letter-spacing: -0.05em;
  	line-height: 140%;
  	font-weight: 600;
}
.save-time-and {
  	align-self: stretch;
  	position: relative;
  	font-size: 16px;
  	line-height: 120%;
  	font-family: Inter;
  	opacity: 0.6;
}


.button5 {
  	border-radius: 74px;
  	background-color: #008b00;
  	display: inline-flex;
  	align-items: center;
  	justify-content: center;
  	padding: 16px 24px;

  	text-decoration: none; /* removes underline */
  	color: #ffffff;        /* keeps text white */
}
.how-to-setup-child {
  	width: 731px;
  	height: 138px;
  	position: absolute;
  	margin: 0 !important;
  	top: -96px;
  	left: 343px;
  	filter: blur(80px);
  	border-radius: 50%;
  	background-color: #75c9e3;
  	z-index: 4;
  	flex-shrink: 0;
}

/* ===================================== */
/* RESPONSIVE ADD-ON FOR .how-to-setup3 */
/* ===================================== */

/* ---------- Large Screens 1440px+ ---------- */
@media (min-width: 1440px) {
  .how-to-setup3 {
    padding: 96px 140px;
  }
}

/* ---------- Desktop 1024px - 1439px ---------- */
@media (max-width: 1439px) {
  .how-to-setup3 {
    padding: 80px 60px;
    gap: 72px;
  }

  .rectangle-parent {
    width: 100%;
    left: 0;
    padding: 0 40px;
  }
}

/* ---------- Tablet (iPad / Surface) ---------- */
@media (max-width: 1024px) {

  .how-to-setup3 {
    padding: 70px 40px;
    gap: 70px;
  }

  .the-benefits-you-get-parent {
    font-size: 42px;
  }

  .frame-parent13 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .frame-wrapper {
    flex: 0 0 45%;
    max-width: 45%;
    align-items: center;
    text-align: center;
  }

  .background,
  .rectangle-parent {
    display: none; /* removes fixed width layout elements */
  }
}

/* ---------- Mobile Large ---------- */
@media (max-width: 768px) {

  .how-to-setup3 {
    padding: 60px 24px;
    gap: 60px;
  }

  .the-benefits-you-get-parent {
    font-size: 36px;
  }

  .frame-parent13 {
    flex-direction: column;
    align-items: center;
  }

  .frame-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .frame-icon {
    width: 64px;
    height: 64px;
  }

  .effortless-compliance {
    font-size: 20px;
  }

  .save-time-and {
    font-size: 15px;
  }

  .button5 {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px) {

  .how-to-setup3 {
    padding: 50px 18px;
    gap: 50px;
  }

  .the-benefits-you-get-parent {
    font-size: 30px;
  }

  .lorem-ipsum-is4 {
    font-size: 15px;
  }

  .frame-icon {
    width: 56px;
    height: 56px;
  }
}



/************************************************************
 * HOW TO SETUP 4
 ************************************************************/




/************************************************************
 * HIDE HORIZONTAL SCROLLBAR (MODERN UX)
 ************************************************************/

/* Chrome, Edge, Safari */
.framework-cards::-webkit-scrollbar {
  height: 0;
}


/* IE / old Edge */
.framework-cards {
  -ms-overflow-style: none;
}



.how-to-setup4 {
  align-self: stretch;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 120px;
  gap: 48px;
  color: #000318;
}

.voici-les-frameworks {
  align-self: stretch;
  position: relative;
  font-size: 17px;
  line-height: 120%;
  font-family: Inter, sans-serif;
  color: #000318;
  text-align: center;
}

/* ===================================== */
/* Framework grid                        */
/* ===================================== */

.framework-cards,
.frame-parent19.framework-cards {
  width: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: center;
  font-size: 32px;
  color: #000319;
  font-family: Manrope, sans-serif;
  overflow: visible;
}

/* Remove old horizontal-scroll behavior */
.framework-cards::-webkit-scrollbar {
  display: none;
}

.framework-cards > div {
  flex-shrink: 1;
  min-width: 0;
}

/* Framework cards */
.frame-parent20,
.frame-parent21 {
  width: 100%;
  min-height: 250px;
  box-shadow: 0px 3px 0px #e9e9e9;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  gap: 23px;
}

/* Content block inside each card */
.frame-parent20 .frame-div,
.frame-parent21 .frame-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.pipeda {
  position: relative;
  letter-spacing: -0.05em;
  line-height: 120%;
  font-weight: 500;
  font-size: 32px;
  color: #000319;
}

.pipeda-or-the {
  align-self: stretch;
  position: relative;
  font-size: 15px;
  line-height: 140%;
  font-family: Inter, sans-serif;
  text-align: left;
  opacity: 0.6;
  color: #000318;
}

/* Learn more link */
.learn-more-parent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: #008b00;
  font-family: Inter, sans-serif;
  text-decoration: none;
}

.learn-more-parent a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #008b00;
}

.learn-more {
  position: relative;
  line-height: 120%;
}

.weuiarrow-outlined-icon {
  width: 12px;
  position: relative;
  max-height: 100%;
}

/* Hide old carousel nav arrows */
.miarrow-up-parent {
  display: none;
}

.miarrow-up-icon {
  width: 48px;
  border-radius: 100px;
  max-height: 100%;
  object-fit: contain;
}

/* ===================================== */
/* Responsive                            */
/* ===================================== */

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .how-to-setup4 {
    padding: 70px 40px;
    gap: 40px;
  }

  .framework-cards,
  .frame-parent19.framework-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .pipeda {
    font-size: 30px;
  }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .how-to-setup4 {
    padding: 60px 24px;
    gap: 32px;
  }

  .framework-cards,
  .frame-parent19.framework-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .frame-parent20,
  .frame-parent21 {
    min-height: auto;
    padding: 20px;
  }

  .pipeda {
    font-size: 28px;
  }

  .pipeda-or-the {
    font-size: 14px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .how-to-setup4 {
    padding: 50px 18px;
  }

  .pipeda {
    font-size: 24px;
  }

  .voici-les-frameworks {
    font-size: 15px;
  }
}




.cta {
  	align-self: stretch;
  	background-color: #fff;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 60px 120px;
}


/************************************************************
 * ARROW BUTTON RESET (REMOVE SQUARE)
 ************************************************************/

.miarrow-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;

  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;

  cursor: pointer;
}

/* Remove focus outline but keep accessibility safe */
.miarrow-btn:focus {
  outline: none;
}

/* Optional: visible focus style for keyboard users */
.miarrow-btn:focus-visible {
  outline: 2px solid rgba(0, 139, 0, 0.4);
  outline-offset: 2px;
}

.frame-parent25 {
  	width: 100%;
  	height: 423px;
  	border-radius: 32px;
  	background: linear-gradient(90deg, #3ca128, #8bcd28 92.31%);
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: center;
  	padding: 0px 60px;
  	box-sizing: border-box;
  	position: relative;
  	isolation: isolate;
  	gap: 24px;
  	max-width: 100%;
}
.frame-parent26 {
  	width: 578px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: center;
  	gap: 24px;
  	z-index: 0;
  	flex-shrink: 0;
}
.tailored-demo-wrapper {
  	border-radius: 30px;
  	background-color: rgba(255, 255, 255, 0.1);
  	display: none;
  	align-items: center;
  	justify-content: center;
  	padding: 8px 12px;
  	flex-shrink: 0;
}
.ready-to-make {
  	align-self: stretch;
  	position: relative;
  	font-size: 56px;
  	letter-spacing: -0.05em;
  	line-height: 120%;
  	font-weight: 500;
  	font-family: Manrope;
  	flex-shrink: 0;
    color: white;
}
.lorem-ipsum-is5 {
  	align-self: stretch;
  	position: relative;
  	font-size: 17px;
  	line-height: 120%;
  	opacity: 0.7;
  	flex-shrink: 0;
    font-family: Manrope;
    color: #ffffff;
}
/* .button6 {
  	border-radius: 74px;
  	background-color: #fff;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 16px 24px;
  	flex-shrink: 0;
  	font-size: 16px;
  	color: #000319;
} */



/* .button6 {
  border-radius: 74px;
  background-color: #fff;;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;

  text-decoration: none;  
 color: white;          
} */

/* CTA button */
.button6 {
  border-radius: 74px;
  background-color: #fff;;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  z-index: 3;
  flex-shrink: 0;
  font-size: 16px;

  text-decoration: none;   /* remove underline */
  color: white;  
  font-weight: 500;
}

.button6:link,
.button6:visited {
  text-decoration: none;
  color: #000319;
}

.button6:hover {
  background-color: #008b00;
  color: white;  
}

.rocket {
  	width: 575px;
  	height: 549px;
  	position: absolute;
  	margin: 0 !important;
  	top: -120px;
  	left: 674px;
  	z-index: 1;
  	flex-shrink: 0;
}
.mask-group-icon5 {
  	position: absolute;
  	top: 91px;
  	left: 126px;
  	width: 323.7px;
  	height: 366.9px;
  	object-fit: cover;
}
.rocket-child {
  	position: absolute;
  	top: 486px;
  	left: 82px;
  	filter: blur(38.7px);
  	border-radius: 50%;
  	background-color: rgba(0, 0, 0, 0.2);
  	width: 357px;
  	height: 23px;
}
.group-icon {
  	position: absolute;
  	top: 55px;
  	left: 184px;
  	width: 194.6px;
  	height: 162.9px;
  	object-fit: contain;
}
/* .footer {
  	width: 1440px;
  	background: linear-gradient(156.49deg, #285dba, #122a54);
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 96px 120px;
  	box-sizing: border-box;
  	position: relative;
  	isolation: isolate;
  	gap: 48px;
  	font-size: 16px;
} */
.frame-parent27 {
  	align-self: stretch;
  	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  	display: flex;
  	align-items: flex-start;
  	justify-content: space-between;
  	padding: 0px 0px 48px;
  	gap: 20px;
  	z-index: 0;
  	flex-shrink: 0;
}
/* .vector-parent {
  	width: 373px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 24px;
} */
.frame-child22 {
  	width: 80.2px;
  	height: 91.6px;
  	position: relative;
}
.your-data-privacy3 {
  	align-self: stretch;
  	position: relative;
  	line-height: 130%;
  	opacity: 0.7;
}
.frame-parent28 {
  	display: flex;
  	align-items: flex-start;
  	gap: 48px;
}
.useful-links-parent {
  	height: 148px;
  	width: 170px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 16px;
}
.useful-links {
  	align-self: stretch;
  	position: relative;
  	line-height: 120%;
  	font-family: Manrope;

}

/* Desktop (Figma exact) */
.pa-header__cta-btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;


  /* background: var(--pa-color-primary);
  border-radius: var(--pa-radius-pill); */
  border: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.pa-header__cta-btn:hover {
  opacity: 1;
  cursor: pointer;
}

.about-us {
  	align-self: stretch;
  	position: relative;
  	line-height: 120%;
  	opacity: 0.7;

    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */
     cursor: pointer;
}
.products-group {
  	height: 105px;
  	width: 170px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 16px;

    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */

     cursor: pointer;
}
.contact-us-parent {
  	width: 192px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 16px;

    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */
}
.fa7-brandsfacebook-parent {
  	display: flex;
  	align-items: flex-start;
  	gap: 24px;
}
.fa7-brandsfacebook-icon {
  	width: 48px;
  	position: relative;
  	border-radius: 100px;
  	max-height: 100%;
}
.line-mdyoutube-filled-icon {
  	width: 48px;
  	position: relative;
  	border-radius: 100px;
  	max-height: 100%;
  	object-fit: cover;
}
.background2 {
  	width: 1439.5px;
  	height: 955px;
  	position: absolute;
  	margin: 0 !important;
  	top: calc(50% - 240.3px);
  	left: calc(50% - 720px);
  	overflow: hidden;
  	flex-shrink: 0;
  	opacity: 0.03;
  	z-index: 1;
}
.footer-child {
  	width: 296.7px;
  	height: 107.7px;
  	position: absolute;
  	margin: 0 !important;
  	bottom: 458.59px;
  	left: 9.79px;
  	filter: blur(80px);
  	border-radius: 50%;
  	background-color: #75c9e3;
  	z-index: 2;
  	flex-shrink: 0;
}
.privassistant-all-rights-reser-parent {
  	align-self: stretch;
  	display: flex;
  	align-items: flex-start;
  	justify-content: space-between;
  	gap: 20px;
  	z-index: 3;
  	flex-shrink: 0;
    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */
}
.privassistant-all-rights {
  	position: relative;
  	opacity: 0.7;
    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */
}
.privacy-policy-parent {
  	display: flex;
  	align-items: center;
  	gap: 24px;
    text-decoration: none;      /* remove underline */
    color: inherit;             /* keep original text color */
}

/* =========================================
   RESPONSIVE ADD-ON (Correct & Complete)
========================================= */


/* =========================
   TABLET (≤1024px)
========================= */

@media (max-width: 1024px) {

  /* ----- how-to-setup4 ----- */
  .how-to-setup4 {
    padding: 70px 40px;
    gap: 40px;
  }

  /* ----- Framework cards ----- */
  .framework-cards {
    gap: 20px;
  }

  .frame-parent20,
  .frame-parent21 {
    width: 260px;
  }

  .frame-parent19 {
    font-size: 28px;
  }

  /* ----- CTA SECTION ----- */
  .cta {
    padding: 50px 40px;
  }

  .frame-parent25 {
    height: auto;              /* remove fixed height */
    padding: 50px 40px;
    align-items: center;
    text-align: center;
  }

  .frame-parent26 {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .ready-to-make {
    font-size: 42px;
  }

  .rocket {
    display: none;             /* hide rocket on tablet */
  }

  /* ----- FOOTER ----- */
  .footer {
    width: 100%;               /* override 1440px */
    padding: 70px 40px;
  }

  .frame-parent27 {
    flex-wrap: wrap;
    gap: 40px;
  }

  .frame-parent28 {
    flex-wrap: wrap;
    gap: 32px;
  }

}


/* =========================
   MOBILE (≤768px)
========================= */

@media (max-width: 768px) {

  /* ----- how-to-setup4 ----- */
  .how-to-setup4 {
    padding: 60px 24px;
    gap: 32px;
  }

  .voici-les-frameworks {
    font-size: 15px;
    text-align: center;
  }

  /* ----- Framework Cards ----- */
  .framework-cards {
    gap: 16px;
  }

  .frame-parent20,
  .frame-parent21 {
    width: 240px;              /* keep scroll visible */
    padding: 20px;
  }

  .frame-parent19 {
    flex-direction: column;
    align-items: center;
    font-size: 24px;
  }

  /* ----- CTA ----- */
  .cta {
    padding: 40px 24px;
  }

  .frame-parent25 {
    height: auto;
    padding: 40px 24px;
    border-radius: 24px;
  }

  .ready-to-make {
    font-size: 34px;
    text-align: center;
  }

  .lorem-ipsum-is5 {
    font-size: 15px;
    text-align: center;
  }

  .button6 {
    width: 100%;
    justify-content: center;
  }

  /* ----- FOOTER ----- */
  .footer {
    width: 100%;
    padding: 60px 24px;
    gap: 40px;
  }

  .frame-parent27 {
    flex-direction: column;
    gap: 40px;
  }

  .frame-parent28 {
    flex-direction: column;
    gap: 32px;
  }

  .vector-parent,
  .useful-links-parent,
  .products-group,
  .contact-us-parent {
    width: 100%;
  }

  .privassistant-all-rights-reser-parent {
    flex-direction: column;
    gap: 16px;
  }

}


/* =========================
   SMALL MOBILE (≤480px)
========================= */

@media (max-width: 480px) {

  .how-to-setup4 {
    padding: 50px 18px;
  }

  .frame-parent20,
  .frame-parent21 {
    width: 220px;
  }

  .ready-to-make {
    font-size: 28px;
  }

  .footer {
    padding: 50px 18px;
  }

}

/* =========================================
   LOCK REQUEST DEMO BUTTON SIZE
========================================= */

.button5,
.button6 {
  width: auto !important;
  min-width: 220px;        /* keeps consistent button width */
  max-width: 220px;        /* prevents expansion */
  padding: 16px 24px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  white-space: nowrap;     /* prevents text wrap */
}

/* Ensure mobile rules don't override it */
@media (max-width: 1024px),
       (max-width: 768px),
       (max-width: 480px) {

  .button6 {
    width: auto !important;
    min-width: 220px;
    max-width: 220px;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }

}



/* ============================================================
   MOBILE TITLE SIZE FIX — ADD-ON ONLY
   Load AFTER priva_ver2.css
   DESKTOP (769px+) is completely untouched.
   ============================================================ */


/* ----------------------------------------------------------
   SMALL MOBILE  ≤ 600px  (iPhone 12 Pro = 390px)
   All section h1-level titles scaled down from 56px
   ---------------------------------------------------------- */
@media (max-width: 600px) {

  /* Universal rule: every .how-it-works title across ALL sections:
     - "How it Works"              (how-to-setup2B)
     - "Compliance that gets…"     (how-to-setup2)
     - "Hours of compliance…"      (how-to-setup3)
     - "Who this is for"           (how-to-setup2B x2)
     - "Supported Frameworks"      (how-to-setup4)
  */
  .how-it-works {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  /* CTA section: "Ready to make compliance effortless?" */
  .ready-to-make {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  /* "What makes us different" — uses .what-makes-us inside
     .what-makes-us-different-parent (font-size set to 40px there) */
  .what-makes-us {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}


/* ----------------------------------------------------------
   MID MOBILE  601px – 768px
   Gentler reduction for larger phones / small tablets
   ---------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 768px) {

  .how-it-works {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  .ready-to-make {
    font-size: 38px !important;
  }

  .what-makes-us {
    font-size: 40px !important;
  }

}

/* ============================================================
   MOBILE TITLE SIZE FIX — ADD-ON ONLY
   Load AFTER priva_ver2.css
   DESKTOP (769px+) is completely untouched.
   ============================================================ */


/* ----------------------------------------------------------
   FRAMEWORKS SECTION — mobile centering (all small screens)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* Section header: badge + title + subtitle */
  .how-to-setup4 .frame-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works {
    text-align: center;
    margin: 0 auto;
  }

  .how-to-setup4 .voici-les-frameworks {
    text-align: center;
  }

  /* Cards grid: center the single column */
  .how-to-setup4 .framework-cards {
    justify-items: center;
  }

  /* Each card: left-align inner text (keeps readability), full width */
  .frame-parent20,
  .frame-parent21 {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE  ≤ 600px  (iPhone 12 Pro = 390px)
   All section h1-level titles scaled down from 56px
   ---------------------------------------------------------- */
@media (max-width: 600px) {

  /* Universal rule: every .how-it-works title across ALL sections:
     - "How it Works"              (how-to-setup2B)
     - "Compliance that gets…"     (how-to-setup2)
     - "Hours of compliance…"      (how-to-setup3)
     - "Who this is for"           (how-to-setup2B x2)
     - "Supported Frameworks"      (how-to-setup4)
  */
  .how-it-works {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  /* CTA section: "Ready to make compliance effortless?" */
  .ready-to-make {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  /* "What makes us different" — uses .what-makes-us inside
     .what-makes-us-different-parent (font-size set to 40px there) */
  .what-makes-us {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}


/* ----------------------------------------------------------
   MID MOBILE  601px – 768px
   Gentler reduction for larger phones / small tablets
   ---------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 768px) {

  .how-it-works {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  .ready-to-make {
    font-size: 38px !important;
  }

  .what-makes-us {
    font-size: 40px !important;
  }

}


/* ============================================================
   MOBILE TITLE SIZE FIX — ADD-ON ONLY
   Load AFTER priva_ver2.css
   DESKTOP (769px+) is completely untouched.
   ============================================================ */


/* ----------------------------------------------------------
   BENEFITS SECTION (how-to-setup3) — icon inline with title on mobile
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* Each benefit card: column layout, left-aligned */
  .how-to-setup3 .frame-wrapper {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .how-to-setup3 .frame-div {
    align-items: flex-start !important;
    width: 100%;
  }

  /* Icon + title side by side in a row */
  .how-to-setup3 .frame-div > .frame-icon,
  .how-to-setup3 .frame-div > .effortless-compliance {
    display: inline-block;
  }

  /* Wrap icon and title together in a flex row */
  .how-to-setup3 .frame-div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Create an icon+title row using a pseudo wrapper approach:
     target the icon and title as a flex row */
  .how-to-setup3 .frame-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }

  /* Use a row for the first two children (icon + title) */
  .how-to-setup3 .frame-div {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }

  /* Icon: row 1, col 1 */
  .how-to-setup3 .frame-div > .frame-icon {
    grid-column: 1;
    grid-row: 1;
  }

  /* Title: row 1, col 2 */
  .how-to-setup3 .frame-div > .effortless-compliance {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px !important;
    line-height: 1.3;
    align-self: center;
  }

  /* Description: row 2, spans both columns */
  .how-to-setup3 .frame-div > .save-time-and {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    opacity: 0.7;
  }

}


/* ----------------------------------------------------------
   FRAMEWORKS SECTION — mobile centering (all small screens)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* Section header: badge + title + subtitle */
  .how-to-setup4 .frame-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works {
    text-align: center;
    margin: 0 auto;
  }

  .how-to-setup4 .voici-les-frameworks {
    text-align: center;
  }

  /* Cards grid: center the single column */
  .how-to-setup4 .framework-cards {
    justify-items: center;
  }

  /* Each card: left-align inner text (keeps readability), full width */
  .frame-parent20,
  .frame-parent21 {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE  ≤ 600px  (iPhone 12 Pro = 390px)
   All section h1-level titles scaled down from 56px
   ---------------------------------------------------------- */
@media (max-width: 600px) {

  /* Universal rule: every .how-it-works title across ALL sections:
     - "How it Works"              (how-to-setup2B)
     - "Compliance that gets…"     (how-to-setup2)
     - "Hours of compliance…"      (how-to-setup3)
     - "Who this is for"           (how-to-setup2B x2)
     - "Supported Frameworks"      (how-to-setup4)
  */
  .how-it-works {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  /* CTA section: "Ready to make compliance effortless?" */
  .ready-to-make {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  /* "What makes us different" — uses .what-makes-us inside
     .what-makes-us-different-parent (font-size set to 40px there) */
  .what-makes-us {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}


/* ----------------------------------------------------------
   MID MOBILE  601px – 768px
   Gentler reduction for larger phones / small tablets
   ---------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 768px) {

  .how-it-works {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  .ready-to-make {
    font-size: 38px !important;
  }

  .what-makes-us {
    font-size: 40px !important;
  }

}

/* ============================================================
   FOOTER MOBILE — MULTI-COLUMN ADD-ON (FIXED)
   Load AFTER global_footer_ver2.0.css
   ALL rules scoped to .footer to prevent bleeding into
   other sections that share the same class names.
   Desktop (769px+) is completely untouched.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Link columns wrapper: 2-column grid ──
     Scoped to .footer to prevent affecting Benefits,
     Audience, How it Works sections                          */
  .footer .frame-parent13 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 32px 24px !important;
    width: 100%;
  }

  /* ── Each column: let grid control sizing ── */
  .footer .useful-links-parent,
  .footer .products-group,
  .footer .contact-us-parent {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Contact column: spans full width (has social icons) ── */
  .footer .contact-us-parent {
    grid-column: 1 / -1;
  }

  /* ── Social icons: keep in a row ── */
  .footer .fa7-brandsfacebook-parent {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px;
  }

}


/* ============================================================
   HERO TITLE — Desktop: force 2 lines instead of 3
   Only applies at 769px and above.
   ============================================================ */

@media (min-width: 769px) {

  .hero-title {
    font-size: clamp(48px, 4.5vw, 68px) !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ============================================================
   PRIVASSISTANT — MOBILE ADD-ON
   Load AFTER priva_ver2.css
   Desktop (769px+) is completely untouched unless noted.
   ============================================================ */


/* ----------------------------------------------------------
   1. SINGLE-COLUMN FIX — ≤ 768px
   priva_ver2.css sets .frame-wrapper { flex: 0 0 45% } at
   ≤1024px which creates unintended 2-column layouts in
   Benefits, How it Works, and Audience sections on mobile.
   Force all affected section wrappers back to full width.
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* Benefits (how-to-setup3) — one card per row */
  .how-to-setup3 .frame-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* How it Works steps (how-to-setup2B) — one step per row */
  .how-to-setup2B .frame-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center;
    align-items: center;
  }

  /* Audience / Who this is for (second how-to-setup2B) — one card per row */
  .how-to-setup2B .frame-parent13 {
    flex-direction: column !important;
    align-items: center !important;
  }

}


/* ----------------------------------------------------------
   2. BENEFITS SECTION — icon inline with title on mobile
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  .how-to-setup3 .frame-div {
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    width: 100%;
  }

  .how-to-setup3 .frame-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .how-to-setup3 .frame-div > .effortless-compliance {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px !important;
    line-height: 1.3;
    align-self: center;
  }

  .how-to-setup3 .frame-div > .save-time-and {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    opacity: 0.7;
  }

}


/* ----------------------------------------------------------
   3. FRAMEWORKS SECTION — center header + full-width cards
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  .how-to-setup4 .frame-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works {
    text-align: center;
    margin: 0 auto;
  }

  .how-to-setup4 .voici-les-frameworks {
    text-align: center;
  }

  .how-to-setup4 .framework-cards {
    justify-items: center;
  }

  .frame-parent20,
  .frame-parent21 {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
  }

}


/* ----------------------------------------------------------
   4. TITLE SIZE FIX — ≤ 600px (iPhone 12 Pro = 390px)
   ---------------------------------------------------------- */
@media (max-width: 600px) {

  .how-it-works {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  .ready-to-make {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .what-makes-us {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}

/* Gentler reduction 601px–768px */
@media (min-width: 601px) and (max-width: 768px) {

  .how-it-works {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  .ready-to-make {
    font-size: 38px !important;
  }

  .what-makes-us {
    font-size: 40px !important;
  }

}


/* ----------------------------------------------------------
   5. FOOTER — 2-column grid on mobile
   Scoped to .footer to prevent bleeding into other sections.
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  .footer .frame-parent13 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 32px 24px !important;
    width: 100%;
  }

  .footer .useful-links-parent,
  .footer .products-group,
  .footer .contact-us-parent {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Contact spans full width — has social icons below */
  .footer .contact-us-parent {
    grid-column: 1 / -1;
  }

  .footer .fa7-brandsfacebook-parent {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px;
  }

}


/* ----------------------------------------------------------
   6. HERO TITLE — Desktop: force 2 lines instead of 3
   ---------------------------------------------------------- */
@media (min-width: 769px) {

  .hero-title {
    font-size: clamp(48px, 4.5vw, 68px) !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ============================================================
   PRIVASSISTANT — RESPONSIVE ADD-ON
   Append ONCE at the end of priva_ver2.css.
   Replaces all previous add-on blocks (remove duplicates).

   Breakpoint map:
     ≤ 480px   — small mobile
     ≤ 600px   — mobile (iPhone 12 Pro)
     601–768px — mid mobile
     769–1024px — iPad Air / iPad Pro / Surface
     ≥ 1025px  — desktop (untouched)
   ============================================================ */


/* ============================================================
   TABLET — iPad Air, iPad Pro, Surface (769px – 1024px)
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* --- Benefits section (how-to-setup3) ---
     Icon sits inline to the left of the title.
     2 cards per row, readable at tablet width.       */
  .how-to-setup3 .frame-parent13 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  .how-to-setup3 .frame-wrapper {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Icon inline with title */
  .how-to-setup3 .frame-div {
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    width: 100%;
  }

  .how-to-setup3 .frame-icon {
    width: 40px !important;
    height: 40px !important;
    grid-column: 1;
    grid-row: 1;
  }

  .how-to-setup3 .frame-div > .effortless-compliance {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px !important;
    line-height: 1.3;
    align-self: center;
  }

  .how-to-setup3 .frame-div > .save-time-and {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    opacity: 0.7;
  }

  /* --- Audience / Who this is for (how-to-setup2B) ---
     2 cards per row instead of 4 — prevents cramping.  */
  .how-to-setup2B .frame-parent13 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  .how-to-setup2B .frame-wrapper {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* --- How it Works steps (first how-to-setup2B) ---
     2 steps per row at tablet.                         */
  .how-to-setup2B .frame-parent13.step-cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- Frameworks section ---
     Already has 2-col grid at ≤1024px in base CSS.
     Center the section header.                         */
  .how-to-setup4 .frame-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works {
    text-align: center;
    margin: 0 auto;
  }

  .how-to-setup4 .voici-les-frameworks {
    text-align: center;
  }

  /* --- Hero title ---
     Force 2 lines instead of 3 on tablet.             */
  .hero-title {
    font-size: clamp(44px, 5vw, 60px) !important;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ============================================================
   MOBILE — iPhone and small phones (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

  /* --- Benefits (how-to-setup3): single column, icon inline --- */
  .how-to-setup3 .frame-parent13 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .how-to-setup3 .frame-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .how-to-setup3 .frame-div {
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    width: 100%;
  }

  .how-to-setup3 .frame-icon {
    width: 40px !important;
    height: 40px !important;
    grid-column: 1;
    grid-row: 1;
  }

  .how-to-setup3 .frame-div > .effortless-compliance {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px !important;
    line-height: 1.3;
    align-self: center;
  }

  .how-to-setup3 .frame-div > .save-time-and {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    opacity: 0.7;
  }

  /* --- How it Works + Audience (how-to-setup2B): single column --- */
  .how-to-setup2B .frame-parent13 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .how-to-setup2B .frame-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* --- Frameworks section: center header, full-width cards --- */
  .how-to-setup4 .frame-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works-parent {
    align-items: center;
    text-align: center;
  }

  .how-to-setup4 .how-it-works {
    text-align: center;
    margin: 0 auto;
  }

  .how-to-setup4 .voici-les-frameworks {
    text-align: center;
  }

  .how-to-setup4 .framework-cards {
    justify-items: center;
  }

  .frame-parent20,
  .frame-parent21 {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
  }

  /* --- Footer: 2-column grid, scoped to .footer only --- */
  .footer .frame-parent13 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 32px 24px !important;
    width: 100%;
  }

  .footer .useful-links-parent,
  .footer .products-group,
  .footer .contact-us-parent {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .footer .contact-us-parent {
    grid-column: 1 / -1;
  }

  .footer .fa7-brandsfacebook-parent {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px;
  }

}


/* ============================================================
   TITLE SIZES — small mobile (≤ 600px)
   ============================================================ */

@media (max-width: 600px) {

  .how-it-works {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  .ready-to-make {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .what-makes-us {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}

/* Mid mobile 601px–768px */
@media (min-width: 601px) and (max-width: 768px) {

  .how-it-works {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  .ready-to-make {
    font-size: 38px !important;
  }

  .what-makes-us {
    font-size: 40px !important;
  }

}


/* ============================================================
   HERO TITLE — desktop: 2 lines (≥ 769px)
   ============================================================ */

@media (min-width: 769px) {

  .hero-title {
    font-size: clamp(48px, 4.5vw, 68px) !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ============================================================
   TASK ASSIGNMENT CARD — deep brand green
   Distinct from Smart Compliance Intelligence lime-green,
   uses the core brand green (#008b00) darkened to navy-green.
   ============================================================ */

.task-assignment-and-role-manag-parent {
  background: linear-gradient(258.62deg, #00a800, #006e00) !important;
  border: 1px solid #cde6cd !important;
}


@media (max-width: 768px) {

  .how-to-setup2 .frame-group,
  .how-to-setup2 .frame-parent9,
  .how-to-setup2 .frame-parent10 {
    gap: 16px !important;
  }

}


@media (max-width: 768px) {

  /* Stack both row wrappers into a single column flow */
  .how-to-setup2 .frame-parent9 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Each row wrapper also stacks its 2 cards vertically */
  .how-to-setup2 .frame-parent10 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

}

/* CTA section — match width of all other sections */
/* CTA — reduce outer padding so green box fills more of the viewport,
   matching the visual weight of other sections                        */
.cta {
  padding: 60px 40px !important;
  box-sizing: border-box;
}

/* Ensure the green box itself is truly full width of its container */
.frame-parent25 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}