/* Custom styles to match Growth.cx brand */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #f9fafb;
  color: #1e2024;
}

/* Brand Colors */
.brand-green {
  color: #b9ff50;
}
.bg-brand-green {
  background-color: #b9ff50;
}
.border-brand-green {
  border-color: #b9ff50;
}
.brand-dark {
  color: #1e2024;
}
.bg-brand-dark {
  background-color: #1e2024;
}

/* Glow */
.hero-glow {
  box-shadow: 0 0 80px -10px #b9ff50;
}

/* Links */

.brand-link a {
  color: #1e2024;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #b9ff50;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}
.brand-link:hover,
.brand-link a:hover {
  color: #4b5563;
  text-decoration-color: #a8e642;
}

/* Highlight Cards */
.highlight-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05),
    0 4px 6px -4px rgb(0 0 0 / 0.05);
}

/* Modal */
.modal-overlay {
  transition: opacity 0.3s ease;
}
.modal-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Whitepaper TOC */
.toc-whitepaper p {
  font-size: 18px;
  line-height: 28px;
  color: #374151;
}
.toc-whitepaper h2,
.toc-whitepaper h3,
.toc-whitepaper h4,
.toc-whitepaper h5 {
  color: black;
  line-height: 1.4;
  margin: 1.2em 0 0.5em;
}
.toc-whitepaper h2 {
  font-size: 28px;
}
.toc-whitepaper h3 {
  font-size: 24px;
}
.toc-whitepaper h4 {
  font-size: 20px;
}
.toc-whitepaper h5 {
  font-size: 18px;
}
.toc-whitepaper ul {
  list-style: none;
  padding-left: 15px;
  padding-top: 20px;
}
.toc-whitepaper .list-space {
  list-style: none;
  padding-left: 15px;
  padding-top: 20px;
  display: flex ;
  flex-direction: column;
  gap: 15px;
}
.toc-whitepaper ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 28px;
  color: #374151;
}
.toc-whitepaper ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #a8e642;
  border-radius: 100%;
}

/* Checklist */
.card-checklist p {
  font-size: 16px;
  line-height: 24px;
}
.card-checklist ul {
  list-style: none;
  padding-left: 15px !important;
  padding-top: 20px !important;
}
.card-checklist ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
}
.card-checklist ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #a8e642;
  border-radius: 100%;
}

/* Checklist Card */
.checklist-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.checklist-number {
  font-size: 1.875rem; /* 30px */
  font-weight: 900;
  color: #b9ff50;
  -webkit-text-stroke: 1.5px #1e2024;
  text-stroke: 1.5px #1e2024;
}

/* Checklist Table */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}
 table {
  width: 100%;
  margin-top: 1rem;
  min-width: 500px !important;
  border-collapse: collapse;
}
 table th,
 table td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  text-align: left;
}
 table th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* Intro Section */
.checklist-intro-section h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
.checklist-intro-section p {
  font-size: 16px;
  line-height: 24px;
  color: #374151;
  margin-bottom: 1rem;
}
.checklist-intro-section h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
.example-block {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f3f4f6;
  border-left: 4px solid #b9ff50;
  border-radius: 0.25rem;
}
.example-block p {
  margin-bottom: 5px !important;
}

h2 {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
}
h3 {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
}
p {
  font-size: 16px;
  line-height: 24px;
}
ol {
  list-style: decimal !important;
  padding-left: 10px;
}
@media screen and (max-width: 600px) {
  h2 {
    font-size: 30px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
  }
}
@media screen and (max-width: 1000px) {
  h2 {
    font-size: 36px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
  }
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
  margin: 32px 0;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-card {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

.stats-value {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #b9ff50 !important; /* brand-green */
  margin: 0;
}

.stats-text {
  margin-top: 8px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.1;
}
.strategy-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.strategy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05),
    0 4px 6px -4px rgb(0 0 0 / 0.05);
}

.cpt-text-block h2 {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  padding-bottom: 12px;
}
.cpt-text-block h3 {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  padding-bottom: 10px;
}
.cpt-text-block p {
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 10px !important;
}
.cpt-text-block a {
  color: #1e2024;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #b9ff50;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

.cpt-text-block a:hover {
  color: #4b5563;
  text-decoration-color: #a8e642;
}
.cpt-text-block ul {
  list-style: none;
  padding-left: 15px !important;
  padding-top: 10px !important;
}
.cpt-text-block ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
}
.cpt-text-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #a8e642;
  border-radius: 100%;
}
@media screen and (max-width: 600px) {
  .cpt-text-block h2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }
}
@media screen and (max-width: 1000px) {
  .cpt-text-block h2 {
    font-size: 36px !important;
    line-height: 40px !important;
  }
}

.text_block_wrapper h2 {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  padding-bottom: 30px !important ;
  color: black !important;
  text-align: center;
}
.text_block_wrapper h3 {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  padding-bottom: 10px;
   color: black !important;
  padding-top: 30px;
   border-top: 1px solid gainsboro;
   margin-top: 30px;  
}
.text_block_wrapper h4 {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  padding-bottom: 10px;
   color: black !important;
  
}
.text_block_wrapper .example {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  padding: 10px 0px;
   color: black !important;
}
.text_block_wrapper p {
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 10px !important;
  color: #374151 ;
}
.text_block_wrapper strong {
font-weight: 700 !important;
  color: black !important;
}
.text_block_wrapper a {
  color: #1e2024;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #b9ff50;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}
.text_block_wrapper img {
 width: 100% !important;
 margin: 10px 0px !important;
}

.text_block_wrapper a:hover {
  color: #4b5563;
  text-decoration-color: #a8e642;
}
.text_block_wrapper ul {
  list-style: none;
  padding-left: 15px !important;
  padding-top: 10px !important;
}

.text_block_wrapper ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #a8e642;
  border-radius: 100%;
}
.text_block_wrapper ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
}
.text_block_wrapper .border-img {

 border: 1px solid #adadc9c8 !important;
 border-radius: 10px !important;
} 
 /* .text_block_wrapper  img {
 border: 1px solid #adadc9c8 !important;
 border-radius: 10px !important;
} */
 .text_block_wrapper img{
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
  
 }
.text_block_wrapper .card-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
  margin: 32px 0;
}
.text_block_wrapper .list-alpha {
  list-style: lower-alpha;
  padding-left: 24px !important;
  padding-top: 10px !important;
}


.text_block_wrapper .list-alpha li {
  position: relative;
  padding-left: 0px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 24px;

  color: black;
}
.text_block_wrapper .list-alpha li::before {
  display: none;
}


@media (min-width: 768px) {
  .text_block_wrapper .card-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.text_block_wrapper .card-2 .card {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

.text_block_wrapper .card-2 .card p:nth-child(1) {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: black !important; /* brand-green */
  margin: 0;
}

.text_block_wrapper .card-2 .card p:nth-child(1)  {
  margin-top: 8px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.1;
}

@media screen and (max-width: 600px) {
  .text_block_wrapper h2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }
.text_block_wrapper ul {
  list-style: none;
  padding-left: 0px !important;
  padding-top: 10px !important;
}
}
@media screen and (max-width: 1000px) {
  .text_block_wrapper h2 {
    font-size: 36px !important;
    line-height: 40px !important;
  }
}
.template-text-block h2 {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  padding-bottom: 30px !important ;
  color: black !important;
  text-align: center;
}
.template-text-block h3 {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  padding-bottom: 10px;
   color: black !important;
   text-align: center;
    padding-top: 30px;
   border-top: 1px solid gainsboro;
   margin-top: 30px;  
   
}
.template-text-block h4 {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  padding-bottom: 10px;
   color: black !important;
   text-align: center;
}
.template-text-block .example {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  padding: 10px 0px;
   color: black !important;
}
.template-text-block p {
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 10px !important;
  color: #374151 ;
  text-align: center;
}
.template-text-block strong {
font-weight: 700 !important;
  color: black !important;
}
.template-text-block a {
  color: #1e2024;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #b9ff50;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}
.template-text-block img {
 width: 100% !important;
 margin: 10px 0px !important;
}

.template-text-block a:hover {
  color: #4b5563;
  text-decoration-color: #a8e642;
}
.template-text-block ul {
  list-style: none;
  padding-left: 15px !important;
  padding-top: 10px !important;
}

.template-text-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #a8e642;
  border-radius: 100%;
}
.template-text-block ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
 
}
.template-text-block .check-list {
  list-style: none;
  padding-left: 0px !important;
  padding: 10px 0px !important;
  display: grid;
 grid-template-columns: 1fr;

 column-gap: 20px;
 border-bottom: 1px solid #e5e7eb;
 margin: 0px 0px 20px 0px;
}
@media (min-width: 768px) {
 .template-text-block .check-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.template-text-block .check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;  /* same as w-6 */
    height: 18px; /* same as h-6 */
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}
.template-text-block .check-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
   text-align: left;
}
.template-text-block .list-card-bg {
  list-style: none;
  padding-left: 0px !important;
  padding: 10px 0px !important;
  display: grid;
 grid-template-columns: 1fr;
gap: 24px;
 margin: 0px 0px 20px 0px;
}
.template-text-block .list-card-bg.sigle-row{
   display: grid;
 grid-template-columns: 1fr;
}
@media (min-width: 768px) {
 .template-text-block .list-card-bg {
    grid-template-columns: repeat(2, 1fr);
  }
  .template-text-block .list-card-bg.sigle-row{
  
 grid-template-columns: 1fr !important;
}
}


.template-text-block .list-card-bg li::before {
  content: "✓";
  position: absolute;
  left: 24px;
  top: 24px;
   font-size: 16px;
  line-height: 24px;
  color: #374151;
   width: 16px;
  height: 24px;
  background-color: transparent;
  border-radius: 0%;
 
}
.template-text-block .list-card-bg li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
   text-align: left;
   background-color: white;
   border: 1px solid #e5e7eb ;
   border-radius: 12px;
   padding: 24px 24px 24px 44px;
}
.template-text-block .number-list {
  counter-reset: step;
  list-style: none;
  padding-left: 0px !important;
  padding: 10px 0px !important;
  display: grid;
 grid-template-columns: 1fr;
gap: 24px;
 margin: 0px 0px 20px 0px;
}


.template-text-block .number-list li::before {
   content: counter(step)". "; /* use counter name */
  position: absolute;
  left: 28px;
  top: 24px;
   font-size: 16px;
  line-height: 24px;
  color: black;
  font-weight: 700;
   width: 16px;
  height: 24px;
  background-color: transparent;
  border-radius: 0%;
 
}
.template-text-block .number-list li {
   counter-increment: step; /* increment counter */
  position: relative;
  padding-left: 20px;
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
   text-align: left;
   background-color: white;
   border: 1px solid #e5e7eb ;
   border-radius: 12px;
   padding: 24px 24px 24px 44px;
}
.template-text-block .card-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
  margin: 32px 0;
}
.template-text-block .list-alpha {
  list-style: lower-alpha;
  padding-left: 24px !important;
  padding-top: 10px !important;
}


.template-text-block .list-alpha li {
  position: relative;
  padding-left: 0px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 24px;

  color: black;
}
.template-text-block .list-alpha li::before {
  display: none;
}


@media (min-width: 768px) {
  .template-text-block .card-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.template-text-block .card-2 .card {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

.template-text-block .card-2 .card p:nth-child(1) {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: black !important; /* brand-green */
  margin: 0;
}

.template-text-block .card-2 .card p:nth-child(1)  {
  margin-top: 8px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.1;
}

@media screen and (max-width: 600px) {
  .template-text-block h2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }
.template-text-block ul {
  list-style: none;
  padding-left: 0px !important;
  padding-top: 10px !important;
}

}
@media screen and (max-width: 1000px) {
  .template-text-block h2 {
    font-size: 36px !important;
    line-height: 40px !important;
  }
  .template-text-block .faq-question{
  display: flex ;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px !important;
  font-size: 18px;
  font-weight: 600;
  color: black;
  text-align: left;
  margin-bottom: 0px ;
  padding-bottom: 0px !important;
  align-items: center;
}
}
.template-text-block .faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.template-text-block .faq-item{
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background:white;
  padding: 24px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid #e5e7eb ;
  cursor: pointer;
}
.template-text-block .faq-question{
  display: flex ;
  flex-direction: row;
  justify-content: space-between;
gap: 20px !important;
  font-size: 20px;
  font-weight: 700;
  color: black;
  text-align: left;
  margin-bottom: 0px ;
  padding-bottom: 0px !important;
  align-items: center;
}
.template-text-block .faq-answer{
  padding-top: 10px;
  text-align: left;
  display: none;
}


strong,b {
font-weight: 700 !important;
  color: black !important;
}
.sub-nav-link{
  color: #4b5563;
  border-bottom: 2px solid transparent !important;
  font-weight: 500;
  padding: 16px;
}
.sub-nav-link:hover{
  color: black;
 
}
.toc-h2 h2{
 margin: 0px !important;
  margin-bottom: 32px !important;
  text-align: center !important;
}