/* Talktide module rhythm v144
   Dolphlink-inspired surface cadence translated into the Talktide brand system:
   white + corporate-green rule, then pale teal, repeated throughout the site. */

:root {
  --tt-brand: #3ab15d;
  --tt-brand-hover: #31a653;
  --tt-brand-soft: #dff4e6;
  --tt-teal: #e8f7f3;
  --tt-teal-soft: #f2fbf8;
  --tt-white: #ffffff;
  --tt-ink: #171a18;
  --tt-body: #5b6861;
  --tt-line: #cfe8da;
  --green: var(--tt-brand);
  --brand: var(--tt-brand);
  --accent: var(--tt-brand);
}

html,
body {
  background: var(--tt-white);
}

/* Corporate-green controls replace the previous dark-green treatments. */
.skip-link,
.site .btn.btn-primary,
.home-page .fx-to-top,
.home-page #dlpk-chat .dcp-fab,
#dlpk-chat .dcp-fab,
.home-page .feature-product-action:not(.feature-product-action-secondary),
.popup-cta {
  background: var(--tt-brand) !important;
  border-color: var(--tt-brand) !important;
}

.skip-link:hover,
.site .btn.btn-primary:hover,
.home-page .fx-to-top:hover,
.home-page #dlpk-chat .dcp-fab:hover,
#dlpk-chat .dcp-fab:hover,
.home-page .feature-product-action:not(.feature-product-action-secondary):hover {
  background: var(--tt-brand-hover) !important;
  border-color: var(--tt-brand-hover) !important;
}

/* The navigation rail is already corporate green, so its conversion button
   stays white for contrast instead of becoming green-on-green. */
header.site .btn.btn-primary {
  color: var(--tt-brand) !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

header.site .btn.btn-primary:hover {
  color: var(--tt-brand-hover) !important;
  background: #f3fbf6 !important;
  border-color: #f3fbf6 !important;
}

.home-page .feature-face .chip,
.home-page #heroChatPrompt,
#heroChatPrompt,
#dlpk-chat .dcp-head,
#dlpk-chat .dcp-msg.is-user,
.about-modal .about-close,
.product-detail-modal .about-close {
  color: #fff !important;
  background: var(--tt-brand) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .56) !important;
  box-shadow: 0 14px 34px rgba(58, 177, 93, .22) !important;
}

.home-page #heroChatPrompt:hover,
#heroChatPrompt:hover,
#dlpk-chat .dcp-head:hover {
  background: var(--tt-brand-hover) !important;
}

.about-modal-backdrop {
  background: rgba(58, 177, 93, .24) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Homepage surface sequence: teal / white+rule / teal / white+rule. */
.home-page .hero-stage {
  background: var(--tt-white) !important;
  border-bottom: 0 !important;
}

.home-page .region-transition {
  height: clamp(54px, 5vw, 74px) !important;
  min-height: 0 !important;
  background: var(--tt-white) !important;
  background-image: none !important;
  border-top: 6px solid var(--tt-brand);
  border-bottom: 1px solid var(--tt-line);
}

.home-page .region-transition::before,
.home-page .region-transition::after {
  display: none !important;
  content: none !important;
}

.home-page .features-stack,
.home-page .proc,
.home-page .compliance-showcase {
  background: var(--tt-teal) !important;
  background-image: none !important;
  border-top: 1px solid rgba(58, 177, 93, .18);
  border-bottom: 1px solid rgba(58, 177, 93, .18);
}

.home-page .flow,
.home-page .story,
.home-page .contact-build {
  background: var(--tt-white) !important;
  background-image: none !important;
  border-top: 6px solid var(--tt-brand);
  border-bottom: 1px solid var(--tt-line);
}

.home-page .features-stack .feature-face,
.home-page .proc .process-grid,
.home-page .compliance-showcase .cmpl,
.home-page .contact-build-panel,
.home-page .story .story-grid,
.home-page .flow .flow-journey {
  border-color: var(--tt-line) !important;
}

.home-page .features-stack .feature-face,
.home-page .proc .pstep,
.home-page .compliance-showcase .cmpl,
.home-page .contact-build-panel {
  background-color: rgba(255, 255, 255, .96) !important;
}

.home-page .flow .bubble,
.home-page .flow .fsteps,
.home-page .story .story-grid {
  background-color: var(--tt-white) !important;
}

/* One brand accent language for headings, rules, icons and interactive states. */
.home-page .section-heading-v133 .section-heading-eyebrow,
.home-page .section-heading-v133 .section-heading-divider,
.home-page .section-heading-v133 .section-heading-divider > .ti,
.home-page .feature-section-eyebrow,
.home-page .solution-kicker,
.home-page .cmpl-kicker,
.home-page .contact-build-eyebrow,
.home-page .flow .ic,
.home-page .proc .pn,
.home-page .feature-face .fic,
.home-page .feature-face .more,
.home-page .story a {
  color: var(--tt-brand) !important;
}

.home-page .section-heading-v133 .section-heading-divider::before,
.home-page .section-heading-v133 .section-heading-divider::after {
  background: var(--tt-brand) !important;
  box-shadow: none !important;
}

.home-page .section-heading-v133 *,
.home-page .section-heading-v133 *::before,
.home-page .section-heading-v133 *::after {
  text-shadow: none !important;
}

.home-page .hero-times .clocks,
.home-page header.site .nav-rail,
.home-page header.site .nav-shell {
  background-color: var(--tt-brand) !important;
}

.home-page .hero-times .clocks {
  border-color: var(--tt-brand) !important;
  box-shadow: none !important;
}

/* The footer keeps its established layout but uses the actual corporate green. */
footer.site,
.home-page footer.site {
  color: #fff !important;
  background: var(--tt-brand) !important;
  background-image: none !important;
  border-top: 6px solid var(--tt-brand-hover) !important;
  box-shadow: none !important;
}

footer.site::before,
footer.site::after {
  background-image: none !important;
}

footer.site .fcol h4,
footer.site .foff b,
footer.site .fcol a,
footer.site .foot-brand p,
footer.site .foff p,
footer.site .foot-bottom,
footer.site .foot-bottom button {
  color: #fff !important;
  text-shadow: none !important;
}

footer.site .fcol a:hover,
footer.site .foot-bottom button:hover {
  color: #fff !important;
  text-decoration: underline;
}

footer.site .foot-social a {
  color: #fff !important;
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

footer.site .foot-bottom {
  border-top-color: rgba(255, 255, 255, .28) !important;
}

/* Products, solutions, About and legal pages use the same module cadence. */
.main-shell {
  background: var(--tt-white);
}

body:not(.home-page) .main-shell .subpage-hero {
  color: #fff;
  background-color: #3ab15d !important;
  background-image: none !important;
}

body:not(.home-page) .main-shell .subpage-hero :is(h1, p, .section-label, .sol-back) {
  color: #fff !important;
  text-shadow: none !important;
}

body:not(.home-page) .main-shell .subpage-hero .section-label::before,
body:not(.home-page) .main-shell .subpage-hero .section-label::after,
body:not(.home-page) .main-shell .subpage-hero::after {
  background: rgba(255, 255, 255, .76) !important;
}

.main-shell .terms-section,
.main-shell .terms-document {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: 22px;
  background: var(--tt-white);
  box-shadow: 0 18px 44px rgba(58, 177, 93, .07);
}

.main-shell .terms-clause {
  margin: 0 !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border: 0 !important;
}

.main-shell .terms-clause:nth-of-type(odd) {
  background: var(--tt-white) !important;
  box-shadow: inset 0 5px 0 var(--tt-brand);
}

.main-shell .terms-clause:nth-of-type(even) {
  background: var(--tt-teal) !important;
}

.main-shell .about-intro,
.main-shell .privacy-intro,
.main-shell .privacy-contact {
  background: var(--tt-teal) !important;
  border-color: var(--tt-line) !important;
}

.main-shell :is(.terms-clause h2, .scn h3, .feat b, .case b, .about-intro strong, .privacy-contact a) {
  color: var(--tt-brand) !important;
}

.main-shell .terms-clause h2::before,
.main-shell .subpage-hero::after {
  background: var(--tt-brand) !important;
  box-shadow: none !important;
}

/* Product and solution detail documents repeat the same white/teal cadence. */
.popup-shell .popup-section {
  border-color: var(--tt-line) !important;
  box-shadow: 0 16px 40px rgba(58, 177, 93, .07) !important;
}

.popup-shell .popup-section:nth-of-type(odd) {
  background: var(--tt-white) !important;
  box-shadow:
    inset 0 5px 0 var(--tt-brand),
    0 16px 40px rgba(58, 177, 93, .07) !important;
}

.popup-shell .popup-section:nth-of-type(even) {
  background: var(--tt-teal) !important;
}

.popup-shell .scenario,
.popup-shell .case {
  border-color: var(--tt-line) !important;
  border-left-color: var(--tt-brand) !important;
  background: rgba(255, 255, 255, .9) !important;
}

.popup-shell :is(.scenario h3, .case b, .popup-eyebrow) {
  color: var(--tt-brand) !important;
}

.popup-cta a {
  color: var(--tt-brand) !important;
}

@media (max-width: 700px) {
  .home-page .region-transition {
    height: 40px !important;
    border-top-width: 4px;
  }

  .home-page .flow,
  .home-page .story,
  .home-page .contact-build {
    border-top-width: 4px;
  }

  .main-shell .terms-section,
  .main-shell .terms-document {
    border-radius: 16px;
  }

  .main-shell .terms-clause {
    padding: 24px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .region-transition,
  .home-page .features-stack,
  .home-page .flow,
  .home-page .proc,
  .home-page .story,
  .home-page .compliance-showcase,
  .home-page .contact-build {
    transition: none !important;
  }
}