@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --bg: #101018;
  --panel: #171720;
  --line: #2b2a38;
  --text: #f7f6fc;
  --muted: #a3a2b6;
  --purple: #8d7cff;
  --primary: #c4ff48;
  --green: #a4e6be;
  --heading: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #bbafff;
  outline-offset: 5px;
}
input:focus,
select:focus {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
img {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--heading);
  line-height: 1.17;
  letter-spacing: -0.045em;
}
h2 {
  font-size: 46px;
  font-weight: 650;
  margin-bottom: 22px;
}
h3 {
  font-size: 36px;
  font-weight: 650;
}
p {
  color: var(--muted);
}
.container {
  width: min(1160px, calc(100% - 80px));
  margin-inline: auto;
}
.section {
  padding-block: 100px;
}
.eyebrow {
  color: #b5aaff;
  font-size: 11px;
  letter-spacing: 0.17em;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.muted {
  color: #9693aa;
}
.gradient-text {
  background: linear-gradient(100deg, #bbb2ff 5%, #8e7bf8 60%, #c4a5ff);
  color: transparent;
  background-clip: text;
}
.live-dot,
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ac9aff;
  flex-shrink: 0;
}
.status-dot {
  background: #68b587;
}
.announcement {
  min-height: 36px;
  background: #242039;
  color: #d7d1f8;
  font-size: 11px;
  letter-spacing: 0.01em;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
}
.announcement a {
  font-weight: 700;
  margin-left: 12px;
}
.header {
  height: 88px;
  max-width: 1320px;
  margin: auto;
  padding-inline: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid #ffffff0b;
}
.brand {
  display: flex;
  align-items: center;
}
.header .brand img {
  width: 158px;
}
.header nav {
  display: flex;
  gap: 30px;
  font-size: 13px;
  color: #b8b5cb;
}
.header nav a:hover {
  color: white;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid transparent;
  min-height: 54px;
  padding: 15px 25px;
  border-radius: 9px;
  transition:
    transform 0.18s,
    background 0.18s,
    box-shadow 0.18s;
  line-height: 1.4;
  max-width: 100%;
  text-align: center;
}
.button:hover {
  transform: translateY(-2px);
}
.button.primary {
  background: var(--primary);
  color: #152004;
  font-weight: 800;
  border-color: #d7ff8b;
  box-shadow: 0 5px 30px #c4ff4826;
}
.button.primary:hover {
  background: #d9ff8a;
  box-shadow: 0 6px 35px #c4ff4845;
}
.button.small {
  font-size: 12px;
  min-height: 40px;
  padding: 11px 16px;
  gap: 18px;
}
.button.secondary {
  background: #ffffff07;
  border-color: #ffffff28;
}
.button span {
  font-size: 18px;
}
.skip {
  position: absolute;
  top: -100px;
  z-index: 20;
  background: var(--primary);
  padding: 10px;
}
.skip:focus {
  top: 0;
}
.hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 8px;
  background: radial-gradient(ellipse at 50% 76%, #7161d921, transparent 55%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#bcb1ff18 0.8px, transparent 0.8px);
  background-size: 21px 21px;
  mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent);
  pointer-events: none;
}
.hero-content {
  position: relative;
  text-align: center;
}
.hero .eyebrow {
  justify-content: center;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(42px, 5.1vw, 68px);
  font-weight: 750;
  line-height: 1.14;
  margin-bottom: 24px;
  letter-spacing: -0.055em;
}
.hero-description {
  font-size: 17px;
  line-height: 1.7;
  color: #b1aec1;
  margin-bottom: 29px;
}
.hero-checks {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #8f8b9f;
  font-size: 11px;
}
.hero-checks span::first-letter {
  color: #aca0e9;
}
.product-tour {
  margin-top: 58px;
}
.tabs {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 22px;
}
.tabs button {
  border: 1px solid #ffffff15;
  background: #171620;
  color: #aba6bb;
  border-radius: 7px;
  padding: 10px 16px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tabs button[aria-selected="true"] {
  background: #eeeafa;
  color: #282039;
  border-color: #eeeafa;
  box-shadow: 0 2px 20px #c1adff16;
}
.tabs button:hover {
  border-color: #a496dc;
}
.app-window {
  display: flex;
  height: 416px;
  border: 1px solid #5e526f;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 35px 80px #0005,
    0 0 60px #8a68ff10;
  background: #f5f5f9;
  color: #262339;
}
.app-sidebar {
  width: 57px;
  background: #252034;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 14px;
  padding: 18px 0;
  color: #b7accf;
  font-size: 19px;
}
.app-sidebar img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  margin-bottom: 14px;
}
.app-sidebar > span {
  height: 29px;
  width: 32px;
  display: grid;
  place-items: center;
}
.app-sidebar .selected {
  background: #7763c854;
  color: #ddd4ff;
  border-radius: 6px;
}
.sidebar-bottom {
  margin-top: auto;
  border: 1px solid #7a6b91;
  border-radius: 50%;
  font-size: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.app-main {
  min-width: 0;
  flex: 1;
}
.app-topbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: white;
  border-bottom: 1px solid #e8e6ee;
  font-size: 10px;
  color: #9b96a6;
}
.app-topbar b {
  margin-left: 10px;
  color: #555064;
  font-weight: 600;
}
.chevron {
  margin-left: 12px;
}
.app-topbar > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mini-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #ede8fa;
  color: #7965ac;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  margin-left: 12px;
}
.demo-caption {
  font-size: 10px;
  color: #7e778e;
  margin-top: 16px;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
}
.demo-caption .status-dot {
  width: 5px;
  height: 5px;
}
.tour-title {
  padding: 20px 22px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tour-title h3 {
  font: 650 17px var(--body);
  letter-spacing: -0.02em;
  margin: 0;
}
.tour-title p {
  font-size: 10px;
  margin: 4px 0 0;
  color: #97909e;
}
.mock-action {
  font-size: 9px;
  background: #786cf8;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
}
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 20px;
}
.kanban-column {
  border-top: 2px solid var(--accent);
  padding-top: 8px;
}
.column-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
}
.column-title > span {
  font-size: 9px;
  color: #8f899b;
  background: #e8e6ee;
  border-radius: 4px;
  padding: 0 5px;
}
.column-value {
  color: #9892a2;
  font-size: 9px;
  margin: 2px 0 10px;
}
.lead-card {
  border: 1px solid #e6e3eb;
  border-radius: 6px;
  background: white;
  padding: 11px;
  margin-bottom: 9px;
  box-shadow: 0 2px 2px #25133303;
  font-size: 10px;
}
.lead-card .card-person {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 600;
}
.avatar {
  height: 23px;
  width: 23px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #f0eaf9;
  color: #9c7abd;
  font-size: 9px;
  flex-shrink: 0;
}
.lead-card p {
  font-size: 9px;
  color: #8e879d;
  margin: 0 0 7px;
}
.lead-card .tag {
  background: #f1ecfa;
  color: #9679ba;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 8px;
}
.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f4f2f6;
  padding-top: 7px;
  margin-top: 8px;
  color: #9a92a6;
  font-size: 8px;
}
.card-bottom b {
  color: #676071;
}
.tag.green {
  color: #6d9b7a;
  background: #edf5ee;
}
.tag.orange {
  color: #af8e62;
  background: #fbf3e9;
}
.section-heading {
  text-align: center;
  margin-bottom: 65px;
}
.section-heading .eyebrow {
  justify-content: center;
}
.section-heading p {
  font-size: 15px;
}
.form-section {
  padding-top: 90px;
  background: radial-gradient(ellipse at 70% 50%, #56407512, transparent 65%);
}
.form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 105px;
  align-items: center;
}
.form-intro h2 {
  font-size: 47px;
}
.form-intro > p {
  max-width: 390px;
  font-size: 14px;
}
.form-points {
  margin-top: 30px;
  display: grid;
  gap: 13px;
}
.form-points > div {
  display: flex;
  gap: 14px;
  align-items: center;
}
.form-points > div > span {
  font: 11px var(--body);
  color: #a69bd0;
  border: 1px solid #393146;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.form-points p {
  font-size: 13px;
  color: #c4bed0;
  margin: 0;
}
.human-note {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  align-items: center;
  font-size: 10px;
  line-height: 1.65;
  color: #81788f;
}
.human-note b {
  font-weight: 500;
  color: #b2a8be;
}
.avatar-stack {
  display: flex;
  padding-left: 6px;
}
.avatar-stack span {
  display: grid;
  place-items: center;
  border: 2px solid #131119;
  height: 33px;
  width: 33px;
  border-radius: 50%;
  background: #76679a;
  color: #eee5ff;
  margin-left: -6px;
  font-size: 10px;
}
.avatar-stack span + span {
  background: #393145;
}
.form-card {
  background: linear-gradient(140deg, #201d2b, #1b1824);
  border: 1px solid #3e344e;
  border-radius: 16px;
  min-height: 470px;
  padding: 34px;
  box-shadow: 0 20px 70px #0002;
}
.form-card-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #a79ab8;
  margin-bottom: 17px;
}
.form-kicker {
  color: #c9bfd8;
  font-weight: 600;
}
progress {
  display: block;
  width: 100%;
  height: 3px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #383040;
  margin-bottom: 35px;
  accent-color: var(--purple);
}
progress::-webkit-progress-bar {
  background: #383040;
}
progress::-webkit-progress-value {
  background: #9a85ff;
}
progress::-moz-progress-bar {
  background: #9a85ff;
}
#question h3 {
  font-size: 25px;
  margin-bottom: 10px;
  letter-spacing: -0.035em;
}
#question .question-hint {
  font-size: 12px;
  margin-bottom: 25px;
  color: #a79ab4;
}
.field-label {
  display: block;
  font-size: 12px;
  color: #bab0c9;
  margin-bottom: 8px;
}
input,
select {
  width: 100%;
  background: #18151f;
  border: 1px solid #4e425e;
  color: #eee7f9;
  border-radius: 7px;
  padding: 13px 14px;
  font-size: 14px;
}
input::placeholder {
  color: #7f728e;
}
select {
  height: 50px;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border: 1px solid #45384f;
  background: #1c1825;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  min-height: 49px;
}
.choice:has(input:checked) {
  border-color: #a38bee;
  background: #786cf820;
}
.choice input {
  width: 14px;
  height: 14px;
  accent-color: var(--purple);
  margin: 0;
  flex-shrink: 0;
}
.choice:hover {
  border-color: #8c74ae;
}
.form-error {
  font-size: 12px;
  color: #f6aaa8;
  min-height: 18px;
  margin: 12px 0;
}
.form-navigation {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-top: 20px;
}
.form-navigation .button {
  min-height: 44px;
  padding: 12px 21px;
  font-size: 12px;
  gap: 25px;
}
.back-button {
  height: 43px;
  width: 43px;
  border-radius: 7px;
  border: 1px solid #494050;
  background: transparent;
  color: #c8badb;
  font-size: 20px;
}
.form-footnote {
  font-size: 10px;
  line-height: 1.6;
  color: #8d809c;
  margin: 25px 0 0;
  max-width: 310px;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  margin-top: 20px;
  color: #c2b6cf;
}
.consent input {
  width: 15px;
  flex-shrink: 0;
  accent-color: var(--purple);
  margin-top: 3px;
}
.success {
  text-align: center;
  padding: 25px 0;
}
.success-icon {
  display: grid;
  place-items: center;
  background: #a4e6be14;
  border: 1px solid #a4e6be50;
  color: #a4e6be;
  font-size: 28px;
  width: 64px;
  height: 64px;
  margin: 0 auto 27px;
  border-radius: 50%;
}
.success h3 {
  font-size: 29px;
}
.success p {
  font-size: 14px;
  color: #c1b7cf;
}
.success .small-note {
  font-size: 11px;
  color: #a18eaf;
  padding: 12px;
  background: #ffffff05;
  border-radius: 7px;
  margin-top: 25px;
}
.success .text-link {
  font-size: 12px;
}
.integrations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 27px;
  color: #b9b4c4;
}
.integrations > span {
  font-size: 9px;
  letter-spacing: 0.13em;
  max-width: 100px;
  line-height: 1.6;
  color: #716a80;
}
.integrations > div {
  font-size: 14px;
  white-space: nowrap;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  margin-bottom: 95px;
}
.feature-row:last-child {
  margin-bottom: 0;
}
.feature-row.reverse .feature-copy {
  order: 2;
}
.feature-copy h3 {
  margin: 17px 0 22px;
}
.feature-copy p {
  font-size: 14px;
  line-height: 1.85;
}
.feature-number {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #9c8bbd;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  font-size: 12px;
  color: #c2bacf;
  display: grid;
  gap: 11px;
}
.check-list li {
  position: relative;
  padding-left: 23px;
}
.check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #a296db;
}
.text-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: #c4ff48;
  font-size: 13px;
  font-weight: 600;
}
.text-link:hover {
  color: #e1ffad;
}
.feature-visual {
  min-height: 340px;
  border: 1px solid #393043;
  border-radius: 14px;
  background: #1b1723;
  overflow: hidden;
  box-shadow: 0 12px 50px #0002;
}
.mini-header {
  height: 62px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #3b3046;
  font-size: 12px;
}
.mini-header b {
  font-weight: 500;
}
.mini-icon {
  color: #b2a4ce;
  font-size: 21px;
}
.pill {
  font-size: 9px;
  border-radius: 20px;
  background: #65a68416;
  color: #9cc8b0;
  padding: 3px 9px;
  margin-left: auto;
  white-space: nowrap;
}
.channel-pills {
  display: flex;
  gap: 10px;
  margin: 18px 22px;
  font-size: 10px;
  color: #a298b1;
}
.channel-pills > span {
  padding: 5px 11px;
  border: 1px solid #3d3248;
  border-radius: 5px;
}
.channel-pills .active {
  background: #363044;
  color: #dfd3f3;
}
.conversation {
  padding: 0 22px 18px;
}
.chat-date {
  font-size: 8px;
  text-align: center;
  letter-spacing: 0.12em;
  color: #81738d;
  margin: 15px 0;
}
.bubble {
  font-size: 12px;
  padding: 12px 15px;
  border-radius: 10px;
  max-width: 85%;
  line-height: 1.6;
}
.bubble small {
  display: block;
  font-size: 8px;
  text-align: right;
  color: #9d8eae;
  margin-top: 4px;
}
.received {
  background: #312839;
  color: #ddd1e7;
  border-bottom-left-radius: 2px;
}
.sent {
  background: #514079;
  color: #eee6ff;
  margin: 12px 0 15px auto;
  border-bottom-right-radius: 2px;
}
.sent small {
  color: #b2a0cd;
}
.conversation-assigned {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #9e91ab;
}
.conversation-assigned .mini-avatar {
  margin: 0;
  background: #473853;
  color: #c9b6dd;
  width: 24px;
  height: 24px;
}
.conversation-assigned b {
  font-weight: 500;
  color: #ccb9db;
}
.conversation-assigned .status-dot {
  margin-left: auto;
}
.ai-visual {
  background:
    radial-gradient(ellipse at 50% 20%, #5b3b7a44, transparent 70%), #19151f;
  padding: 20px;
}
.ai-orbit {
  height: 220px;
  position: relative;
  display: grid;
  place-items: center;
}
.ai-orbit:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 170px;
  border: 1px solid #68527c45;
  border-radius: 50%;
  transform: rotate(-20deg);
}
.ai-orbit:after {
  content: "";
  position: absolute;
  width: 165px;
  height: 165px;
  border: 1px solid #68527c45;
  border-radius: 50%;
  transform: rotate(20deg);
}
.orbit-center {
  font-size: 50px;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #9c82ef, #52407c);
  border: 1px solid #c4a0ff77;
  border-radius: 23px;
  color: #f6edff;
  box-shadow: 0 0 40px #a771f233;
}
.orbit-item {
  position: absolute;
  background: #2d223a;
  border: 1px solid #63467f99;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 9px;
  z-index: 1;
  color: #c9b5db;
}
.orbit-item.one {
  top: 22px;
  left: 15px;
}
.orbit-item.two {
  right: 2px;
  top: 64px;
}
.orbit-item.three {
  left: 14px;
  bottom: 25px;
}
.ai-agent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #30243e;
  border: 1px solid #4c365e;
  border-radius: 9px;
  padding: 14px 12px;
}
.ai-avatar {
  width: 31px;
  height: 31px;
  border-radius: 7px;
  background: #78609f;
  color: #e3ceff;
  font-size: 25px;
  display: grid;
  place-items: center;
}
.ai-agent-card b {
  font-size: 11px;
  font-weight: 500;
}
.ai-agent-card small {
  display: block;
  font-size: 8px;
  color: #a992ba;
}
.handoff {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 9px;
  color: #a58ab7;
  margin-top: 16px;
}
.campaign-visual {
  padding-bottom: 15px;
}
.subtle-label {
  font-size: 8px;
  color: #9e87ad;
  margin-left: auto;
}
.mail-preview {
  background: #efeaf7;
  margin: 20px 25px 15px;
  padding: 24px;
  text-align: center;
  border-radius: 6px;
}
.mail-brand {
  font-size: 10px;
  color: #322641;
  letter-spacing: 0.13em;
  font-weight: 800;
}
.mail-brand span {
  color: #8f70b5;
}
.mail-eyebrow {
  display: block;
  color: #9a82b6;
  font-size: 8px;
  letter-spacing: 0.1em;
  margin: 20px 0 12px;
}
.mail-preview h4 {
  font-size: 25px;
  color: #372546;
  margin-bottom: 13px;
}
.mail-preview p {
  font-size: 9px;
  color: #8c7a9c;
  line-height: 1.6;
  margin-bottom: 18px;
}
.mock-button {
  display: inline-block;
  background: #9270bc;
  font-size: 9px;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
}
.campaign-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-inline: 25px;
  font-size: 10px;
  color: #b5a0c7;
}
.workflow-visual {
  padding: 27px 35px;
  background-color: #1b1723;
  background-image: radial-gradient(#baa1d61a 1px, transparent 1px);
  background-size: 15px 15px;
}
.workflow-label {
  font-size: 9px;
  letter-spacing: 0.13em;
  color: #9b81ae;
  display: block;
  text-align: center;
  margin-bottom: 25px;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #493750;
  background: #251d2e;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px #0002;
}
.flow-node small {
  font-size: 7px;
  letter-spacing: 0.12em;
  display: block;
  color: #8e779f;
}
.flow-node b {
  font-size: 11px;
  font-weight: 500;
  color: #dac9e9;
}
.flow-node > span:last-child {
  margin-left: auto;
  color: #8dba99;
  font-size: 11px;
}
.node-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.green {
  background: #74a98b15;
  color: #90bd9e;
}
.purple {
  background: #b294e523;
  color: #b79ad9;
}
.blue {
  background: #83a6ce20;
  color: #96b5da;
}
.flow-line {
  height: 24px;
  width: 1px;
  background: #a382b6;
  margin: auto;
  position: relative;
}
.flow-line:after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bd99d5;
  position: absolute;
  bottom: -2px;
  left: -2px;
}
.comparison-section {
  background: #15111d;
  border-top: 1px solid #292130;
  border-bottom: 1px solid #292130;
}
.comparison-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 105px;
  align-items: center;
}
.comparison-layout h2 {
  font-size: 48px;
}
.comparison-layout > div > p {
  font-size: 14px;
}
.toggle {
  display: flex;
  border: 1px solid #493b57;
  background: #211929;
  border-radius: 8px;
  padding: 4px;
  width: max-content;
  margin: 28px 0;
}
.toggle button {
  background: transparent;
  color: #9885a9;
  border: 0;
  border-radius: 5px;
  padding: 9px 15px;
  font-size: 11px;
}
.toggle button[aria-pressed="true"] {
  background: #7860a0;
  color: #fff;
}
.comparison-card {
  background: #1d1725;
  border: 1px solid #49345c;
  border-radius: 14px;
  padding: 25px;
}
.comparison-card-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-bottom: 1px solid #3c2c4b;
  padding-bottom: 22px;
}
.comparison-card-top > span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #a98cbc;
}
.comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #35283e;
  font-size: 12px;
  color: #d6c8e1;
}
.comparison-row span:last-child {
  font-size: 9px;
  background: #79bc9b15;
  color: #a6c9b5;
  border: 1px solid #7bb79a22;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.comparison-card.before .comparison-row span:last-child {
  background: #e3a3870c;
  color: #ba9b90;
  border-color: #a1817433;
}
.comparison-card > p {
  font-size: 11px;
  color: #a28bb1;
  margin: 20px 0 0;
}
.objection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.objection {
  background: #1b1723;
  border: 1px solid #3c3048;
  border-radius: 10px;
  padding: 25px;
  text-align: left;
  color: #ddd2e9;
  min-height: 255px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}
.objection:hover,
.objection[aria-expanded="true"] {
  background: #2a2036;
  border-color: #6e518e;
}
.objection-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9b81af;
  margin-bottom: 34px;
}
.objection-top span {
  font-size: 16px;
}
.objection b {
  font: 550 20px/1.5 var(--heading);
  letter-spacing: -0.02em;
}
.objection-answer {
  font-size: 12px;
  line-height: 1.7;
  color: #c2acd4;
  margin-top: 15px;
}
.objection-hint {
  margin-top: auto;
  padding-top: 26px;
  font-size: 10px;
  color: #9479aa;
}
.how-section {
  background: #16121c;
  text-align: center;
  border-block: 1px solid #29212f;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: left;
  margin-bottom: 40px;
}
.steps > div {
  position: relative;
}
.steps > div > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #5a416c;
  border-radius: 50%;
  color: #bda1d3;
  font-size: 12px;
  margin-bottom: 23px;
}
.steps > div:not(:last-child):after {
  content: "";
  position: absolute;
  top: 17px;
  left: 55px;
  right: -30px;
  border-top: 1px dashed #4a355a;
}
.steps h3 {
  font: 550 17px var(--heading);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.steps p {
  font-size: 13px;
  line-height: 1.8;
  max-width: 270px;
  color: #9a879f;
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 100px;
}
.faq-layout > div > p {
  font-size: 14px;
}
.faq-list details {
  border-bottom: 1px solid #372c41;
  padding: 21px 0;
}
.faq-list details:first-child {
  padding-top: 0;
}
.faq-list summary {
  font-size: 14px;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  color: #d7cbe1;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:after {
  content: "+";
  color: #9b7eb6;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.faq-list details[open] summary:after {
  content: "−";
}
.faq-list p {
  font-size: 13px;
  color: #9c88aa;
  margin: 14px 30px 0 0;
  line-height: 1.85;
}
.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 100%, #5f36703b, transparent 60%), #1f1728;
  border: 1px solid #4b315d;
  border-radius: 17px;
  padding: 65px;
  margin-bottom: 75px;
}
.final-cta h2 {
  font-size: 48px;
}
.final-cta p {
  font-size: 14px;
  color: #b09bbd;
  margin-bottom: 28px;
}
.cta-decoration {
  font-size: 300px;
  line-height: 1;
  color: #9464b827;
  position: absolute;
  right: 35px;
  bottom: 5px;
  pointer-events: none;
  transform: rotate(20deg);
}
.final-cta .button {
  position: relative;
  z-index: 1;
}
footer {
  padding-bottom: 28px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #33263c;
  padding-bottom: 30px;
  gap: 25px;
}
.footer-main p {
  margin: 0;
  font-size: 12px;
  color: #9e87aa;
}
.footer-main > a:last-child {
  color: #c7acd8;
  font-size: 12px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 23px;
  font-size: 10px;
  color: #7d6888;
}
.footer-bottom button {
  color: inherit;
  font-size: 10px;
  border: 0;
  padding: 0;
  background: none;
}
.noscript {
  position: fixed;
  bottom: 0;
  background: var(--primary);
  padding: 10px;
  width: 100%;
  text-align: center;
}
dialog {
  border: 1px solid #6c4e7e;
  color: #efe1f8;
  background: #23172e;
  border-radius: 12px;
  max-width: 520px;
  padding: 40px;
}
dialog::backdrop {
  background: #09050dcc;
  backdrop-filter: blur(6px);
}
dialog h2 {
  font-size: 28px;
}
dialog p {
  font-size: 13px;
  color: #c0a8d0;
}
.dialog-close {
  position: absolute;
  right: 15px;
  top: 10px;
  background: transparent;
  border: 0;
  color: #bca2cc;
  font-size: 25px;
}
.dialog-close-button {
  margin-top: 10px;
}
.tour-chat {
  display: grid;
  grid-template-columns: 210px 1fr;
  height: 365px;
}
.tour-chat-list {
  border-right: 1px solid #e6e0eb;
  padding: 18px 10px;
}
.tour-chat-list > strong {
  font-size: 13px;
  display: block;
  margin: 0 10px 16px;
}
.tour-chat-contact {
  display: flex;
  gap: 8px;
  padding: 12px 9px;
  margin-bottom: 6px;
  font-size: 10px;
  border-radius: 5px;
}
.tour-chat-contact.active {
  background: #eae2f8;
}
.tour-chat-contact small {
  display: block;
  color: #998ba8;
  font-size: 9px;
}
.tour-conversation {
  padding: 20px;
  background: #f8f5fb;
}
.tour-conversation .mini-header {
  border-color: #e8e0ef;
  height: 35px;
  padding: 0 0 15px;
  color: #665473;
}
.tour-conversation .bubble {
  font-size: 11px;
  max-width: 75%;
  padding: 10px 14px;
}
.tour-conversation .received {
  background: white;
  color: #7c6a8a;
  border: 1px solid #e7dfee;
  margin-top: 22px;
}
.tour-conversation .sent {
  background: #e2d6f6;
  color: #6c5384;
}
.tour-conversation .conversation-assigned {
  margin-top: 20px;
}
.tour-automation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 45px 25px;
  background-image: radial-gradient(#c9bfd5 1px, transparent 1px);
  background-size: 15px 15px;
  height: 270px;
}
.tour-automation .flow-node {
  background: white;
  border-color: #e1d9ea;
  min-width: 165px;
  padding: 16px 12px;
  display: block;
}
.tour-automation .flow-node .node-icon {
  margin-bottom: 15px;
}
.tour-automation .flow-node b {
  color: #675276;
  font-size: 10px;
}
.tour-automation .flow-node small {
  margin-bottom: 5px;
}
.flow-horizontal {
  width: 35px;
  border-top: 1px solid #a38db8;
}
.tour-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 0 22px 20px;
}
.metric {
  background: white;
  border: 1px solid #e7dfee;
  border-radius: 6px;
  padding: 13px;
}
.metric small {
  font-size: 9px;
  display: block;
  color: #a08dad;
}
.metric b {
  font-size: 23px;
  font-weight: 500;
}
.campaign-table {
  margin: 0 22px;
  border: 1px solid #e7dfee;
  border-radius: 6px;
  background: white;
}
.campaign-table > div {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 13px 15px;
  font-size: 10px;
  border-bottom: 1px solid #ece5f3;
}
.campaign-table > div:first-child {
  font-size: 8px;
  color: #a393b0;
}
.campaign-table > div:last-child {
  border: 0;
}
.campaign-table .pill {
  margin: 0;
  width: max-content;
  padding: 1px 7px;
  font-size: 8px;
}
.tour-ai {
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.tour-ai .ai-agent-card {
  background: white;
  border-color: #e6ddee;
  align-items: start;
  padding: 20px;
}
.tour-ai .ai-agent-card b {
  font-size: 12px;
}
.tour-ai .ai-agent-card small {
  font-size: 10px;
  line-height: 1.6;
  margin-top: 8px;
}
.knowledge-list {
  background: white;
  border: 1px solid #e6ddee;
  border-radius: 8px;
  padding: 18px;
  color: #79668a;
  font-size: 11px;
}
.knowledge-list h4 {
  font: 600 12px var(--body);
  margin-bottom: 15px;
}
.knowledge-list > div {
  border-top: 1px solid #eee6f4;
  padding: 12px 0;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.knowledge-list span {
  color: #9dba9e;
  font-size: 9px;
}
@media (min-width: 1500px) {
  .hero {
    padding-top: 85px;
  }
  .hero h1 {
    font-size: 72px;
  }
  .hero-content {
    width: 1160px;
  }
}
@media (max-width: 1000px) {
  .container {
    width: calc(100% - 48px);
  }
  .header {
    padding-inline: 24px;
  }
  .header nav {
    gap: 20px;
  }
  .hero h1 {
    font-size: 55px;
  }
  .form-layout {
    gap: 45px;
  }
  .form-intro h2 {
    font-size: 41px;
  }
  .form-card {
    padding: 28px;
  }
  .feature-row {
    gap: 45px;
  }
  .feature-copy h3 {
    font-size: 31px;
  }
  .comparison-layout {
    gap: 45px;
  }
  .integrations {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .integrations > span {
    max-width: none;
    width: 100%;
    text-align: center;
  }
  .faq-layout {
    gap: 45px;
  }
  .tour-automation .flow-node {
    min-width: 130px;
  }
  .app-window {
    height: 400px;
  }
  .kanban {
    gap: 8px;
    padding-inline: 15px;
  }
  .lead-card {
    padding: 9px;
  }
  .app-topbar {
    padding-inline: 15px;
  }
  .hero-checks {
    font-size: 10px;
  }
  .final-cta {
    padding: 50px;
  }
  .objection {
    padding: 20px;
  }
  .objection b {
    font-size: 18px;
  }
}
@media (max-width: 720px) {
  html {
    scroll-padding-top: 25px;
  }
  .container {
    width: calc(100% - 36px);
  }
  .section {
    padding-block: 65px;
  }
  .announcement {
    font-size: 9px;
    gap: 6px;
    min-height: 32px;
  }
  .announcement a {
    margin-left: 1px;
  }
  .header {
    height: 75px;
    padding: 0 18px;
    gap: 12px;
  }
  .header .brand img {
    width: 126px;
  }
  .header nav {
    display: none;
  }
  .header .button {
    font-size: 10px;
    padding: 10px 12px;
    gap: 7px;
    min-height: 36px;
  }
  .hero {
    padding-top: 46px;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0.13em;
    margin-bottom: 20px;
  }
  .hero h1 {
    font-size: clamp(34px, 7.9vw, 51px);
    line-height: 1.18;
    margin-bottom: 22px;
  }
  .hero-description {
    font-size: 14px;
    line-height: 1.8;
    max-width: 420px;
    margin-inline: auto;
  }
  .desktop-break {
    display: none;
  }
  .hero .button {
    font-size: 12px;
    min-height: 49px;
  }
  .hero-checks {
    flex-wrap: wrap;
    gap: 5px 15px;
    font-size: 9px;
    max-width: 310px;
    margin-inline: auto;
  }
  .product-tour {
    margin-top: 34px;
  }
  .tabs {
    gap: 5px;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 3px 1px 6px;
    scrollbar-width: thin;
    margin-bottom: 14px;
  }
  .tabs button {
    font-size: 10px;
    padding: 9px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 5px;
  }
  .app-window {
    height: 345px;
    border-radius: 8px;
  }
  .app-sidebar {
    width: 35px;
    gap: 12px;
    font-size: 15px;
    padding: 13px 0;
  }
  .app-sidebar img {
    width: 18px;
    margin-bottom: 2px;
  }
  .app-sidebar > span {
    width: 26px;
    height: 23px;
  }
  .app-topbar {
    height: 36px;
    padding: 0 10px;
    font-size: 8px;
  }
  .app-topbar b {
    margin-left: 5px;
  }
  .app-topbar .mini-avatar,
  .app-topbar > div > .status-dot,
  .chevron {
    display: none;
  }
  .app-topbar > div {
    font-size: 7px;
  }
  .tour-title {
    padding: 14px 11px;
  }
  .tour-title h3 {
    font-size: 13px;
  }
  .tour-title p {
    font-size: 8px;
    max-width: 160px;
  }
  .mock-action {
    font-size: 7px;
    padding: 4px 6px;
  }
  .kanban {
    grid-template-columns: repeat(4, minmax(126px, 1fr));
    overflow-x: auto;
    padding: 0 10px 10px;
    gap: 8px;
    min-height: 230px;
    scrollbar-width: thin;
  }
  .column-title {
    font-size: 9px;
  }
  .lead-card {
    padding: 8px;
  }
  .lead-card .card-person {
    font-size: 9px;
  }
  .demo-caption {
    font-size: 8px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .demo-caption > span:not(.status-dot) {
    display: none;
  }
  .form-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .form-intro h2 {
    font-size: 39px;
  }
  .form-intro h2 br:nth-of-type(2) {
    display: none;
  }
  .form-intro > p {
    max-width: 100%;
    font-size: 14px;
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 20px;
  }
  .form-points {
    margin-top: 20px;
    gap: 9px;
  }
  .human-note {
    display: none;
  }
  .form-card {
    padding: 26px 23px;
    min-height: 440px;
  }
  #question h3 {
    font-size: 25px;
  }
  .integrations {
    padding-block: 24px;
    gap: 12px 22px;
  }
  .integrations > div {
    font-size: 11px;
  }
  .integrations > span {
    font-size: 8px;
  }
  .section-heading {
    margin-bottom: 37px;
  }
  .section-heading h2,
  h2 {
    font-size: 33px;
  }
  .section-heading p {
    font-size: 13px;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 62px;
  }
  .feature-row.reverse .feature-copy {
    order: 0;
  }
  .feature-copy h3 {
    font-size: 31px;
    margin-top: 12px;
  }
  .feature-copy p {
    font-size: 13px;
  }
  .feature-number {
    font-size: 9px;
  }
  .feature-visual {
    min-height: 330px;
  }
  .feature-copy .check-list {
    font-size: 11px;
  }
  .feature-copy .text-link {
    font-size: 12px;
  }
  .comparison-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .comparison-layout h2 {
    font-size: 40px;
  }
  .comparison-layout h2 br:nth-of-type(1) {
    display: none;
  }
  .comparison-card {
    padding: 22px;
  }
  .comparison-row {
    font-size: 11px;
    gap: 10px;
  }
  .comparison-row span:last-child {
    font-size: 8px;
  }
  .objection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .objection {
    min-height: 170px;
    padding: 23px;
  }
  .objection b {
    font-size: 20px;
  }
  .objection b br {
    display: none;
  }
  .objection-top {
    margin-bottom: 15px;
  }
  .objection-hint {
    padding-top: 20px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .steps > div {
    padding-left: 55px;
  }
  .steps > div > span {
    position: absolute;
    left: 0;
    top: 0;
  }
  .steps > div:not(:last-child):after {
    left: 17px;
    top: 45px;
    bottom: -12px;
    right: auto;
    width: 1px;
    border-top: 0;
    border-left: 1px dashed #4a355a;
  }
  .steps h3 {
    font-size: 17px;
  }
  .steps p {
    max-width: 100%;
    font-size: 12px;
    margin: 0;
  }
  .how-section .button {
    font-size: 12px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .faq-layout h2 br {
    display: none;
  }
  .faq-layout > div > p {
    display: none;
  }
  .faq-list summary {
    font-size: 13px;
  }
  .faq-list p {
    font-size: 12px;
    margin-right: 10px;
  }
  .final-cta {
    padding: 36px 24px;
    margin-bottom: 45px;
  }
  .final-cta h2 {
    font-size: 33px;
  }
  .final-cta p {
    font-size: 12px;
    max-width: 260px;
  }
  .final-cta .eyebrow {
    font-size: 8px;
    max-width: 230px;
    line-height: 1.6;
  }
  .final-cta .button {
    font-size: 12px;
  }
  .cta-decoration {
    font-size: 180px;
    right: -50px;
    bottom: 10px;
  }
  .footer-main {
    flex-wrap: wrap;
    gap: 20px;
  }
  .footer-main .brand img {
    width: 125px;
  }
  .footer-main p {
    font-size: 10px;
    order: 3;
    width: 100%;
  }
  .footer-main > a:last-child {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 8px;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-bottom button {
    font-size: 8px;
    max-width: 100px;
    text-align: right;
  }
  .tour-chat {
    grid-template-columns: 85px 1fr;
    height: 308px;
  }
  .tour-chat-list {
    padding: 12px 5px;
  }
  .tour-chat-list > strong {
    font-size: 9px;
    margin: 0 4px 15px;
  }
  .tour-chat-contact {
    padding: 8px 4px;
    font-size: 8px;
    display: block;
  }
  .tour-chat-contact .avatar {
    display: none;
  }
  .tour-chat-contact small {
    font-size: 7px;
    margin-top: 3px;
  }
  .tour-conversation {
    padding: 12px;
  }
  .tour-conversation .mini-header {
    font-size: 10px;
  }
  .tour-conversation .bubble {
    font-size: 9px;
    max-width: 95%;
    padding: 8px;
  }
  .tour-conversation .conversation-assigned {
    font-size: 7px;
    gap: 5px;
  }
  .tour-automation {
    padding: 15px 10px;
    height: 220px;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .tour-automation .flow-node {
    min-width: 107px;
    padding: 12px 9px;
  }
  .flow-horizontal {
    min-width: 20px;
  }
  .tour-automation .flow-node b {
    font-size: 8px;
  }
  .tour-automation .flow-node small {
    font-size: 6px;
  }
  .tour-metrics {
    gap: 6px;
    padding: 0 10px 12px;
  }
  .metric {
    padding: 8px;
  }
  .metric small {
    font-size: 7px;
  }
  .metric b {
    font-size: 16px;
  }
  .campaign-table {
    margin: 0 10px;
    overflow-x: auto;
  }
  .campaign-table > div {
    grid-template-columns: 125px 70px 60px 50px;
    font-size: 8px;
    padding: 10px;
    min-width: 350px;
  }
  .tour-ai {
    padding: 0 10px;
    gap: 10px;
    grid-template-columns: 1fr;
  }
  .tour-ai .ai-agent-card {
    padding: 12px;
    align-items: center;
  }
  .tour-ai .ai-agent-card small {
    font-size: 8px;
    margin-top: 3px;
  }
  .knowledge-list {
    padding: 10px;
  }
  .knowledge-list h4 {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .knowledge-list > div {
    padding: 6px 0;
    font-size: 8px;
  }
  .knowledge-list span {
    font-size: 7px;
  }
  dialog {
    width: calc(100% - 32px);
    padding: 30px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

.plans {
  padding-top: 10px;
  text-align: center;
}
.plans .section-heading {
  margin-bottom: 35px;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.plans-grid article {
  padding: 28px;
  border: 1px solid #3c3048;
  border-radius: 10px;
  background: #19151f;
}
.plans-grid .plan-featured {
  border-color: #7d63aa;
  background: linear-gradient(135deg, #30243f, #211a2c);
}
.plan-icon {
  font-size: 25px;
  color: #b69bd8;
}
.plans-grid h3 {
  font-size: 24px;
  margin: 20px 0 15px;
}
.plans-grid p {
  font-size: 13px;
  line-height: 1.8;
  min-height: 70px;
}
.plan-focus {
  font-size: 10px;
  color: #b29ac6;
  border-top: 1px solid #44324f;
  padding-top: 18px;
  display: block;
}
.plans-note {
  font-size: 10px;
  color: #93809f;
  margin: 22px auto 18px;
}
.plans > .text-link {
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plans-grid article {
    padding: 24px;
  }
  .plans-grid p {
    min-height: 0;
  }
  .plans-grid h3 {
    margin-top: 10px;
  }
  .plans-note {
    font-size: 9px;
  }
}

/* Real product showcase and progressive motion. */
[hidden] {
  display: none !important;
}
.reading-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #786cf8, #c3a2ff, #c4ffda);
  box-shadow: 0 0 16px #b89cff80;
  pointer-events: none;
}
.hero {
  isolation: isolate;
  padding-top: 62px;
  background: radial-gradient(ellipse at 50% 52%, #6d48d82b, transparent 62%);
}
.hero-grid {
  opacity: 0.9;
  background-size: 20px 20px;
  mask-image: linear-gradient(
    90deg,
    #000,
    transparent 35%,
    transparent 65%,
    #000
  );
}
.aurora {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  animation: aurora-drift 15s ease-in-out infinite alternate;
}
.aurora-one {
  width: 430px;
  height: 650px;
  left: -250px;
  top: 40px;
  background: linear-gradient(170deg, #8158fa60, #401bac17);
  transform: rotate(-25deg);
}
.aurora-two {
  width: 460px;
  height: 720px;
  right: -280px;
  top: 60px;
  background: linear-gradient(170deg, #a06bf05e, #7a6ef50b);
  animation-delay: -8s;
}
.hero:after {
  content: "";
  position: absolute;
  top: 220px;
  left: 50%;
  width: 1100px;
  height: 650px;
  transform: translateX(-50%);
  border: 1px solid #a38aff10;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  font-weight: 750;
}
.hero h1 .gradient-text {
  background-size: 220% auto;
  background-image: linear-gradient(
    110deg,
    #d4caff,
    #9c8bff 40%,
    #c792ff 65%,
    #d4caff
  );
  animation: headline-glow 9s linear infinite;
}
.hero .primary {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 35px #c4ff4833,
    0 9px 30px #0003;
  border-color: #d7ff8b;
}
.hero .primary:after {
  content: "";
  position: absolute;
  inset: -100% -60%;
  background: linear-gradient(
    110deg,
    transparent 40%,
    #fff3 50%,
    transparent 60%
  );
  transform: translateX(-65%);
  animation: button-shine 7s 2s ease-in-out infinite;
  pointer-events: none;
}
.hero-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #d4b9ff;
  border-radius: 50%;
  box-shadow: 0 0 12px 2px #ad80fa80;
  animation: spark-rise 8s ease-in infinite;
}
.hero-sparks i:nth-child(1) {
  left: 8%;
  top: 60%;
  animation-delay: -1s;
}
.hero-sparks i:nth-child(2) {
  left: 17%;
  top: 35%;
  animation-delay: -4s;
}
.hero-sparks i:nth-child(3) {
  left: 26%;
  top: 76%;
  animation-delay: -6s;
}
.hero-sparks i:nth-child(4) {
  left: 80%;
  top: 60%;
  animation-delay: -3s;
}
.hero-sparks i:nth-child(5) {
  left: 92%;
  top: 32%;
  animation-delay: -5s;
}
.hero-sparks i:nth-child(6) {
  left: 85%;
  top: 80%;
  animation-delay: -7s;
}
.product-tour {
  margin-top: 48px;
  text-align: left;
  scroll-margin-top: 30px;
}
.tour-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 10px;
  color: #8c839f;
}
.real-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.13em;
  color: #baa5e6;
}
.real-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b5f0c7;
  box-shadow: 0 0 10px #b5f0c766;
}
.tabs {
  margin-bottom: 17px;
  gap: 8px;
  justify-content: flex-start;
}
.tabs button {
  position: relative;
  overflow: hidden;
  flex: 1;
  justify-content: center;
  padding: 13px 16px;
  font-size: 12px;
  transition:
    color 0.25s,
    background 0.25s,
    border-color 0.25s;
}
.tabs button[aria-selected="true"] {
  background: #a08bff1c;
  border-color: #a48bf885;
  color: #e2d5ff;
  box-shadow: inset 0 0 25px #9f7df216;
}
.tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--tour-progress, 0%);
  background: #c5aaff;
  box-shadow: 0 0 9px #c5aaff;
}
.real-window {
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid #9c7bea69;
  box-shadow:
    0 0 0 6px #9a76e708,
    0 30px 75px #0005,
    0 0 90px #8c61e622;
  background: #f5f5f8;
  position: relative;
}
.window-toolbar {
  height: 39px;
  background: #211b30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  color: #9b8cb6;
  font-size: 10px;
  border-bottom: 1px solid #514162;
  gap: 15px;
}
.window-dots {
  display: flex;
  gap: 6px;
}
.window-dots i {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #60516c;
}
.window-dots i:first-child {
  background: #b289ad;
}
.window-dots i:nth-child(2) {
  background: #b2a186;
}
.window-dots i:nth-child(3) {
  background: #83a795;
}
.window-path {
  color: #6e5f84;
  margin-left: 10px;
}
.capture-tag {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #b3a0d2;
  border: 1px solid #514063;
  padding: 3px 7px;
  border-radius: 4px;
}
#tour-panel {
  position: relative;
  min-height: 0;
}
.capture-stage {
  position: relative;
  aspect-ratio: 1260/570;
  overflow: hidden;
  background: #f6f5f9;
  isolation: isolate;
  animation: capture-arrive 0.65s cubic-bezier(0.18, 0.65, 0.3, 1) both;
}
.product-capture {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.capture-stage[data-capture="ai"] .product-capture {
  object-fit: contain;
  background: white;
}
.capture-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 25%;
  background: linear-gradient(90deg, transparent, #ae94f41a, transparent);
  transform: skewX(-15deg);
  pointer-events: none;
  animation: screen-sweep 1.5s 0.2s ease-out both;
}
.hotspot {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #e8dfff;
  background: #8265e9;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 15px #40306555;
  z-index: 2;
  padding: 0;
}
.hotspot:before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid #8c69e5a0;
  border-radius: 50%;
  animation: hotspot-pulse 2.7s ease-out infinite;
}
.hotspot span {
  font-size: 11px;
  font-weight: 700;
}
.hotspot:hover,
.hotspot[aria-expanded="true"] {
  background: #5e3ebb;
  box-shadow: 0 0 0 7px #9674e92b;
}
.capture-hint {
  position: absolute;
  right: 16px;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #8c6cb044;
  background: #20132bde;
  backdrop-filter: blur(12px);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 10px;
  color: #e4d0f3;
  box-shadow: 0 4px 15px #0002;
  pointer-events: none;
}
.capture-hint > span {
  font-size: 16px;
  color: #c0a0fb;
}
.hotspot-detail {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 24px;
  background: #2d2140;
  color: #eee1ff;
  border-top: 1px solid #9870cc60;
  animation: detail-in 0.25s ease-out;
}
.detail-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #7e5eb1;
  flex-shrink: 0;
  font-size: 12px;
}
.hotspot-detail strong {
  font-size: 13px;
  font-weight: 550;
}
.hotspot-detail p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #bda7d4;
}
.hotspot-detail > button {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: #c6aed9;
  padding: 5px 10px;
}
.tour-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 0 13px;
}
.tour-story {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.story-index {
  font-family: var(--heading);
  font-size: 25px;
  color: #6e588b;
  line-height: 1.3;
}
.tour-story strong {
  font-size: 14px;
  font-weight: 550;
  color: #e3d8f1;
}
.tour-story p {
  font-size: 11px;
  line-height: 1.6;
  margin: 4px 0 0;
  color: #9883af;
  max-width: 550px;
}
.tour-controls {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.tour-controls button {
  height: 34px;
  min-width: 34px;
  border: 1px solid #4e395f;
  border-radius: 6px;
  background: #21172c;
  color: #bfa2dd;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.tour-controls button:hover {
  background: #49315e;
  border-color: #9974bc;
}
.tour-controls #tour-expand {
  font-size: 10px;
  padding: 0 12px;
}
.demo-caption {
  margin-top: 7px;
  font-size: 9px;
  justify-content: flex-start;
  color: #80708e;
}
.experience-strip {
  margin-top: 58px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
  border-block: 1px solid #44304f80;
  padding-block: 55px;
}
.experience-heading h2 {
  font-size: 34px;
  margin: 0;
}
.experience-heading .eyebrow {
  font-size: 9px;
  margin-bottom: 17px;
}
.experience-options {
  display: flex;
  gap: 8px;
  margin-bottom: 25px;
}
.experience-options button {
  flex: 1;
  padding: 12px 10px;
  border: 1px solid #4e355f;
  border-radius: 7px;
  background: #201629;
  color: #927b9f;
  font-size: 9px;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
  line-height: 1.5;
}
.experience-options button span {
  flex: 1;
  color: #bfabc9;
}
.experience-options button[aria-pressed="true"] {
  border-color: #ac80d3;
  background: #483059;
  color: #d1b8e2;
}
.experience-options button[aria-pressed="true"] span {
  color: #fff;
}
.scenario-path {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
}
.scenario-path > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #c6b0d2;
  animation: scenario-step 0.6s calc(var(--step) * 0.12s) both;
}
.scenario-path i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border: 1px solid #725387;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #bfa0d4;
  font-size: 9px;
}
.scenario-path > b {
  font-size: 14px;
  color: #826092;
}
#scenario-panel h3 {
  font-size: 21px;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
#scenario-panel p {
  font-size: 12px;
  margin-bottom: 15px;
  color: #a48aaf;
}
.scenario-explore {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
}
.real-feature {
  min-height: 0;
  overflow: visible;
  background:
    radial-gradient(ellipse at 50% 40%, #64427c33, transparent 80%), #201728;
  box-shadow: 0 14px 50px #0003;
  transition:
    transform 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.real-feature:hover {
  transform: translateY(-7px);
  border-color: #8960aa;
  box-shadow:
    0 22px 60px #0005,
    0 0 35px #8860b712;
}
.feature-capture-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px;
}
.feature-capture-label > span:last-child {
  font-size: 8px;
  color: #7c638d;
  letter-spacing: 0.1em;
}
.capture-preview {
  position: relative;
  display: block;
  width: calc(100% - 30px);
  padding: 0;
  border: 1px solid #76519066;
  margin: 0 15px;
  aspect-ratio: 1.6;
  background: #f5f5f8;
  overflow: hidden;
  border-radius: 7px;
}
.capture-preview img {
  display: block;
  max-width: none;
  width: 150%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform 1.5s cubic-bezier(0.2, 0.6, 0.3, 1);
  transform-origin: 30% 50%;
}
.real-feature:hover .capture-preview img {
  transform: translateX(-17%);
}
.real-feature[data-feature="ai"] .capture-preview img {
  width: 130%;
  object-fit: contain;
}
.real-feature[data-feature="channels"] .capture-preview img {
  object-position: top left;
}
.capture-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: #382044e8;
  border: 1px solid #9772ba99;
  border-radius: 50%;
  height: 34px;
  width: 34px;
  display: grid;
  place-items: center;
  color: #dfc5f6;
  font-size: 21px;
  box-shadow: 0 4px 15px #0002;
}
.capture-preview:focus-visible {
  outline-offset: 4px;
}
.capture-feature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.capture-feature-footer b {
  font-size: 12px;
  font-weight: 550;
  color: #d3bce1;
  display: block;
}
.capture-feature-footer span {
  font-size: 10px;
  color: #9677a8;
  display: block;
  margin-top: 3px;
}
.capture-feature-footer button {
  background: #4e335f;
  border: 1px solid #805297;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  color: #dfc0f6;
}
.connection-map {
  height: 190px;
  position: relative;
  margin: 16px 0 10px;
  overflow: hidden;
}
.connection-map svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
.connection-map svg path {
  fill: none;
  stroke: #a97ad866;
  stroke-width: 1.3;
  stroke-dasharray: 5 7;
  animation: flow-dash 12s linear infinite;
  transition: opacity 0.6s;
}
.map-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 55px;
  width: 55px;
  background: linear-gradient(145deg, #8b63c5, #5a3c83);
  border: 1px solid #b693df;
  border-radius: 15px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 35px #ab6ceb25;
  transition:
    transform 0.7s,
    opacity 0.7s;
}
.map-center img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.map-node {
  position: absolute;
  font-size: 10px;
  color: #c8b0d9;
  border: 1px solid #6a4883;
  background: #30203d;
  border-radius: 7px;
  padding: 9px 12px;
  transition:
    transform 0.7s,
    border-color 0.7s,
    color 0.7s;
}
.node-chat {
  left: 1%;
  top: 12%;
}
.node-crm {
  right: 3%;
  top: 12%;
}
.node-campaign {
  left: 2%;
  bottom: 10%;
}
.node-ai {
  right: 0;
  bottom: 10%;
}
.comparison-card.before .connection-map svg path {
  opacity: 0;
}
.comparison-card.before .map-center {
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(0.65);
}
.comparison-card.before .node-chat {
  transform: translate(13px, 10px) rotate(-8deg);
}
.comparison-card.before .node-crm {
  transform: translate(-13px, 3px) rotate(8deg);
}
.comparison-card.before .node-campaign {
  transform: translate(18px, -5px) rotate(6deg);
}
.comparison-card.before .node-ai {
  transform: translate(-4px, -8px) rotate(-7deg);
}
.comparison-card.before .map-node {
  color: #a18b98;
  border-color: #584450;
}
.comparison-row {
  transition:
    background 0.3s,
    transform 0.3s;
}
.comparison-row:hover {
  background: #79519c13;
  transform: translateX(3px);
}
.objection {
  position: relative;
  overflow: hidden;
}
.objection:after {
  content: "↻";
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 85px;
  color: #a578ce09;
  transition: transform 0.7s;
}
.objection[aria-expanded="true"]:after {
  transform: rotate(180deg);
}
.objection[aria-expanded="true"] {
  box-shadow: 0 8px 30px #0003;
}
.objection-answer {
  animation: detail-in 0.35s ease-out;
}
.reveal {
  opacity: 0;
  transform: translateY(23px);
  transition:
    opacity 0.7s var(--reveal-delay, 0s),
    transform 0.7s var(--reveal-delay, 0s);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.form-card {
  transition:
    box-shadow 0.4s,
    border-color 0.4s;
}
.form-card:focus-within {
  box-shadow:
    0 0 0 5px #a36ae610,
    0 20px 80px #975ddd15;
  border-color: #9d72c8;
}
.form-card #question {
  animation: detail-in 0.3s ease-out;
}
.final-cta .cta-decoration {
  animation: slow-orbit 45s linear infinite;
}
.plan-featured {
  position: relative;
}
.plan-featured:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  border: 1px solid #b38bdd;
  pointer-events: none;
  animation: border-breathe 4s ease-in-out infinite;
}
.sticky-demo {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 32px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 11px 10px 22px;
  background: #21182beb;
  backdrop-filter: blur(20px);
  border: 1px solid #9871bb75;
  box-shadow: 0 10px 35px #0006;
  border-radius: 14px;
  z-index: 30;
  animation: sticky-in 0.35s ease-out;
}
.sticky-demo > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #b59ec5;
}
.sticky-demo b {
  font-weight: 550;
  color: #ddc5ef;
}
.sticky-demo .button {
  font-size: 11px;
  min-height: 39px;
  padding: 11px 16px;
  gap: 20px;
}
.sticky-demo .button span {
  font-size: 15px;
}
#capture-dialog {
  width: min(1320px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 24px;
  background: #1d1427;
  border-color: #9876ba;
  border-radius: 15px;
  overflow: auto;
}
#capture-dialog::backdrop {
  background: #09050de8;
  backdrop-filter: blur(14px);
}
.capture-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.capture-dialog-head h2 {
  font-size: 24px;
  margin: 9px 0 0;
  letter-spacing: -0.03em;
}
.capture-dialog-head > button {
  height: 36px;
  width: 36px;
  border: 1px solid #6b4d80;
  background: #33203f;
  color: #dbc0ec;
  border-radius: 50%;
  font-size: 24px;
  flex-shrink: 0;
}
.capture-full-scroll {
  background: #f5f5f8;
  border-radius: 8px;
  overflow: auto;
}
.capture-full-scroll img {
  display: block;
  width: 100%;
  height: auto;
}
#capture-description {
  font-size: 12px;
  color: #ac8dbd;
  margin: 17px 0 0;
}
.capture-mobile-hint {
  display: none;
}
@keyframes aurora-drift {
  to {
    transform: translateY(70px) rotate(10deg) scale(1.2);
    opacity: 0.6;
  }
}
@keyframes headline-glow {
  to {
    background-position: 220% center;
  }
}
@keyframes button-shine {
  0%,
  60% {
    transform: translateX(-65%);
  }
  90%,
  100% {
    transform: translateX(65%);
  }
}
@keyframes spark-rise {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(-180px);
  }
}
@keyframes hotspot-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes capture-arrive {
  from {
    opacity: 0.3;
    transform: translateY(10px) scale(1.015);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes screen-sweep {
  to {
    left: 115%;
  }
}
@keyframes detail-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scenario-step {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes flow-dash {
  to {
    stroke-dashoffset: -120;
  }
}
@keyframes slow-orbit {
  to {
    transform: rotate(380deg);
  }
}
@keyframes border-breathe {
  50% {
    opacity: 0.25;
  }
}
@keyframes sticky-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 1000px) {
  .experience-strip {
    gap: 35px;
  }
  .experience-heading h2 {
    font-size: 28px;
  }
  .tour-story p {
    max-width: 420px;
  }
  .hotspot-detail {
    padding: 15px;
  }
  .tabs button {
    padding: 12px;
  }
  .tour-bottom {
    gap: 15px;
  }
  .story-index {
    font-size: 22px;
  }
}
@media (max-width: 720px) {
  .hero {
    padding-top: 44px;
  }
  .aurora-one {
    left: -280px;
  }
  .aurora-two {
    right: -310px;
  }
  .hero h1 {
    font-size: clamp(34px, 7.9vw, 51px);
  }
  .product-tour {
    margin-top: 33px;
  }
  .tour-intro {
    font-size: 8px;
    margin-bottom: 12px;
    gap: 10px;
  }
  .real-badge {
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .tabs {
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 6px;
  }
  .tabs button {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 10px 12px;
    min-width: 103px;
  }
  .real-window {
    border-radius: 8px;
    box-shadow:
      0 0 0 4px #9a76e70b,
      0 20px 45px #0005;
  }
  .window-toolbar {
    height: 30px;
    padding: 0 10px;
    font-size: 8px;
    gap: 6px;
  }
  .window-dots {
    gap: 4px;
  }
  .window-dots i {
    width: 4px;
    height: 4px;
  }
  .window-path {
    display: none;
  }
  .capture-tag {
    font-size: 6px;
    padding: 2px 4px;
  }
  .capture-stage {
    aspect-ratio: 1.45;
  }
  .product-capture {
    width: 145%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    max-width: none;
  }
  .capture-stage[data-capture="automation"] .product-capture {
    width: 100%;
    object-fit: contain;
    background: #f6f5f9;
  }
  .capture-stage[data-capture="ai"] .product-capture {
    width: 100%;
    object-fit: contain;
  }
  .hotspot {
    width: 23px;
    height: 23px;
    border-width: 1px;
  }
  .hotspot span {
    font-size: 8px;
  }
  .hotspot:before {
    inset: -5px;
  }
  .capture-hint {
    font-size: 7px;
    padding: 5px 7px;
    right: 8px;
    bottom: 8px;
    gap: 5px;
  }
  .capture-hint > span {
    font-size: 11px;
  }
  .hotspot-detail {
    gap: 9px;
    padding: 12px;
  }
  .hotspot-detail strong {
    font-size: 10px;
  }
  .hotspot-detail p {
    font-size: 10px;
    line-height: 1.65;
  }
  .detail-number {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
  .hotspot-detail > button {
    padding: 4px;
  }
  .tour-bottom {
    flex-wrap: wrap;
    padding-top: 17px;
    gap: 12px;
  }
  .tour-story {
    gap: 10px;
  }
  .story-index {
    font-size: 20px;
  }
  .tour-story strong {
    font-size: 12px;
  }
  .tour-story p {
    font-size: 10px;
    line-height: 1.7;
  }
  .tour-controls {
    margin-left: 30px;
  }
  .tour-controls button {
    height: 31px;
    min-width: 31px;
    font-size: 10px;
  }
  .tour-controls #tour-expand {
    font-size: 9px;
  }
  .demo-caption {
    font-size: 8px;
    line-height: 1.7;
    margin-top: 4px;
    display: block;
  }
  .experience-strip {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 40px;
    padding-block: 35px;
  }
  .experience-heading h2 {
    font-size: 29px;
  }
  .experience-options {
    gap: 6px;
    margin-bottom: 22px;
  }
  .experience-options button {
    padding: 10px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 8px;
  }
  .experience-options button > span {
    font-size: 10px;
  }
  .scenario-path {
    gap: 8px;
    flex-wrap: wrap;
  }
  .scenario-path > span {
    font-size: 9px;
    gap: 5px;
  }
  .scenario-path > b {
    font-size: 11px;
  }
  .scenario-path i {
    height: 19px;
    width: 19px;
    font-size: 8px;
  }
  #scenario-panel h3 {
    font-size: 20px;
  }
  #scenario-panel p {
    font-size: 12px;
  }
  .feature-capture-label {
    padding: 14px;
  }
  .capture-feature-footer {
    padding: 16px;
  }
  .capture-feature-footer b {
    font-size: 11px;
  }
  .capture-feature-footer span {
    font-size: 9px;
  }
  .capture-preview {
    aspect-ratio: 1.5;
  }
  .connection-map {
    height: 170px;
  }
  .map-node {
    padding: 8px;
    font-size: 9px;
  }
  .map-center {
    width: 45px;
    height: 45px;
    border-radius: 12px;
  }
  .map-center img {
    width: 22px;
  }
  .sticky-demo {
    bottom: 12px;
    padding: 8px 9px 8px 13px;
    gap: 10px;
  }
  .sticky-demo > div {
    font-size: 9px;
    gap: 6px;
    line-height: 1.5;
  }
  .sticky-demo b {
    display: block;
  }
  .sticky-demo .button {
    font-size: 10px;
    padding: 9px 12px;
    gap: 12px;
    min-height: 36px;
  }
  #capture-dialog {
    width: calc(100% - 18px);
    max-height: calc(100dvh - 30px);
    padding: 16px 12px;
    border-radius: 11px;
  }
  .capture-dialog-head {
    margin-bottom: 14px;
  }
  .capture-dialog-head h2 {
    font-size: 20px;
  }
  .capture-dialog-head > button {
    width: 30px;
    height: 30px;
    font-size: 21px;
  }
  .capture-full-scroll img {
    min-width: 850px;
    width: 850px;
    max-width: none;
  }
  .capture-mobile-hint {
    display: block;
    font-size: 9px;
    color: #8f729e;
    margin-top: 9px;
  }
  #capture-description {
    font-size: 11px;
    margin-top: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .aurora,
  .hero-sparks,
  .capture-sweep {
    display: none;
  }
  .hero h1 .gradient-text {
    background-position: 0;
  }
  .capture-preview img {
    transition: none;
  }
  .real-feature:hover,
  .real-feature:hover .capture-preview img {
    transform: none;
  }
  .connection-map svg path {
    stroke-dasharray: none;
  }
  .plan-featured:before {
    opacity: 0.6;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* Keep hotspot coordinates registered to the original captures at every size. */
.capture-stage[data-capture="ai"] {
  aspect-ratio: 1280/720;
}
.capture-stage[data-capture="ai"] .product-capture {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 720px) {
  .capture-stage {
    aspect-ratio: 1260/570;
  }
  .product-capture {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .capture-stage[data-capture="ai"] {
    aspect-ratio: 1280/720;
  }
  .capture-hint {
    display: none;
  }
  .hotspot {
    width: 24px;
    height: 24px;
  }
  .hotspot span {
    font-size: 9px;
  }
}

/* Black PlugLead: deliberately loud, with the full offer readable at every size. */
.black-banner {
  position: relative;
  color: #101018;
  background: #efff00;
  border-block: 8px solid #101018;
  border-image: repeating-linear-gradient(135deg, #101018 0 12px, #efff00 12px 24px) 8;
}
.black-banner-inner {
  width: min(1160px, calc(100% - 40px));
  margin: auto;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.black-brand > span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
}
.black-brand > strong {
  display: block;
  font: 800 clamp(25px, 3.5vw, 44px)/1.15 var(--heading);
  letter-spacing: -.06em;
}
.black-brand b {
  display: inline-block;
  background: #101018;
  color: #efff00;
  padding: 4px 9px 7px;
  transform: rotate(-3deg);
  margin-left: 5px;
}
.black-discount {
  display: flex;
  align-items: center;
  gap: 10px;
}
.black-discount > strong {
  font: 800 clamp(58px, 6vw, 82px)/1 var(--heading);
  letter-spacing: -.08em;
}
.black-discount > span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}
.black-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.black-deadline {
  background: #e00058;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 15px;
  letter-spacing: .07em;
  transform: rotate(2deg);
}
.black-button {
  background: #101018;
  color: #efff00;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid #101018;
  border-radius: 6px;
  box-shadow: 4px 4px 0 #10101845;
}
.black-button:hover {
  background: #292131;
  box-shadow: 6px 6px 0 #10101845;
}
.black-banner a:focus-visible { outline-color: #101018; }
.form-offer {
  display: inline-block;
  color: #efff00;
  background: #efff000c;
  border: 1px solid #efff0060;
  padding: 8px 12px;
  margin-bottom: 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.sticky-demo { border-color: #c4ff4866; }
.sticky-demo .live-dot { background: #c4ff48; }
.sticky-demo b { display: block; color: #eaffbb; }
.form-layout > *, .feature-row > *, .comparison-layout > *,
.faq-layout > *, .experience-strip > *, .plans-grid > * {
  min-width: 0;
}
.button > span, .capture-feature-footer > button, .form-points > div > span {
  flex-shrink: 0;
}
footer { padding-bottom: 110px; }

@media (min-width: 721px) and (max-width: 900px) {
  .form-layout, .feature-row, .comparison-layout, .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }
  .feature-row.reverse .feature-copy { order: 0; }
  .form-card { width: 100%; max-width: 600px; margin-inline: auto; }
  .header nav { display: none; }
  .tabs { flex-wrap: wrap; }
  .tabs button { flex: 1 1 130px; }
  .black-banner-inner { justify-content: center; }
  .black-action { flex-direction: row; }
}
@media (max-width: 720px) {
  .black-banner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 32px);
    padding-block: 16px;
    gap: 13px;
    justify-items: center;
  }
  .black-brand { text-align: center; }
  .black-brand > span { font-size: 10px; letter-spacing: .22em; margin-bottom: 4px; }
  .black-brand > strong { font-size: clamp(27px, 8vw, 38px); }
  .black-discount > strong { font-size: 64px; }
  .black-discount > span { font-size: 14px; }
  .black-action { width: 100%; gap: 10px; }
  .black-deadline { font-size: 11px; }
  .black-button { min-height: 48px; width: 100%; max-width: 360px; }
  .header { min-height: 76px; height: auto; padding-block: 14px; }
  .header .brand { flex: 0 1 126px; min-width: 0; }
  .header .brand img { width: 100%; }
  .header .button { min-height: 44px; font-size: 11px; flex-shrink: 0; }
  .hero h1 { font-size: clamp(32px, 8.4vw, 50px); }
  .hero .button { min-height: 54px; font-size: 14px; gap: 15px; }
  .hero-checks { font-size: 10px; }
  h2, .section-heading h2, .form-intro h2, .comparison-layout h2 {
    font-size: clamp(29px, 8.6vw, 39px);
    overflow-wrap: break-word;
  }
  .feature-copy h3 { font-size: clamp(27px, 7.6vw, 33px); }
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 6px;
    padding: 2px 0;
  }
  .tabs button {
    min-width: 0;
    min-height: 46px;
    padding: 8px 5px;
    font-size: 11px;
    white-space: normal;
    gap: 4px;
    line-height: 1.3;
  }
  .tour-intro { flex-wrap: wrap; font-size: 10px; }
  .tour-controls { margin-left: 0; }
  .tour-controls button { min-width: 44px; height: 44px; font-size: 14px; }
  .tour-controls #tour-expand { font-size: 12px; }
  .tour-story strong { font-size: 14px; }
  .tour-story p, .hotspot-detail p { font-size: 12px; }
  .capture-preview { aspect-ratio: 1260 / 570; }
  .real-feature[data-feature="ai"] .capture-preview { aspect-ratio: 1280 / 720; }
  .real-feature .capture-preview img, .real-feature[data-feature="ai"] .capture-preview img {
    width: 100%; height: 100%; object-fit: contain; transform: none;
  }
  .real-feature:hover { transform: none; }
  .real-feature:hover .capture-preview img { transform: none; }
  .capture-zoom { width: 28px; height: 28px; right: 6px; bottom: 6px; font-size: 17px; }
  .capture-feature-footer { gap: 10px; }
  .capture-feature-footer button { width: 44px; height: 44px; }
  .form-card { padding: 24px 18px; }
  .form-card-top { gap: 10px; flex-wrap: wrap; }
  input, select { font-size: 16px; min-width: 0; }
  .choice { padding: 10px 9px; min-width: 0; }
  .form-navigation .button { min-height: 48px; font-size: 14px; gap: 12px; padding-inline: 17px; }
  .back-button { flex-shrink: 0; width: 44px; height: 48px; }
  .toggle { max-width: 100%; width: 100%; }
  .toggle button { flex: 1; min-width: 0; padding-inline: 8px; }
  .comparison-card { padding: 18px; }
  .comparison-card-top { flex-wrap: wrap; gap: 12px; }
  .comparison-row > span:first-child { min-width: 0; }
  .comparison-row > span:last-child { flex-shrink: 0; }
  .sticky-demo { bottom: max(12px, env(safe-area-inset-bottom)); }
  .sticky-demo > div { min-width: 0; font-size: 10px; }
  .sticky-demo .button { min-height: 44px; font-size: 12px; flex-shrink: 0; gap: 8px; }
  .how-section .button { font-size: 14px; }
  .final-cta { padding-inline: 20px; }
}
@media (max-width: 350px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .header .brand { flex-basis: 108px; }
  .form-navigation .button { font-size: 12px; padding-inline: 12px; }
  .sticky-demo { gap: 7px; padding-inline: 10px; }
  .sticky-demo .button { padding-inline: 10px; }
}