/* Talktide UI/UX v145 — twenty measured refinement rounds.
   This layer follows the spacing discipline of the Dolphlink reference while
   retaining Talktide's corporate green, content, assets and page structure. */

:root {
  --tt-v145-green: #3ab15d;
  --tt-v145-green-hover: #31a653;
  --tt-v145-teal: #e8f7f3;
  --tt-v145-line: #cfe8da;
  --tt-v145-ink: #171a18;
  --tt-v145-copy: #536159;
  --tt-v145-content: 1344px;
  --tt-v145-reading: 760px;
  --tt-v145-radius: 22px;
  --tt-v145-section-pad: 72px;

  /* Retire legacy dark-green brand aliases. The enterprise green is now the
     only chromatic accent across the current site and all popup surfaces. */
  --g: var(--tt-v145-green);
  --g-d: var(--tt-v145-green);
  --g-dd: var(--tt-v145-green);
  --g-deep: var(--tt-v145-green);
  --baiwu-blue-primary: var(--tt-v145-green);
  --baiwu-blue-deep: var(--tt-v145-green);
  --legal-brand: var(--tt-v145-green);
  --legal-brand-deep: var(--tt-v145-green);
  --sme-blue: var(--tt-v145-green);
  --sme-blue-deep: var(--tt-v145-green);
}

/* Legacy modules used hard-coded greens for labels and iconography. Unify
   those visible accents without recolouring neutral body copy. */
.home-page :is(
  .hero .eyebrow,
  .hero .hero-check i,
  .hero .btn-ghost,
  .feature-arrow,
  .feature-product-action-secondary,
  .flow .lk,
  .flow .voice-ui,
  .flow .mini-action,
  .flow .ok,
  .industry-card .lbl,
  .industry-card .more,
  .solution-eyebrow,
  .solution-link,
  .proc-support .ic,
  .compl-grid .ic,
  .cmpl-tags span
) {
  color: var(--tt-v145-green) !important;
}

.home-page .solution-detail b {
  color: var(--tt-v145-green) !important;
}

/* 01 — One deterministic content frame and balanced desktop gutters. */
.home-page main > section > .wrap,
.home-page footer.site > .wrap,
.home-page .flow > .wrap,
.home-page .proc > .wrap,
.home-page .story > .wrap,
.home-page .compliance-inner {
  width: min(100%, var(--tt-v145-content)) !important;
  max-width: var(--tt-v145-content) !important;
  margin-inline: auto !important;
  padding-inline: 32px !important;
}

/* 02 — A consistent vertical rhythm replaces section-by-section drift. */
.home-page .features-stack,
.home-page .flow,
.home-page .proc,
.home-page .story,
.home-page .compliance-showcase {
  padding-top: var(--tt-v145-section-pad) !important;
  padding-bottom: var(--tt-v145-section-pad) !important;
}

/* 03 — Major section headings share one width, alignment and cadence. */
.home-page :is(
  .feature-section-head,
  .flow-section-head,
  .process-section-head,
  .story-section-head,
  .compliance-head,
  .contact-build-head
) {
  width: min(100%, 1180px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 38px !important;
  padding: 0 28px !important;
  text-align: center !important;
}

/* 04 — Fixed type roles keep headings and paragraphs predictable. */
.home-page :is(
  .feature-section-head,
  .flow-section-head,
  .process-section-head,
  .story-section-head,
  .compliance-head,
  .contact-build-head
) h2 {
  max-width: 980px !important;
  margin: 16px auto 0 !important;
  font-size: 40px !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

.home-page :is(
  .feature-section-head,
  .flow-section-head,
  .process-section-head,
  .story-section-head,
  .compliance-head,
  .contact-build-head
) p {
  max-width: var(--tt-v145-reading) !important;
  margin: 18px auto 0 !important;
  color: var(--tt-v145-copy) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* 05 — Eyebrows and dividers use the same visual grammar everywhere. */
.home-page :is(
  .feature-section-eyebrow,
  .section-heading-eyebrow,
  .compliance-eyebrow,
  .contact-build-eyebrow
) {
  color: var(--tt-v145-green) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
}

.home-page :is(.section-heading-divider, .feature-section-divider, .compliance-ornament) {
  width: 214px !important;
  margin: 20px auto 0 !important;
}

body.home-page main :is(.section-heading-divider, .feature-section-divider, .compliance-ornament) {
  width: 190px !important;
  margin: 16px auto 0 !important;
}

body.home-page main .section-heading-v133 .section-heading-divider {
  width: 190px !important;
  margin: 16px auto 0 !important;
}

body.home-page main :is(
  .feature-section-head,
  .flow-section-head,
  .process-section-head,
  .story-section-head,
  .compliance-head,
  .contact-build-head
) p {
  margin-top: 14px !important;
}

/* 06 — Header dimensions and navigation targets match the reference density. */
header.site {
  height: 60px !important;
  min-height: 60px !important;
  padding-inline: clamp(24px, 2.4vw, 40px) !important;
}

header.site .brand {
  min-height: 60px !important;
}

header.site .brand img {
  width: 180px !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

header.site nav {
  gap: 10px !important;
}

header.site nav > a,
header.site .lang-btn,
header.site .btn.btn-primary {
  min-height: 40px !important;
  padding-block: 0 !important;
}

body.tt-scrolled header.site {
  box-shadow: 0 10px 28px rgba(22, 51, 35, .10) !important;
}

/* 07 — Hero regains the generous, reference-like reading frame. */
.home-page .hero-stage .hero {
  min-height: 660px !important;
  height: 660px !important;
}

.home-page .hero-stage .hero .hcopy {
  width: min(54%, 780px) !important;
  max-width: 780px !important;
  min-height: 660px !important;
  padding: 68px 48px 62px clamp(48px, 5vw, 76px) !important;
  align-content: center !important;
}

.home-page .hero-stage .hero .hcopy h1 {
  max-width: 660px !important;
  margin-top: 24px !important;
  font-size: 52px !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.home-page .hero-stage .hero .hcopy .lead {
  max-width: 650px !important;
  margin-top: 22px !important;
  font-size: 17px !important;
  line-height: 1.62 !important;
}

/* 08 — Hero benefits and CTAs form a cleaner two-column decision block. */
.home-page .hero-checks {
  max-width: 650px !important;
  margin-top: 28px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px 24px !important;
}

.home-page .hero-check {
  min-height: 34px !important;
}

.home-page .hero .cta-row {
  margin-top: 28px !important;
  gap: 14px !important;
}

.home-page .hero .cta-row .btn {
  min-width: 210px !important;
  min-height: 50px !important;
}

/* 09 — Time, metrics and partner proof become one compact support band. */
.home-page .hero-times {
  padding: 18px 0 10px !important;
}

.home-page .hero-times .clocks {
  width: min(calc(100% - 64px), 1060px) !important;
  max-width: 1060px !important;
  min-height: 40px !important;
}

.home-page .stats {
  padding: 10px 0 22px !important;
}

.home-page .stats .wrap {
  min-height: 84px !important;
}

.home-page .trust {
  padding: 24px 0 30px !important;
}

.home-page .trust .tt {
  margin-bottom: 18px !important;
}

/* 10 — Partner marks are clear but no longer dominate the page rhythm. */
.home-page .partner-marquee {
  min-height: 76px !important;
}

.home-page .partner-group {
  gap: 16px !important;
}

.home-page .partner-group img {
  width: 132px !important;
  height: 76px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

.home-page .region-transition {
  height: 48px !important;
}

/* 11 — Product section density is reduced without shrinking its content. */
.home-page .features-stack {
  padding-bottom: 54px !important;
}

body.home-page main > .region-transition + .features-stack {
  padding-top: var(--tt-v145-section-pad) !important;
}

.home-page .feature-section-head {
  margin-bottom: 34px !important;
}

.home-page .feature-rotator-stage {
  width: min(calc(100% - 64px), 1040px) !important;
  max-width: 1040px !important;
  height: 488px !important;
}

/* 12 — Product cards use a stable image/copy split and aligned actions. */
.home-page .feature-face {
  width: 100% !important;
  height: 448px !important;
  min-height: 448px !important;
  grid-template-columns: 48% 52% !important;
  border-radius: var(--tt-v145-radius) !important;
}

.home-page .feature-face .fcopy {
  padding: 34px 38px !important;
}

.home-page .feature-face .fcopy h2 {
  margin-top: 12px !important;
  font-size: 28px !important;
  line-height: 1.16 !important;
}

.home-page .feature-face .flist {
  margin-top: 18px !important;
  gap: 12px !important;
}

.home-page .feature-product-actions {
  margin-top: 20px !important;
}

.home-page .feature-rotator-hint {
  width: fit-content !important;
  margin: 12px auto 0 !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, .56) !important;
  border: 1px solid rgba(58, 177, 93, .18) !important;
  border-radius: 999px !important;
}

/* 13 — Conversation journey cards become easier to scan and less tall. */
.home-page .flow-section-head {
  margin-bottom: 34px !important;
}

.home-page .flow-journey {
  margin-top: 0 !important;
}

.home-page .flow-steps,
.home-page .flow .bubbles {
  gap: 16px !important;
}

.home-page .flow .bubbles {
  margin-top: 20px !important;
}

.home-page .flow .bubble {
  padding: 18px !important;
  border-radius: 16px !important;
}

.home-page .flow .travel-card img {
  max-height: 116px !important;
}

/* 14 — Process steps align content, icons and support outcomes. */
.home-page .process-section-head {
  margin-bottom: 34px !important;
}

.home-page .proc-steps {
  border-radius: var(--tt-v145-radius) var(--tt-v145-radius) 0 0 !important;
  overflow: hidden !important;
}

.home-page .pstep {
  min-height: 264px !important;
  padding: 30px !important;
}

.home-page .p-art {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  right: 24px !important;
  bottom: 22px !important;
  color: var(--tt-v145-green) !important;
  font-size: 44px !important;
  background: transparent !important;
}

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

.home-page .proc-support {
  min-height: 76px !important;
  padding-block: 14px !important;
}

/* 15 — Customer story gets tighter copy columns and balanced image weight. */
.home-page .story-section-head {
  margin-bottom: 34px !important;
}

.home-page .story-grid {
  min-height: 440px !important;
  height: 440px !important;
  grid-template-columns: 36% 64% !important;
  border-radius: var(--tt-v145-radius) !important;
}

.home-page .story .scol {
  padding: 30px 32px !important;
}

.home-page .story .sov {
  padding: 30px !important;
}

/* 16 — Compliance cards are compact, aligned and visibly interactive. */
.home-page .compliance-head {
  margin-bottom: 34px !important;
}

.home-page .compl-grid {
  width: min(100%, 1040px) !important;
  gap: 16px !important;
}

.home-page .cmpl {
  min-height: 238px !important;
  padding: 28px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.home-page .cmpl:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(58, 177, 93, .48) !important;
  box-shadow: 0 18px 38px rgba(35, 111, 63, .12) !important;
}

body.home-page main .compliance-showcase .cmpl {
  min-height: 0 !important;
  padding: 22px !important;
}

body.home-page main .compliance-showcase .cmpl-head {
  margin-bottom: 12px !important;
}

body.home-page main .compliance-showcase .cmpl-head .ic {
  width: 42px !important;
  height: 42px !important;
}

body.home-page main .compliance-showcase .cmpl > p {
  margin-top: 6px !important;
  line-height: 1.55 !important;
}

body.home-page main .compliance-showcase .cmpl-tags {
  margin-top: 10px !important;
}

body.home-page main .compliance-showcase .cmpl-action {
  min-height: 28px !important;
  margin-top: 10px !important;
}

/* 17 — Regional contact panel loses excess blank space. */
.home-page .contact-build {
  min-height: 0 !important;
  padding: 72px 32px 80px !important;
}

.home-page .contact-build-panel {
  width: min(100%, 1180px) !important;
  min-height: 0 !important;
  padding: 44px !important;
  border-radius: var(--tt-v145-radius) !important;
}

.home-page .contact-build-head {
  margin-bottom: 34px !important;
}

.home-page .contact-team-grid {
  gap: 18px !important;
}

.home-page .contact-person {
  min-height: 148px !important;
  padding: 24px !important;
}

/* 18 — Footer hierarchy is clearer and closer to the header's density. */
footer.site,
.home-page footer.site {
  padding-top: 36px !important;
  padding-bottom: 20px !important;
  border-radius: 26px 26px 0 0 !important;
}

footer.site .foot-top {
  gap: 34px !important;
}

footer.site .foot-bottom {
  margin-top: 24px !important;
  padding-top: 18px !important;
}

/* 19 — Floating support stays available without covering every module. */
.home-page #dlpk-chat.is-scrolled .dcp-nudge {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(12px, -50%) scale(.96) !important;
}

.home-page #dlpk-chat.is-scrolled #dlpk-bubble {
  box-shadow: 0 12px 30px rgba(38, 129, 69, .24) !important;
}

.home-page .fx-to-top,
.home-page #dlpk-bubble {
  width: 52px !important;
  height: 52px !important;
}

/* 20 — Responsive, keyboard and motion behavior share one quality floor. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid rgba(58, 177, 93, .72) !important;
  outline-offset: 4px !important;
}

:where(#features, #flow, #story, #compliance, #cta) {
  scroll-margin-top: 76px;
}

@media (max-width: 1199px) {
  :root {
    --tt-v145-section-pad: 64px;
  }

  .home-page .hero-stage .hero {
    min-height: 640px !important;
    height: 640px !important;
  }

  .home-page .hero-stage .hero .hcopy {
    min-height: 640px !important;
    padding: 56px 40px !important;
  }

  .home-page .hero-stage .hero .hcopy h1 {
    font-size: 44px !important;
  }

  .home-page :is(
    .feature-section-head,
    .flow-section-head,
    .process-section-head,
    .story-section-head,
    .compliance-head,
    .contact-build-head
  ) h2 {
    font-size: 36px !important;
  }

  .home-page .feature-rotator-stage {
    width: min(calc(100% - 48px), 980px) !important;
  }
}

@media (max-width: 900px) {
  header.site {
    height: 58px !important;
    min-height: 58px !important;
    padding-inline: 16px !important;
  }

  header.site .brand {
    min-height: 58px !important;
  }

  header.site .brand img {
    width: 156px !important;
  }

  .home-page .hero-stage .hero,
  .home-page .hero-stage .hero .hcopy {
    min-height: 700px !important;
    height: 700px !important;
  }

  .home-page .hero-stage .hero .hcopy {
    width: min(62%, 610px) !important;
  }

  .home-page .story-grid {
    grid-template-columns: 42% 58% !important;
  }

  body.home-page main .proc .proc-steps,
  body.home-page main .proc .proc-support {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.home-page main .proc .pstep,
  body.home-page main .proc .psup {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
}

@media (max-width: 700px) {
  :root {
    --tt-v145-section-pad: 52px;
  }

  .home-page main > section > .wrap,
  .home-page footer.site > .wrap,
  .home-page .flow > .wrap,
  .home-page .proc > .wrap,
  .home-page .story > .wrap,
  .home-page .compliance-inner {
    padding-inline: 18px !important;
  }

  .home-page .hero-stage .hero,
  .home-page .hero-stage .hero .hcopy {
    min-height: 0 !important;
    height: auto !important;
  }

  .home-page .hero-stage .hero .hcopy {
    width: calc(100% - 24px) !important;
    margin: 12px !important;
    padding: 28px 20px 24px !important;
  }

  .home-page .hero-stage .hero .hcopy h1 {
    margin-top: 20px !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
  }

  .home-page .hero-stage .hero .hcopy .lead {
    margin-top: 18px !important;
    font-size: 16px !important;
  }

  .home-page .hero-checks {
    margin-top: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .home-page .hero .cta-row {
    margin-top: 22px !important;
    grid-template-columns: 1fr !important;
  }

  .home-page .hero .cta-row .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .home-page :is(
    .feature-section-head,
    .flow-section-head,
    .process-section-head,
    .story-section-head,
    .compliance-head,
    .contact-build-head
  ) {
    margin-bottom: 30px !important;
    padding-inline: 0 !important;
  }

  .home-page :is(
    .feature-section-head,
    .flow-section-head,
    .process-section-head,
    .story-section-head,
    .compliance-head,
    .contact-build-head
  ) h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  .home-page :is(
    .feature-section-head,
    .flow-section-head,
    .process-section-head,
    .story-section-head,
    .compliance-head,
    .contact-build-head
  ) p {
    margin-top: 16px !important;
    font-size: 16px !important;
  }

  .home-page .hero-times .clocks {
    width: calc(100% - 28px) !important;
  }

  .home-page .partner-group img {
    width: 120px !important;
    height: 68px !important;
  }

  .home-page .region-transition {
    height: 34px !important;
  }

  .home-page .feature-rotator-stage {
    width: calc(100% - 28px) !important;
    height: auto !important;
  }

  .home-page .feature-face {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .home-page .feature-face .fcopy {
    padding: 26px 22px !important;
  }

  .home-page .feature-face .fcopy h2 {
    font-size: 26px !important;
  }

  .home-page .flow-journey {
    margin-inline: -18px !important;
    padding-inline: 18px !important;
  }

  .home-page .proc-steps,
  .home-page .proc-support,
  .home-page .story-grid,
  .home-page .compl-grid,
  .home-page .contact-team-grid {
    grid-template-columns: 1fr !important;
  }

  .home-page .pstep {
    min-height: 250px !important;
    padding: 26px !important;
  }

  .home-page .story-grid {
    height: auto !important;
    min-height: 0 !important;
  }

  .home-page .story .simg {
    min-height: 360px !important;
  }

  .home-page .story .simg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.home-page main .story .story-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.home-page main .story .story-body .scol {
    min-height: 0 !important;
    padding: 26px 24px !important;
  }

  .home-page .cmpl {
    min-height: 220px !important;
    padding: 24px !important;
  }

  .home-page .contact-build {
    padding: 52px 14px 60px !important;
  }

  .home-page .contact-build-panel {
    padding: 30px 20px !important;
  }

  .home-page .contact-person {
    min-height: 0 !important;
    padding: 22px !important;
  }

  body.home-page #dlpk-chat {
    right: 10px !important;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  footer.site,
  .home-page footer.site {
    border-radius: 20px 20px 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}