/* =========================================================================
   Report details v2 (Reports CMS template): hero + data field / benefit items.
   Same tokens as every v2 page (--ds-*): site fonts, one accent, soft card shadow, site icon tiles.
   ========================================================================= */
.rp-root:has(.rph, .rpi) { background: transparent; }
.rp-root:has(.rpi) { height: 100%; }

/* ---------------------------------------------------------------- hero */
.rp-root .rph { position: relative; isolation: isolate; padding: var(--pr-top, 168px) var(--pr-side, 32px) var(--pr-bottom, 96px); overflow: clip; font-family: var(--ds-font-body); }
.rp-root .rph-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 72% 10%, color-mix(in srgb, var(--ds-primary) 10%, transparent), transparent 70%),
    radial-gradient(30% 46% at 94% 52%, color-mix(in srgb, var(--ds-accent) 8%, transparent), transparent 70%); }
.rp-root .rph-in { width: min(var(--pr-w, 1240px), 100%); margin-inline: auto; display: grid; gap: 64px; align-items: center; }
.rp-root .rph--split .rph-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
.rp-root .rph:not(.rph--split) .rph-text { max-width: 820px; margin-inline: auto; justify-items: center; text-align: center; }
.rp-root .rph-text { display: grid; justify-items: start; gap: 22px; }
.rp-root .rph-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 13.5px/1.2 var(--ds-font-body); color: var(--ds-muted); }
.rp-root .rph-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.rp-root .rph-crumbs li + li::before { content: ''; width: 5px; height: 5px; margin: 0 6px 0 2px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.rp-root .rph-crumbs a { color: var(--ds-text); text-decoration: none; padding: 4px 2px; transition: color .2s; }
.rp-root .rph-crumbs a:hover { color: var(--ds-primary); }
.rp-root .rph-crumbs [aria-current] span { display: block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-root .rph-cat { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .88); text-decoration: none;
  font: 600 13px/1 var(--ds-font-body); color: var(--ds-ink); box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 10px 24px -18px rgba(16, 30, 80, .4); transition: box-shadow .25s; }
.rp-root .rph-cat:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 28%, transparent), 0 14px 26px -18px rgba(16, 30, 80, .5); }
.rp-root .rph-cat-ic { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); box-shadow: var(--ds-icon-shadow); }
.rp-root .rph-cat-ic .rr-svg { width: 16px; height: 16px; stroke-width: 1.9; }
.rp-root .rph-title { margin: 0; font: var(--ds-h-weight) var(--rph-h1, calc(var(--ds-h1) * .8))/1.04 var(--ds-font-display); letter-spacing: -.038em; color: var(--ds-ink); text-wrap: balance; max-width: var(--rph-h1-w, 18ch); }
.rp-root .rph-sum { margin: 0; max-width: 54ch; font: 400 var(--rph-sum, var(--ds-lead))/1.6 var(--ds-font-body); color: var(--ds-text); text-wrap: pretty; }
.rp-root .rph-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.rp-root .rph:not(.rph--split) .rph-ctas { justify-content: center; }
.rp-root .rph-store { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 7px 0 8px; border-radius: 999px; background: var(--ds-btn-bg); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 20, 46, .2), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .35s var(--rp-ease), box-shadow .35s; }
.rp-root .rph-store:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(16, 20, 46, .65); }
.rp-root .rph-store-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.rp-root .rph-store-ic svg { width: 21px; height: 21px; fill: #95bf47; }
.rp-root .rph-store-t { display: grid; gap: 3px; padding-right: 6px; }
.rp-root .rph-store-t small { font: 600 9.5px/1 var(--ds-font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.rp-root .rph-store-t b { font: 600 15.5px/1.1 var(--ds-font-body); letter-spacing: -.01em; white-space: nowrap; }
.rp-root .rph-store-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; }
.rp-root .rph-store-go svg { width: 18px; height: 18px; fill: none; stroke: var(--ds-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--rp-ease); }
.rp-root .rph-store:hover .rph-store-go svg { transform: translateX(3px); }
.rp-root .rph .hv-btn--ghost { min-height: 58px; }
.rp-root .rph-proof { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 500 13.5px/1.2 var(--ds-font-body); color: var(--ds-text); }
.rp-root .rph-proof i { font-style: normal; letter-spacing: .06em; color: #f5b300; font-size: 13px; }
/* entry */
.rp-root .rph :is(.rph-crumbs, .rph-cat, .rph-title, .rph-sum, .rph-ctas, .rph-proof, .rph-vis) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease, transform 1s var(--rp-ease); }
.rp-root .rph.is-in :is(.rph-crumbs, .rph-cat, .rph-title, .rph-sum, .rph-ctas, .rph-proof, .rph-vis) { opacity: 1; transform: none; }
.rp-root .rph.is-in .rph-cat { transition-delay: .04s; } .rp-root .rph.is-in .rph-title { transition-delay: .08s; } .rp-root .rph.is-in .rph-sum { transition-delay: .16s; }
.rp-root .rph.is-in .rph-ctas { transition-delay: .24s; } .rp-root .rph.is-in .rph-proof { transition-delay: .3s; } .rp-root .rph.is-in .rph-vis { transition-delay: .2s; }

/* visual: the report in a glass frame + floating chips */
.rp-root .rph-vis { --tx: 0; --ty: 0; position: relative; perspective: 1400px; }
.rp-root .rph-stage { position: relative; padding: 26px 22px 34px; transform: rotateY(calc(var(--tx) * 8deg)) rotateX(calc(var(--ty) * -6deg)); transform-style: preserve-3d; transition: transform .8s var(--rp-ease); }
.rp-root .rph-stage::before { content: ''; position: absolute; inset: 16% 10% 6%; z-index: -1; border-radius: 40px; background: linear-gradient(120deg, color-mix(in srgb, var(--ds-primary) 32%, transparent), color-mix(in srgb, var(--ds-accent) 28%, transparent)); filter: blur(56px); opacity: .55; }
.rp-root .rph-frame { position: relative; padding: 10px; border-radius: var(--ds-r-card); overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), color-mix(in srgb, var(--ds-primary) 6%, #fff) 60%, color-mix(in srgb, var(--ds-accent) 9%, #fff));
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .06), 0 2px 6px rgba(16, 20, 46, .04), 0 50px 90px -56px rgba(16, 30, 80, .55); }
.rp-root .rph-frame img { display: block; width: 100%; height: auto; aspect-ratio: var(--rph-ratio, 16 / 10); object-fit: cover; object-position: top left; border-radius: calc(var(--ds-r-card) - 10px); background: #f2f4f8; }
.rp-root .rph-gloss { position: absolute; inset: 10px; border-radius: calc(var(--ds-r-card) - 10px); pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .26), transparent 60%); }
.rp-root .rph-vis:hover .rph-gloss { opacity: 1; }
.rp-root .rph-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13px/1 var(--ds-font-body); color: var(--ds-ink); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 24px 44px -26px rgba(16, 30, 80, .5);
  opacity: 0; transition: opacity .6s ease, transform .9s var(--rp-ease); }
.rp-root .rph-chip-ic { display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); }
.rp-root .rph-chip-ic .rr-svg { width: 16px; height: 16px; stroke-width: 2; }
.rp-root .rph-chip--0 { left: -6px; top: 18%; transform: translate3d(calc(var(--tx) * -14px), calc(14px + var(--ty) * -10px), 40px); }
.rp-root .rph-chip--1 { right: -4px; top: 6%; transform: translate3d(calc(var(--tx) * -22px), calc(14px + var(--ty) * -14px), 60px); }
.rp-root .rph-chip--2 { right: 10%; bottom: 8px; transform: translate3d(calc(var(--tx) * -18px), calc(14px + var(--ty) * -12px), 50px); }
.rp-root .rph.is-in .rph-chip { opacity: 1; }
.rp-root .rph.is-in .rph-chip--0 { transition-delay: .7s; transform: translate3d(calc(var(--tx) * -14px), calc(var(--ty) * -10px), 40px); }
.rp-root .rph.is-in .rph-chip--1 { transition-delay: .85s; transform: translate3d(calc(var(--tx) * -22px), calc(var(--ty) * -14px), 60px); }
.rp-root .rph.is-in .rph-chip--2 { transition-delay: 1s; transform: translate3d(calc(var(--tx) * -18px), calc(var(--ty) * -12px), 50px); }
.rp-root .rph.is-still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .rp-root .rph * { transition: none !important; } }
@container rp (max-width: 991px) {
  .rp-root .rph--split .rph-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rp-root .rph-vis { max-width: 640px; width: 100%; margin-inline: auto; }
}
@container rp (max-width: 767px) {
  .rp-root .rph { padding-top: var(--pr-top, 128px); padding-bottom: var(--pr-bottom, 64px); }
  .rp-root .rph-crumbs [aria-current] { display: none; }
  .rp-root .rph-stage { padding: 18px 8px 26px; }
  .rp-root .rph-chip { font-size: 12px; padding: 6px 11px 6px 6px; }
  .rp-root .rph-chip--2 { display: none; }
  .rp-root .rph-text { width: 100%; gap: 18px; }
  .rp-root .rph-title { font-size: var(--rph-h1, clamp(32px, 8.4cqw, 44px)); }
  .rp-root .rph .hv-btn--ghost { min-height: 56px; }
}

/* ---------------------------------------------------------------- data field / benefit items */
.rp-root .rpi { box-sizing: border-box; height: 100%; font-family: var(--ds-font-body); background: #fff; transition: box-shadow .3s, transform .4s var(--rp-ease); }
.rp-root .rpi--field { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(16, 20, 46, .07), 0 1px 2px rgba(16, 20, 46, .03); outline: none; }
.rp-root .rpi--field:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 26%, transparent), 0 24px 44px -34px rgba(16, 30, 80, .45); transform: translateY(-2px); }
.rp-root .rpi-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ds-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 12%, transparent); }
.rp-root .rpi-fb { display: grid; gap: 4px; min-width: 0; }
.rp-root .rpi--field .rpi-t { font: 600 15px/1.35 var(--ds-font-body); color: var(--ds-ink); }
.rp-root .rpi--field .rpi-d { font: 400 13.5px/1.5 var(--ds-font-body); color: var(--ds-text); }
.rp-root .rpi--benefit { display: grid; align-content: start; gap: 12px; padding: 26px 24px; border-radius: var(--ds-r-card);
  box-shadow: 0 0 0 1px rgba(16, 20, 46, .06), 0 1px 2px rgba(16, 20, 46, .04), 0 30px 60px -44px rgba(16, 30, 80, .42); }
.rp-root .rpi--benefit:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-primary) 18%, transparent), 0 2px 6px rgba(16, 20, 46, .05), 0 44px 80px -46px rgba(16, 30, 80, .55); }
.rp-root .rpi-ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border-radius: var(--ds-icon-r); background: var(--ds-icon-bg); color: var(--ds-icon-fg); box-shadow: var(--ds-icon-shadow); }
.rp-root .rpi-ic .rr-svg { width: 22px; height: 22px; stroke-width: 1.8; }
.rp-root .rpi--benefit .rpi-t { margin-top: 4px; font: var(--ds-h-weight) 20px/1.25 var(--ds-font-display); letter-spacing: -.018em; color: var(--ds-ink); }
.rp-root .rpi--benefit .rpi-d { margin: 0; font: 400 15px/1.6 var(--ds-font-body); color: var(--ds-text); }
@container rp (max-width: 767px) { .rp-root .rph-chip--0 { left: 4px; top: auto; bottom: 4px; } .rp-root .rph-chip--1 { right: 4px; top: 0; } }
.rp-root .rph-store-t { text-align: left; }

/* v73: optional date line (Guides template) */
.rp-root .rph-date { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 0; font: 500 14px/1.2 var(--ds-font-body); color: var(--ds-text); opacity: .9; }
.rp-root .rph-date svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.rp-root .rph-date span { color: var(--ds-text); }
.rp-root .rph :is(.rph-date) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease, transform 1s var(--rp-ease); }
.rp-root .rph.is-in .rph-date { opacity: .9; transform: none; transition-delay: .2s; }
.rp-root .rph.is-still .rph-date { transition: none; }