/* Reporting showcase: retains the existing 40/60 split and ice-blue report field. */
.metrics-showcase .benefits-copy{gap:36px}
.metrics-showcase .benefits-label{color:#173faa}
.metrics-showcase .benefits-label::after{background:#1f4fd6}
.metrics-showcase .benefits-list{border-bottom:1px solid #c7d5e6}
.metrics-showcase .benefits-list li{padding:18px 0;border-color:#c7d5e6}
.metrics-showcase .benefits-list li:last-child{border-bottom:0}
.metrics-showcase .benefits-list strong{font-size:16px;letter-spacing:-.01em}
.metrics-showcase .benefits-list span{color:#435873;font-size:15px;line-height:1.55}
.metrics-showcase .benefits-panel{padding-top:40px;background:#dde5ff}
.metrics-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.metrics-showcase .metrics-eyebrow{margin:0 0 7px;font:500 11px/1.3 var(--tl-font-body);letter-spacing:.08em;text-transform:uppercase;color:#365798}
.metrics-showcase .benefits-panel h3{margin:0 0 24px;color:#142a43;font-size:clamp(21px,1.65vw,24px)}
.metrics-panel-note{margin:1px 0 0;padding:5px 8px;border:1px solid #94a8c4;border-radius:999px;color:#365798;font:500 11px/1.2 var(--tl-font-body);letter-spacing:.03em;white-space:nowrap}
.metrics-showcase .client-chart-source{min-height:290px}
.metrics-showcase .dashboard-open{border-color:#173faa;color:#173faa}
.metrics-showcase .dashboard-open:hover{background:#173faa;color:#fff}

@media(max-width:850px){
 .metrics-showcase .benefits-copy{gap:28px}
 .metrics-showcase .benefits-panel{padding-top:32px}
 .metrics-showcase .client-chart-source{min-height:0}
}
@media(max-width:560px){
 .metrics-panel-heading{margin-bottom:22px}
 .metrics-panel-note{font-size:10px}
 .metrics-showcase .benefits-list li{padding:16px 0}
}
@media(prefers-reduced-motion:reduce){.metrics-showcase .dashboard-open{transition:none}}

/* Case layout: the report sits in a contained card on the content grid, not a full-bleed field. */
.metrics-case .benefits-layout{align-items:start}
.metrics-case .benefits-copy{align-self:start;gap:32px}
.metrics-case__list{counter-reset:case}
.metrics-case__list li{counter-increment:case;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;cursor:default;transition:background-color .2s ease}
.metrics-case__list li::before{content:counter(case,decimal-leading-zero);grid-row:1/3;font:500 14px/26px var(--tl-font-display);color:var(--h-cobalt);font-variant-numeric:tabular-nums}
.metrics-case__list li.is-active strong{color:var(--h-cobalt)}
.metrics-case .benefits-panel.metrics-case__card{min-height:0;margin-right:var(--gutter);padding:28px 24px 20px;background:#fff;border:1px solid var(--h-line);border-radius:20px;box-shadow:0 1px 2px rgba(10,37,64,.05),0 18px 40px -24px rgba(10,37,64,.28)}
.metrics-case__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--h-line)}
.metrics-case .benefits-panel .metrics-case__head h3{margin:0;font-size:clamp(20px,1.6vw,22px)}
.metrics-case .benefits-panel .dashboard-open{position:static;min-height:44px;padding:10px 16px;font-size:15px;white-space:nowrap}
.metrics-case .client-chart-source{min-height:0}
@media(max-width:1100px){.metrics-case .benefits-panel.metrics-case__card{padding:24px 24px 16px}}
@media(max-width:850px){
 .metrics-case .benefits-panel.metrics-case__card{margin:0 var(--gutter)}
 .metrics-case__head{flex-wrap:wrap;gap:12px}
}
@media(max-width:600px){.metrics-case .benefits-panel.metrics-case__card{padding:20px 18px 12px;border-radius:16px}.metrics-case .benefits-panel .dashboard-open{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.metrics-case__list li{transition:none}}
/* The card now ends level with the list beside it: shorter chart and tighter card spacing after the after-hours line was removed. */
.metrics-case .benefits-panel.metrics-case__card{padding:24px 24px 16px}
.metrics-case__head{padding-bottom:16px;margin-bottom:20px}
/* 1101 to 1439px: the chart frame needs 761px for the two charts to sit side by side (below that they stack and the card outgrows the list). The card takes more of the row here. */
@media(min-width:1101px) and (max-width:1439px){
 .harmony-home .metrics-case .benefits-layout{grid-template-columns:minmax(0,35fr) minmax(0,65fr)}
 .metrics-case .benefits-panel.metrics-case__card{margin-right:16px;padding:20px 20px 14px}
}
/* When the list runs longer than the card, the card stretches so both end on the same line. */
.harmony-home .metrics-case .benefits-panel.metrics-case__card{align-self:stretch}
/* The chart frame reaches 14px into the card's left padding and the charts document pads itself by the same 14px, so the Live now pulse ring has room without moving any content. */
.metrics-case #landing-client-charts{margin-left:-14px;width:calc(100% + 14px)!important;max-width:none}
/* Narrower white margin inside the card; the chart frame still has its 14px for the pulse ring. */
.metrics-case .benefits-panel.metrics-case__card{padding-left:16px;padding-right:16px}
@media(min-width:1101px) and (max-width:1439px){.metrics-case .benefits-panel.metrics-case__card{padding-left:14px;padding-right:14px}}