/*
 * Product page (/product/). Owner: page-product (WP-C). Every class is prefixed pd-.
 * Five sections (UX pass 2026-09-27): hero, report tour (7 manual tabs in one fixed-height frame),
 * site audit (a stacked card deck drawn by site-audit-mock.js), where it fits, final CTA.
 * Custom report visuals mirror the mock panel look (mock.css) with their own tokens, so they sit next
 * to the mock panels without depending on mock internals. Mock overrides are scoped under .pd-tour-viz.
 * Data widths use value classes (no inline style attributes, CSP friendly). Visual text is 12px or larger.
 */

/* ---------- visual tokens (dark default, light override) ---------- */
.pd-viz {
  --v-card: #242423; --v-card-2: #2c2c2b; --v-line: #393838; --v-line-soft: #2f2e2d;
  --v-accent: #ac75ff; --v-accent-soft: rgba(172, 117, 255, .15); --v-on-accent: #1a1919;
  --v-comp: #899cfa; --v-third: #5c5b5a;
  --v-good: #b0f7ba; --v-good-soft: rgba(176, 247, 186, .12);
  --v-bad: #ff8a8a; --v-bad-soft: rgba(255, 138, 138, .13);
  --v-warn: #f5c77e; --v-teal: #89e6d4;
  --v-grid: rgba(255, 255, 255, .06);
  --v-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}
:root[data-theme="light"] .pd-viz {
  --v-card: #fff; --v-card-2: #f5f5f4; --v-line: #e1e0e0; --v-line-soft: #ebebea;
  --v-accent: #8a38f5; --v-accent-soft: rgba(138, 56, 245, .09); --v-on-accent: #fff;
  --v-comp: #5b6fe0; --v-third: #d4d4d3;
  --v-good: #23824a; --v-good-soft: #e6f4e8;
  --v-bad: #c2413b; --v-bad-soft: #fbeaea;
  --v-warn: #9a6400; --v-teal: #1f8a78;
  --v-grid: rgba(26, 25, 25, .07);
  --v-shadow: 0 1px 2px rgba(26, 25, 25, .05), 0 16px 36px -18px rgba(26, 25, 25, .25);
}
.pd-viz .o-y { --c: var(--v-accent); }
.pd-viz .o-c { --c: var(--v-comp); }
.pd-viz .o-t { --c: var(--v-third); }

/* value classes: --v is a percentage, --g a flex weight, --t a bar length */
.v58 { --v: 58; } .v61 { --v: 61; } .v67 { --v: 67; }
.g5 { --g: 5; } .g6 { --g: 6; } .g7 { --g: 7; } .g8 { --g: 8; } .g9 { --g: 9; } .g13 { --g: 13; }
.g19 { --g: 19; } .g21 { --g: 21; } .g22 { --g: 22; } .g38 { --g: 38; } .g61 { --g: 61; }
.t100 { --t: 100; } .t63 { --t: 63; } .t37 { --t: 37; } .t33 { --t: 33; }

/* ---------- shared panel parts ---------- */
.pd-p {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-card); box-shadow: var(--v-shadow);
  color: var(--ink); font-size: 13px; line-height: 1.45; text-align: left;
}
.pd-ph { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px 0; }
.pd-pt { font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.pd-ps { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pd-ps .engine-logo { width: 16px; height: 16px; }
.pd-ph .pd-r { margin-left: auto; }
.pd-kl { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pd-eng { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.pd-eng .engine-logo { width: 16px; height: 16px; }
.pd-mbar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--v-card-2); overflow: hidden; }
.pd-mbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 3px; background: var(--c, var(--v-accent)); }
.pd-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pd-pill.neu { color: var(--ink-2); background: var(--v-card-2); }
.up { color: var(--v-good); }

/* ---------- 1. hero: copy only (the tour below is the hero visual) ---------- */
.pd-hero .pd-hero-grid > * + * { margin-top: 0; } /* the grid container resets the .page-hero stack margin */
.pd-hero-grid { display: grid; gap: 16px; }
.pd-hero-head > * + * { margin-top: 14px; }
.pd-hero-head h1 { max-width: 18ch; }
.pd-hero-copy .lead { max-width: 52ch; }
.pd-hero-copy .actions { margin-top: 24px; }
.pd-hero-copy .engine-row { margin-top: 20px; }
@media (min-width: 1024px) {
  .pd-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; }
  .pd-hero-copy .lead { font-size: 18px; }
  .pd-hero-copy .actions { margin-top: 28px; }
}

/* ---------- 2. report tour: 7 tabs, one fixed-height frame ---------- */
/* The tour is the hero visual, so it sits closer to the hero: the small section spacing on top */
.pd-tour.section { padding-top: clamp(32px, 4.5vw, 64px); }
.pd-tour-tabs .tab-list { margin: 0 0 12px; }
@media (min-width: 1024px) {
  .pd-tour-tabs .tab-list { display: flex; width: max-content; margin: 0 auto 16px; }
}
.pd-tour-frame {
  --dot: color-mix(in srgb, var(--ink) 5%, transparent);
  --panel-display: grid; /* without JS every panel shows, one after another */
  position: relative; padding: 16px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-frame);
  background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 18px 18px;
}
.pd-tour-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.pd-tour-panel[hidden] { display: none; }
.js .pd-tour-frame { height: 640px; overflow: hidden; }
.js .pd-tour-panel { height: 100%; }
html:not(.js) .pd-tour-panel + .pd-tour-panel { margin-top: 40px; }
html:not(.js) .pd-tour-viz .cm-panel { display: none; } /* mock.js draws these; without JS they would be empty boxes */
.pd-tour-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.js .pd-tour-panel:not([hidden]) { animation: pd-in .28s var(--ease); }
@keyframes pd-in { from { opacity: 0; transform: translateY(4px); } }
.pd-tour-copy { padding-inline: 4px; }
.pd-tour-copy > * + * { margin-top: 8px; }
.pd-tour-title { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.pd-tour-copy p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pd-tour-viz { min-width: 0; min-height: 0; display: grid; gap: 12px; align-content: start; }
.js .pd-tour-viz {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
}
.pd-v-wide { display: none; }

/* three short facts: desktop only, in the tour copy column and the site audit copy */
.pd-facts, .pd-tour-copy .pd-more { display: none; }

@media (min-width: 768px) {
  .js .pd-tour-frame { height: 620px; }
  .pd-tour-frame { padding: 24px; }
  .pd-v-wide { display: block; }
  .pd-v-wide.pd-p { display: flex; }
  .pd-v-comp { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); align-items: start; }
  .pd-v-q .pd-drill { position: relative; z-index: 2; width: 88%; margin: -120px 0 0 auto; }
  .pd-v-q .pd-drill > .cm-p { box-shadow: var(--shadow-lg); }
}
@media (min-width: 1024px) {
  .js .pd-tour-frame { height: 560px; }
  .pd-tour-frame { padding: 28px; }
  .pd-tour-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr); gap: 40px; }
  .pd-tour-copy { align-self: center; }
  .pd-tour-copy > * + * { margin-top: 14px; }
  .pd-tour-copy p { font-size: 16px; }
  .pd-tour-viz { align-content: safe center; }
  .pd-facts { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
  .pd-facts li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
  .pd-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .pd-facts strong { color: var(--ink); font-weight: 600; }
  .pd-tour-copy .pd-more { display: block; margin-top: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .pd-v-q .pd-drill { margin-top: -160px; } }
/* leaderboard: drop the sentiment column in the narrow band where the longest name would truncate */
@container cmp (max-width: 420px) {
  .pd-tour-viz .cm-panel .cm-lbh, .pd-tour-viz .cm-panel .cm-row { grid-template-columns: minmax(0, 1fr) 26% 36px; }
  .pd-tour-viz .cm-lbh span:nth-child(3), .pd-tour-viz .cm-row > em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .pd-tour-panel:not([hidden]) { animation: none; } }
/* Narrowest phones (under 360): the four KPI labels fit without an ellipsis */
@media (max-width: 359px) {
  .pd-tour-viz .cm-panel .cm-kpi { padding-inline: 11px; }
  .pd-tour-viz .cm-panel .cm-kl { letter-spacing: .04em; }
}
/* Mock panel labels in the tour reach 4.5:1 (mock.css is frozen, so this scoped override lives here) */
:root .pd-tour-viz .cm-panel { --cm-faint: var(--muted); }
:root[data-theme="light"] .pd-tour-viz .cm-panel { --cm-faint: var(--muted); --cm-good: var(--good); }
:root:not([data-theme="light"]) .pd-tour-viz .cm-tip .cm-dl { color: color-mix(in srgb, var(--cm-tip-good) 70%, var(--cm-tip-ink)); }

/* ---------- Competitors bubble chart ---------- */
.pd-bub-chart {
  display: grid; grid-template-columns: auto 24px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: 6px; padding: 16px 16px 14px 10px;
}
.pd-bub-yt { grid-row: 1; grid-column: 1; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--muted); }
.pd-bub-y { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; margin-block: -8px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pd-bub-plot {
  position: relative; grid-row: 1; grid-column: 3; height: 260px;
  border-left: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line);
  background-image:
    linear-gradient(var(--v-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-grid) 1px, transparent 1px);
  background-size: 100% 33.333%, 33.333% 100%;
  background-position: 0 0, 0 0;
}
.pd-bub-plot::before { content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 50%; background: color-mix(in srgb, var(--v-good) 5%, transparent); border-bottom-left-radius: 10px; }
.pd-bub-win { position: absolute; top: 8px; right: 10px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--v-good); }
.pd-bub-x { grid-row: 2; grid-column: 3; display: flex; justify-content: space-between; padding-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-bub-x span:first-child { transform: translateX(-4px); }
.pd-bub-xt { grid-row: 3; grid-column: 3; justify-self: center; padding-top: 2px; font-size: 12px; color: var(--muted); }
.pd-b { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: translate(-50%, -50%); }
.pd-b i { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--v-comp) 22%, transparent); border: 1px solid color-mix(in srgb, var(--v-comp) 60%, transparent); }
.pd-b em { position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); font-size: 12.5px; font-style: normal; color: var(--ink-2); white-space: nowrap; }
.pd-b.is-you { z-index: 2; }
.pd-b.is-you i { background: color-mix(in srgb, var(--v-accent) 30%, transparent); border: 2px solid var(--v-accent); }
.pd-b.is-you em { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.pd-b.is-you em b { padding: 0 6px; border-radius: 4px; background: var(--v-accent); color: var(--v-on-accent); font-size: 12px; line-height: 18px; letter-spacing: .02em; }
.b-aldren { --x: 80%; --y: 30%; --s: 54px; }
.b-solvik { --x: 63.3%; --y: 43.3%; --s: 48px; }
.b-tarnwell { --x: 53.3%; --y: 60%; --s: 44px; }
.b-pellow { --x: 46.7%; --y: 66.7%; --s: 40px; }
.b-ferren { --x: 33.3%; --y: 73.3%; --s: 34px; }
.b-maraine { --x: 26.7%; --y: 86.7%; --s: 30px; }
.b-aldren em { left: 50%; top: auto; bottom: calc(100% + 4px); transform: translateX(-50%); }
.b-ferren em, .b-solvik em { left: auto; right: calc(100% + 6px); }
.b-pellow em { top: calc(100% + 3px); left: 50%; transform: translateX(-50%); }
@media (max-width: 479px) {
  .pd-bub-plot { height: 220px; }
  .b-aldren { --s: 44px; } .b-solvik { --s: 38px; } .b-tarnwell { --s: 34px; } .b-pellow { --s: 30px; } .b-ferren { --s: 26px; } .b-maraine { --s: 22px; }
  .pd-b em { font-size: 12px; }
  .b-pellow em { transform: translateX(-30%); }
  .pd-b.is-you em { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.15; }
  .pd-bub-yt { display: none; }
  .pd-bub-chart { grid-template-columns: 0 22px minmax(0, 1fr); column-gap: 4px; padding-left: 8px; padding-right: 12px; }
}

/* ---------- Sentiment drivers ---------- */
.pd-drv-cols { display: grid; gap: 16px; padding: 14px 16px 16px; }
.pd-drv-cols .pd-kl { margin-bottom: 8px; }
.pd-drv-list { display: grid; gap: 8px; }
.pd-drv-list li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.pd-drv-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; }
.pd-drv-list li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; }
.pd-drv-list .ok::before { background: var(--v-good-soft); }
.pd-drv-list .ok::after { background: var(--v-good); -webkit-mask: var(--m-check) center / 10px no-repeat; mask: var(--m-check) center / 10px no-repeat; }
.pd-drv-list .no::before { background: var(--v-bad-soft); }
.pd-drv-list .no::after { left: 7.25px; top: 4px; width: 1.5px; height: 6px; background: var(--v-bad); }
@media (min-width: 560px) { .pd-drv-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

/* ---------- Citations by engine ---------- */
.pd-lgd { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
.pd-lgd span { display: inline-flex; align-items: center; gap: 6px; }
.pd-lgd i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.pd-cbe-list { display: grid; gap: 4px; padding: 10px 16px 16px; }
.pd-cbe-list li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 24px; align-items: center; gap: 10px; height: 32px; }
.pd-cbe-list b { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pd-seg { display: flex; gap: 2px; width: calc(var(--t) * 1%); height: 10px; }
.pd-seg i { flex: var(--g) 1 0; min-width: 2px; border-radius: 2px; background: var(--c); }
@media (min-width: 768px) { .pd-v-cit { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ---------- History ---------- */
.pd-hist { container: pdh / inline-size; }
.pd-fakebtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--v-line); border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.pd-fakebtn .icon { width: 12px; height: 12px; }
/* Rows share one column grid (subgrid) so a wider status pill does not shift the score column. */
.pd-hist-rows { display: grid; grid-template-columns: 64px minmax(0, 1fr) 68px auto; gap: 2px 14px; padding: 10px 8px 8px; }
.pd-hist-rows li {
  display: grid; grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 1fr) 68px auto; grid-template-columns: subgrid; align-items: center; column-gap: 14px;
  min-height: 52px; padding: 6px 10px; border-radius: 9px;
}
.pd-hist-rows li.is-latest { background: var(--v-accent-soft); }
.pd-hist-rows .pd-mbar { height: 8px; border-radius: 4px; }
.pd-hist-rows .pd-mbar i { border-radius: 4px; opacity: .55; }
.pd-hist-rows .is-latest .pd-mbar i { opacity: 1; }
.pd-hrun { display: grid; }
.pd-hrun b { font-size: 13.5px; font-weight: 600; }
.pd-hrun small { font-size: 12px; color: var(--muted); }
.pd-hscore { display: inline-flex; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-hscore em { font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pd-hscore em.up { color: var(--v-good); }
.pd-status { display: inline-flex; align-items: center; gap: 5px; justify-self: end; height: 24px; padding: 0 8px 0 6px; border-radius: 6px; color: var(--v-good); background: var(--v-good-soft); font-size: 12px; font-weight: 600; }
.pd-status .icon { width: 13px; height: 13px; }
.pd-status.is-partial { color: var(--v-warn); background: color-mix(in srgb, var(--v-warn) 14%, transparent); }
.pd-status small { margin-left: 2px; font-size: 12px; font-weight: 500; white-space: nowrap; }
@container pdh (max-width: 380px) {
  .pd-hist-rows { grid-template-columns: minmax(0, 1fr) 68px auto; column-gap: 10px; }
  .pd-hist-rows li { grid-template-columns: minmax(0, 1fr) 68px auto; grid-template-columns: subgrid; column-gap: 10px; }
  .pd-hist-rows .pd-mbar { display: none; }
}
@container pdh (max-width: 300px) { .pd-status small { display: none; } }
.pd-delta { container: pdd / inline-size; }
.pd-delta-grid { display: grid; gap: 6px; padding: 12px; }
.pd-delta-grid > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--v-card-2); }
.pd-delta-grid b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-delta-grid em { font-size: 12px; font-style: normal; font-weight: 600; text-align: right; }
@container pdd (max-width: 320px) {
  .pd-delta-grid > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .pd-delta-grid .pd-kl { grid-column: 1 / -1; }
}
@container pdd (min-width: 440px) {
  .pd-delta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pd-delta-grid > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pd-delta-grid em { text-align: left; }
}
.pd-to { color: var(--muted); font-weight: 400; }

/* ---------- 3. site audit: copy plus the stacked card deck (the deck itself lives in site-audit-mock.css) ---------- */
.pd-sa-grid { display: grid; gap: 28px; }
.pd-sa-copy > * + * { margin-top: 16px; }
.pd-sa-copy > .pd-kicker + * { margin-top: 14px; }
.pd-sa-copy h2 { max-width: 16ch; }
.pd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pd-kicker .badge .icon { width: 13px; height: 13px; }
/* "How ... works" links: a 40px hit area without changing the layout */
.pd-more .btn-link { padding-block: 10px; margin-block: -10px; }
.pd-sa-media { min-width: 0; }
@media (min-width: 1024px) {
  .pd-sa-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
  .pd-sa-copy .lead { font-size: 18px; }
  .pd-sa-copy .pd-more { margin-top: 24px; }
}

/* ---------- 4. where it fits: a 4-item list, no cards ---------- */
.pd-fits .section-head { margin-bottom: 28px; }
.pd-fit-list { display: grid; }
.pd-fit-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 14px; padding-block: 16px; border-top: 1px solid var(--line); }
.pd-fit-list li:first-child { border-top: 0; padding-top: 0; }
.pd-fit-list li:last-child { padding-bottom: 0; }
.pd-fit-list h3 { font-size: 16px; line-height: 1.35; }
.pd-fit-list p { margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pd-fit-list .btn-link { display: inline; white-space: nowrap; }
@media (min-width: 768px) {
  .pd-fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pd-fit-list li:nth-child(2) { border-top: 0; padding-top: 0; }
  .pd-fit-list li:nth-last-child(2) { padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .pd-fit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .pd-fit-list li { grid-template-columns: 1fr; border-top: 0; padding: 0; }
}

/* Workaround (reported to MOCK): under reduced motion mock.js renders the static leaderboard
   without placing its rows, so they stack. Place them in their final order. mock.js inline
   transforms take over whenever it does set them. */
@media (prefers-reduced-motion: reduce) {
  .pd-tour-viz [data-mock-panel="leaderboard"] .cm-row:nth-child(2 of .cm-row) { transform: translateY(100%); }
  .pd-tour-viz [data-mock-panel="leaderboard"] .cm-row:nth-child(3 of .cm-row) { transform: translateY(300%); }
  .pd-tour-viz [data-mock-panel="leaderboard"] .cm-row:nth-child(4 of .cm-row) { transform: translateY(200%); }
  .pd-tour-viz [data-mock-panel="leaderboard"] .cm-row:nth-child(5 of .cm-row) { transform: translateY(400%); }
  .pd-tour-viz [data-mock-panel="leaderboard"] .cm-row:nth-child(6 of .cm-row) { transform: translateY(500%); }
}

/* Contrast (integration pass): colored text on tinted chips keeps its hue but mixes toward ink,
   so small text holds 4.5:1 in both themes. Fills and chart lines keep the original tokens. */
:root[data-theme="light"] .pd-viz :is(.up, .pd-status, .pd-bub-win) { color: color-mix(in srgb, var(--v-good) 75%, var(--ink)); }
:root[data-theme="light"] .pd-viz .pd-status.is-partial { color: color-mix(in srgb, var(--v-warn) 70%, var(--ink)); }
.pd-hist-rows li.is-latest small { color: var(--ink-2); }