/* The Agentic Fraud Report — /resources/agentic-fraud-report/ (.p-freport)
   x3 design language: dark aurora hero + proof strip, two-sided timeline,
   native CSS bar chart, hairline data tables, segment meters, tabbed step
   chains, interactive projection, sourced case files, aurora CTA. Chapters
   open on the home's rounded curtain seam. Tokens only, no chart library. */

.p-freport {
  background: var(--color-black);
  color: var(--color-white);
}

.p-freport .fr-mono { font-family: var(--font-sans); }
.p-freport .fr-label {
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.5);
}
.p-freport .fr-label--light { color: var(--color-kicker-on-white); }

/* shared section shells */
.p-freport .fr-waves__inner,
.p-freport .fr-monthly__inner,
.p-freport .fr-shifts__inner,
.p-freport .fr-rise__inner,
.p-freport .fr-zone__inner,
.p-freport .fr-anatomy__inner,
.p-freport .fr-scenario__inner,
.p-freport .fr-cases__inner,
.p-freport .fr-evidence__inner,
.p-freport .fr-method__inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 768px) {
  .p-freport .fr-waves__inner,
  .p-freport .fr-monthly__inner,
  .p-freport .fr-shifts__inner,
  .p-freport .fr-rise__inner,
  .p-freport .fr-zone__inner,
  .p-freport .fr-anatomy__inner,
  .p-freport .fr-scenario__inner,
  .p-freport .fr-cases__inner,
  .p-freport .fr-evidence__inner,
  .p-freport .fr-method__inner { padding-block: var(--space-section); }
}
@media (min-width: 1024px) {
  .p-freport .fr-waves__inner,
  .p-freport .fr-monthly__inner,
  .p-freport .fr-shifts__inner,
  .p-freport .fr-rise__inner,
  .p-freport .fr-zone__inner,
  .p-freport .fr-anatomy__inner,
  .p-freport .fr-scenario__inner,
  .p-freport .fr-cases__inner,
  .p-freport .fr-evidence__inner,
  .p-freport .fr-method__inner { padding-inline: 24px; }
}

/* shared titles / subs / notes.
   The measure caps are sized for the near-full-bleed container: 40ch keeps
   the longest chapter title at 2 balanced lines, 96ch keeps every section
   intro at ≤3 lines at 1280×900. */
.p-freport .fr-title {
  margin-top: 16px;
  max-width: 40ch;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 26px;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--color-black);
}
@media (min-width: 640px) { .p-freport .fr-title { font-size: 32px; } }
@media (min-width: 768px) { .p-freport .fr-title { font-size: 38px; } }
.p-freport .fr-title--dark { color: var(--color-white); }
.p-freport .fr-sub {
  margin-top: 20px;
  max-width: 96ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-freport .fr-sub--dark { color: rgba(255, 255, 255, 0.72); }
.p-freport .fr-note {
  margin-top: 24px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.45);
}
.p-freport .fr-note--light { color: var(--color-grey-300); }

/* interaction hints (Sofia, 2026-07-24 PM: "too hidden, make them more
   visible") — a visible chip: white pill, hairline border, cursor glyph,
   readable grey. Still calm, but clearly a UI affordance. */
.p-freport .fr-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: var(--color-white);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-500);
}
.p-freport .fr-hint svg { flex-shrink: 0; color: var(--color-blue); }
/* hints sit above their visual, not below (Sofia, 2026-07-24 PM);
   the chart tooltip is hover-only — no hint where there's no pointer */
.p-freport .fr-chart__hint { margin-top: 28px; }
@media (max-width: 899px) { .p-freport .fr-chart__hint { display: none; } }
.p-freport .fr-anatomy__hint { margin-top: 28px; }

/* ---------- hero ---------- */
.p-freport .fr-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 88svh;
  overflow: hidden;
  background: var(--color-black);
}
.p-freport .fr-hero__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 8% -6%, color-mix(in oklab, var(--color-x3-blue-deep) 34%, transparent), transparent 65%),
    radial-gradient(46% 60% at 96% 16%, color-mix(in oklab, var(--color-x3-indigo) 26%, transparent), transparent 66%),
    radial-gradient(60% 52% at 46% 108%, color-mix(in oklab, var(--color-x3-blue-bright) 14%, transparent), transparent 62%);
}
.p-freport .fr-hero__inner {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: 148px 20px 48px;
}
@media (min-width: 768px) { .p-freport .fr-hero__inner { padding-top: 172px; } }
@media (min-width: 1024px) { .p-freport .fr-hero__inner { padding-inline: 24px; } }
.p-freport .fr-hero__title {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 12vw;
  line-height: 0.98;
}
@media (min-width: 640px) { .p-freport .fr-hero__title { font-size: 8.5vw; } }
@media (min-width: 1024px) { .p-freport .fr-hero__title { font-size: clamp(56px, 6.4vw, 96px); } }
.p-freport .fr-hero__dek {
  margin-top: 24px;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 640px) { .p-freport .fr-hero__dek { font-size: var(--fs-xl); } }

/* proof strip */
.p-freport .fr-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
}
@media (min-width: 640px) {
  .p-freport .fr-proof { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.p-freport .fr-proof__item { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 640px) {
  .p-freport .fr-proof__item + .fr-proof__item {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 32px;
  }
}
.p-freport .fr-proof__value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 32px;
  line-height: 1;
}
@media (min-width: 768px) { .p-freport .fr-proof__value { font-size: 40px; } }
.p-freport .fr-proof__cap {
  max-width: 30ch;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- chapter seams (home motif) ---------- */
.p-freport .fr-monthly,
.p-freport .fr-rise,
.p-freport .fr-anatomy,
.p-freport .fr-cases,
.p-freport .fr-method {
  position: relative;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-freport .fr-monthly,
  .p-freport .fr-rise,
  .p-freport .fr-anatomy,
  .p-freport .fr-cases,
  .p-freport .fr-method {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
/* covered chapters give the overlap back */
.p-freport .fr-waves,
.p-freport .fr-shifts,
.p-freport .fr-zone,
.p-freport .fr-scenario,
.p-freport .fr-evidence { padding-bottom: 20px; }
@media (min-width: 768px) {
  .p-freport .fr-waves,
  .p-freport .fr-shifts,
  .p-freport .fr-zone,
  .p-freport .fr-scenario,
  .p-freport .fr-evidence { padding-bottom: 32px; }
}

/* ---------- waves: two-sided timeline ---------- */
.p-freport .fr-waves { background: var(--color-black); }
.p-freport .fr-waves__colhead {
  display: none;
}
@media (min-width: 900px) {
  .p-freport .fr-waves__colhead {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: 40px;
  }
}
.p-freport .fr-waves__colhead-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: rgba(255, 255, 255, 0.6);
}
.p-freport .fr-waves__rows { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.p-freport .fr-wave {
  display: grid;
  gap: 12px 28px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 900px) {
  .p-freport .fr-wave { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); }
}
.p-freport .fr-wave__year {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-x3-blue-bright);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-wave__cell--fraud { position: relative; }
@media (min-width: 900px) {
  .p-freport .fr-wave__cell--fraud {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 28px;
  }
}
.p-freport .fr-wave__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-xl);
  line-height: 1.25;
  color: var(--color-white);
}
.p-freport .fr-wave__desc {
  margin-top: 6px;
  max-width: 52ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- monthly incidents chart (bright) ---------- */
.p-freport .fr-monthly {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-freport .fr-chart { position: relative; margin-top: 48px; }
.p-freport .fr-chart__markers {
  position: relative;
  height: 22px;
}
.p-freport .fr-chart__marker {
  position: absolute;
  bottom: -180px;
  top: 0;
  width: 1px;
  background: color-mix(in srgb, var(--color-blue) 25%, transparent);
}
.p-freport .fr-chart__marker-label {
  position: absolute;
  top: -4px;
  left: 6px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
/* under tablet the model names overlap each other — keep the marker
   lines, drop the labels */
@media (max-width: 767px) {
  .p-freport .fr-chart__markers { height: 8px; }
  .p-freport .fr-chart__marker-label { display: none; }
}
.p-freport .fr-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 180px;
  border-bottom: 1px solid var(--color-border-light);
}
.p-freport .fr-chart__slot {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: 0;
}
/* hovered month: every other bar dims and a baseline tick marks the
   hovered slot (no column fill — a tint reads as another data bar) */
.p-freport .fr-chart__bars.is-hovering .fr-chart__bar { opacity: 0.35; }
.p-freport .fr-chart__slot.is-hover .fr-chart__bar { opacity: 1; }
.p-freport .fr-chart__slot.is-hover {
  box-shadow: inset 0 -3px 0 var(--color-blue);
}
.p-freport .fr-chart__bar {
  position: relative;
  width: 100%;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--color-blue-200);
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.p-freport .fr-chart__bar-conf {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-blue);
}
.p-freport .fr-chart__axis { display: flex; gap: 2px; margin-top: 8px; }
.p-freport .fr-chart__tick { flex: 1; min-width: 0; }
.p-freport .fr-chart__year {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-300);
}
/* hover tooltip: ink panel above the hovered bar (month · counts · cases) */
.p-freport .fr-chart { position: relative; }
.p-freport .fr-chart__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s var(--ease-out-expo);
}
.p-freport .fr-chart__tip.is-visible { opacity: 1; }
.p-freport .fr-chart__tip-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue-200);
}
.p-freport .fr-chart__tip-counts {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-white);
}
.p-freport .fr-chart__tip-list {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-freport .fr-chart__tip-list li {
  position: relative;
  padding-left: 12px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
.p-freport .fr-chart__tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-blue);
}
.p-freport .fr-chart__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}
.p-freport .fr-chart__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 16px;
  border-radius: 3px;
  background: var(--color-blue-200);
}
.p-freport .fr-chart__swatch:first-child { margin-left: 0; }
.p-freport .fr-chart__swatch--conf { background: var(--color-blue); }

/* ---------- four shifts (bright) ---------- */
.p-freport .fr-shifts {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-freport .fr-shifts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 640px) { .p-freport .fr-shifts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .p-freport .fr-shifts__grid { grid-template-columns: repeat(4, 1fr); gap: 48px; } }
.p-freport .fr-shift {
  border-top: 1px solid var(--color-black);
  padding-top: 20px;
}
.p-freport .fr-shift__num {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
.p-freport .fr-shift__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--color-black);
}
.p-freport .fr-shift__body {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-grey-on-white);
}
.p-freport .fr-shifts__coda {
  margin-top: 48px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 24px;
}

/* ---------- rising categories (dark table) ---------- */
.p-freport .fr-rise,
.p-freport .fr-zone {
  background: var(--color-black);
  color: var(--color-white);
}
.p-freport .fr-rise__rows,
.p-freport .fr-zone__rows {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.p-freport .fr-rise__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 900px) {
  .p-freport .fr-rise__row {
    grid-template-columns: 260px minmax(0, 1fr) 84px 200px;
  }
}
.p-freport .fr-rise__name,
.p-freport .fr-zone__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-white);
}
.p-freport .fr-rise__track {
  display: none;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
@media (min-width: 900px) { .p-freport .fr-rise__track { display: block; } }
.p-freport .fr-rise__bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-x3-blue-deep), var(--color-x3-blue-bright));
}
.p-freport .fr-rise__growth {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
  /* large text on ink reads in lightened blue; full-strength blue stays on small details */
  color: color-mix(in srgb, var(--color-x3-blue-bright) 40%, white);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-rise__loss {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
}
.p-freport .fr-rise__loss em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- automatability meters (dark) ---------- */
.p-freport .fr-zone__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 900px) {
  .p-freport .fr-zone__row {
    grid-template-columns: 260px minmax(0, 1fr) 56px 140px;
  }
}
.p-freport .fr-zone__meter {
  display: flex;
  gap: 4px;
}
.p-freport .fr-zone__seg {
  height: 8px;
  flex: 1;
  min-width: 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.p-freport .fr-zone__seg.is-on { background: var(--color-x3-blue-bright); }
/* same treatment as the rise growth numbers: display type in lightened accent */
.p-freport .fr-zone__score {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
  color: color-mix(in srgb, var(--color-x3-blue-bright) 40%, white);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-zone__loss {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wider);
  color: var(--color-white);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- anatomy (bright, tabs → step chain) ---------- */
.p-freport .fr-anatomy {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-freport .fr-anatomy__layout { margin-top: 40px; }
/* mobile / tablet: one tidy swipeable pill row instead of ragged wrapping */
.p-freport .fr-anatomy__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.p-freport .fr-anatomy__tabs::-webkit-scrollbar { display: none; }
.p-freport .fr-anatomy__tab {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-500);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.p-freport .fr-anatomy__tab:hover { border-color: var(--color-grey-200); color: var(--color-black); }
.p-freport .fr-anatomy__tab.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
/* desktop: the scam types become a selector rail beside the content */
@media (min-width: 1024px) {
  .p-freport .fr-anatomy__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-top: 48px;
  }
  .p-freport .fr-anatomy__tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }
  .p-freport .fr-anatomy__tab {
    flex-shrink: 1;
    white-space: normal;
    text-align: left;
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: var(--fs-sm);
  }
  .p-freport .fr-anatomy__tab:hover { background: var(--color-grey-100); color: var(--color-black); }
  .p-freport .fr-anatomy__tab.is-active { background: var(--color-black); color: var(--color-white); }
}
/* the panes column is a size container so the narr can scale itself to
   always fit one line (cqw = 1% of the pane column width) */
.p-freport .fr-anatomy__panes { container-type: inline-size; }
.p-freport .fr-anatomy__pane { display: none; margin-top: 32px; }
.p-freport .fr-anatomy__pane.is-active {
  display: block;
  animation: fr-pane-in 0.4s var(--ease-out-expo);
}
@keyframes fr-pane-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.p-freport .fr-anatomy__panehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.p-freport .fr-anatomy__narr {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-black);
}
/* desktop: the intro sentence stays on ONE line — nowrap, sized down by the
   container query only when the pane is too narrow for the longest sentence */
@media (min-width: 1024px) {
  .p-freport .fr-anatomy__panehead { flex-wrap: nowrap; }
  .p-freport .fr-anatomy__narr {
    white-space: nowrap;
    font-size: min(19px, 2.1cqw - 1px);
  }
}
.p-freport .fr-anatomy__play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-500);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.p-freport .fr-anatomy__play:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}
.p-freport .fr-anatomy__play.is-playing {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
/* the icon pair swaps with the label: triangle at rest, square while playing */
.p-freport .fr-anatomy__stop-ic { display: none; }
.p-freport .fr-anatomy__play.is-playing .fr-anatomy__play-ic { display: none; }
.p-freport .fr-anatomy__play.is-playing .fr-anatomy__stop-ic { display: block; }
.p-freport .fr-anatomy__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
/* each step is a card (Sofia, 2026-07-23: no circled numbers — the plain
   number sits inside the card, echoing the hero panels) */
.p-freport .fr-anatomy__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.35s ease;
}
/* the cards are one process: a short connector bridges each gap, aligned
   under the step numbers */
.p-freport .fr-anatomy__step + .fr-anatomy__step::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 27px;
  width: 1px;
  height: 14px;
  background: var(--color-grey-200);
}
.p-freport .fr-anatomy__step:hover {
  border-color: var(--color-grey-200);
  box-shadow: none;
}
.p-freport .fr-anatomy__step-num {
  flex-shrink: 0;
  padding-top: 3px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-anatomy__step-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* staggered cascade each time a pane activates */
.p-freport .fr-anatomy__pane.is-active .fr-anatomy__step {
  animation: fr-step-in 0.55s var(--ease-out-expo) both;
  animation-delay: calc(0.06s * var(--fr-step-i, 0));
}
@keyframes fr-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .p-freport .fr-anatomy__pane { margin-top: 4px; }
  .p-freport .fr-anatomy__steps { margin-top: 36px; }
  .p-freport .fr-anatomy__step {
    gap: 20px;
    padding: 18px 24px;
  }
  .p-freport .fr-anatomy__step + .fr-anatomy__step::before { left: 31px; }
  .p-freport .fr-anatomy__step-copy { max-width: 60ch; gap: 4px; }
}
.p-freport .fr-anatomy__step-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-black);
}
.p-freport .fr-anatomy__step-desc {
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
}
.p-freport .fr-anatomy__step-src {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--color-grey-300);
  transition: color 0.2s ease;
}
.p-freport .fr-anatomy__step-src:hover { color: var(--color-blue); }
.p-freport .fr-anatomy__step-src svg { width: 12px; height: 12px; }
/* playback: Play walks the chain — every card dims, then lights up in order;
   the entrance cascade is cleared so its fill-mode can't pin opacity at 1 */
.p-freport .fr-anatomy__pane.is-active .fr-anatomy__steps.is-playing .fr-anatomy__step {
  animation: none;
  opacity: 0.25;
}
.p-freport .fr-anatomy__pane.is-active .fr-anatomy__steps.is-playing .fr-anatomy__step.is-played { opacity: 1; }
.p-freport .fr-anatomy__pane.is-active .fr-anatomy__steps.is-playing .fr-anatomy__step.is-current {
  opacity: 1;
  border-color: var(--color-black);
  box-shadow: none;
}
/* ---------- scenario (bright, interactive multiplier) ---------- */
.p-freport .fr-scenario {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-freport .fr-scenario__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}
.p-freport .fr-scenario__prompt { margin-top: 0; max-width: 96ch; /* 2 lines beside the multiplier picker */ }
.p-freport .fr-scenario__picker { display: flex; flex-direction: column; gap: 8px; }
.p-freport .fr-scenario__picker-cap {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-on-white);
}
.p-freport .fr-scenario__mults { display: flex; gap: 8px; }
.p-freport .fr-scenario__mult {
  padding: 8px 18px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-500);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-scenario__mult:hover { border-color: var(--color-grey-200); color: var(--color-black); }
.p-freport .fr-scenario__mult.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
.p-freport .fr-scenario__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  border-top: 1px solid var(--color-black);
  padding-top: 24px;
}
/* the multiplier picker rides the totals row, pushed to the far edge */
.p-freport .fr-scenario__totals .fr-scenario__picker { margin-left: auto; }
.p-freport .fr-scenario__total { display: flex; flex-direction: column; gap: 6px; }
.p-freport .fr-scenario__total-cap {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-on-white);
}
.p-freport .fr-scenario__total-value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 34px;
  line-height: 1;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-freport .fr-scenario__total-value { font-size: 44px; } }
.p-freport .fr-scenario__total-value--proj { color: var(--color-blue); }
/* legend mirrors the incidents chart's, with dot swatches for the dumbbell;
   hidden alongside the bars under 900px — swatches without bars mislead */
.p-freport .fr-scenario__legend {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}
@media (min-width: 900px) { .p-freport .fr-scenario__legend { display: flex; } }
.p-freport .fr-scenario__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 16px;
  border-radius: 999px;
  background: var(--color-blue-200);
}
.p-freport .fr-scenario__swatch--now { margin-left: 0; background: var(--color-blue); }
.p-freport .fr-scenario__rows {
  margin-top: 12px;
  border-top: 1px solid var(--color-border-light);
}
.p-freport .fr-scenario__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 900px) {
  .p-freport .fr-scenario__row { grid-template-columns: 260px minmax(0, 1fr) 170px; }
}
.p-freport .fr-scenario__namecell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-freport .fr-scenario__name { font-size: var(--fs-sm); font-weight: 500; color: var(--color-black); }
.p-freport .fr-scenario__auto {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-400);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-scenario__track {
  position: relative;
  display: none;
  height: 8px;
  border-radius: 4px;
  background: var(--color-grey-100);
  overflow: hidden;
}
@media (min-width: 900px) { .p-freport .fr-scenario__track { display: block; } }
.p-freport .fr-scenario__bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  transition: width 0.6s var(--ease-out-expo);
}
.p-freport .fr-scenario__bar--proj { background: var(--color-blue-200); }
.p-freport .fr-scenario__bar--now { background: var(--color-blue); z-index: 1; }
/* armed = collapsed entrance state (fraud-report.js drops the class on
   scroll-in); !important outranks the inline width the multiplier sets */
.p-freport .fr-scenario__rows.is-armed .fr-scenario__bar { width: 0 !important; }
.p-freport .fr-scenario__value {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-on-white);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.p-freport .fr-scenario__value-arrow { color: var(--color-grey-300); }
.p-freport .fr-scenario__value-proj { font-weight: 600; color: var(--color-blue); }
/* log axis under the rows, aligned to the track column */
.p-freport .fr-scenario__axis {
  display: none;
  grid-template-columns: 260px minmax(0, 1fr) 170px;
  gap: 8px 24px;
  align-items: center;
  padding: 10px 0 2px;
}
@media (min-width: 900px) { .p-freport .fr-scenario__axis { display: grid; } }
.p-freport .fr-scenario__axis-track { position: relative; height: 16px; }
.p-freport .fr-scenario__axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-300);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-scenario__axis-tick:first-child { transform: none; }
.p-freport .fr-scenario__axis-cap {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-300);
  text-align: right;
}

/* ---------- case files (dark) ---------- */
.p-freport .fr-cases,
.p-freport .fr-evidence {
  background: var(--color-black);
  color: var(--color-white);
}
.p-freport .fr-cases__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.p-freport .fr-cases__filter {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.p-freport .fr-cases__filter:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--color-white); }
.p-freport .fr-cases__filter.is-active {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-black);
}
.p-freport .fr-cases__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 640px) { .p-freport .fr-cases__rows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .p-freport .fr-cases__rows { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .p-freport .fr-cases__rows { grid-template-columns: repeat(4, 1fr); } }
/* each case is a news card (Sofia, 2026-07-24: no visual — the press
   attribution IS the header): outlet favicon + name with the confidence
   pill opposite, then the clamped headline and date · loss.
   Ale, 2026-07-24: solid white cards were too harsh against the ink
   section — cards go translucent white with white text instead. */
.p-freport .fr-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.p-freport .fr-case:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}
.p-freport .fr-case[hidden] { display: none; }
.p-freport .fr-case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
}
.p-freport .fr-case__outlet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-freport .fr-case__outlet-logo {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  /* favicons are drawn for light UI — keep them on a white chip */
  background: var(--color-white);
  padding: 2px;
}
.p-freport .fr-case__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px 18px;
}
.p-freport .fr-case__conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.p-freport .fr-case__conf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.p-freport .fr-case__conf--confirmed_ai_incident {
  color: var(--color-blue-200);
  background: color-mix(in srgb, var(--color-blue) 28%, transparent);
}
.p-freport .fr-case__conf--suspected_or_reported_ai {
  color: var(--color-amber-200);
  background: color-mix(in srgb, var(--color-amber-600) 22%, transparent);
}
.p-freport .fr-case__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--color-white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-freport .fr-case__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.62);
}
.p-freport .fr-case__meta-sep { color: rgba(255, 255, 255, 0.35); }
.p-freport .fr-case__loss {
  font-weight: 600;
  color: var(--color-blue-200);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-case__loss--nd {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}
.p-freport .fr-cases__more,
.p-freport .fr-evidence__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.p-freport .fr-cases__more:hover,
.p-freport .fr-evidence__more:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--color-white); }
.p-freport .fr-cases__more[hidden],
.p-freport .fr-evidence__more[hidden] { display: none; }

/* ---------- external evidence (dark grid) ---------- */
.p-freport .fr-evidence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
  margin-top: 40px;
}
@media (min-width: 640px) { .p-freport .fr-evidence__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .p-freport .fr-evidence__grid { grid-template-columns: repeat(3, 1fr); } }
.p-freport .fr-ev {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 22px 0 26px;
  color: inherit;
  text-decoration: none;
}
.p-freport .fr-ev[hidden] { display: none; }
.p-freport .fr-ev__theme {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: rgba(255, 255, 255, 0.6);
}
.p-freport .fr-ev__value {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 28px;
  line-height: 1;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.p-freport .fr-ev__metric {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.7);
}
.p-freport .fr-ev__org {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
}
.p-freport .fr-ev:hover .fr-ev__org { color: var(--color-white); }
.p-freport .fr-ev__org svg { width: 12px; height: 12px; }

/* ---------- methodology + cta (bright) ---------- */
.p-freport .fr-method {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-freport .fr-method__notes { max-width: 96ch; }

/* methodology accordion (Sofia, 2026-07-23: the detail collapses so the
   reader reaches the CTA faster) — exclusive details rows on hairlines,
   animated by product-faq.js (.pr-faq__body contract) */
.p-freport .fr-method__acc {
  margin-top: 40px;
  border-top: 1px solid var(--color-border-light);
}
.p-freport .fr-method__item { border-bottom: 1px solid var(--color-border-light); }
.p-freport .fr-method__q {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
}
.p-freport .fr-method__q::-webkit-details-marker { display: none; }
.p-freport .fr-method__qhead { display: flex; flex-direction: column; gap: 6px; }
.p-freport .fr-method__qtitle {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 19px;
  line-height: 1.15;
  color: var(--color-black);
  transition: color 0.2s ease;
}
.p-freport .fr-method__q:hover .fr-method__qtitle { color: var(--color-blue); }
/* Ale, 2026-07-24: the + leads the title (left side) so the row reads
   as a "read more" button instead of floating at the far right edge */
.p-freport .fr-method__mark {
  order: -1;
  flex-shrink: 0;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--color-grey-300);
  transition: transform 0.3s var(--ease-out-expo), color 0.2s ease;
}
.p-freport .fr-method__q:hover .fr-method__mark { color: var(--color-blue); }
.p-freport .js-faq .fr-method__item.is-open .fr-method__mark,
.p-freport .fr-method__acc:not(.js-faq) .fr-method__item[open] .fr-method__mark {
  transform: rotate(45deg);
  color: var(--color-blue);
}
.p-freport .fr-method__body {
  overflow: hidden;
  padding: 2px 4px 28px;
}
.p-freport .fr-method__body > :first-child { margin-top: 0; }
.p-freport .fr-method__body .fr-method__keeplist { margin-top: 0; border-top: 0; }
.p-freport .fr-method__body .fr-method__keeplist li:last-child { border-bottom: 0; }
.p-freport .fr-method__body .fr-method__srclist { margin-top: 4px; }
.p-freport .fr-method__kicker {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
.p-freport .fr-method__ltitle {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--color-black);
}
.p-freport .fr-method__ltitle--sub { margin-top: 28px; font-size: var(--fs-body); }
.p-freport .fr-method__text {
  margin-top: 12px;
  max-width: 96ch;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-freport .fr-method__gates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
  counter-reset: fr-gate;
}
.p-freport .fr-method__gates li {
  position: relative;
  counter-increment: fr-gate;
  padding-left: 30px;
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: var(--color-black);
}
.p-freport .fr-method__gates li::before {
  content: counter(fr-gate);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  font-size: var(--fs-xs);
  color: var(--color-blue);
}
.p-freport .fr-method__confs {
  margin-top: 20px;
  border-top: 1px solid var(--color-border-light);
}
.p-freport .fr-method__conf { padding: 12px 0; }
.p-freport .fr-method__conf + .fr-method__conf { border-top: 1px solid var(--color-border-light); }
.p-freport .fr-method__conf-name {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-black);
}
.p-freport .fr-method__conf-desc {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-grey-on-white);
}

/* what to keep in mind + source roster (accordion bodies) */
.p-freport .fr-method__keeplist {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-light);
}
.p-freport .fr-method__keeplist li {
  border-bottom: 1px solid var(--color-border-light);
  padding: 14px 0;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-freport .fr-method__keeplist strong {
  font-weight: 600;
  color: var(--color-black);
}
.p-freport .fr-method__srclist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .p-freport .fr-method__srclist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .p-freport .fr-method__srclist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
.p-freport .fr-method__srclist li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  padding: 12px 16px;
}
.p-freport .fr-method__srcorg {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-black);
}
.p-freport .fr-method__srcwhat {
  font-size: var(--fs-xs);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
}

/* colophon: the report's closing fine print — wide enough that the whole
   notice sits on two balanced lines at desktop */
.p-freport .fr-colophon {
  margin: 40px auto 8px;
  max-width: 112ch;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  line-height: 1.7;
  color: var(--color-grey-300);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .p-freport .fr-anatomy__pane.is-active { animation: none; }
  .p-freport .fr-anatomy__pane.is-active .fr-anatomy__step,
  .p-freport .fr-anatomy__pane.is-active .fr-anatomy__step::after { animation: none; }
  .p-freport .fr-scenario__bar { transition: none; }
}

/* ══════════ hero v2: bright Storia-style arc timeline ══════════
   Hover-driven: the hero is one viewport tall, never pins, and the active
   stop (always starting at Nov 2022) changes on hover/click, Back/Next,
   or the scrubber — page scroll is untouched. Layout is three flexible
   zones — masthead → arc zone (fixed height) → center (flex-grow, content
   vertically centered) → bottom bar — so extra viewport height becomes
   air, never crowding. The arc carries model names only; the date surfaces
   on the active stop and in the center slide. */
.p-freport .fr-label--bright { color: var(--color-grey-on-white); }
.p-freport .fr-hero2 {
  --arc-r: 64vw;
  position: relative;
  background: var(--color-background);
  color: var(--color-foreground);
  transition: background-color 0.8s ease, color 0.8s ease;
}
.p-freport .fr-hero2__viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}
/* shared hub-hero ground: the 22px dot grid (components/hub-hero.css) on
   its own layer so the endgame plunge can fade it with the background */
.p-freport .fr-hero2__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--color-grey-200) 55%, transparent) 1px, transparent 0) 0 0 / 22px 22px;
  transition: opacity 0.8s ease;
}
.p-freport .fr-hero2.is-endgame .fr-hero2__viewport::before { opacity: 0; }
@media (max-width: 899px) {
  .p-freport .fr-hero2__viewport { height: auto; min-height: 100svh; }
}
/* soft aurora glow anchored to the bottom edge, Incode blues, bright */
.p-freport .fr-hero2__glow {
  position: absolute;
  inset: auto 0 -30vh 0;
  height: 70vh;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 22% 78%, color-mix(in oklab, var(--color-blue) 40%, transparent), transparent 70%),
    radial-gradient(42% 56% at 50% 88%, color-mix(in oklab, var(--color-blue-200) 95%, transparent), transparent 72%),
    radial-gradient(48% 62% at 78% 80%, color-mix(in oklab, var(--color-x3-indigo) 34%, transparent), transparent 70%);
  filter: blur(48px) saturate(120%);
  transform-origin: 50% 100%;
  animation: fr-glow-flow 18s ease-in-out infinite;
}
/* slow lateral sway + breathing rise; stays anchored to the bottom edge */
@keyframes fr-glow-flow {
  0%, 100% { transform: translateX(-3%) scale(1.04, 1); }
  33% { transform: translateX(2.5%) scale(1.08, 1.14); }
  66% { transform: translateX(3%) scale(1.05, 1.05); }
}
/* ── arc zone: the SVG owns the line, curved labels, dots, and pin ── */
/* stage gap unified with the hub hero (its stage sits 44px under the CTAs);
   short-viewport fit (Sofia, 2026-07-28: everything fits in the hero) —
   the gap and the arc itself scale with viewport height below ~900px tall,
   identical at 900+ where the old fixed metrics already fit */
.p-freport .fr-hero2__arczone {
  position: relative;
  z-index: 3;
  margin-top: clamp(16px, 4.9vh, 44px);
}
.p-freport .fr-hero2__arcsvg {
  display: block;
  /* the 154vh term shrinks the arc drawing (height = width × 360/1600)
     on short viewports; ≥900px tall it resolves past 1380 and drops out */
  width: min(1380px, 96%, 154vh);
  margin-inline: auto;
  height: auto;
}
.p-freport .fr-hero2__arcline {
  fill: none;
  stroke: var(--color-grey-200);
  stroke-width: 2.5;
  transition: stroke 0.8s ease;
}
/* progress overlay: same path, pathLength=100; JS moves stroke-dashoffset
   from 100 (nothing) to 0 (full) as the active stop advances */
.p-freport .fr-hero2__arcprogress {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease-out-expo, ease), stroke 0.8s ease;
}
.p-freport .fr-hero2__stop { cursor: pointer; outline: none; }
.p-freport .fr-hero2__hit { fill: transparent; }
.p-freport .fr-hero2__dot {
  fill: var(--color-white);
  stroke: var(--color-grey-300);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.35s ease, stroke 0.35s ease, transform 0.45s var(--ease-out-expo);
}
.p-freport .fr-hero2__stop:hover .fr-hero2__dot { stroke: var(--color-blue); transform: scale(1.2); }
/* stops the blue progress line has already crossed keep a white core but
   pick up the line's blue on their stroke */
.p-freport .fr-hero2__stop.is-passed .fr-hero2__dot { stroke: var(--color-blue); }
.p-freport .fr-hero2__stop.is-active .fr-hero2__dot {
  fill: var(--color-blue);
  stroke: var(--color-blue);
  transform: scale(1.35);
}
/* curved type: rides concentric arcs via textPath */
.p-freport .fr-hero2__stopname {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl); /* svg units ≈ label ≈17px on screen at 1400 */
  fill: var(--color-grey-500);
  transition: fill 0.35s ease;
}
.p-freport .fr-hero2__stop:hover .fr-hero2__stopname { fill: var(--color-black); }
.p-freport .fr-hero2__stop.is-active .fr-hero2__stopname { fill: var(--color-black); }
.p-freport .fr-hero2__stopdate {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  fill: var(--color-blue);
  opacity: 0;
  transition: opacity 0.35s ease, fill 0.8s ease;
}
.p-freport .fr-hero2__stop.is-active .fr-hero2__stopdate { opacity: 1; }
/* the pin stands on the circle at the last stop */
.p-freport .fr-hero2__pin path { fill: var(--color-blue); transition: fill 0.8s ease; }
.p-freport .fr-hero2__pin circle { fill: var(--color-white); }
.p-freport .fr-hero2__heretext {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  fill: var(--color-blue);
  transition: fill 0.8s ease;
}
/* mobile pill row replaces the svg under 900px */
.p-freport .fr-hero2__stops-mobile { display: none; }

/* ── center: flex-grow zone, slide vertically centered in the free space ── */
.p-freport .fr-hero2__center {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* bottom-heavy padding biases the block above true center
     (Sofia, 2026-07-23: raised again — "all this needs to be a bit more up") */
  padding: 0 20px clamp(170px, 28vh, 260px);
}
/* masthead (Sofia, 2026-07-24 AM, restored after the main merge brought
   back the kicker + thesis variant): big report title + two-sentence
   subline open the hero ABOVE the arc; the per-stop model name below
   stays the big headline of the slide.
   Lockup metrics unified with the shared hub hero (Sofia, 2026-07-28):
   164px seat under the floating nav, hub display ramp on the title,
   560px sub 20px below — components/hub-hero.css is the reference.
   Seat raised past the hub's 164px (Sofia, 2026-08-13: title too close
   to the nav) — paid for by the panel descs dropping to one line. */
.p-freport .fr-hero2__masthead {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
  /* seat scales with viewport height on short screens (fit ask,
     2026-07-28); ≥900px tall the clamp lands on 196px */
  padding: clamp(112px, 22vh, 196px) 20px 0;
  text-align: center;
}
.p-freport .fr-hero2__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 40px;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--color-black);
  text-align: center;
}
@media (min-width: 640px) { .p-freport .fr-hero2__title { font-size: 52px; } }
@media (min-width: 1280px) { .p-freport .fr-hero2__title { font-size: 62px; } }
.p-freport .fr-hero2__subline {
  margin-top: 20px;
  max-width: 560px;
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
  text-align: center;
}
.p-freport .fr-hero2__slides {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-top: 14px;
  /* reserved height: slides swap without any reflow of the bar below
     (one panel-desc line shorter since the 2026-08-13 copy trim) */
  min-height: clamp(180px, 29vh, 250px);
  text-align: center;
}
.p-freport .fr-hero2__slide {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  pointer-events: none;
}
.p-freport .fr-hero2__slide.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.p-freport .fr-hero2__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tightest);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  color: var(--color-black);
}
/* the takeaway is the slide's only center line now (name removed,
   Sofia 2026-07-24) — a size up so it carries the slot */
.p-freport .fr-hero2__take {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-black);
}
.p-freport .fr-hero2__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  /* the copy cluster rides high, the cards hang back down a step
     (Sofia, 2026-07-23) */
  margin: clamp(36px, 6vh, 64px) auto 0;
  max-width: 820px;
  text-align: left;
}
@media (min-width: 768px) {
  .p-freport .fr-hero2__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.p-freport .fr-hero2__panel {
  border-radius: 18px;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  transition: background-color 0.8s ease, border-color 0.8s ease;
}
.p-freport .fr-hero2__panel-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
.p-freport .fr-hero2__panel--fraud .fr-hero2__panel-label { color: var(--color-red-brand); }
.p-freport .fr-hero2__panel-head {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-black);
}
.p-freport .fr-hero2__panel-desc {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-grey-on-white);
}

/* ── endgame: landing on AI Agents (the last stop) plunges the whole hero
   to ink + red — the threat we position against. fraud-report.js toggles
   .is-endgame; every override transitions via the base rules above. */
.p-freport .fr-hero2.is-endgame { background: var(--color-black); }
/* on the dark plunge the section title stays plain white; the gradient
   lives on the stop name ("AI Agents") instead (Sofia, 2026-07-23):
   brand red at the head easing through the soft reds into white */
.p-freport .fr-hero2.is-endgame .fr-hero2__title { color: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__kicker { color: rgba(255, 255, 255, 0.55); }
.p-freport .fr-hero2.is-endgame .fr-hero2__subline { color: rgba(255, 255, 255, 0.65); }
.p-freport .fr-hero2.is-endgame .fr-hero2__name {
  width: fit-content;
  margin-inline: auto;
  /* background-clip: text paints only the line box — pad the bottom so
     descenders (the g in Agents) stay inside the gradient's paint area */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background-image: linear-gradient(
    100deg,
    var(--color-red-500) 4%,
    var(--color-red-300) 28%,
    var(--color-red-200) 44%,
    var(--color-white) 68%,
    var(--color-white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.p-freport .fr-hero2.is-endgame .fr-hero2__take { color: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.p-freport .fr-hero2.is-endgame .fr-hero2__panel-head { color: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__panel-desc { color: rgba(255, 255, 255, 0.72); }
/* on the dark plunge the whole arc turns white (Sofia, 2026-07-23) — the
   red lives in the title gradient, not the timeline */
.p-freport .fr-hero2.is-endgame .fr-hero2__arcline { stroke: rgba(255, 255, 255, 0.16); }
.p-freport .fr-hero2.is-endgame .fr-hero2__arcprogress { stroke: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__dot { stroke: rgba(255, 255, 255, 0.4); }
.p-freport .fr-hero2.is-endgame .fr-hero2__stop:hover .fr-hero2__dot,
.p-freport .fr-hero2.is-endgame .fr-hero2__stop.is-passed .fr-hero2__dot { stroke: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__stop.is-active .fr-hero2__dot {
  fill: var(--color-white);
  stroke: var(--color-white);
}
.p-freport .fr-hero2.is-endgame .fr-hero2__stopname { fill: rgba(255, 255, 255, 0.55); }
.p-freport .fr-hero2.is-endgame .fr-hero2__stop:hover .fr-hero2__stopname,
.p-freport .fr-hero2.is-endgame .fr-hero2__stop.is-active .fr-hero2__stopname { fill: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__stopdate,
.p-freport .fr-hero2.is-endgame .fr-hero2__heretext { fill: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__pin path { fill: var(--color-white); }
.p-freport .fr-hero2.is-endgame .fr-hero2__pin circle { fill: var(--color-black); }
.p-freport .fr-hero2.is-endgame .fr-hero2__glow {
  --color-blue: var(--color-red-500);
  --color-blue-200: var(--color-red-200);
  --color-x3-indigo: var(--color-red-600);
}
.p-freport .fr-hero2.is-endgame .fr-hero2__mstop {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.p-freport .fr-hero2.is-endgame .fr-hero2__mstop.is-active {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* the numbers band under the hero */
.p-freport .fr-proofband {
  background: var(--color-background);
  border-top: 1px solid var(--color-border-light);
  color: var(--color-foreground);
}
.p-freport .fr-proofband__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 48px 20px;
}
@media (min-width: 1024px) { .p-freport .fr-proofband__inner { padding-inline: 32px; } }
.p-freport .fr-hero2__dek {
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
/* second sentence on its own line (Sofia, 2026-07-23) */
.p-freport .fr-proofband__line2 { display: block; }
/* stat card (Sofia, 2026-07-23, deck-problem style): one bordered card,
   hairline-divided cells, source line per stat, accent tint on the hot cell */
.p-freport .fr-proofcard {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 28px;
  border: 1px solid var(--color-border-light);
  border-radius: 18px;
  background: var(--color-white);
  overflow: hidden;
}
@media (min-width: 768px) { .p-freport .fr-proofcard { grid-template-columns: repeat(3, 1fr); } }
.p-freport .fr-proofcard__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 20px;
  border-top: 1px solid var(--color-border-light);
}
.p-freport .fr-proofcard__cell:first-child { border-top: 0; }
@media (min-width: 768px) {
  .p-freport .fr-proofcard__cell {
    border-top: 0;
    border-left: 1px solid var(--color-border-light);
    padding: 32px 32px 24px;
  }
  .p-freport .fr-proofcard__cell:first-child { border-left: 0; }
}
.p-freport .fr-proofcard__value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 40px;
  line-height: 1;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-freport .fr-proofcard__value { font-size: 52px; } }
.p-freport .fr-proofcard__cap {
  font-size: var(--fs-body);
  line-height: var(--leading-snug);
  color: var(--color-black);
}
.p-freport .fr-proofcard__src {
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-300);
}

/* 900-1280: the svg shrinks with the viewport, so its type bumps up
   in viewBox units to hold a readable on-screen size */
@media (max-width: 1279px) and (min-width: 900px) {
  .p-freport .fr-hero2__stopname { font-size: 31px; }
  .p-freport .fr-hero2__stopdate { font-size: 19px; }
  .p-freport .fr-hero2__heretext { font-size: 21px; }
}

/* narrow screens: the svg arc doesn't fit — a pill row replaces it */
@media (max-width: 899px) {
  .p-freport .fr-hero2__viewport { padding-top: 84px; }
  .p-freport .fr-hero2__arcsvg { display: none; }
  .p-freport .fr-hero2__stops-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding-inline: 16px;
  }
  .p-freport .fr-hero2__mstop {
    padding: 8px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 9999px;
    background: var(--color-white);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--color-grey-500);
  }
  .p-freport .fr-hero2__mstop.is-active { border-color: var(--color-blue); color: var(--color-black); }
  .p-freport .fr-hero2__center { padding-block: 24px 32px; }
  .p-freport .fr-hero2__slides { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p-freport .fr-hero2__slide { transition: none; }
  .p-freport .fr-hero2__glow { animation: none; }
}

/* ---------- red-alt exploration (/resources/agentic-fraud-report-red-alt/)
   Same report, negative-stat accent: every blue token the sections consume
   re-resolves to the red ramp, so bars, numbers, labels, glows and the CTA
   gradient flip together. Methodology keeps blue (Sofia, 2026-07-23: no
   red in that section — it's about rigor, not threat); the hero joined the
   remap the same night so the arc, dots, dates and panel labels flip too. */
.p-freport--redalt .fr-hero2,
.p-freport--redalt .fr-proofband,
.p-freport--redalt .fr-monthly,
.p-freport--redalt .fr-shifts,
.p-freport--redalt .fr-rise,
.p-freport--redalt .fr-zone,
.p-freport--redalt .fr-anatomy,
.p-freport--redalt .fr-scenario,
.p-freport--redalt .fr-cases,
.p-freport--redalt .fr-evidence {
  --color-blue: var(--color-red-500);
  --color-blue-200: var(--color-red-200);
  --color-blue-eyebrow: var(--color-red-200);
  --color-x3-blue-bright: var(--color-red-brand);
  --color-x3-blue-deep: var(--color-red-500);
  --color-x3-indigo: var(--color-red-600);
}
/* red-alt stat numbers on bright sections: red deepening into ink instead
   of the flat red the token remap would produce (dark sections keep their
   lightened solid — a black gradient would vanish on ink) */
/* the four-shifts numerals read as plain ink on the red exploration */
.p-freport--redalt .fr-shift__num { color: var(--color-black); }

/* ---------- the rise: interactive index chart + mode toggle ----------
   Recovers the original report's chart: every category as a line indexed
   to its own 2019 level, giants flagged where they leave the scale, chips
   to light categories, segmented toggle to the growth-multiple rows.
   Line/chip/flag colors ride a per-element --rise-c custom property set
   in the markup (the behavior JS only toggles classes). */
.p-freport .fr-rise__bar-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.p-freport .fr-rise__modes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.p-freport .fr-rise__mode {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.p-freport .fr-rise__mode.is-active { background: var(--color-white); color: var(--color-black); }
.p-freport .fr-rise__plot {
  position: relative;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 10px 4px;
  background: rgba(255, 255, 255, 0.02);
}
.p-freport .fr-rise__svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.p-freport .fr-rise__grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.p-freport .fr-rise__baseline { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.p-freport .fr-rise__ytick,
.p-freport .fr-rise__xtick {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
}
.p-freport .fr-rise__line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s, stroke-width 0.25s, opacity 0.2s;
}
.p-freport .fr-rise__line.is-on { stroke: var(--rise-c); stroke-width: 1.6; }
.p-freport .fr-rise__dot {
  fill: transparent;
  transition: fill 0.25s, opacity 0.2s;
}
.p-freport .fr-rise__dot.is-on { fill: var(--rise-c); }
/* hovering one line: everything else recedes so the tracked line reads alone */
.p-freport .fr-rise__svg.is-tracking .fr-rise__line:not(.is-hover),
.p-freport .fr-rise__svg.is-tracking .fr-rise__dot:not(.is-hover) { opacity: 0.18; }
.p-freport .fr-rise__svg.is-tracking .fr-rise__line.is-hover.is-on { stroke-width: 2.2; }
.p-freport .fr-rise__axis-note {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: rgba(255, 255, 255, 0.35);
}
.p-freport .fr-rise__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s var(--ease-out-expo);
}
.p-freport .fr-rise__tip.is-visible { opacity: 1; }
.p-freport .fr-rise__tip-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-400);
}
.p-freport .fr-rise__tip-value {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.p-freport .fr-rise__chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-freport .fr-rise__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.p-freport .fr-rise__chip:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.8);
}
.p-freport .fr-rise__chip.is-on {
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--rise-c) 55%, transparent);
  background: color-mix(in srgb, var(--rise-c) 10%, transparent);
}
.p-freport .fr-rise__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.p-freport .fr-rise__chip.is-on .fr-rise__sw { background: var(--rise-c); }
/* the growth-multiple pane keeps the original rows, now under the toggle */
.p-freport .fr-rise__rows[data-fr-rpane] { margin-top: 14px; }
/* compressed rows: the multiple view lists 11 categories — keep it short */
.p-freport .fr-rise__rows[data-fr-rpane] .fr-rise__row { padding: 11px 0; }