/* The homepage product illustration only. The actual site brand is unchanged. */
.hero-platform-visual.hero-platform-refined {
  --hero-chart-ink: #7455c4;
  --hero-ui-muted: #82768f;
  overflow: visible;
}
.home-hero .hero-platform-visual.hero-platform-refined {
  max-width: none;
  width: 100%;
  height: clamp(300px, 38vh, 365px);
  margin-top: 34px;
  overflow: hidden;
  overflow: clip;
  mask-image: linear-gradient(to bottom, transparent, #000 12px);
}
.hero-platform-visual.hero-platform-refined .product-stage {
  padding: 12px 0 0;
  border-width: 0;
  /* A compact viewport lets the illustration continue behind the next section. */
  margin-bottom: 0;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  overflow: visible;
}
.home-hero:has(.hero-platform-refined) {
  position: relative;
  z-index: 1;
  overflow: visible;
  padding-bottom: 0;
}
.home-hero:has(.hero-platform-refined) + .growth-planner-section {
  z-index: 2;
  box-shadow: 0 -12px 28px -25px #30243d40;
}
.hero-platform-visual.hero-platform-refined .app-window {
  border-color: #e0d9e9;
  box-shadow: 0 12px 32px #3e285c0d, 0 2px 5px #3e285c06;
  border-radius: 9px 9px 0 0;
}
.hero-platform-visual.hero-platform-refined .app-top {
  height: 51px;
  gap: 29px;
  padding: 0 24px;
  background: #fff;
  font-size: 10px;
  border-color: #eeeaf2;
}
.hero-platform-visual.hero-platform-refined .hero-platform-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #332b42;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.35px;
  white-space: nowrap;
}
.hero-platform-visual.hero-platform-refined .hero-platform-brand img {
  width: 26px;
  height: 26px;
  display: block;
}
.hero-platform-visual.hero-platform-refined .hero-platform-brand {gap:7px;color:#17171c;}
.hero-platform-visual.hero-platform-refined .hero-platform-mark {width:22px;height:18px;display:block;flex:none;}
.hero-platform-visual.hero-platform-refined .hero-period > span {line-height:1.4;text-align:left;}
.hero-platform-visual.hero-platform-refined .hero-period > span > small {display:block;font-size:7px;letter-spacing:0;color:#9195a0;margin-top:1px;}
.hero-platform-visual.hero-platform-refined .hero-change {
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  font-size:8px;font-style:normal;font-weight:550;line-height:1.4;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.hero-platform-visual.hero-platform-refined .hero-change-positive {color:#287650;}
.hero-platform-visual.hero-platform-refined .hero-change-negative {color:#ad5359;}
.hero-platform-visual.hero-platform-refined .hero-change-neutral {color:#7b8290;}
.hero-platform-visual.hero-platform-refined .hero-change > span {font:inherit;color:inherit;display:inline;}
.hero-platform-visual.hero-platform-refined .hero-change svg {width:9px;height:9px;flex:none;}
.hero-platform-visual.hero-platform-refined .hero-metric > .hero-change {margin:0 0 5px;}
.hero-platform-visual.hero-platform-refined .hero-customers-legend .hero-change {margin-top:3px;font-size:7px;}
.hero-platform-visual.hero-platform-refined .hero-source-roi .hero-change {display:flex;justify-content:flex-end;margin-top:2px;font-size:6px;gap:2px;}
.hero-platform-visual.hero-platform-refined .hero-source-roi .hero-change svg {width:6px;height:6px;}
.hero-platform-visual.hero-platform-refined .hero-unit-economics > span {position:relative;}
.hero-platform-visual.hero-platform-refined .hero-unit-economics .hero-change {position:absolute;right:0;bottom:0;font-size:7px;}
.hero-platform-visual.hero-platform-refined .hero-sample-label {
  margin-left: auto;
  color: #80738e;
  font-size: 9px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-platform-visual.hero-platform-refined .hero-sample-label i {
  width: 5px;
  height: 5px;
  border: 1px solid #b5a3cc;
  border-radius: 50%;
}
.hero-platform-visual.hero-platform-refined .app-body aside {
  width: 145px;
  padding: 18px 10px;
  background: #fcfcfd;
  border-color: #eeeaf2;
  font-size: 10px;
  gap: 6px;
}
.hero-platform-visual.hero-platform-refined .app-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
}
.hero-platform-visual.hero-platform-refined .app-nav .ui-symbol {
  width: 13px;
  height: 13px;
  flex: none;
}
.hero-platform-visual.hero-platform-refined .app-nav.selected {
  background: #eee7fa;
  color: #6446a7;
}
.hero-platform-visual.hero-platform-refined .app-content { padding: 24px 24px 17px; background:#f8f9fb; }
.hero-platform-visual.hero-platform-refined .app-title { gap: 16px; align-items:flex-start; }
.hero-platform-visual.hero-platform-refined .app-title small {
  display: block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #9a8ba9;
  line-height: 1.4;
}
.hero-platform-visual.hero-platform-refined .app-title h3 {
  margin-top: 6px;
  font-size: 21px;
  color: #322a40;
  font-weight: 500;
  letter-spacing: -.65px;
}
.hero-platform-visual.hero-platform-refined .hero-period {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7a6e88;
  font-size: 9px;
  border: 1px solid #e9e3ef;
  border-radius: 5px;
  padding: 5px 8px;
  white-space: nowrap;
}
.hero-platform-visual.hero-platform-refined .hero-period svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.2;
}
.hero-platform-visual.hero-platform-refined .hero-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 0;
  border-bottom: 0;
}
.hero-platform-visual.hero-platform-refined .hero-metric {
  container-type: inline-size;
  min-width: 0;
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  padding: 15px 13px 13px;
  box-shadow: 0 1px 2px #29355b03;
}
.hero-platform-visual.hero-platform-refined .hero-metric > small {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  color: #776982;
}
.hero-platform-visual.hero-platform-refined .hero-metric b {
  font-size: clamp(20px, 2.15vw, 30px);
  font-weight: 500;
  color: #30243d;
  letter-spacing: -1.35px;
  line-height: 1.16;
  white-space: nowrap;
  margin: 8px 0 7px;
  font-variant-numeric: tabular-nums;
}
.hero-platform-visual.hero-platform-refined .hero-metric-profit b { color: #201c29; }
.hero-platform-visual.hero-platform-refined .hero-metric-per-customer b { color: #201c29; }
.hero-platform-visual.hero-platform-refined .hero-metric-roi b { color: #398362; }
.hero-platform-visual.hero-platform-refined .hero-metric b span { font: inherit; color: inherit; display: inline; }
.hero-platform-visual.hero-platform-refined .hero-metric b .hero-percent { font-size: .7em; margin-left: 1px; }
.hero-platform-visual.hero-platform-refined .hero-metric b .hero-metric-compact { display: none; }
.hero-platform-visual.hero-platform-refined .hero-metric > span {
  color: #8a7d96;
  font-size: 8px;
  line-height: 1.45;
}
.hero-platform-visual.hero-platform-refined .hero-profit-chart { margin: 19px 0 0; }
.hero-platform-visual.hero-platform-refined .hero-chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.hero-platform-visual.hero-platform-refined .hero-chart-heading h4 {
  margin: 0;
  color: #51435f;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.1px;
}
.hero-platform-visual.hero-platform-refined .hero-chart-heading > span { color: #96899f; font-size: 8px; }
.hero-platform-visual.hero-platform-refined .hero-chart-plot { position: relative; padding-right: 4px; padding-left: 40px; }
.hero-platform-visual.hero-platform-refined .hero-profit-svg { display: block; width: 100%; height: 133px; overflow: visible; }
.hero-platform-visual.hero-platform-refined .hero-chart-grid { fill: none; stroke: #eee9f4; stroke-width: 1; }
.hero-platform-visual.hero-platform-refined .hero-chart-area { fill: #f8f5fc; }
.hero-platform-visual.hero-platform-refined .hero-chart-line {
  stroke: var(--hero-chart-ink);
  stroke-width: 2.1px;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hero-platform-visual.hero-platform-refined .hero-chart-end { fill: var(--hero-chart-ink); stroke: white; stroke-width: 2; }
.hero-platform-visual.hero-platform-refined .hero-chart-scale {
  position: absolute;
  inset: 3px auto 1px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 8px;
  color: #a497af;
}
.hero-platform-visual.hero-platform-refined .hero-chart-dates { display: flex; justify-content: space-between; padding: 5px 0 0 40px; font-size: 8px; color: #a497af; }
.hero-platform-visual.hero-platform-refined .hero-economics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 23px;
  border-top: 1px solid #ede8f3;
  padding-top: 12px;
  margin-top: 17px;
  font-size: 8px;
  line-height: 1.5;
  color: #8d8099;
}
.hero-platform-visual.hero-platform-refined .hero-economics b { margin-left: 6px; color: #64526f; font-size: 9px; font-weight: 500; white-space: nowrap; }
.hero-platform-visual.hero-platform-refined .hero-economics-note { margin-left: auto; }
.hero-platform-visual.hero-platform-refined .hero-visual-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1050px) {
  .hero-platform-visual.hero-platform-refined .product-stage { padding: 12px 0 0; }
  .hero-platform-visual.hero-platform-refined .app-body aside { width: 118px; font-size: 9px; }
  .hero-platform-visual.hero-platform-refined .app-content { padding: 21px; }
  .hero-platform-visual.hero-platform-refined .hero-metric { padding: 14px 12px 12px; }
  .hero-platform-visual.hero-platform-refined .hero-metric b { font-size: clamp(20px, 2.3vw, 28px); letter-spacing: -1px; }
  .hero-platform-visual.hero-platform-refined .hero-economics-note { display: none; }
}
@media (min-width: 651px) and (max-width: 850px) {
  .hero-platform-visual.hero-platform-refined .app-body aside { display: none; }
}
@media (max-width: 650px) {
  .hero-platform-visual.hero-platform-refined .product-stage { padding: 8px 10px 0; }
  .hero-platform-visual.hero-platform-refined .app-top { height: 40px; padding-inline: 12px; gap: 10px; }
  .hero-platform-visual.hero-platform-refined .hero-platform-brand { font-size: 12px; gap: 7px; }
  .hero-platform-visual.hero-platform-refined .hero-platform-brand img { width: 21px; height: 21px; }
  .hero-platform-visual.hero-platform-refined .hero-platform-breadcrumb { display: none; }
  .hero-platform-visual.hero-platform-refined .hero-sample-label { font-size: 7px; gap: 4px; }
  .hero-platform-visual.hero-platform-refined .app-body aside { display: none; }
  .hero-platform-visual.hero-platform-refined .app-content { padding: 17px 13px 12px; }
  .hero-platform-visual.hero-platform-refined .app-title { gap: 8px; }
  .hero-platform-visual.hero-platform-refined .app-title small { font-size: 6px; letter-spacing: .65px; }
  .hero-platform-visual.hero-platform-refined .app-title h3 { font-size: 15px; letter-spacing: -.5px; margin-top: 5px; }
  .hero-platform-visual.hero-platform-refined .hero-period { border: 0; padding: 0; gap: 4px; font-size: 7px; }
  .hero-platform-visual.hero-platform-refined .hero-period svg { width: 10px; height: 10px; }
  .hero-platform-visual.hero-platform-refined .hero-metrics { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 20px; padding-bottom: 0; }
  .hero-platform-visual.hero-platform-refined .hero-metric { padding: 10px 7px 9px; border-radius: 7px; }
  .hero-platform-visual.hero-platform-refined .hero-metric > small { font-size: 8px; }
  .hero-platform-visual.hero-platform-refined .hero-metric b { font-size: clamp(16px, 5vw, 27px); letter-spacing: -.6px; margin: 6px 0 0; }
  .hero-platform-visual.hero-platform-refined .hero-metric b .hero-metric-full { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .hero-platform-visual.hero-platform-refined .hero-metric b .hero-metric-compact { display: inline; }
  .hero-platform-visual.hero-platform-refined .hero-metric > span { display: none; }
  .hero-platform-visual.hero-platform-refined .hero-profit-chart { margin-top: 15px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-heading { margin-bottom: 10px; gap: 7px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-heading h4 { font-size: 8px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-heading > span { font-size: 7px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-plot { padding-left: 32px; }
  .hero-platform-visual.hero-platform-refined .hero-profit-svg { height: 105px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-line { stroke-width: 1.6px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-scale { font-size: 6px; }
  .hero-platform-visual.hero-platform-refined .hero-chart-dates { padding-left: 32px; font-size: 6px; }
  .hero-platform-visual.hero-platform-refined .hero-economics { font-size: 6px; margin-top: 13px; padding-top: 9px; gap: 5px 15px; }
  .hero-platform-visual.hero-platform-refined .hero-economics b { font-size: 7px; margin-left: 4px; }
  .home-hero .hero-platform-visual.hero-platform-refined { margin-top: 36px; }
}
@media (max-width: 359px) {
  .hero-platform-visual.hero-platform-refined .app-content { padding-inline: 10px; }
  .hero-platform-visual.hero-platform-refined .app-title h3 { font-size: 13px; }
  .hero-platform-visual.hero-platform-refined .hero-metric { padding: 9px 6px 8px; }
  .hero-platform-visual.hero-platform-refined .hero-metric b { font-size: 16px; letter-spacing: -.45px; }
  .hero-platform-visual.hero-platform-refined .hero-period svg { display: none; }
  .hero-platform-visual.hero-platform-refined .hero-economics { gap: 5px 9px; }
}

/* Equal metric cards share one typographic scale sized to their own width. */
.hero-platform-visual.hero-platform-refined .hero-metric b {
  display:block;
  font-size:clamp(14px,13cqw,23px);
  letter-spacing:-.6px;
}
.hero-platform-visual.hero-platform-refined .hero-analytics {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(244px,1fr);
  gap:12px;
  align-items:stretch;
  margin-top:12px;
}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-chart,
.hero-platform-visual.hero-platform-refined .hero-analytics > .hero-traffic {
  background:#fff;
  border:1px solid #e4e7ee;
  border-radius:12px;
  box-shadow:0 1px 2px #29355b03;
  padding:16px 14px 13px;
}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-chart {
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  flex:none;
}
.hero-platform-visual.hero-platform-refined .hero-analysis-main {min-width:0;display:flex;flex-direction:column;}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-heading {margin-bottom:10px;}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-legend {margin-bottom:9px;}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-note {margin-top:6px;}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-time-plot {
  flex:none;
  height:150px;
  min-height:0;
}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-revenue-svg {
  height:100%;
  min-height:0;
  position:absolute;
  left:30px;
  width:calc(100% - 71px);
}
.hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-legend strong {
  font-size:19px;
}
.hero-platform-visual.hero-platform-refined .hero-traffic {
  min-width:0;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.hero-platform-visual.hero-platform-refined .hero-traffic h4 {
  font-size:10px;font-weight:500;line-height:1.4;color:#51465d;margin:0;
}
.hero-platform-visual.hero-platform-refined .hero-traffic-intro {
  margin:4px 0 0;font-size:7px;line-height:1.4;color:#918798;
}
.hero-platform-visual.hero-platform-refined .hero-traffic table {width:100%;border-collapse:collapse;margin-top:10px;line-height:1.4;}
.hero-platform-visual.hero-platform-refined .hero-traffic thead th {font-size:7px;font-weight:500;color:#667085;text-align:right;padding:0 0 7px;border-bottom:1px solid #e4e7ee;}
.hero-platform-visual.hero-platform-refined .hero-traffic thead th:first-child {text-align:left;}
.hero-platform-visual.hero-platform-refined .hero-traffic-group th {padding:7px 0 3px;font-size:6.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:#8c929e;text-align:left;}
.hero-platform-visual.hero-platform-refined .hero-traffic-row th,
.hero-platform-visual.hero-platform-refined .hero-traffic-row td {padding:4px 0;border-bottom:1px solid #f0f1f5;vertical-align:middle;}
.hero-platform-visual.hero-platform-refined .hero-traffic-row th {font-size:8px;font-weight:500;color:#4c5063;text-align:left;padding-right:7px;}
.hero-platform-visual.hero-platform-refined .hero-traffic-row th small {display:block;margin-top:2px;font-size:6.5px;font-weight:400;color:#8c929e;white-space:nowrap;}
.hero-platform-visual.hero-platform-refined .hero-source-profit {font-size:8.5px;font-weight:550;color:#202634;letter-spacing:-.1px;text-align:right;white-space:nowrap;}
.hero-platform-visual.hero-platform-refined .hero-source-profit small {display:block;margin-top:2px;font-size:6.5px;font-weight:400;letter-spacing:0;color:#8c929e;}
.hero-platform-visual.hero-platform-refined .hero-source-roi {font-size:7.5px;font-weight:550;color:#398362;text-align:right;white-space:nowrap;padding-left:8px!important;}
.hero-platform-visual.hero-platform-refined .hero-economics {
  margin-top:8px;padding:10px 14px;background:#fff;border:1px solid #e4e7ee;border-radius:12px;
  box-shadow:0 1px 2px #29355b03;
}
.hero-platform-visual.hero-platform-refined .hero-unit-economics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1;align-content:start;}
.hero-platform-visual.hero-platform-refined .hero-unit-economics > span {min-width:0;font-size:7px;color:#667085;}
.hero-platform-visual.hero-platform-refined .hero-unit-economics b {display:block;margin:2px 0 0;font-size:11px;line-height:1.2;color:#202634;font-variant-numeric:tabular-nums;}
@media(max-width:1050px) {
  .hero-platform-visual.hero-platform-refined .hero-analytics {grid-template-columns:1fr;gap:12px;}
  .hero-platform-visual.hero-platform-refined .hero-traffic-row th {font-size:10px;}
  .hero-platform-visual.hero-platform-refined .hero-source-profit {font-size:11px;}
  .hero-platform-visual.hero-platform-refined .hero-source-roi {font-size:10px;}
  .hero-platform-visual.hero-platform-refined .hero-traffic-row th small {font-size:8px;}
  .hero-platform-visual.hero-platform-refined .hero-source-profit small {font-size:8px;}
}
@media(max-width:650px) {
  .hero-platform-visual.hero-platform-refined .hero-analytics {margin-top:10px;gap:10px;}
  .hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-chart,
  .hero-platform-visual.hero-platform-refined .hero-analytics > .hero-traffic {padding:12px 9px 10px;border-radius:10px;}
  .hero-platform-visual.hero-platform-refined .hero-metric {border-radius:10px;}
  .hero-platform-visual.hero-platform-refined .hero-analytics .hero-time-plot {height:110px;}
  .hero-platform-visual.hero-platform-refined .hero-analytics .hero-revenue-svg {left:26px;width:calc(100% - 58px);}
  .hero-platform-visual.hero-platform-refined .hero-analytics .hero-customers-legend strong {font-size:14px;}
  .hero-platform-visual.hero-platform-refined .hero-economics {padding:9px;border-radius:10px;}
  .hero-platform-visual.hero-platform-refined .hero-unit-economics {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 7px;}
  .hero-platform-visual.hero-platform-refined .hero-unit-economics > span {font-size:6.5px;}
  .hero-platform-visual.hero-platform-refined .hero-unit-economics b {font-size:10px;}
  .hero-platform-visual.hero-platform-refined .hero-traffic-row th {font-size:8px;}
  .hero-platform-visual.hero-platform-refined .hero-source-profit {font-size:8.5px;}
  .hero-platform-visual.hero-platform-refined .hero-source-roi {font-size:7.5px;}
  .hero-platform-visual.hero-platform-refined .hero-traffic-row th small {font-size:6.5px;}
  .hero-platform-visual.hero-platform-refined .hero-source-profit small {font-size:6.5px;}
  .hero-platform-visual.hero-platform-refined .hero-traffic-intro {font-size:7px;}
}

/* Keep the phone hero focused on the message and next action. */
@media (max-width:767px) {
  .home-hero .hero-platform-visual.hero-platform-refined {display:none;}
  .home-hero:has(.hero-platform-refined) {padding-bottom:38px;}
}