/* outfit-latin-ext-wght-normal */
@font-face {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://code-components.website-files.com/6acdf11b37dcbb26677362b4%2Fmodule%2F562d506c56800e98f6dc-outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* outfit-latin-wght-normal */
@font-face {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://code-components.website-files.com/6acdf11b37dcbb26677362b4%2Fmodule%2F9361ca49fa8244163822-outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Keep in sync with marketing-demo/src/visual-tokens.css.
   Each Webflow library bundles its own copy; no runtime cross-library dependency. */
:host, :host {
  --ortium-radius-frame: 8px;
  --ortium-radius-panel: 6px;
  --ortium-radius-control: 4px;
}

.mhs-visual, .mhs-visual * { box-sizing: border-box; }
.mhs-visual { container: microsite-sketch / inline-size; width: 100%; min-width: 0; color: #202733; font-family: "Outfit Variable", "Outfit", sans-serif; font-weight: 400; line-height: 1.5; text-align: left; -webkit-font-smoothing: antialiased; }
.mhs-visual :is(h2,h3,p,figure) { margin: 0; }
.mhs-paper { overflow: hidden; background: white; border: 1px solid #e0e4e9; border-radius: var(--ortium-radius-frame); box-shadow: 0 4px 8px #26354903, 0 20px 60px #26354907; }
.mhs-masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 44px; padding: 44px 0 24px; }
.mhs-agency { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 550; letter-spacing: -.5px; }
.mhs-agency svg { width: 25px; height: 25px; color: #36a2eb; }
.mhs-brand-dot { color: #36a2eb; }
.mhs-recipient { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.mhs-recipient > span { color: #818894; font-size: 12px; margin-right: 6px; }
.mhs-recipient img { object-fit: contain; }
.mhs-recipient strong { font-weight: 500; }
.mhs-intro { padding: 34px 44px 52px; }
.mhs-intro h2 { max-width: 680px; font-size: clamp(32px, 3.55cqw, 47px); font-weight: 500; line-height: 1.12; letter-spacing: -1.6px; text-wrap: balance; }
.mhs-intro p { max-width: 580px; margin-top: 14px; font-size: 14px; line-height: 1.75; color: #737d89; }
/* 335px is the full dot-grid width: 20 × 12px squares + 19 × 5px gaps. */
.mhs-evidence { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px 56px; margin-inline: 44px; padding: 48px; background: #f7f8fa; border: 1px solid #e9edf0; border-radius: var(--ortium-radius-panel); }
.mhs-evidence > section { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 23px; min-width: 0; }
.mhs-evidence h3 { font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -.35px; }
.mhs-chart-body { container-type: inline-size; min-width: 0; width: 100%; display: grid; grid-template-rows: 60px auto; gap: 18px; }
.mhs-chart-summary { min-width: 0; height: 60px; }
.mhs-buyer-summary { display: flex; align-items: center; gap: 12px; }
/* Match all plot heights to five 12px marker rows with four 5px gaps. */
.mhs-plot { width: 100%; height: 80px; min-width: 0; }
.mhs-bars, .mhs-trend { height: 96px; }
.mhs-stat { font-size: 36px; font-weight: 450; letter-spacing: -1px; line-height: 1; color: #344653; }
.mhs-stat > .mhs-percent { font-size: 24px; letter-spacing: -.5px; }
.mhs-buyer-chart p { font-size: 12px; color: #737d89; line-height: 1.65; }
.mhs-dots { display: grid; grid-template-columns: repeat(20, minmax(0, 12px)); grid-template-rows: repeat(5, min-content); justify-content: start; align-content: start; gap: 5px; }
.mhs-dots i { width: 100%; aspect-ratio: 1; border-radius: 2px; background: #e3e9ef; }
.mhs-dots i[data-active=true] { position: relative; }
.mhs-dots i[data-active=true]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #36a2eb; opacity: clamp(0, calc(var(--mhs-progress, 1) * var(--dot-total) - var(--dot-index)), 1); }
.mhs-count { display: inline-grid; font-variant-numeric: tabular-nums; }
.mhs-count::before { content: attr(data-final-value); visibility: hidden; grid-area: 1 / 1; }
.mhs-count > span { grid-area: 1 / 1; justify-self: start; }
.mhs-trend .recharts-line-curve { clip-path: inset(-2px calc((1 - var(--mhs-progress, 1)) * 100% - 2px) -2px -2px) fill-box; }
.mhs-competition-summary { position: relative; }
.mhs-competition-metrics { height: 100%; }
.mhs-chart-label { position: absolute; right: 0; bottom: -10px; color: #818894; font-size: 9px; line-height: 1.2; text-align: right; }
.mhs-bars { display: grid; align-content: space-between; }
.mhs-bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.mhs-company { display: flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.mhs-company img { object-fit: contain; flex-shrink: 0; }
.mhs-track { position: relative; height: 8px; background: #e9edf2; border-radius: 2px; overflow: hidden; }
.mhs-track :is(i,b) { position: absolute; inset: 0 auto 0 0; background: var(--bar-color); border-radius: inherit; transform-origin: left center; transform: scaleX(clamp(0, calc(var(--mhs-progress, 1) * 1.25 - var(--bar-index, 0) * .08), 1)); }
.mhs-track i { width: var(--upper); opacity: .3; }
.mhs-track b { width: var(--lower); }
.mhs-range { color: #687483; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mhs-metrics { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 15px; }
.mhs-metrics > div > span { display: flex; align-items: center; gap: 6px; color: #818894; font-size: 10px; }
.mhs-demand-metrics i { width: 10px; height: 2px; background: #36a2eb; }
.mhs-demand-metrics > div + div i { background: #9966ff; }
.mhs-metrics strong { display: flex; align-items: baseline; gap: 7px; font-size: 25px; font-weight: 450; letter-spacing: -.5px; color: #344653; }
.mhs-demand-metrics small { font-size: 10px; font-weight: 400; color: #818894; letter-spacing: 0; }
.mhs-evidence > .mhs-competition { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto auto; gap: 32px 40px; }
.mhs-competition h3 { grid-column: 1 / -1; }
.mhs-competition .mhs-chart-body { display: contents; }
.mhs-competition { position: relative; }
.mhs-competition-summary { position: static; grid-column: 1; grid-row: 2; height: auto; }
.mhs-competition-metrics { grid-template-columns: 1fr; gap: 12px; }
.mhs-competition .mhs-chart-label { bottom: 132px; }
.mhs-competition .mhs-bars { grid-column: 2; grid-row: 2; align-self: end; height: 120px; }
.mhs-opportunity { padding: 0 44px 48px; }
.mhs-opportunity h3 { max-width: 800px; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -.6px; text-wrap: balance; }
.mhs-opportunity > p { max-width: 820px; margin-top: 12px; color: #737d89; font-size: 13px; line-height: 1.75; }
.mhs-opportunity-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 335px)); justify-content: space-between; gap: 42px; padding: 0; margin: 0; list-style: none; }
.mhs-opportunity-steps li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mhs-opportunity-steps li > span { flex-shrink: 0; padding-top: 2px; font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.mhs-opportunity-steps h4 { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: #374151; }
.mhs-opportunity-steps p { margin-top: 4px; font-size: 12px; line-height: 1.6; color: #737d89; }
.mhs-recommendation { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 56px 44px 44px; }
.mhs-eyebrow { color: #737d89; font-size: 11px; }
.mhs-recommendation h3 { max-width: 460px; margin-top: 9px; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.7px; text-wrap: balance; }
.mhs-recommendation p { max-width: 470px; margin-top: 14px; color: #737d89; font-size: 13px; line-height: 1.75; }
.mhs-recommendation figure { justify-self: end; width: 100%; max-width: 370px; }
.mhs-recommendation img { display: block; width: 100%; height: auto; border: 1px solid #e5e4e0; border-radius: var(--ortium-radius-control); }
.mhs-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 44px; padding: 22px 0; }
.mhs-footer p { font-size: 14px; font-weight: 450; }
.mhs-footer a { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; border: 1px solid #1a202c; border-radius: var(--ortium-radius-control); padding: 8px 16px; background: #1a202c; color: #fafafa; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; transition: background-color .5s cubic-bezier(.6,.6,0,1); }
.mhs-footer a:hover { background: rgb(66 78 97 / 2%); color: #272727; }
.mhs-footer a:active { color: #272727; }
@media (prefers-reduced-motion: reduce) { .mhs-footer a { transition: none; } }
.mhs-footer a:focus-visible { outline: 2px solid #36a2eb; outline-offset: 4px; }
@container microsite-sketch (max-width: 1050px) {
  .mhs-masthead, .mhs-footer { margin-inline: 28px; }
  .mhs-masthead { padding-top: 28px; }
  .mhs-intro, .mhs-evidence, .mhs-opportunity, .mhs-recommendation { padding-inline: 28px; }
  .mhs-evidence { margin-inline: 28px; padding-inline: 48px; }
  .mhs-evidence { column-gap: 32px; }
  .mhs-evidence > .mhs-competition { column-gap: 40px; }
  .mhs-opportunity-steps { gap: 24px; }
  .mhs-evidence h3 { font-size: 18px; }
  .mhs-bar-row { grid-template-columns: 77px minmax(0, 1fr) 59px; gap: 7px; }
  .mhs-company { font-size: 10px; }
  .mhs-buyer-summary { gap: 8px; }
  .mhs-buyer-chart p { font-size: 10px; }
  .mhs-recommendation { gap: 35px; padding-bottom: 28px; }
}
@container microsite-sketch (max-width: 760px) {
  .mhs-evidence { grid-template-columns: 1fr; gap: 30px; }
  .mhs-evidence > section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto; grid-row: auto; gap: 28px; align-items: start; }
  .mhs-evidence h3 { grid-column: 1; margin: 0; }
  .mhs-chart-body { grid-column: 2; }
  .mhs-evidence > .mhs-competition { display: block; }
  .mhs-competition h3 { margin-bottom: 32px; }
  .mhs-competition .mhs-chart-body { display: grid; }
  .mhs-competition .mhs-chart-body { grid-template-rows: auto auto; }
  .mhs-competition-summary { grid-row: 1; }
  .mhs-competition .mhs-bars { grid-column: 1; grid-row: 2; }
  .mhs-competition-metrics { max-width: 335px; }
  .mhs-recommendation { grid-template-columns: 1fr 1fr; gap: 26px; }
  .mhs-recommendation h3 { font-size: 24px; }
  .mhs-opportunity h3 { font-size: 24px; }
  .mhs-opportunity-steps { grid-template-columns: 1fr; gap: 18px; }
  .mhs-footer p { max-width: 250px; }
}
@container microsite-sketch (max-width: 480px) {
  .mhs-masthead, .mhs-footer { margin-inline: 22px; }
  .mhs-masthead { padding-top: 22px; }
  .mhs-intro, .mhs-evidence, .mhs-opportunity, .mhs-recommendation { padding-inline: 22px; }
  .mhs-evidence { margin-inline: 22px; padding-inline: 40px; }
  .mhs-agency { font-size: 16px; gap: 7px; }
  .mhs-agency svg { width: 21px; height: 21px; }
  .mhs-recipient { gap: 6px; font-size: 12px; }
  .mhs-recipient > span { display: none; }
  .mhs-recipient img { width: 18px; height: 18px; }
  .mhs-intro h2 { font-size: 32px; letter-spacing: -1px; }
  .mhs-intro p { font-size: 13px; }
  .mhs-evidence > section { display: block; }
  .mhs-evidence h3 { margin-bottom: 17px; }
  .mhs-evidence h3 br { display: none; }
  .mhs-buyer-summary { gap: 15px; }
  .mhs-buyer-chart p { font-size: 12px; }
  .mhs-dots { width: 100%; }
  .mhs-bar-row { grid-template-columns: 90px minmax(0, 1fr) 64px; gap: 10px; }
  .mhs-company { font-size: 11px; }
  .mhs-recommendation { grid-template-columns: 1fr; gap: 24px; padding-bottom: 22px; }
  .mhs-recommendation figure { max-width: none; }
  .mhs-footer { align-items: flex-start; flex-direction: column; gap: 15px; }
  .mhs-footer p { max-width: none; }
}
@container microsite-sketch (max-width: 360px) {
  .mhs-evidence { padding: 24px 20px; }
}