/*
 * Section flow palette.
 * Keeps adjacent sections distinct without abrupt dark/light reversals.
 */
:root {
  --flow-ivory: #fffdf9;
  --flow-sand: #f6f2e9;
  --flow-mist: #eef2f3;
  --flow-cloud: #f7f8f7;
  --flow-line: rgba(25, 46, 65, .12);
  --flow-gold-line: rgba(201, 168, 76, .62);
}

.worry-section {
  background: linear-gradient(180deg, #f1f2f3 0%, #f3f4f3 76%, var(--flow-ivory) 100%) !important;
}
.worry-answer {
  margin-top: -1px !important;
  padding-top: 52px !important;
  padding-bottom: 64px !important;
  color: var(--navy) !important;
  background:
    linear-gradient(180deg, rgba(239, 242, 243, .96) 0%, var(--flow-ivory) 100%) !important;
  border-top: 1px solid var(--flow-line) !important;
  box-shadow: none !important;
}
.worry-answer::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 24px;
  background: var(--gold);
}
.worry-answer h3,
.worry-answer p {
  color: var(--navy) !important;
}
.worry-answer h3 span {
  color: #8b6b20 !important;
  background: linear-gradient(transparent 68%, rgba(232, 201, 122, .52) 68%);
}

.persona-section,
.strengths,
.comparison,
.how,
.pricing,
.faq,
.contact {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--flow-line);
}
.persona-section::before,
.strengths::before,
.comparison::before,
.how::before,
.pricing::before,
.faq::before,
.contact::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1px;
  left: max(24px, 8vw);
  width: clamp(44px, 6vw, 84px);
  height: 3px;
  background: var(--flow-gold-line);
}

.persona-section {
  background: var(--flow-ivory) !important;
}
.persona-card {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(25, 46, 65, .13) !important;
}
.persona-note {
  color: var(--navy) !important;
  background: #ece7db !important;
}
.persona-note p {
  color: #25364b !important;
}

.strengths {
  background: var(--flow-sand) !important;
}
.strength-card {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(25, 46, 65, .12) !important;
}
.strength-card:hover {
  background: #ffffff !important;
}

.comparison {
  background: var(--flow-mist) !important;
}
.comp-table-wrap {
  padding: clamp(12px, 2vw, 24px);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(25, 46, 65, .11);
}
.comp-table thead th:nth-child(2),
.comp-table td:nth-child(2) {
  background: rgba(201, 168, 76, .11) !important;
}

section.how,
.how {
  padding-top: 100px !important;
  background: #f7f3eb !important;
}
.how .section-title,
.how .section-title em {
  color: var(--navy) !important;
}
.how .section-lead {
  color: #384556 !important;
}
.how-list {
  margin-top: 56px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.how-item {
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid rgba(25, 46, 65, .12);
}
.how-item:hover {
  background: #fff !important;
}

.pricing {
  background: var(--flow-ivory) !important;
}
.acc-item {
  background: #fff !important;
  border-color: rgba(25, 46, 65, .14) !important;
}
.guarantee-banner {
  color: var(--navy) !important;
  background: #ece7dc !important;
  border: 1px solid rgba(201, 168, 76, .5) !important;
}
.guarantee-text h3,
.guarantee-text p {
  color: var(--navy) !important;
}
.guarantee-text h3 em {
  color: #8b6b20 !important;
}
.guarantee-badge {
  color: #765b1e !important;
  background: rgba(255, 255, 255, .64);
}

.faq {
  background: var(--flow-cloud) !important;
}
.faq-item {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(25, 46, 65, .12) !important;
}

.contact {
  color: var(--navy) !important;
  background: linear-gradient(180deg, #eef2f3 0%, #e8edef 100%) !important;
}
.contact .section-title,
.contact .section-title em,
.contact .section-lead {
  color: var(--navy) !important;
}
.contact .section-eyebrow {
  color: #80631f !important;
}
.contact-form-wrap {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(25, 46, 65, .13);
  box-shadow: 0 18px 50px rgba(25, 46, 65, .08) !important;
}
.contact .form-group label {
  color: var(--navy) !important;
}
.contact .form-group input,
.contact .form-group select,
.contact .form-group textarea {
  color: #152438 !important;
  background: #fff !important;
  border-color: rgba(25, 46, 65, .2) !important;
}
.contact .btn-primary {
  color: #fff !important;
  background: var(--navy) !important;
}
.contact .btn-primary:hover {
  background: var(--navy-mid) !important;
}

@media (max-width: 768px) {
  .worry-answer {
    padding-top: 38px !important;
    padding-bottom: 46px !important;
  }
  .persona-section::before,
  .strengths::before,
  .comparison::before,
  .how::before,
  .pricing::before,
  .faq::before,
  .contact::before {
    left: 24px;
  }
  .how-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .comp-table-wrap {
    padding: 8px;
  }
}