/* KeeponWorks: native, lightweight artwork. No external fonts or image requests. */
.hero-visual.performance-visual { display: none; position: relative; width: min(100%, 500px); min-height: 0; height: auto; padding: 0; margin: 0; justify-self: end; align-self: center; pointer-events: none; container-type: inline-size; }
@media (min-width: 861px) {
  .hero-visual.hero-visual-mobile { display: none; }
  .hero-visual.performance-visual { display: block; }
}
.performance-scene { position: relative; width: 100%; aspect-ratio: 1; color: #302c3d; font-family: "DM Sans", Arial, sans-serif; font-weight: 500; }
.performance-plane { position: absolute; inset: 24% 6% 22% 7%; border: 1px solid #dad3e9; border-radius: 5cqw; background: linear-gradient(135deg, #eeebf4, #e5dff2); transform: rotate(-8deg) translate(-2%, 3%); }
.performance-card { position: absolute; border: 1px solid #e3dfea; border-radius: 4cqw; background: linear-gradient(130deg, #fff, #fcfbfe); box-shadow: 0 1px 1px #c8c1d526, 0 4px 0 -2px #e4dfed, 0 5cqw 10cqw -4cqw #36274b24; }
.performance-main { z-index: 1; top: 20%; left: 2%; width: 87%; padding: 4cqw 4cqw 3cqw; transform: rotate(-4deg); }
.performance-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-bottom: 2cqw; color: #6e667c; font-size: 2.55cqw; }
.performance-live { display: inline-flex; align-items: center; gap: 1.1cqw; font-size: 2.1cqw; color: #716b7d; }
.performance-live i, .performance-main-foot i { display: inline-block; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #3b8a64; }
.performance-total { display: flex; align-items: center; justify-content: space-between; }
.performance-total > div > span { display: block; color: #746e80; font-size: 2.6cqw; }
.performance-total strong { display: flex; align-items: baseline; gap: 2cqw; font-size: 7.8cqw; font-weight: 600; letter-spacing: -.06em; line-height: 1.15; }
.performance-total small { color: #95909f; font-size: 2.2cqw; font-weight: 400; letter-spacing: 0; }
.performance-change { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.3cqw 1.8cqw; color: #36805d; border-radius: 1.8cqw; background: #eff6f1; font-size: 2.8cqw; }
.performance-chart { display: block; width: 100%; height: 25cqw; overflow: visible; margin-top: 3cqw; }
.performance-main-foot { display: flex; justify-content: space-between; gap: 2cqw; margin-top: 2cqw; padding-top: 2cqw; border-top: 1px solid #efedf3; color: #99929f; font-size: 2cqw; }
.performance-main-foot > span:first-child { display: flex; align-items: center; gap: 1.4cqw; }
.performance-main-foot i { width: 1cqw; height: 1cqw; background: #9b7de0; }
.performance-roas { z-index: 2; right: 0; top: 0; width: 35%; padding: 3.5cqw; background: linear-gradient(145deg, #f3edff, #ebe2fc); border-color: #ded1f4; transform: rotate(6deg); }
.performance-metric-label { display: flex; align-items: center; justify-content: space-between; color: #716180; font-size: 2.7cqw; }
.performance-roas .performance-metric-label { color: #72539c; }
.performance-roas > strong { display: block; margin: 1.2cqw 0 .5cqw; font-size: 8cqw; font-weight: 600; letter-spacing: -.06em; line-height: 1.13; color: #624391; }
.performance-roas > strong > span { font-size: 5.5cqw; margin-left: .5cqw; font-weight: 500; }
.performance-metric-caption { display: block; color: #8a7e97; font-size: 2.15cqw; line-height: 1.45; }
.performance-roas-track { display: flex; gap: .9cqw; margin-top: 2cqw; }
.performance-roas-track i { display: block; flex: 1; height: 3.3cqw; border-radius: .65cqw; background: #a38acb; }
.performance-roas-track i:nth-last-child(-n+2) { background: #d9cbec; }
.performance-cpl { z-index: 3; right: 0; bottom: 5%; width: 44%; padding: 3cqw 4cqw; transform: rotate(4deg); }
.performance-cpl .performance-metric-label > span { font-size: 2.1cqw; color: #a49caa; letter-spacing: .05em; }
.performance-cpl-value { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin: 2cqw 0 1cqw; }
.performance-cpl-value strong { font-size: 5.6cqw; font-weight: 600; letter-spacing: -.05em; white-space: nowrap; }
.performance-cpl-value small { font-size: 3cqw; font-weight: 500; color: #827a8c; }
.performance-cpl-value svg { width: 11cqw; }
.performance-caption { position: absolute; left: 6%; bottom: 1%; color: #99929f; font-size: 2cqw; letter-spacing: .01em; }
.performance-alternative-svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-visual.performance-visual { width: 100%; }
}