@import url("brand-core-tokens.css");
@import url("brand-web-tokens.css");
@import url("case-art.css");

/* Results: generous metric scale followed by a photo-ready case index. */


body { padding-bottom: 0; }
.results-v2 { --results-column-gap: 32px; padding: 120px 0 128px; background: var(--zto-surface-default); color: var(--zto-text-primary); }
.results-v2 .results-shell { width: var(--home-content-width); margin-inline: auto; }
.results-v2 h2, .results-v2 h3, .results-v2 p { margin: 0; }
.results-v2 .record-heading { font-size: 40px; line-height: 1.35; letter-spacing: -.04em; font-weight: 650; word-break: keep-all; }
.results-v2 .record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--results-column-gap); margin: 64px 0 0; }
.results-v2 .record { min-width: 0; }

.results-v2 .record dt { color: var(--zto-text-secondary); font-size: 17px; font-weight: 500; }
.results-v2 .record dd { margin: 20px 0 0; font: 600 clamp(64px, 6.5vw, 96px)/1.06 var(--zto-font-latin); letter-spacing: -.06em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.results-v2 .record dd > .metric-unit { font-size: .58em; color: var(--zto-text-action); margin-left: .06em; }
.results-v2 .metric-number { display: inline-grid; vertical-align: baseline; }
.results-v2 .metric-final, .results-v2 .metric-live { grid-area: 1 / 1; text-align: right; }
.results-v2 .metric-live { display: none; }
.results-v2 .record-grid[data-count-state="playing"] .metric-final { opacity: 0; }
.results-v2 .record-grid[data-count-state="playing"] .metric-live { display: block; }
.results-v2 .record-note { margin-top: 32px; font-size: 13px; line-height: 1.7; color: var(--zto-text-secondary); }
.results-v2 .case-area { margin-top: 128px; scroll-margin-top: 24px; }
.results-v2 .case-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.results-v2 .case-heading h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 650; line-height: 1.28; letter-spacing: -.04em; word-break: keep-all; }
.results-v2 .all-cases { color: #0664a6; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 15px; font-weight: 550; white-space: nowrap; }
.results-v2 .all-cases:hover { text-decoration: underline; text-underline-offset: 5px; }
.results-v2 .case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--results-column-gap); }
.results-v2 .case-card { min-width: 0; }
.results-v2 .case-link { display: flex; flex-direction: column; height: 100%; border-radius: var(--zto-radius-8); }
/* Only the outer media frame changes; the shared illustration remains intact. */
.results-v2 .case-art { aspect-ratio: 3 / 2; border-radius: var(--zto-radius-8); border: 0; }
.results-v2 .case-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.results-v2 .case-copy { display: flex; flex-direction: column; flex: 1; }
.results-v2 .case-link:focus-visible { outline: 3px solid #0875c1; outline-offset: 7px; }
.results-v2 .case-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 28px 0 12px; font-size: 14px; line-height: 1.5; color: var(--zto-text-secondary); }
.results-v2 .case-meta span:last-child { white-space: nowrap; }
.results-v2 .case-card h3 { font-size: clamp(20px, 1.65vw, 25px); line-height: 1.4; letter-spacing: -.035em; font-weight: 680; word-break: keep-all; }
.results-v2 .case-work { margin-top: 14px; font-size: 16px; line-height: 1.75; letter-spacing: -.015em; color: var(--zto-text-secondary); word-break: keep-all; }
.results-v2 .case-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; min-height: 56px; font-size: 15px; font-weight: 550; color: var(--zto-text-action); }
.results-v2 .case-link:hover .case-cta { text-decoration: underline; text-underline-offset: 5px; }
.results-v2 .case-source { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; color: var(--zto-text-secondary); font-size: 13px; line-height: 1.75; }
.results-v2 .case-source a { color: #0664a6; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; padding-block: 6px; align-self: start; }
.review-tools { position: static; padding-block: 18px; }
.review-tools .review-title { width: auto; }
.review-tools .original { margin-left: auto; }
.review-tools .review-inner { align-items: center; }
.review-tools summary { cursor: pointer; font-weight: 600; padding-block: 8px; }
.review-tools .motion-controls { padding-block: 14px; }

/* Whole-card motion remains independent of its replaceable image and copy. */
.results-v2 { --results-card-distance: var(--zto-motion-distance-phrase, 12px); }
.results-v2 .case-card[data-motion-state="playing"] {
  animation: results-card-enter var(--zto-motion-duration-expression-medium, 640ms)
    var(--zto-motion-ease-enter, ease-out) var(--results-enter-delay, 0ms) both;
}
@keyframes results-card-enter {
  from { opacity: .96; transform: translateY(var(--results-card-distance)); }
  to { opacity: 1; transform: translateY(0); }
}
.results-v2 .art-arrow svg, .results-v2 .case-cta svg {
  transition: transform var(--zto-motion-duration-ui-default, 160ms) var(--zto-motion-ease-standard, ease-out);
}

.results-v2 .case-link:focus-visible .art-arrow svg,
.results-v2 .case-link:focus-visible .case-cta svg { transform: translateX(var(--zto-motion-distance-control, 2px)); }
@media (hover: hover) and (pointer: fine) {
  .results-v2 .case-link:hover .art-arrow svg,
  .results-v2 .case-link:hover .case-cta svg { transform: translateX(var(--zto-motion-distance-control, 2px)); }
}
.review-tools .results-replay { min-height: 40px; padding: 8px 12px; border: 1px solid #9dbdd4; border-radius: 8px; color: #0664a6; background: white; font: inherit; cursor: pointer; }
.review-tools .results-replay:disabled { opacity: .55; cursor: default; }
.review-tools .results-replay:focus-visible { outline: 3px solid #0875c1; outline-offset: 3px; }
.review-tools .results-static { padding-block: 10px; color: #0664a6; }
.results-v2[data-results-motion="off"] *, .results-v2[data-results-motion="off"] *::after { animation: none !important; transition: none !important; }
.results-v2[data-results-motion="off"] .art-arrow svg, .results-v2[data-results-motion="off"] .case-cta svg { transform: none !important; }
.results-v2[data-results-motion="off"] .metric-final { opacity: 1 !important; }
.results-v2[data-results-motion="off"] .metric-live { display: none !important; }

@media (max-width: 1099px) {
  .results-v2 { --results-column-gap: 24px; }
  .results-v2 .case-card h3 { font-size: 21px; }
}
@media (width < 900px) {
  .results-v2 { padding-block: 88px 96px; }
  .results-v2 .record-heading { font-size: 32px; }
  .results-v2 .record-grid { margin-top: 48px; }
  .results-v2 .record dt { font-size: 15px; }
  .results-v2 .record dd { font-size: clamp(46px, 7.8vw, 64px); }
  .results-v2 .case-area { margin-top: 88px; }
  .results-v2 .case-heading { margin-bottom: 36px; }
  .results-v2 .case-heading h2 { font-size: 32px; }
  .results-v2 .all-cases { font-size: 13px; gap: 8px; }
  .results-v2 .case-grid { grid-template-columns: 1fr; gap: 48px; }
  .results-v2 .case-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  .results-v2 .case-meta { margin-top: 0; }
  .results-v2 .case-card h3 { font-size: 22px; }
  .results-v2 .case-work { margin-top: 12px; }
  .results-v2 .case-cta { margin-top: 0; padding-top: 16px; min-height: 48px; }
}
@media (max-width: 599px) {
  .results-v2 { padding-block: 72px 80px; --results-card-distance: var(--zto-motion-distance-phrase-compact, 6px); }
  .results-v2 .record-heading { font-size: 28px; }
  .results-v2 .record-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .results-v2 .record { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .results-v2 .record dd { margin: 0; font-size: clamp(44px, 13vw, 54px); }
  .results-v2 .record-note { margin-top: 28px; font-size: 12px; }
  .results-v2 .case-area { margin-top: 72px; }
  .results-v2 .case-heading { display: block; margin-bottom: 32px; }
  .results-v2 .case-heading h2 { font-size: 29px; }
  .results-v2 .all-cases { margin-top: 16px; font-size: 14px; }
  .results-v2 .case-grid { gap: 52px; }
  .results-v2 .case-link { display: block; }
  .results-v2 .case-meta { margin-top: 22px; }
  .results-v2 .case-card h3 { font-size: 23px; }
  .results-v2 .case-source { display: block; margin-top: 40px; }
  .results-v2 .case-source a { display: inline-block; margin-top: 8px; }
  .review-tools .review-inner { display: block; }
  .review-tools .original { display: inline-block; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .results-v2 *, .results-v2 *::after { animation: none !important; transition: none !important; }
  .results-v2 .art-arrow svg, .results-v2 .case-cta svg { transform: none !important; }
  .results-v2 .metric-final { opacity: 1 !important; }
  .results-v2 .metric-live { display: none !important; }
}