@import url('./ai-engine.css');

/* ==========================================================
   SaaS Page Specific Styles
   ========================================================== */

/* Key Takeaways Section (Warm Cream Background) */
.page-saas .ai-takeaways-section {
  background-color: #f7f6ec;
}

.ai-takeaway-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF7E3C;
  margin-bottom: 14px;
}

.ai-takeaway-icon svg {
  stroke: #FF7E3C;
}

.ai-takeaway-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-takeaway-item h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: #171717;
  margin: 0 0 10px;
}

.ai-takeaway-item p {
  font-size: 14px;
  line-height: 22px;
  color: #71717a;
  margin: 0;
}

@media (max-width: 767px) {
  .ai-takeaway-item h3 {
    font-size: 17px;
    line-height: 23px;
    margin: 0 0 6px;
  }

  .ai-takeaway-item p {
    font-size: 13.5px;
    line-height: 21px;
  }

  .ai-takeaway-icon {
    margin-bottom: 10px;
  }
}

/* ==========================================================
   Why SaaS Marketing Is Different Section
   ========================================================== */
.saas-different-section {
  background-color: #CAD8CF;
  padding: 80px 0 100px;
}

@media (max-width: 767px) {
  .saas-different-section {
    padding: 50px 0 70px;
  }
}

.saas-different-header {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 56px;
}

@media (max-width: 767px) {
  .saas-different-header {
    margin-bottom: 36px;
  }
}

.saas-different-header .ai-eyebrow {
  margin-bottom: 20px;
  background-color: #E8F936;
  color: #171717;
}

.saas-different-title {
  color: #4A4447;
  margin: 0 0 24px;
}

.saas-different-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-different-narrative p {
  color: #555053;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-different-narrative p {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* 4-Card Grid */
.saas-different-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .saas-different-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-different-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-different-card {
  background-color: #F8F7F0;
  border-radius: 24px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-different-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.05);
}

.saas-different-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.saas-different-icon-box svg {
  stroke: #FF7E3C;
}

.saas-different-card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #171717;
  margin: 0 0 16px;
}

.saas-different-card p {
  font-size: 14px;
  line-height: 22px;
  color: #555053;
  margin: 0 0 14px;
}

.saas-different-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .saas-different-card {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .saas-different-card h3 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 12px;
  }

  .saas-different-icon-box {
    margin-bottom: 18px;
  }
}

/* ==========================================================
   The SaaS Growth Landscape Section
   ========================================================== */
.saas-landscape-section {
  background-color: #ffffff;
  padding: 80px 0 100px;
}

@media (max-width: 767px) {
  .saas-landscape-section {
    padding: 50px 0 70px;
  }
}

.saas-landscape-header {
  margin-bottom: 48px;
}

.saas-landscape-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-landscape-title {
  color: #4A4447;
  margin: 0 0 24px;
}

.saas-landscape-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 960px;
}

.saas-landscape-narrative p {
  color: #555053;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

.saas-landscape-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px !important;
}

.saas-orange-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-landscape-bullet strong {
  font-size: 16px;
  color: #171717;
  font-weight: 700;
}

/* 6-Cards Grid */
.saas-landscape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .saas-landscape-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-landscape-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-stage-card {
  background-color: #F8F7F0;
  border-radius: 24px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-stage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.04);
}

.saas-stage-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.saas-stage-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #E8F0DE;
  color: #4D6429;
}

.saas-stage-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF7E3C;
}

.saas-stage-icon svg {
  stroke: #FF7E3C;
}

.saas-stage-card h3 {
  font-size: 22px;
  font-weight: 600;
  color: #171717;
  margin: 0 0 16px;
}

.saas-stage-field {
  margin-bottom: 14px;
}

.saas-stage-field:last-child {
  margin-bottom: 0;
}

.saas-stage-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #FF7E3C;
  margin-bottom: 4px;
}

.saas-stage-label--sub {
  color: #71717A;
}

.saas-stage-desc {
  font-size: 14.5px;
  line-height: 22px;
  color: #4A4447;
  margin: 0;
}

/* Bottom Callout Box */
.saas-landscape-callout {
  background-color: #F8F7F0;
  border-radius: 24px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (max-width: 767px) {
  .saas-landscape-callout {
    padding: 24px 20px;
    border-radius: 18px;
    gap: 20px;
  }
}

.saas-callout-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.saas-callout-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saas-callout-top strong {
  font-size: 18px;
  color: #171717;
  font-weight: 600;
  line-height: 26px;
}

@media (max-width: 767px) {
  .saas-callout-top strong {
    font-size: 16px;
    line-height: 23px;
  }
}

.saas-callout-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
  .saas-callout-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 18px;
  }
}

.saas-callout-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-callout-sublabel {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #FF7E3C;
}

.saas-callout-item p {
  font-size: 15px;
  line-height: 23px;
  color: #555053;
  margin: 0;
}

/* ==========================================================
   Where SaaS Teams Need Marketing Support Section
   (One Product. Many Marketing Jobs)
   ========================================================== */
.saas-jobs-section {
  background-color: #ffffff;
  padding: 80px 0 100px;
}

@media (max-width: 767px) {
  .saas-jobs-section {
    padding: 50px 0 70px;
  }
}

.saas-jobs-header {
  margin-bottom: 40px;
}

.saas-jobs-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-jobs-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-jobs-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-jobs-desc {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  max-width: 960px;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-jobs-desc {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* Jobs Rows List */
.saas-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-job-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  border-radius: 16px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.saas-job-row--striped {
  background-color: #F8F7F0;
}

.saas-job-row:not(.saas-job-row--striped) {
  background-color: transparent;
}

.saas-job-row:hover {
  transform: translateY(-2px);
}

.saas-job-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saas-job-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-job-content h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: #171717;
  margin: 0;
}

.saas-job-content p {
  font-size: 14.5px;
  line-height: 22px;
  color: #555053;
  margin: 0;
}

.saas-job-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3f3f46;
  flex-shrink: 0;
}

.saas-job-row:not(.saas-job-row--striped) .saas-job-icon {
  background-color: #F8F7F0;
  border-color: rgba(0, 0, 0, 0.06);
}

.saas-job-icon svg {
  stroke: #3f3f46;
}

@media (max-width: 767px) {
  .saas-job-row {
    grid-template-columns: 36px 1fr 36px;
    gap: 16px;
    padding: 16px 16px;
    border-radius: 14px;
  }

  .saas-job-num {
    width: 36px;
    height: 36px;
    font-size: 13.5px;
  }

  .saas-job-content h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .saas-job-content p {
    font-size: 13.5px;
    line-height: 20px;
  }

  .saas-job-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .saas-job-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================
   Turn Product Knowledge Into Marketing Section
   ========================================================== */
.saas-knowledge-section {
  background-color: #FAF9F5;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-knowledge-section {
    padding: 60px 0 70px;
  }
}

.saas-knowledge-top-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .saas-knowledge-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.saas-knowledge-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-knowledge-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-knowledge-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-knowledge-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-knowledge-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

.saas-knowledge-narrative p strong {
  color: #171717;
}

.saas-knowledge-media {
  width: 100%;
}

.saas-knowledge-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.saas-knowledge-img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

.saas-knowledge-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0 0 40px;
}

/* 4-column Grid */
.saas-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .saas-knowledge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-knowledge-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-knowledge-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-knowledge-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.saas-knowledge-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.saas-knowledge-card__num {
  font-size: 24px;
  font-weight: 700;
  color: #1F5036;
}

.saas-knowledge-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #FEEFE6;
  color: #FF7E3C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saas-knowledge-card__icon svg {
  stroke: #FF7E3C;
}

.saas-knowledge-card h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
  color: #171717;
  margin: 0 0 16px;
}

.saas-knowledge-card__label {
  font-size: 13px;
  color: #8A8587;
  margin: 0 0 8px;
}

.saas-knowledge-card p.saas-knowledge-card__desc {
  font-size: 14.5px;
  line-height: 22px;
  color: #555053;
  margin: 0;
}

/* Banner spans 3 columns */
.saas-knowledge-banner {
  grid-column: span 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
  min-height: 220px;
  background-color: #1c1c1e;
}

@media (max-width: 1024px) {
  .saas-knowledge-banner {
    grid-column: span 2;
    padding: 36px 30px;
  }
}

@media (max-width: 640px) {
  .saas-knowledge-banner {
    grid-column: span 1;
    padding: 30px 20px;
  }
}

.saas-knowledge-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.72);
  z-index: 1;
}

.saas-knowledge-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 700px;
}

.saas-knowledge-quote {
  color: #ffffff;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-knowledge-quote {
    font-size: 18px;
    line-height: 1.4;
  }
}

.saas-knowledge-attr {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #D1D5DB;
}

/* ==========================================================
   Build Around Your Audience Section
   (Different Buyers. Different Reasons To Care.)
   ========================================================== */
.saas-audience-section {
  background-color: #ffffff;
  padding: 80px 0 100px;
}

@media (max-width: 767px) {
  .saas-audience-section {
    padding: 50px 0 70px;
  }
}

.saas-audience-header {
  margin-bottom: 48px;
}

.saas-audience-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-audience-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 24px;
}

@media (max-width: 767px) {
  .saas-audience-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-audience-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 960px;
}

.saas-audience-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

.saas-audience-narrative p.saas-audience-highlight {
  color: #171717;
  font-weight: 700;
  line-height: 24px;
  margin-top: 4px;
}

/* Vertical Stack of Yellow/Lime Audience Cards */
.saas-audience-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.saas-audience-card {
  background-color: #F8F9BA;
  border-radius: 20px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 32px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-audience-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.saas-audience-role {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saas-audience-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-audience-role h3 {
  font-size: 20px;
  font-weight: 700;
  color: #171717;
  margin: 0;
  line-height: 1.3;
}

.saas-audience-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-audience-desc p {
  font-size: 15px;
  line-height: 24px;
  color: #2F2B2D;
  margin: 0;
}

/* Downward Connector Arrow */
.saas-audience-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  color: #6B7280;
}

.saas-audience-connector svg {
  stroke: #6B7280;
}

@media (max-width: 900px) {
  .saas-audience-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 24px;
    border-radius: 16px;
  }

  .saas-audience-role h3 {
    font-size: 18px;
  }

  .saas-audience-desc p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ==========================================================
   SaaS Content That Answers Real Questions Section
   (Be Useful Before Asking The Customer To Buy)
   ========================================================== */
.saas-useful-section {
  background-color: #111111;
  color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-useful-section {
    padding: 60px 0 70px;
  }
}

.saas-useful-header-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 56px;
}

@media (max-width: 991px) {
  .saas-useful-header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
}

.saas-useful-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-useful-title {
  color: #ffffff !important;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-useful-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-useful-lead-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

.saas-useful-lead-narrative p {
  font-size: 15px;
  line-height: 24px;
  color: #D4D4D8;
  margin: 0;
}

/* Main Content Grid: Items Left, Image Right */
.saas-useful-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .saas-useful-main-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.saas-useful-list {
  display: flex;
  flex-direction: column;
}

.saas-useful-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.saas-useful-item:first-child {
  padding-top: 0;
}

.saas-useful-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.saas-useful-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #F8F7F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #171717;
  flex-shrink: 0;
}

.saas-useful-icon svg {
  stroke: #171717;
}

.saas-useful-item-content h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: #ffffff;
  margin: 0 0 8px;
}

.saas-useful-item-content p {
  font-size: 14.5px;
  line-height: 22px;
  color: #A1A1AA;
  margin: 0;
}

.saas-useful-media {
  width: 100%;
  height: 100%;
}

.saas-useful-img-wrap {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 28px;
  overflow: hidden;
}

.saas-useful-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom Progression Box */
.saas-useful-bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
}

.saas-useful-bullet-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: #D4D4D8;
}

.saas-useful-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-useful-progression {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.saas-useful-progression .prog-arrow {
  color: #E8F936;
  font-weight: 700;
}

.saas-useful-closing {
  font-size: 15px;
  line-height: 24px;
  color: #A1A1AA;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-useful-progression {
    font-size: 17px;
    gap: 8px;
  }

  .saas-useful-img-wrap {
    min-height: 320px;
  }
}

/* ==========================================================
   Search Visibility For SaaS Section
   (Be Present When Customers Start Looking)
   ========================================================== */
.saas-search-section {
  background-color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-search-section {
    padding: 60px 0 70px;
  }
}

.saas-search-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px;
}

.saas-search-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-search-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-search-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-search-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-search-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-search-narrative p {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* 3-Column Cards Grid */
.saas-search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1024px) {
  .saas-search-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-search-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-search-card {
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-search-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.saas-search-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #F4F4F5;
}

.saas-search-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saas-search-card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #171717;
  margin: 0 0 12px;
}

.saas-search-card p {
  font-size: 14px;
  line-height: 22px;
  color: #555053;
  margin: 0;
}

/* ==========================================================
   Product + Marketing Context Section
   (The Product Is The Centre. The Marketing Surrounds It.)
   ========================================================== */
.saas-ecosystem-section {
  background-color: #FAF9F5;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-ecosystem-section {
    padding: 60px 0 70px;
  }
}

.saas-ecosystem-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 52px;
}

.saas-ecosystem-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-ecosystem-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-ecosystem-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-ecosystem-desc {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

/* Stack of Cards */
.saas-ecosystem-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  margin: 0 auto 48px;
  width: 100%;
}

.saas-ecosystem-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 24px 36px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-ecosystem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.saas-ecosystem-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #487A64;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saas-ecosystem-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-ecosystem-content h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #171717;
  margin: 0;
}

.saas-ecosystem-content p {
  font-size: 14.5px;
  line-height: 22px;
  color: #71717A;
  margin: 0;
}

.saas-ecosystem-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  color: #9CA3AF;
}

.saas-ecosystem-connector svg {
  stroke: #9CA3AF;
}

/* Bottom Highlight Area */
.saas-ecosystem-footer {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-ecosystem-highlight {
  font-size: 17px;
  font-weight: 700;
  color: #FF7E3C;
  margin: 0;
  line-height: 25px;
}

.saas-ecosystem-closing {
  font-size: 15px;
  line-height: 24px;
  color: #4A4447;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-ecosystem-card {
    padding: 18px 20px;
    gap: 16px;
    border-radius: 16px;
  }

  .saas-ecosystem-badge {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .saas-ecosystem-content h3 {
    font-size: 15px;
  }

  .saas-ecosystem-content p {
    font-size: 13.5px;
    line-height: 20px;
  }

  .saas-ecosystem-highlight {
    font-size: 15.5px;
  }

  .saas-ecosystem-closing {
    font-size: 14px;
  }
}

/* ==========================================================
   Campaigns For A Fast-Moving SaaS Business Section
   (Every Launch Has A Story To Tell)
   ========================================================== */
.saas-launch-section {
  background-color: #E2EFE7;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-launch-section {
    padding: 60px 0 70px;
  }
}

.saas-launch-header {
  margin-bottom: 48px;
}

.saas-launch-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-launch-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-launch-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-launch-desc {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

/* 2-Column Grid */
.saas-launch-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .saas-launch-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Moments List */
.saas-launch-moments {
  display: flex;
  flex-direction: column;
}

.saas-moment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.saas-moment-item:first-child {
  padding-top: 0;
}

.saas-moment-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-moment-item span {
  font-size: 16px;
  font-weight: 600;
  color: #171717;
  line-height: 24px;
}

.saas-moment-callout {
  margin-top: 28px;
  background-color: #D6E6DC;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FF7E3C;
  font-size: 15px;
  font-weight: 700;
}

.saas-moment-callout svg {
  stroke: #FF7E3C;
  flex-shrink: 0;
}

/* Right 5-Step Flow Card */
.saas-launch-flow-wrap {
  display: flex;
  flex-direction: column;
}

.saas-flow-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #FF7E3C;
  margin-bottom: 16px;
}

.saas-flow-card {
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.saas-flow-row {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
}

.saas-flow-row--striped {
  background-color: #FAF9F2;
}

.saas-flow-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saas-flow-content h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: #171717;
  margin: 0 0 4px;
}

.saas-flow-content p {
  font-size: 14px;
  line-height: 21px;
  color: #555053;
  margin: 0;
}

.saas-flow-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555053;
  flex-shrink: 0;
}

.saas-flow-icon svg {
  stroke: #555053;
}

/* Bottom Card */
.saas-launch-bottom-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-launch-bottom-card p:first-child {
  font-size: 15px;
  line-height: 24px;
  color: #171717;
  font-weight: 500;
  margin: 0;
}

.saas-launch-bottom-card p:last-child {
  font-size: 14.5px;
  line-height: 23px;
  color: #71717A;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-flow-row {
    grid-template-columns: 32px 1fr 28px;
    gap: 14px;
    padding: 16px 16px;
  }

  .saas-flow-num {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .saas-launch-bottom-card {
    padding: 24px 20px;
  }
}

/* ==========================================================
   Build A Recognisable SaaS Brand Section
   (Your Product Can Be Functional. Your Brand Should Still Be Memorable.)
   ========================================================== */
.saas-memorable-section {
  background-color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-memorable-section {
    padding: 60px 0 70px;
  }
}

.saas-memorable-top-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}

@media (max-width: 991px) {
  .saas-memorable-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
}

.saas-memorable-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-memorable-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-memorable-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-memorable-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-memorable-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-memorable-narrative p {
    font-size: 14.5px;
    line-height: 23px;
  }
}

.saas-memorable-media {
  width: 100%;
}

.saas-memorable-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.saas-memorable-img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

/* 2-Column Cards Grid */
.saas-memorable-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .saas-memorable-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-memorable-card {
  background-color: #A2C5B1;
  border-radius: 18px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-memorable-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.saas-memorable-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #171717;
  margin: 0;
}

.saas-memorable-card p {
  font-size: 15px;
  line-height: 23px;
  color: #2F3E35;
  margin: 0;
}

.saas-memorable-callout-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 24px;
}

.saas-memorable-callout-box p {
  font-size: 14.5px;
  line-height: 22px;
  color: #71717A;
  margin: 0;
}

.saas-memorable-callout-box p strong {
  font-size: 15.5px;
  color: #171717;
  font-weight: 700;
}

@media (max-width: 767px) {
  .saas-memorable-card {
    padding: 22px 22px;
  }

  .saas-memorable-card h3 {
    font-size: 17.5px;
  }

  .saas-memorable-card p {
    font-size: 14px;
    line-height: 21px;
  }
}

/* ==========================================================
   Social Media For SaaS Section
   (Turn Product Knowledge Into Conversations)
   ========================================================== */
.saas-social-section {
  background-color: #111111;
  color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-social-section {
    padding: 60px 0 70px;
  }
}

.saas-social-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px;
}

.saas-social-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-social-title {
  color: #ffffff !important;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-social-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-social-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-social-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #D4D4D8;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-social-narrative p {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* 3-Column White Cards Grid */
.saas-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 52px;
}

@media (max-width: 1024px) {
  .saas-social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-social-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-social-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.saas-social-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #F4F4F5;
}

.saas-social-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saas-social-card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #171717;
  margin: 0 0 12px;
}

.saas-social-card p {
  font-size: 14px;
  line-height: 22px;
  color: #555053;
  margin: 0;
}

/* Bottom Centered Summary */
.saas-social-bottom {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.saas-social-bottom p {
  font-size: 15.5px;
  line-height: 25px;
  color: #E4E4E7;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-social-bottom p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ==========================================================
   From Marketing Activity To A Repeatable System Section
   (SaaS Growth Creates Volume. Systems Create Consistency.)
   ========================================================== */
.saas-cycle-section {
  background-color: #FAF9F5;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-cycle-section {
    padding: 60px 0 70px;
  }
}

.saas-cycle-header {
  margin-bottom: 48px;
}

.saas-cycle-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-cycle-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-cycle-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-cycle-desc {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

/* 2-Column Main Grid */
.saas-cycle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .saas-cycle-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column Content */
.saas-cycle-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-cycle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-cycle-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saas-cycle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-cycle-item span {
  font-size: 15px;
  color: #555053;
  line-height: 22px;
}

.saas-cycle-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 8px 0;
}

.saas-cycle-quote {
  font-size: 15.5px;
  font-weight: 600;
  color: #171717;
  line-height: 24px;
  margin: 0;
}

.saas-cycle-closing-note {
  font-size: 14.5px;
  color: #555053;
  margin: 4px 0 0;
}

/* Right Column (The 7-Step Cycle Card) */
.saas-cycle-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.saas-cycle-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 24px;
}

.saas-cycle-steps {
  display: flex;
  flex-direction: column;
}

.saas-cycle-step-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.saas-cycle-step-row:first-child {
  padding-top: 0;
}

.saas-cycle-step-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.saas-cycle-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.saas-cycle-step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-cycle-step-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #171717;
  margin: 0;
}

.saas-cycle-step-content p {
  font-size: 14px;
  line-height: 21px;
  color: #71717A;
  margin: 0;
}

/* Bottom Repeatable Summary */
.saas-cycle-bottom {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.saas-cycle-bottom p {
  font-size: 15px;
  line-height: 24px;
  color: #171717;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-cycle-card {
    padding: 24px 20px;
  }

  .saas-cycle-step-row {
    gap: 12px;
    padding: 14px 0;
  }
}

/* ==========================================================
   Built For SaaS Teams At Different Stages Section
   (The Marketing Problem Changes As The Company Grows.)
   ========================================================== */
.saas-stages-section {
  background-color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-stages-section {
    padding: 60px 0 70px;
  }
}

.saas-stages-header {
  margin-bottom: 48px;
}

.saas-stages-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-stages-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-stages-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

/* 4-Column Grid */
.saas-stages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .saas-stages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-stages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-stage-box {
  background-color: #E6F5EC;
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-stage-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.saas-stage-top-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #171717;
  margin-bottom: 14px;
}

.saas-stage-top-icon svg {
  stroke: #171717;
}

.saas-stage-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  background-color: rgba(0, 0, 0, 0.04);
}

.saas-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saas-stage-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 10px;
}

.saas-stage-box p {
  font-size: 13.5px;
  line-height: 21px;
  color: #3F5247;
  margin: 0;
}

/* Bottom Highlight Note */
.saas-stages-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0 0 28px;
}

.saas-stages-note {
  font-size: 16px;
  line-height: 25px;
  color: #1E3A5F;
  font-weight: 600;
  max-width: 960px;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-stages-note {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* ==========================================================
   The SaaS Marketing Stack Inside BrandStory AI Section
   (Use The Right Capability For The Job.)
   ========================================================== */
.saas-stack-section {
  background-color: #FAF9F5;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-stack-section {
    padding: 60px 0 70px;
  }
}

.saas-stack-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px;
}

.saas-stack-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-stack-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-stack-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

/* 3-Column Grid */
.saas-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .saas-stack-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .saas-stack-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-stack-card {
  background-color: #FFB684;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.saas-stack-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.saas-stack-card-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #171717;
  margin-bottom: 16px;
}

.saas-stack-card-icon svg {
  stroke: #171717;
}

.saas-stack-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 14px;
}

.saas-stack-card p {
  font-size: 14.5px;
  line-height: 22px;
  color: #4A3324;
  margin: 0 0 12px;
}

.saas-stack-card p:last-child {
  margin-bottom: 0;
}

/* Bottom Centered Summary */
.saas-stack-bottom {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.saas-stack-bottom p {
  font-size: 15px;
  line-height: 24px;
  color: #555053;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-stack-card {
    padding: 24px 22px;
  }

  .saas-stack-card h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   A SaaS Marketing Framework Section
   (Product-Led Does Not Have To Mean Product-Only.)
   ========================================================== */
.saas-framework-section {
  background-color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-framework-section {
    padding: 60px 0 70px;
  }
}

.saas-framework-header {
  margin-bottom: 48px;
}

.saas-framework-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-framework-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-framework-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-framework-narrative {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 960px;
}

.saas-framework-narrative p {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-framework-narrative p {
    font-size: 14.5px;
    line-height: 23px;
  }
}

/* Framework Flow with Connectors */
.saas-framework-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}

.saas-framework-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  align-items: center;
}

.saas-framework-card {
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 24px 22px;
  min-height: 175px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-framework-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.saas-framework-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saas-framework-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 10px;
  padding-right: 36px;
}

.saas-framework-card p {
  font-size: 13.5px;
  line-height: 21px;
  color: #555053;
  margin: 0;
}

.saas-framework-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  transform: rotate(90deg);
}

.saas-framework-connector::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: #FF7E3C;
  z-index: 1;
}

.saas-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #FF7E3C;
  position: relative;
  z-index: 2;
}

.saas-framework-bottom p {
  font-size: 15px;
  line-height: 24px;
  color: #555053;
  margin: 0;
}

@media (max-width: 1024px) {
  .saas-framework-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .saas-framework-connector {
    display: none;
  }
}

@media (max-width: 640px) {
  .saas-framework-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================
   Deliberate SaaS Marketing Section
   (Be Present When Customers Start Looking.)
   ========================================================== */
.saas-deliberate-section {
  background-color: #111111;
  color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-deliberate-section {
    padding: 60px 0 70px;
  }
}

.saas-deliberate-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 52px;
}

.saas-deliberate-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-deliberate-title {
  color: #ffffff !important;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-deliberate-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

/* Grid Layout */
.saas-deliberate-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 56px;
}

.saas-deliberate-row--four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.saas-deliberate-row--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 870px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1024px) {

  .saas-deliberate-row--four,
  .saas-deliberate-row--three {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    gap: 20px;
  }
}

@media (max-width: 640px) {

  .saas-deliberate-row--four,
  .saas-deliberate-row--three {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-deliberate-card {
  background-color: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.saas-deliberate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.16);
}

.saas-deliberate-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  background-color: #262626;
}

.saas-deliberate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saas-deliberate-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  color: #ffffff;
  margin: 0 0 10px;
}

.saas-deliberate-card p {
  font-size: 13.5px;
  line-height: 21px;
  color: #9CA3AF;
  margin: 0;
}

/* Bottom Quote & Dash */
.saas-deliberate-footer {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.saas-deliberate-quote {
  font-size: 17.5px;
  line-height: 27px;
  color: #ffffff !important;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-deliberate-quote {
    font-size: 15px;
    line-height: 24px;
  }
}

.saas-deliberate-dash {
  width: 32px;
  height: 3px;
  background-color: #FF7E3C;
  border-radius: 2px;
  margin: 18px auto 0;
}

/* ==========================================================
   Why SaaS Teams Need A Marketing Foundation Section
   (The Faster The Product Evolves, The More Important The Foundation Becomes.)
   ========================================================== */
.saas-foundation-section {
  background-color: #FAF9F5;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-foundation-section {
    padding: 60px 0 70px;
  }
}

.saas-foundation-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 36px;
}

.saas-foundation-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-foundation-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-foundation-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-foundation-lead {
  font-size: 16px;
  line-height: 26px;
  color: #555053;
  margin: 0;
}

/* Horizontal Pills Bar */
.saas-foundation-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 44px;
  max-width: 960px;
}

.saas-foundation-pill {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #171717;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-foundation-dot {
  color: #FF7E3C;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .saas-foundation-pills {
    gap: 8px;
  }

  .saas-foundation-pill {
    font-size: 13px;
    padding: 6px 14px;
  }

  .saas-foundation-dot {
    display: none;
  }
}

/* Callout */
.saas-foundation-callout {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}

.saas-foundation-callout h3 {
  font-size: 20px;
  font-weight: 700;
  color: #171717;
  line-height: 1.4;
  margin: 0 0 12px;
}

.saas-foundation-callout p {
  font-size: 14.5px;
  line-height: 23px;
  color: #555053;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-foundation-callout h3 {
    font-size: 17px;
  }
}

/* 2-Column List */
.saas-foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 980px;
  margin: 0 auto 52px;
}

@media (max-width: 991px) {
  .saas-foundation-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 600px;
  }
}

.saas-foundation-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-foundation-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.saas-foundation-bar {
  width: 4px;
  height: 16px;
  background-color: #FF7E3C;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 4px;
}

.saas-foundation-item p {
  font-size: 14.5px;
  line-height: 22px;
  color: #3F3F46;
  font-weight: 500;
  margin: 0;
}

/* Divider & Footer */
.saas-foundation-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-width: 980px;
  margin: 0 auto 36px;
}

.saas-foundation-footer {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-foundation-footer__sub {
  font-size: 14.5px;
  line-height: 23px;
  color: #71717A;
  margin: 0;
}

.saas-foundation-footer__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #171717;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-foundation-footer__title {
    font-size: 16px;
  }
}

/* ==========================================================
   SaaS Growth Challenges Section
   (The Product Is Only One Part Of The Growth Equation.)
   ========================================================== */
.saas-equation-section {
  background-color: #D2E4D9;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-equation-section {
    padding: 60px 0 70px;
  }
}

.saas-equation-header {
  margin-bottom: 48px;
}

.saas-equation-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-equation-title {
  color: #3C443F;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-equation-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-equation-lead {
  font-size: 16px;
  line-height: 26px;
  color: #4A564E;
  margin: 0;
}

/* 2-Column Grid */
.saas-equation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .saas-equation-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.saas-equation-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-equation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.saas-equation-num {
  color: #FF7E3C;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: inline-block;
}

.saas-equation-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 14px;
}

.saas-equation-card p {
  font-size: 14.5px;
  line-height: 23px;
  color: #555053;
  margin: 0 0 10px;
}

.saas-equation-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .saas-equation-card {
    padding: 24px 22px;
  }

  .saas-equation-card h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   Use Cases Across SaaS Teams Section
   (Different Teams. One Product Story.)
   ========================================================== */
.saas-teams-section {
  background-color: #111111;
  color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-teams-section {
    padding: 60px 0 70px;
  }
}

.saas-teams-header {
  margin-bottom: 40px;
}

.saas-teams-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-teams-title {
  color: #ffffff !important;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .saas-teams-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-teams-lead {
  font-size: 16px;
  line-height: 26px;
  color: #D4D4D8 !important;
  margin: 0;
  max-width: 860px;
}

/* Banner Media */
.saas-teams-media {
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(232, 249, 54, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 40px;
  background-color: #1A1A1A;
}

.saas-teams-banner-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* List of Rows */
.saas-teams-list {
  display: flex;
  flex-direction: column;
}

.saas-teams-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.saas-teams-row:first-child {
  padding-top: 12px;
}

.saas-teams-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FF7E3C;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.saas-teams-content {
  display: flex;
  flex-direction: column;
}

.saas-teams-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.saas-teams-content p {
  font-size: 14px;
  line-height: 22px;
  color: #A1A1AA;
  margin: 0 0 6px;
}

.saas-teams-content p:last-child {
  margin-bottom: 0;
}

/* Footer Note */
.saas-teams-footer {
  padding-top: 32px;
}

.saas-teams-footer p {
  font-size: 15.5px;
  line-height: 25px;
  color: #D4D4D8;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-teams-row {
    grid-template-columns: 32px 1fr;
    gap: 16px;
    padding: 18px 0;
  }

  .saas-teams-num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .saas-teams-content h3 {
    font-size: 16.5px;
  }

  .saas-teams-footer p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ==========================================================
   From Product To Pipeline Section
   (Turn What You Build Into Something The Market Can Understand.)
   ========================================================== */
.saas-pipeline-section {
  background-color: #ffffff;
  padding: 90px 0 100px;
}

@media (max-width: 767px) {
  .saas-pipeline-section {
    padding: 60px 0 70px;
  }
}

.saas-pipeline-top-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
  margin-bottom: 52px;
}

@media (max-width: 991px) {
  .saas-pipeline-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
}

.saas-pipeline-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-pipeline-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .saas-pipeline-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-pipeline-narrative {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-pipeline-narrative p {
  font-size: 15px;
  line-height: 24px;
  color: #555053;
  margin: 0;
}

.saas-pipeline-narrative p strong {
  color: #171717;
  font-weight: 700;
  margin-top: 6px;
  display: inline-block;
}

.saas-pipeline-media {
  width: 100%;
}

.saas-pipeline-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.saas-pipeline-img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

/* Stack of 7 Progression Cards */
.saas-pipeline-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  margin: 0 auto 44px;
  width: 100%;
}

.saas-pipeline-card {
  background-color: #E6F5EC;
  border-radius: 14px;
  padding: 18px 28px;
  width: 100%;
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saas-pipeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.saas-pipeline-stage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saas-pipeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF7E3C;
  flex-shrink: 0;
}

.saas-pipeline-stage h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #171717;
  margin: 0;
}

.saas-pipeline-question {
  font-size: 14.5px;
  color: #3F5247;
  font-weight: 500;
  margin: 0;
}

.saas-pipeline-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  color: #9CA3AF;
}

.saas-pipeline-connector svg {
  stroke: #9CA3AF;
}

/* Footer Note */
.saas-pipeline-footer {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-pipeline-footer p {
  font-size: 15px;
  line-height: 24px;
  color: #555053;
  margin: 0;
}

.saas-pipeline-footer strong {
  color: #171717;
  font-weight: 700;
}

@media (max-width: 767px) {
  .saas-pipeline-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 20px;
  }

  .saas-pipeline-stage h3 {
    font-size: 15.5px;
  }

  .saas-pipeline-question {
    font-size: 13.5px;
    padding-left: 20px;
  }
}

/* ==========================================================
   SaaS Final Banner & FAQ Section
   ========================================================== */
.saas-final-banner-subdesc {
  color: #d4d4d8 !important;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 32px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .saas-final-banner-subdesc {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 24px;
  }
}

.saas-faq-section {
  background-color: #EDE8D0;
  padding: 90px 0 110px;
}

@media (max-width: 767px) {
  .saas-faq-section {
    padding: 60px 0 70px;
  }
}

.saas-faq-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px;
}

.saas-faq-header .ai-eyebrow {
  background-color: #E8F936;
  color: #171717;
  margin-bottom: 20px;
}

.saas-faq-title {
  color: #4A4447;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 767px) {
  .saas-faq-title {
    font-size: 28px;
    line-height: 1.3;
  }
}

.saas-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.saas-faq-item {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 22px 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 767px) {
  .saas-faq-item {
    padding: 18px 20px;
    border-radius: 14px;
  }
}

.saas-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.saas-faq-question span {
  font-size: 16.5px;
  font-weight: 600;
  color: #171717;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .saas-faq-question span {
    font-size: 15px;
  }
}

.saas-faq-toggle-icon {
  font-size: 20px;
  font-weight: 400;
  color: #555053;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saas-faq-answer {
  display: none;
  padding-top: 14px;
}

.saas-faq-item.is-open .saas-faq-answer {
  display: block;
}

.saas-faq-answer p {
  font-size: 14.5px;
  line-height: 23px;
  color: #555053;
  margin: 0;
}