/* One anonymous client's starting point, early growth, and recent performance. */
.client-card-note { font-size: 14px; margin-top: 22px; color: #2f5967; }
.client-card-note + .button { margin-top: 18px; }
.beauty-feature { gap: 55px; align-items: start; }
.partnership-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; padding: 24px 0; margin-bottom: 14px; border-block: 1px solid var(--line); }
.partnership-facts strong { display: block; font: 600 18px Manrope,sans-serif; letter-spacing: -.03em; color: #007e88; }
.partnership-facts span { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; }
.early-growth { margin-bottom: 24px; }
.early-growth > .eyebrow { font-size: 12px; margin-bottom: 12px; display: block; }
.early-growth ol { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.early-growth li { border-left: 2px solid #81d6d2; padding: 7px 0 7px 12px; }
.early-growth li span { display: block; font-size: 13px; color: var(--muted); }
.early-growth li strong { display: block; font: 600 23px Manrope,sans-serif; color: #007e88; letter-spacing: -.03em; margin-top: 3px; }
.revenue-explorer { background: linear-gradient(140deg,#edfaff,#f3fff8); padding: 28px 30px; box-shadow: 0 15px 50px #09898d0c; }
.revenue-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.revenue-heading .eyebrow { font-size: 12px; }
.snapshot-note { font-size: 12px; color: var(--muted); }
.revenue-switch { display: flex; gap: 4px; padding: 4px; margin-top: 22px; background: #dceff3; border-radius: 30px; width: fit-content; }
.revenue-switch button { background: transparent; border: 0; border-radius: 30px; padding: 10px 18px; min-height: 44px; font-size: 14px; color: #466977; }
.revenue-switch button[aria-pressed=true] { color: #fff; background: #007e88; box-shadow: 0 3px 9px #00626e15; }
.revenue-summary { margin-top: 23px; min-height: 93px; }
.revenue-summary strong { display: block; font: 500 clamp(35px,3.8vw,49px)/1.15 Manrope,sans-serif; letter-spacing: -.06em; color: #173e50; font-variant-numeric: tabular-nums; }
.revenue-summary > span { font-size: 14px; color: #526f7f; display: block; margin-top: 7px; }
.holiday-growth { margin-bottom: 12px; padding: 12px 15px; background: #d3f3e9; border-radius: 8px; color: #17636b; }
.holiday-growth strong { display: block; font-size: 15px; font-weight: 600; }
.holiday-growth span { display: block; font-size: 12px; color: #47717a; margin-top: 3px; }
.snapshot-chart { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 12px 0 0 54px; }
.chart-grid { position: absolute; inset: 36px 0 64px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-grid span { font-size: 12px; color: #708b99; border-bottom: 1px solid #b8d9e166; height: 1px; line-height: 0; }
.snapshot-column { position: relative; z-index: 1; padding: 0 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; text-align: center; color: #3b5d6c; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.snapshot-column.selected { background: #ffffffa6; border-color: #8bd6d1; }
.snapshot-column:hover { border-color: #8bd6d1; }
.snapshot-amount { display: block; font: 600 17px Manrope,sans-serif; letter-spacing: -.03em; padding-top: 7px; height: 34px; }
.column-area { display: flex; align-items: end; justify-content: center; height: 215px; width: 100%; }
.revenue-bar { display: flex; flex-direction: column; justify-content: end; height: var(--height); width: min(88px,100%); overflow: hidden; border-radius: 8px 8px 0 0; transition: height .6s cubic-bezier(.2,.7,.3,1); box-shadow: 0 8px 20px #06879613; }
.organic-segment { background: #a7e9b4; height: var(--share); flex-shrink: 0; }
.ad-segment { background: linear-gradient(180deg,#00ada7,#007c8c); height: var(--share); flex-shrink: 0; }
.snapshot-label { display: block; font-size: 14px; font-weight: 600; margin-top: 10px; }
.snapshot-caption { display: block; font-size: 12px; color: #5d7b89; margin-top: 2px; }
.revenue-legend { display: flex; justify-content: center; gap: 22px; font-size: 13px; color: #476b79; margin-top: 16px; }
.revenue-legend span { display: flex; align-items: center; gap: 7px; }
.revenue-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.legend-ad { background: #008f96; }
.legend-organic { background: #a7e9b4; }
.ads-only .organic-segment, .ads-only .organic-legend { display: none; }
.revenue-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #b8d9e1; }
.revenue-breakdown span { display: block; color: #526f7f; font-size: 13px; }
.revenue-breakdown strong { display: block; font: 600 22px Manrope,sans-serif; letter-spacing: -.04em; margin-top: 5px; }
.revenue-explorer .source-note { font-size: 12px; line-height: 1.6; margin-top: 18px; }
.beauty-feature .growth-copy { position: static; }
@media(max-width:1000px) {
  .beauty-feature { gap: 30px; }
  .revenue-explorer { padding: 24px; }
  .snapshot-note { display: none; }
  .snapshot-chart { gap: 8px; padding-inline: 42px 0; }
  .partnership-facts { gap: 10px; }
  .partnership-facts strong { font-size: 16px; }
}
@media(max-width:700px) {
  .revenue-explorer { padding: 22px 18px; }
  .revenue-summary strong { font-size: clamp(35px,10vw,43px); }
  .snapshot-chart { gap: 8px; padding-left: 40px; }
  .snapshot-amount { font-size: 16px; }
  .snapshot-column { padding-inline: 5px; }
  .revenue-switch { width: 100%; }
  .revenue-switch button { flex: 1; padding-inline: 7px; }
  .revenue-breakdown { gap: 12px; }
  .revenue-breakdown strong { font-size: 21px; }
  .beauty-feature .growth-copy { position: static; }
  .partnership-facts { gap: 14px; }
  .partnership-facts strong { font-size: 17px; }
  .snapshot-chart { gap: 4px; padding-left: 34px; }
  .snapshot-amount { font-size: 14px; }
  .snapshot-label { font-size: 13px; }
  .snapshot-column { padding-inline: 3px; }
  .snapshot-caption { font-size: 12px; min-height: 36px; }
  .story-dialog .story-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .story-dialog .story-stats > div:last-child { grid-column: 1 / -1; border-top: 1px solid #007e882b; padding-top: 12px; }
}
@media(prefers-reduced-motion:reduce) { .revenue-bar { transition: none; } }