.hero-correction { --hc-ink: var(--text, #1c2333); --hc-mut: var(--muted, #5b6474);
      --hc-acc: var(--accent, #9a5a00); --hc-ok: var(--ok, #1f7a43); }
    .hero-correction text { font-family: inherit; }
    .hero-correction .lg  { font-size: 12px; fill: var(--hc-mut); }
    .hero-correction .nm  { font-size: 12px; fill: var(--hc-mut); text-anchor: middle; }
    .hero-correction .was { font-size: 12px; fill: var(--hc-mut); text-anchor: middle; }
    .hero-correction .now { font-size: 15px; font-weight: 700; fill: var(--hc-ink); text-anchor: middle; }
    .hero-correction .pct { font-size: 13px; font-weight: 700; fill: var(--hc-acc); text-anchor: middle; }
    /* The viewBox is 720 wide; on a phone the chart scales to ~half size, so 12px labels become
       unreadable. Rather than shrink-proof every label, mobile shows only the payload — the %
       deltas and card names, at sizes the freed-up space allows — and the table below the hero
       carries the exact prices. (SVG media queries read the PAGE viewport, not the svg box.) */
    @media (max-width: 640px) {
      .hero-correction .lg, .hero-correction .was, .hero-correction .now { display: none; }
      .hero-correction .pct { font-size: 20px; transform: translateY(-14px); }
      .hero-correction .nm  { font-size: 15px; }
    }
    .hero-correction .pct-held { fill: var(--hc-ok); }
    .hero-correction .ghost { fill: none; stroke: var(--hc-mut); stroke-width: 2; opacity: .5; }
    .hero-correction .fall { stroke: var(--hc-mut); stroke-width: 2; opacity: .35;
      stroke-dasharray: 1; stroke-dashoffset: 0;
      animation: hc-draw .45s ease-in var(--d) both; }
    .hero-correction .land { fill: var(--hc-acc);
      animation: hc-drop .55s cubic-bezier(.25,.6,.35,1.15) var(--d) both; }
    .hero-correction .land-held { fill: var(--hc-ok); animation-name: hc-pop; }
    .hero-correction .ring { fill: none; stroke: var(--hc-ok); stroke-width: 2; opacity: 0;
      transform-box: fill-box; transform-origin: center;
      animation: hc-ring 1s ease-out calc(var(--d) + .3s) both; }
    .hero-correction .tag { animation: hc-fade .4s ease-out calc(var(--d) + .4s) both; }
    @keyframes hc-draw { from { stroke-dashoffset: 1; } }
    @keyframes hc-drop { from { opacity: 0; transform: translateY(var(--rise)); }
      30% { opacity: 1; } }
    @keyframes hc-pop { from { opacity: 0; } }
    @keyframes hc-fade { from { opacity: 0; transform: translateY(5px); } }
    @keyframes hc-ring { from { opacity: .9; transform: scale(.4); }
      to { opacity: 0; transform: scale(1.7); } }
    /* Resting state IS the base state: with animations off, the finished chart shows. */
    @media (prefers-reduced-motion: reduce) {
      .hero-correction .fall, .hero-correction .land, .hero-correction .ring,
      .hero-correction .tag { animation: none; }
      .hero-correction .ring { opacity: 0; }
    }