@font-face {
  font-family:DM Sans;
  src:url(dm-sans-400.ttf) format("truetype");
  font-display:swap
}
@font-face {
  font-family:DM Sans;
  src:url(dm-sans-700.ttf) format("truetype");
  font-weight:700;
  font-display:swap
}
:root {
  --blue:#0850fe;
  --navy:#00174f;
  --pink:#c9007f;
  --line:#dce3f0
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  font:1rem/1.6 "DM Sans",sans-serif;
  color:var(--navy);
  background:#fff
}
a {
  color:inherit;
  text-underline-offset:.25em
}
a:focus-visible,summary:focus-visible {
  outline:3px solid var(--pink);
  outline-offset:5px
}
.skip {
  position:absolute;
  top:-100px;
  z-index:10;
  background:#fff;
  padding:1rem
}
.skip:focus {
  top:0
}
.project-bar {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:10px 4%;
  font-size:.7rem;
  background:var(--navy);
  color:white
}
.project-bar a {
  text-decoration:none
}
header {
  max-width:1400px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:auto;
  padding:28px 5%
}
.logo {
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-.05em;
  text-decoration:none
}
.logo>span:first-child {
  font-weight:400
}
.dot {
  font-size:2rem;
  color:var(--pink)
}
nav {
  display:flex;
  gap:32px;
  font-size:.85rem
}
nav a {
  text-decoration:none
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  background:var(--pink);
  color:#fff;
  text-decoration:none;
  padding:16px 26px;
  border-radius:7px;
  font-weight:700;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-2px);
  background:#a80068
}
.small {
  padding:10px 20px;
  font-size:.85rem
}
.hero {
  padding:75px 5% 0;
  background:radial-gradient(ellipse at 85% 25%,#ecedff 0,transparent 43%),radial-gradient(ellipse at 5% 50%,#fff0f8 0,transparent 43%),#fff;
  text-align:center
}
.eyebrow {
  font-size:.7rem;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--blue)
}
h1 {
  font-size:clamp(2.7rem,5.7vw,5.4rem);
  line-height:1.08;
  letter-spacing:-.055em;
  margin:24px auto;
  max-width:1150px
}
h1 span {
  color:var(--blue)
}
.lead {
  max-width:680px;
  margin:24px auto;
  font-size:1.1rem;
  color:#4c5c7a
}
.actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin:35px 0 65px
}
.text-link {
  font-size:.9rem;
  font-weight:700
}
.outcomes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:1150px;
  margin:auto;
  text-align:left;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.outcomes p {
  margin:0;
  padding:24px;
  font-weight:700;
  font-size:1.1rem
}
.outcomes p+p {
  border-left:1px solid var(--line)
}
.outcomes span {
  display:block;
  font-size:.6rem;
  letter-spacing:.13em;
  color:#586785;
  margin-bottom:8px
}
.platform,.integrations,.questions {
  max-width:1400px;
  margin:auto;
  padding:95px 5%
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 80px
}
.section-heading>.eyebrow {
  grid-column:1/-1
}
h2 {
  font-size:clamp(2rem,3.7vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.045em;
  margin:15px 0 30px
}
.section-heading>p:last-child {
  max-width:460px;
  align-self:center;
  color:#4c5c7a
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px
}
.feature-grid article {
  padding:30px;
  border-radius:14px;
  background:#e8edff;
  transition:transform .25s
}
.feature-grid article:nth-child(2) {
  background:#ffedf7
}
.feature-grid article:nth-child(3) {
  background:#edf8f5
}
.feature-grid article:hover {
  transform:translateY(-5px)
}
.index {
  font-size:.75rem;
  color:#52617c
}
.feature-grid h3 {
  font-size:1.6rem;
  letter-spacing:-.04em;
  line-height:1.25;
  margin-top:35px
}
.feature-grid p {
  font-size:.9rem;
  color:#40516e;
  min-height:90px
}
.tag {
  border:1px solid #9eacc2;
  padding:6px 10px;
  border-radius:20px;
  font-size:.65rem
}
.integrations {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  border-top:1px solid var(--line)
}
.integrations>div>p:not(.eyebrow) {
  color:#4c5c7a
}
.integrations li {
  padding:8px 0
}
.integration-card {
  padding:40px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f7f9ff;
  text-align:center
}
.integration-card>div {
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  margin:35px 0
}
.integration-card>div>span:nth-child(odd) {
  border:1px solid var(--line);
  background:white;
  padding:15px 25px;
  border-radius:8px;
  width:80%
}
.integration-card strong {
  padding:22px;
  color:white;
  background:var(--blue);
  border-radius:10px;
  font-size:1.7rem;
  width:100%
}
.questions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line);
  padding:20px 0
}
summary {
  cursor:pointer;
  font-weight:700;
  padding:5px
}
details p {
  font-size:.9rem;
  color:#4c5c7a
}
.cta {
  background:var(--navy);
  color:white;
  text-align:center;
  padding:85px 5%
}
.cta>.eyebrow {
  color:#afc5ff
}
.cta h2 {
  margin-bottom:35px
}
footer {
  max-width:1400px;
  margin:auto;
  padding:28px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.75rem;
  color:#4c5c7a
}
@media(max-width:700px) {
  .project-bar>span {
    display:none
  }
  header {
    flex-wrap:wrap;
    padding:18px 5%
  }
  nav {
    order:3;
    width:100%;
    justify-content:center;
    gap:25px
  }
  .hero {
    padding-top:45px
  }
  .actions {
    gap:20px;
    flex-wrap:wrap
  }
  .outcomes,.feature-grid,.integrations,.questions,.section-heading {
    grid-template-columns:1fr
  }
  .outcomes p+p {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .outcomes p {
    padding:18px 5px
  }
  .platform,.integrations,.questions {
    padding:55px 5%;
    gap:28px
  }
  .section-heading {
    gap:0
  }
  .feature-grid p {
    min-height:0
  }
  .integration-card {
    padding:25px
  }
  .cta {
    padding:60px 5%
  }
  footer {
    flex-direction:column
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
  .button:hover,.feature-grid article:hover {
    transform:none
  }
}
.integration-card {
  padding:0;
  background:transparent;
  border:0;
  display:flex;
  align-items:center
}
.integration-card img {
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line)
}
footer {
  flex-wrap:wrap
}
footer>p:last-child {
  width:100%;
  margin:0;
  font-size:.7rem
}

/* Customer stories: all quotes remain readable without JavaScript. */
.testimonials { max-width: 1400px; margin: auto; padding: 85px 5%; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.25fr; gap: 35px 70px; }
.testimonial-heading > p:last-child { color: #4c5c7a; font-size: .9rem; max-width: 320px; }
.quote-stage { min-width: 0; }
.quote-card { margin: 0 0 24px; padding: 36px; background: #edf1ff; border-radius: 16px; }
.quote-card[hidden], .quote-controls[hidden] { display: none; }
.quote-card blockquote { margin: 0 0 35px; font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.5; letter-spacing: -.02em; }
.quote-card blockquote p { margin: 0; }
.quote-card figcaption { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; }
.quote-card figcaption span { color: #4c5c7a; font-size: .75rem; }
.quote-controls { grid-column: 2; display: flex; align-items: center; gap: 18px; }
.quote-controls button { border: 1px solid #9eacc2; border-radius: 50%; width: 46px; height: 46px; background: white; color: var(--navy); font: inherit; cursor: pointer; }
.quote-controls button:disabled { opacity: .4; cursor: default; }
.quote-controls button:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.quote-controls p { font-size: .75rem; min-width: 100px; text-align: center; margin: 0; }
[data-reveal-state="waiting"] { opacity: 0; transform: translateY(14px); }
[data-reveal-state="shown"] { opacity: 1; transform: none; transition: opacity 550ms ease, transform 550ms ease; }
@media(max-width:700px) { .testimonials { grid-template-columns: 1fr; padding: 55px 5%; gap: 20px; } .quote-controls { grid-column: 1; } .quote-card { padding: 25px; } }
@media(prefers-reduced-motion:reduce) { [data-reveal-state] { opacity: 1; transform: none; transition: none; } }

/* Live text and layout replace the low-resolution integration bitmap. */
.integration-visual { width: 100%; padding: 22px; border-radius: 20px; background: linear-gradient(140deg, #f6f2ff, #eff4ff 60%, #fff4fa); border: 1px solid #dce3f0; }
.integration-tools { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: start; }
.tool-panel { min-width: 0; padding: 18px; border: 1px solid #dce3f0; border-radius: 12px; background: #fff; box-shadow: 0 7px 24px #18326508; }
.tool-panel:nth-child(2) { margin-top: 35px; }
.tool-panel h3 { margin: 0 0 20px; font-size: .6rem; line-height: 1.4; letter-spacing: .1em; color: #52617c; }
.data-connectors { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px dashed #c6d0e5; }
.data-connectors li { color: #1744bd; background: #edf1ff; border: 1px solid #d9e2ff; border-radius: 4px; font-size: .57rem; font-weight: 700; padding: 5px 7px; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.tool-list li { display: flex; align-items: center; gap: 8px; color: #253757; font-weight: 700; font-size: .7rem; line-height: 1.3; }
.tool-mark { display: inline-grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 6px; font-size: 1rem; background: #f3f5fa; }
.analytics { color: #a85d00; } .heap { color: #a51b68; } .mixpanel { color: #5d3ad1; } .segment { color: #167357; } .hubspot, .zapier { color: #b64113; } .slack { color: #6c285b; } .helpscout, .intercom, .salesforce { color: #0864b1; } .zendesk { color: #135448; }
.connection-spine { display: flex; align-items: center; justify-content: center; height: 42px; gap: 12px; color: #385bd5; }
.connection-spine span { width: 22%; height: 1px; background: #b8c8f1; }
.connected-result { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #bfcff7; border-radius: 12px; background: #fff; text-align: left; }
.result-mark { display: grid; place-items: center; flex: 0 0 36px; height: 36px; background: #0850fe; color: white; border-radius: 9px; font-weight: 700; }
.connected-result strong { display: block; font-size: .9rem; }
.connected-result div > span { display: block; font-size: .6rem; color: #52617c; }
.connected-indicator { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #216548; font-size: .55rem; }
.connected-indicator i { width: 5px; height: 5px; border-radius: 50%; background: #218459; }
@media(max-width:1000px) and (min-width:701px) { .integration-tools { grid-template-columns: 1fr; } .tool-panel:nth-child(2) { margin-top: 0; } .business-tools { grid-template-columns: 1fr 1fr; } }
@media(max-width:400px) { .integration-visual { padding: 14px; } .integration-tools { gap: 9px; } .tool-panel { padding: 12px; } .tool-list li { font-size: .6rem; gap: 5px; } .tool-mark { flex-basis: 18px; width: 18px; height: 18px; } .connected-indicator { display: none; } }

.integration-card > .integration-visual { display: block; margin: 0; }
.connected-result strong { padding: 0; background: transparent; color: var(--navy); border-radius: 0; width: auto; }

.integration-visual .tool-list li { padding: 0; }
@media(min-width:1100px) { .business-tools { grid-template-columns: 1fr 1fr; } }