/* pSEO visual reports (D-085; kb/design/v2/direction.md, kit.md). Since
   D-093 the pages wear the "Night glow" dark theme layered at the end of this
   file; the light rules below are its base. The light base: a light
   report sheet framed by the site's dark shell header and footer, in the
   SimilarWeb manner — pale violet ground, white sheets, one violet ladder for
   data, every number as a picture with its figure printed beside it.
   Tokens only (the literals live in the token block below); no gradients, no
   shadows at rest (only menus, the phone and the post frames, which are
   interface fragments: data-ui); one motion at a time, reduced motion
   honoured. Inter body, Space Grotesk figures and headings (both ship in
   the shell CSS). */

/* The app CSS pins html/body to 100dvh with overflow hidden (the SPA scrolls
   an inner element); these pages scroll the window, like the blog. */
html { height: auto; overflow: visible; overflow-y: scroll; }
body {
  margin: 0;
  height: auto;
  overflow: visible;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
/* The exported header is fixed and dark; over a light page it stays opaque
   (its own 95% bar). No backdrop-filter on the header element: it would trap
   the fixed mobile drawer. */
header[data-shell="header"] { background: hsl(var(--background)); }
html:has(header[data-shell="header"] #nav-toggle:checked) { overflow: hidden; }

/* ---------- tokens ---------- */
.pseo {
  color-scheme: light;
  /* Violet ladder: OKLCH steps at the hue of #8800FF (step 500), lightness
     0.975 → 0.29 (kb/design/v2/direction.md, "Palette"). Data magnitude and
     areas use the tints; the full hue only marks small things. */
  --v-50: 253 82% 97.8%;  --v-100: 256 90% 95.9%; --v-150: 255 94% 93.1%;
  --v-200: 256 100% 90.2%; --v-250: 256 97% 86.5%; --v-300: 257 98% 82.4%;
  --v-350: 259 100% 77.3%; --v-400: 261 100% 71.2%; --v-450: 265 100% 63.5%;
  --v-500: 272 100% 50%;  --v-550: 272 100% 41.6%; --v-600: 271 94% 35.3%;
  --v-650: 269 84% 29.4%; --v-700: 267 77% 22.5%;
  /* Categorical slots after violet, in the validated order (dataviz
     validator: adjacent CVD ΔE ≥ 9.2, 3 slots pass all-pairs): */
  --c-aqua: 159 73% 39.6%; --c-orange: 17 82% 56.3%; --c-blue: 213 68% 50.2%; --c-pink: 337 70% 69.6%;

  --ds-canvas: 248 33% 96%;    /* page ground */
  --ds-s1: 0 0% 100%;          /* sheets: tables, charts, lists, cards */
  --ds-s2: 250 30% 97.6%;      /* inside a sheet: heads, quiet fields */
  --ds-s3: 250 24% 92.5%;      /* tracks, hover, land on the map */
  --ds-line: 250 22% 90%;
  --ds-line-2: 250 16% 82%;
  --ds-text: 252 38% 10%;
  --ds-text-2: 250 12% 30%;
  --ds-text-3: 250 9% 42%;     /* meta: 5.3:1 on the ground */
  --ds-brand: var(--v-500);
  --ds-brand-hover: var(--v-550);
  --ds-brand-ink: 0 0% 100%;
  --ds-brand-text: var(--v-550);   /* violet as text: 8:1 on white */
  --ds-brand-lift: var(--v-500);   /* data ink */
  --ds-brand-tint: var(--v-100);
  --ds-good: 150 64% 30%;
  --ds-scrim: 252 40% 8%;          /* under text on a picture */
  --ds-rim: 0 0 0 0 transparent;   /* depth is the tone step: no outline */
  --ds-font-display: var(--lp-font-display, 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif);
  --ds-font-body: var(--lp-font-body, 'Inter', ui-sans-serif, system-ui, sans-serif);
  --ds-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-gutter: 16px;
  --ds-radius: 16px;
  /* Five type steps (direction.md "Type"). */
  --t-fig: clamp(34px, 3.4vw, 52px);
  --t-h1: clamp(30px, 2vw + 20px, 44px);
  --t-h2: clamp(24px, 2.1vw, 32px);
  --t-body: 16px;
  --t-meta: 13.5px;
  /* Monogram tiles take the categorical hues (shell values are dark-theme). */
  --st-chart-cat-1: var(--v-500); --st-chart-cat-2: var(--c-aqua); --st-chart-cat-3: var(--c-orange);
  --st-chart-cat-4: var(--c-blue); --st-chart-cat-5: var(--c-pink);
  /* The landing theme on <main class="lp"> colours headings with --lp-text:
     point its roles at the light report. */
  --lp-canvas: var(--ds-canvas); --lp-surface-1: var(--ds-s1); --lp-surface-2: var(--ds-s2); --lp-surface-3: var(--ds-s3);
  --lp-line: var(--ds-line); --lp-line-strong: var(--ds-line-2);
  --lp-text: var(--ds-text); --lp-text-2: var(--ds-text-2); --lp-text-3: var(--ds-text-3); --lp-primary-lifted: var(--v-500);

  flex: 1;
  width: 100%;
  padding: 0 0 120px;
  overflow-x: clip;
  box-sizing: border-box;
  background: hsl(var(--ds-canvas));
  color: hsl(var(--ds-text));
  font-family: var(--ds-font-body);
  font-size: var(--t-body);
  line-height: 1.6;
}
@media (min-width: 640px) { .pseo { --ds-gutter: 24px; } }
@media (min-width: 1024px) { .pseo { --ds-gutter: 32px; } }
.pseo *, .pseo *::before, .pseo *::after { box-sizing: border-box; }

/* One column for every template, aligned with the shell header's content
   (max-w-7xl minus its px-4/6/8), by width rather than padding. User rule
   2026-10-19: page content is exactly the header's width at every
   breakpoint. Bands and the anchor bar bleed full width; their content keeps
   this column. */
.ds-hero__grid,
.ds-anchors__inner,
.ds-body,
.pseo > .ds-section,
.pseo > .ds-cta,
.pseo > .pseo-attribution {
  width: calc(100% - 2 * var(--ds-gutter));
  max-width: calc(80rem - 2 * var(--ds-gutter));
  margin-inline: auto;
}

/* ---------- type ---------- */
:where(.pseo) p { margin: 0; }
:where(.pseo) :is(h1, h2, h3) { margin: 0; font-family: var(--ds-font-display); color: hsl(var(--ds-text)); }
:where(.pseo) h2 { font-size: var(--t-h2); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
:where(.pseo) h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
:where(.pseo) a { color: hsl(var(--ds-brand-text)); text-decoration: none; text-underline-offset: 3px; }
:where(.pseo) a:hover { text-decoration: underline; }
.pseo a:focus-visible, .pseo summary:focus-visible, .pseo button:focus-visible { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; border-radius: 6px; }
.pseo ::selection { background: hsl(var(--v-200)); color: hsl(var(--ds-text)); }
.pseo-text-link { color: hsl(var(--ds-text)); }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ds-ln { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ds-num, .ds-fig { font-variant-numeric: tabular-nums; }

/* ---------- hero ---------- */
.ds-hero { position: relative; isolation: isolate; padding: 104px 0 56px; }
@media (min-width: 768px) { .ds-hero { padding: 128px 0 72px; } }
.ds-hero__grid { display: grid; gap: 40px; align-items: start; } /* the visual starts level with the crumbs (critique-a 6) */
@media (min-width: 1024px) {
  .ds-hero__grid:has(> .ds-hero__aside) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; }
}
.ds-hero__text { min-width: 0; max-width: 760px; }
.ds-hero h1 {
  font-size: var(--t-h1); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em;
  text-wrap: balance; overflow-wrap: break-word;
}
/* Long H1s (render.go h1LongRunes) step down a size. */
.ds-hero--long h1 { font-size: clamp(27px, 1.6vw + 18px, 38px); line-height: 1.12; } /* ≥ 30 px from 768 */
.ds-lead { margin-top: 18px; max-width: 34em; font-size: 17px; line-height: 1.6; color: hsl(var(--ds-text-2)); text-wrap: pretty; }
@media (min-width: 768px) { .ds-lead { font-size: 18px; } }

/* Crumbs: a plain path in sentence case, SimilarWeb's "Home › Top Websites". */
.ds-crumbs { margin: 0 0 18px; font-size: 14px; }
.ds-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.ds-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pseo .ds-crumbs a { color: hsl(var(--ds-text-2)); font-weight: 500; }
.pseo .ds-crumbs a:hover { color: hsl(var(--ds-brand-text)); }
.ds-crumbs li:last-child .pseo-text-link { color: hsl(var(--ds-text-3)); }
.ds-crumbs li:not(:last-child)::after { content: "›"; color: hsl(var(--ds-text-3)); }
.ds-kicker { font-weight: 500; color: hsl(var(--ds-text-2)); } /* Page.Kicker: the first words of the date line, not an eyebrow */

.ds-stamp {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: var(--t-meta); color: hsl(var(--ds-text-3)); font-variant-numeric: tabular-nums;
}
.ds-stamp time { color: hsl(var(--ds-text-2)); }
.ds-stamp__dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--ds-good)); }
.ds-hero__text > :is(.ds-tabs, .ds-switch, .ds-chips, .ds-ranks, .ds-facts, .ds-answer, .ds-stats) { margin-top: 28px; }

/* An entity's logo on a white tile above its name (hero-mark), SimilarWeb's
   site-icon tile. The logo is a CSS background: a 404 leaves the tile. */
.ds-logo-tile { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-logo-tile i { width: 40px; height: 40px; background: center / contain no-repeat; }

/* ---------- hero pieces: answer, rank stats, facts ---------- */
.ds-answer { display: grid; gap: 4px; }
.ds-answer b { font: 500 var(--t-fig)/1 var(--ds-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: hsl(var(--ds-text)); }
.ds-answer span { font-size: 16px; color: hsl(var(--ds-text-2)); }
.ds-answer em { font-style: normal; font-size: var(--t-meta); color: hsl(var(--ds-text-3)); }

.ds-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; margin: 0; }
@media (max-width: 519px) { .ds-ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ds-rankstat__fig { font-size: 30px; } }
.ds-rankstat { display: grid; align-content: start; gap: 2px; min-width: 0; }
.ds-rankstat dt { order: 2; margin-top: 4px; font-size: 14px; font-weight: 500; color: hsl(var(--ds-text)); }
.ds-rankstat dd { margin: 0; }
.ds-rankstat__fig { order: 1; font: 500 var(--t-fig)/1.05 var(--ds-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ds-rankstat__fig small { margin-right: 2px; font-size: 0.5em; color: hsl(var(--ds-text-3)); vertical-align: 0.5em; }
.ds-rankstat__scope { order: 3; font-size: 13.5px; line-height: 1.35; }
.ds-rankstat__note { order: 4; font-size: 13px; color: hsl(var(--ds-text-3)); }

.ds-facts { padding: 20px 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-facts__title { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: hsl(var(--ds-text-2)); }
.ds-facts dl { display: grid; gap: 8px; margin: 0; }
.ds-facts dl > div { display: grid; grid-template-columns: minmax(110px, 2fr) minmax(0, 3fr); align-items: baseline; gap: 16px; line-height: 1.45; }
.ds-facts dt { font-size: 14px; color: hsl(var(--ds-text-3)); }
.ds-facts dd { margin: 0; font-size: 16px; font-weight: 600; color: hsl(var(--ds-text)); }
.ds-facts dd > :is(a, .pseo-text-link) { font-size: 16px; }
.ds-facts__sub { display: block; font-size: 13px; font-weight: 400; color: hsl(var(--ds-text-3)); }
.ds-facts__note { margin-top: 12px; font-size: 13px; color: hsl(var(--ds-text-3)); }

/* ---------- hero visuals (ds-aside-leaders, ds-aside-mosaic) ---------- */
.ds-hero__aside { position: relative; min-width: 0; }
.ds-leaders { padding: 20px 20px 10px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-leaders__title { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px 10px; font-size: 14px; font-weight: 600; color: hsl(var(--ds-text-2)); }
.ds-leaders__title span { font-weight: 400; color: hsl(var(--ds-text-3)); white-space: nowrap; }
.ds-leaders__title { white-space: nowrap; }
.ds-leaders ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ds-leaders li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(48px, 25%) 5.2em; align-items: center; gap: 6px 12px;
  padding: 10px 8px; border-radius: 10px;
}
.ds-leaders li:first-child { background: hsl(var(--v-100)); }
.ds-leaders .ds-bar { grid-column: 3; grid-row: 1; margin: 0; max-width: none; } /* name gets the width, the bar ≤ 25% (critique-a 6) */
.ds-leaders__value { grid-column: 4; grid-row: 1; text-align: right; }
.ds-leaders__value { font: 600 16px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }

.ds-mosaic {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start;
  max-height: 440px; overflow: hidden; padding: 24px; border-radius: var(--ds-radius); background: hsl(var(--v-150));
}
.ds-mosaic__tile { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: hsl(var(--ds-s3)); }
.ds-mosaic__tile:nth-child(3n + 1) { transform: translateY(24px); }
.ds-mosaic__tile:nth-child(3n + 3) { transform: translateY(48px); }
.ds-mosaic__tile:nth-child(n + 7) { display: none; }
.ds-mosaic__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .ds-mosaic { max-height: 300px; } .ds-mosaic__tile:nth-child(n + 4) { display: none; } }

/* ---------- entity anchor menu (S-01/S-02, D-055) ---------- */
.ds-anchors { position: sticky; top: 64px; z-index: 20; background: hsl(var(--ds-s1)); }
.ds-anchors__inner { display: flex; align-items: center; gap: 16px; }
.ds-anchors__links { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pseo .ds-anchors__links a { position: relative; flex: none; padding: 15px 12px; font-size: 14.5px; font-weight: 500; color: hsl(var(--ds-text-2)); }
.pseo .ds-anchors__links a:hover { color: hsl(var(--ds-text)); text-decoration: none; }
.pseo .ds-anchors__links a[aria-current] { color: hsl(var(--ds-brand-text)); }
.ds-anchors__links a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: hsl(var(--v-500)); }
.ds-anchors .ds-anchors__mark, .ds-anchors .ds-anchors__cta { display: none; }
@media (min-width: 1024px) {
  .ds-anchors[data-stuck] .ds-anchors__mark { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 14.5px; }
  .ds-anchors[data-stuck] .ds-anchors__mark .ds-icon { width: 28px; height: 28px; border-radius: 8px; }
  .ds-anchors[data-stuck] .ds-anchors__cta { display: inline-flex; flex: none; margin-left: auto; height: 38px; padding: 0 16px; font-size: 14px; }
}
/* No fade at the hand-off: the mark and button are there in full or not at all. */

/* ---------- sections and the section frame ---------- */
.ds-body > :first-child { margin-top: 0; }
.pseo-section, .ds-section { margin-top: 88px; }
@media (min-width: 768px) { .pseo-section, .ds-section { margin-top: 128px; } }
.ds-body > .pseo-section:first-child, .ds-body > .ds-section:first-child { margin-top: 8px; }
.pseo-section > h2 { margin-bottom: 16px; }
.ds-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 32px; }
.ds-head__text { max-width: 44rem; }
.ds-head__lead { margin-top: 10px; max-width: 40em; font-size: 16.5px; line-height: 1.55; color: hsl(var(--ds-text-2)); text-wrap: pretty; }
.ds-head__action { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ds-prose { max-width: 40em; color: hsl(var(--ds-text)); }
.ds-prose + .ds-prose { margin-top: 12px; }
.pseo-block.st-card { padding: 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
/* The section frame (kit.md): the picture left, its ranked list or legend
   right, SimilarWeb's chart-and-list pairing. --wide gives the picture 8/12,
   --even splits 6/6. Stacks under 960 px. */
.ds-frame { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) {
  .ds-frame { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
  .ds-frame--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .ds-frame--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-frame--center { align-items: center; }
}
.ds-frame__main, .ds-frame__side { min-width: 0; }
.ds-frame__side > .ds-frame__label, .ds-label { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: hsl(var(--ds-text)); }
.ds-sheet { padding: 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
@media (max-width: 639px) { .ds-sheet { padding: 18px 16px; } }

/* ---------- stat strip ---------- */
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.ds-stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-stat dt { font-size: 14.5px; color: hsl(var(--ds-text-2)); line-height: 1.4; }
.ds-stat dd { margin: 0; }
.ds-stat dd:first-of-type {
  order: -1; font: 500 var(--t-fig)/1.05 var(--ds-font-display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: hsl(var(--ds-text));
}
.ds-stat .ds-stat__note { font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-stat .ds-stat__badge { margin-top: 6px; }
.ds-stat__badge a, .ds-stat__badge span, .ds-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; color: hsl(var(--v-650)); background: hsl(var(--v-100));
}
.pseo .ds-stat__badge a:hover { text-decoration: none; background: hsl(var(--v-150)); }
@media (max-width: 479px) {
  .ds-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ds-stat { padding: 16px; }
  .ds-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- entity mark ---------- */
.ds-entity { display: inline-flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.ds-entity__text { display: grid; min-width: 0; text-align: left; }
.ds-entity__name { font-weight: 600; color: hsl(var(--ds-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseo .ds-entity__name a { color: hsl(var(--ds-text)); }
.pseo .ds-entity__name a:hover { color: hsl(var(--ds-brand-text)); }
.ds-entity__sub { font-size: 13px; font-weight: 400; color: hsl(var(--ds-text-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-icon {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  font: 600 14px/1 var(--ds-font-display); color: hsl(var(--ds-text-2)); background: hsl(var(--ds-s3));
}
.ds-icon i { position: absolute; inset: 0; background: center / cover no-repeat; filter: url(#ds-backdrop); }
/* A loaded logo or avatar keeps a visible disc: white and near-empty
   pictures (logos on white, tiny favicons) read as a mark, not a hole. */
.ds-icon:has(> i)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px hsl(var(--ds-line-2)); pointer-events: none; }
.ds-backdrop-flood { flood-color: hsl(0 0% 100%); } /* the filters sit outside .pseo: literal white */
.ds-icon i.ds-icon__plate { background-size: calc(100% - 8px); background-position: center; filter: url(#ds-plate); }
.ds-plate-flood { flood-color: hsl(0 0% 100%); }
.ds-icon--flag { width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--ds-s3)); }
.ds-icon--flag .fi, .ds-flag { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; line-height: 1; }
.ds-flag { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.ds-icon--dot { width: 28px; height: 28px; background: hsl(var(--ds-s3)); }
.ds-icon[data-tone="1"] { background: hsl(var(--v-100)); color: hsl(var(--v-600)); }
.ds-icon[data-tone="2"] { background: hsl(var(--c-aqua) / 0.14); color: hsl(159 80% 24%); }
.ds-icon[data-tone="3"] { background: hsl(var(--c-orange) / 0.14); color: hsl(17 80% 36%); }
.ds-icon[data-tone="4"] { background: hsl(var(--c-blue) / 0.13); color: hsl(213 70% 34%); }
.ds-icon[data-tone="5"] { background: hsl(var(--c-pink) / 0.18); color: hsl(337 60% 36%); }

/* ---------- ranked table (SimilarWeb top-websites) ---------- */
.ds-table-wrap { border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); overflow: clip; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ds-table thead th {
  padding: 18px 16px 14px; text-align: left; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: hsl(var(--ds-text-2));
  border-bottom: 1px solid hsl(var(--ds-line));
}
.ds-table td, .ds-table tbody th { padding: 14px 16px; text-align: left; vertical-align: middle; font-weight: 400; }
.ds-table tbody tr + tr { border-top: 1px solid hsl(var(--ds-line)); }
.ds-table tbody tr:hover { background: hsl(var(--v-50)); }
.ds-table tbody tr:target { background: hsl(var(--v-100)); }
.ds-table .ds-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-table .ds-table__rank { width: 64px; text-align: center; }
.ds-table__entity { max-width: 0; width: 34%; }
.ds-rank { font: 500 16px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; color: hsl(var(--ds-text-2)); }
.ds-rank--top { color: hsl(var(--ds-text)); } /* no podium: in some tables the order is closeness, not size */
.ds-cell { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.ds-num .ds-cell { flex-direction: column; align-items: flex-end; gap: 2px; }
/* A ranked figure's bar sits beside it across a third of the table, the
   figure at the bar's end (critique-a 7), not a 140 px stub under the number. */
.ds-table .ds-table__barcell { width: 34%; }
.ds-barcell { display: flex; align-items: center; gap: 14px; }
.ds-barcell .ds-bar { flex: 1; max-width: none; margin: 0; height: 8px; }
.ds-barcell .ds-cell { flex: none; min-width: 4.8em; }
.ds-cell__text { font-weight: 500; color: hsl(var(--ds-text)); }
.ds-table td:not(.ds-num) .ds-cell__text { font-weight: 400; color: hsl(var(--ds-text-2)); }
.ds-cell__text a { color: hsl(var(--ds-brand-text)); }
.ds-cell__sub { font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-bar { display: block; height: 6px; width: 100%; max-width: 140px; margin: 8px 0 0 auto; border-radius: 999px; background: hsl(var(--ds-s3)); overflow: clip; }
.ds-bar i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--v-500)); }
.ds-table__thumbs, .ds-table__thumbs-head { width: 1%; }
.ds-thumbs { display: inline-flex; padding-left: 8px; }
.ds-thumbs img {
  flex: none; width: 34px; height: 42px; margin-left: -8px; object-fit: cover; border-radius: 6px;
  background: hsl(var(--ds-s3)); box-shadow: 0 0 0 2px hsl(var(--ds-s1));
}
.ds-table-units { display: none; }
@media (max-width: 719px) {
  .ds-table-units { display: block; margin: 0 0 8px; font-size: 13px; color: hsl(var(--ds-text-3)); text-align: right; }
  .ds-table-units span::before { content: " · "; }
  .ds-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ds-table, .ds-table tbody { display: block; }
  .ds-table tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px 14px 56px; }
  .ds-table td, .ds-table tbody th { padding: 0; }
  .ds-table .ds-table__rank { position: absolute; left: 12px; top: 22px; width: 32px; }
  .ds-table .ds-table__entity { flex: 1 1 calc(100% - 140px); min-width: 0; max-width: none; width: auto; }
  .ds-table tbody tr > td:nth-child(3) { display: contents; }
  .ds-table tbody tr > td:nth-child(3) .ds-cell { flex: none; align-items: flex-end; }
  .ds-table tbody tr > td:nth-child(3) .ds-bar { flex: 1 0 100%; max-width: none; margin: 2px 0 0; order: 5; }
  .ds-table tbody tr > td:nth-child(3) .ds-barcell { display: contents; }
  .ds-table tbody tr > td:nth-child(n + 4) { order: 6; }
  .ds-table .ds-table__barcell { width: auto; }
  .ds-table tbody tr > td:nth-child(n + 4) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-align: left; }
  .ds-table tbody tr > td:nth-child(n + 5)::before { content: "·"; color: hsl(var(--ds-text-3)); margin-right: 6px; }
  .ds-entity__name, .ds-entity__sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ds-table tbody tr > td.ds-table__thumbs { display: none; }
}

/* ---------- ranked rows on white bars (SimilarWeb affinity table) ---------- */
.ds-ranked { container-type: inline-size; } /* rows adapt to their own width (a frame side, a full section) */
.ds-ranked ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Rank · entity · figure with a bar that takes the free width · fixed-width
   columns (extras, sub, badge) as implicit tracks, so they line up across
   rows and the row never ends in a void. */
.ds-ranked__head, .ds-ranked li {
  display: grid; align-items: center; column-gap: 24px; grid-auto-flow: column;
  grid-template-columns: 32px minmax(170px, 1.1fr) minmax(220px, 2.4fr); grid-auto-columns: auto;
}
.ds-ranked__head { padding: 0 20px 6px; font-size: 14px; font-weight: 500; color: hsl(var(--ds-text-2)); }
.ds-ranked li { min-height: 64px; padding: 10px 20px; border-radius: 12px; background: hsl(var(--ds-s1)); scroll-margin-top: 140px; }
.ds-ranked li:target { background: hsl(var(--v-100)); }
.ds-ranked__hi { background: hsl(var(--v-500)) !important; color: hsl(var(--ds-brand-ink)); }
.ds-ranked__hi :is(span, b, a, em, .pseo-text-link) { color: hsl(var(--ds-brand-ink)) !important; } /* every text on the violet row, links included */
.ds-ranked__hi .ds-ranked__bar { background: hsl(0 0% 100% / 0.28); }
.ds-ranked__hi .ds-ranked__bar i { background: hsl(var(--ds-brand-ink)); }
.ds-ranked__rank { font: 500 15px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; color: hsl(var(--ds-text-3)); text-align: center; }
.ds-ranked__val { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ds-ranked__val b { flex: none; min-width: 4.2em; font: 600 16px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
.ds-ranked__bar { flex: 1; height: 8px; border-radius: 999px; background: hsl(var(--ds-s3)); overflow: clip; }
.ds-ranked__bar i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--v-500)); }
.ds-ranked__cell { display: flex; align-items: center; gap: 8px; width: 10.5rem; min-width: 0; font-size: 14px; color: hsl(var(--ds-text-2)); }
.ds-ranked__cell .ds-spark { width: 100%; height: 28px; }
.ds-ranked__cell:has(.ds-spark) { width: 8rem; }
.ds-ranked__celltext { display: grid; min-width: 0; }
.ds-ranked__celltext > :is(a, span) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; } /* long names ("United Arab Emirates") wrap to two lines */
.ds-ranked__celltext em { font-style: normal; font-size: 13px; color: hsl(var(--ds-text-3)); }
.pseo .ds-ranked__cell a { color: hsl(var(--ds-text)); }
.ds-ranked__sub { width: 12rem; min-width: 0; font-size: 13.5px; color: hsl(var(--ds-text-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ranked__badge { width: 4.5rem; text-align: right; font: 500 18px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; color: hsl(var(--ds-text)); white-space: nowrap; }
.ds-ranked__head .ds-ranked__badge { font: inherit; }
.ds-ranked__head .ds-ranked__sub { font-size: inherit; color: inherit; white-space: normal; overflow: visible; line-height: 1.3; }
.pseo .ds-ranked__badge a { color: hsl(var(--ds-text)); }
/* Two columns of short rows: 1–N/2 left, the rest right. */
@media (min-width: 1100px) {
  .ds-ranked--two ol { grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rk-half, 5), auto); column-gap: 16px; }
  .ds-ranked--two li { grid-template-columns: 28px minmax(140px, 1fr) minmax(160px, 1.3fr); column-gap: 16px; }
}
@container (max-width: 900px) {
  .ds-ranked__head, .ds-ranked li { column-gap: 16px; grid-template-columns: 28px minmax(150px, 1.1fr) minmax(130px, 2fr); }
  .ds-ranked__sub { width: 9rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  .ds-ranked__cell { width: 8.5rem; }
}
/* Narrow lists stack each row with flex, not fixed grid columns, so a page
   that hides the rank or overrides the columns can't leave a column empty:
   rank · name · badge on the first line, the figure with its bar and the
   other cells under the name (indent --rk-indent, 0 when a page hides the rank). */
@container (max-width: 640px) {
  .ds-ranked__head { display: none; }
  .ds-ranked li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; }
  .ds-ranked__rank { flex: 0 0 28px; }
  .ds-ranked__rank:empty { display: none; } /* an unranked row ("this site") starts with its logo */
  .ds-ranked li > .ds-entity { flex: 1 1 0; min-width: 0; }
  .ds-ranked__badge { flex: none; width: auto; font-size: 16px; }
  .ds-ranked__val, .ds-ranked__cell, .ds-ranked__sub { flex: 1 1 100%; width: auto; padding-left: var(--rk-indent, 40px); }
  .ds-ranked__cell:has(.ds-spark) { flex-basis: 50%; }
  .ds-ranked__sub:empty, .ds-ranked__sub:has(> .pseo-text-link:empty) { display: none; }
}
/* Similarly ranked: a compact list, the page's own row lit. */
.ds-neighbors { list-style: none; margin: 0; padding: 8px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); display: grid; gap: 2px; }
.ds-neighbors li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 10px; }
.ds-neighbors li > b { font: 600 15px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
.ds-neighbors__hi { background: hsl(var(--v-100)); }
.ds-neighbors__hi .ds-ranked__rank { color: hsl(var(--v-650)); }

/* ---------- world map with its list ---------- */
.ds-geo { display: grid; gap: 24px; align-items: center; }
@media (min-width: 960px) { .ds-geo { grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: 40px; } }
.ds-geo__map { margin: 0; }
.ds-geo__map svg { display: block; width: 100%; height: auto; }
.ds-geo__map path { fill: hsl(250 12% 87%); stroke: hsl(var(--ds-canvas)); stroke-width: 0.6; stroke-linejoin: round; }
/* Five steps from a clearly tinted first one, so "few ads" never reads as "none". */
.ds-geo__map path[data-q="1"], .ds-geo [data-q="1"] { fill: hsl(var(--v-200)); background: hsl(var(--v-200)); }
.ds-geo__map path[data-q="2"], .ds-geo [data-q="2"] { fill: hsl(var(--v-300)); background: hsl(var(--v-300)); }
.ds-geo__map path[data-q="3"], .ds-geo [data-q="3"] { fill: hsl(var(--v-400)); background: hsl(var(--v-400)); }
.ds-geo__map path[data-q="4"], .ds-geo [data-q="4"] { fill: hsl(var(--v-500)); background: hsl(var(--v-500)); }
.ds-geo__map path[data-q="5"], .ds-geo [data-q="5"] { fill: hsl(var(--v-650)); background: hsl(var(--v-650)); }
.ds-geo__map path[data-q]:hover { fill: hsl(var(--v-700)); }
.ds-geo__pin circle { fill: hsl(var(--v-700) / 0.88); stroke: hsl(0 0% 100%); stroke-width: 1.6; }
.ds-geo__pin line { stroke: hsl(var(--v-700)); stroke-width: 1.2; }
.pseo .ds-geo__pin .ds-geo__anchor { fill: hsl(var(--v-700)); stroke: none; }
/* Rank numbers are HTML over the map, so they keep a real 13 px size at any map width. */
.ds-geo__canvas { position: relative; }
.ds-geo__num { position: absolute; transform: translate(-50%, -50%); font: 600 13px/1 var(--ds-font-display); color: hsl(0 0% 100%); font-variant-numeric: tabular-nums; pointer-events: none; }
.ds-geo__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; font-size: 13px; color: hsl(var(--ds-text-3)); font-variant-numeric: tabular-nums; }
.ds-geo__scale, .ds-geo__key { display: inline-flex; align-items: center; gap: 8px; }
.ds-geo__legend i { display: flex; gap: 2px; }
.ds-geo__legend b { width: 28px; height: 8px; border-radius: 2px; }
.ds-geo__key-pin { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--v-700) / 0.88); }
.ds-geo__key-land { width: 14px; height: 8px; border-radius: 2px; background: hsl(250 12% 87%); }
.ds-geo__bar { display: none; }
.ds-geo__side { padding: 16px 20px 18px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-geo__head { margin: 2px 0 6px; font-size: 13.5px; font-weight: 500; color: hsl(var(--ds-text-3)); }
.ds-geo__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-geo__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "flag name" "flag fig"; column-gap: 14px; align-items: center; padding: 10px 0; }
.ds-geo__list .ds-icon { grid-area: flag; width: 32px; height: 32px; }
.ds-geo__name { grid-area: name; min-width: 0; font-size: 14px; line-height: 1.3; color: hsl(var(--ds-text-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseo .ds-geo__name a { color: hsl(var(--ds-text-2)); }
.pseo .ds-geo__name a:hover { color: hsl(var(--ds-brand-text)); }
.ds-geo__fig { grid-area: fig; display: flex; align-items: baseline; gap: 10px; }
.ds-geo__fig b { font: 500 21px/1.15 var(--ds-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: hsl(var(--ds-text)); }
.ds-geo__fig em { font-style: normal; font-size: 13px; color: hsl(var(--ds-text-3)); font-variant-numeric: tabular-nums; }
.ds-geo__action { margin-top: 10px; font-size: 15px; font-weight: 600; }
@media (max-width: 599px) {
  .ds-geo__map { display: none; } /* a 300 px world makes Europe unreadable: the list leads */
  .ds-geo__list li { grid-template-areas: "flag name" "flag fig" "bar bar"; row-gap: 2px; }
  .ds-geo__bar { grid-area: bar; display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: hsl(var(--ds-s3)); overflow: clip; }
  .ds-geo__bar i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--v-500)); }
}

/* ---------- share visuals: tones, legend, ring, units, split ---------- */
.pseo [data-tone="0"] { --tone: var(--v-500); }
.pseo [data-tone="1"] { --tone: var(--c-aqua); }
.pseo [data-tone="2"] { --tone: var(--c-orange); }
.pseo [data-tone="3"] { --tone: var(--c-blue); }
.pseo [data-tone="4"] { --tone: var(--c-pink); }
.pseo [data-tone="5"] { --tone: var(--v-300); }
.pseo [data-tone="6"] { --tone: var(--ds-s3); }
.ds-legend { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ds-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.ds-legend i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--tone)); }
.ds-legend span { font-size: 14px; color: hsl(var(--ds-text-2)); }
.ds-legend b { grid-column: 2; font: 500 22px/1.15 var(--ds-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.ds-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin: 0; }
.ds-donut__ring { position: relative; width: 196px; flex: none; }
.ds-donut__ring svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.ds-donut__track { fill: none; stroke: hsl(var(--ds-s3)); stroke-width: 14; }
.ds-donut__arc { fill: none; stroke: hsl(var(--tone)); stroke-width: 14; }
.ds-donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ds-donut__center b { font: 500 34px/1 var(--ds-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-donut__center span { margin-top: 4px; font-size: 13.5px; color: hsl(var(--ds-text-3)); }

.ds-units { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; margin: 0; }
.ds-units__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 8px; width: min(100%, 360px); }
.ds-units__grid svg { display: block; width: 100%; height: auto; fill: hsl(var(--tone)); }
.ds-units .ds-legend { grid-auto-flow: column; gap: 32px; }

.ds-split__bar { display: flex; gap: 3px; height: 40px; }
.ds-split__bar i { display: block; height: 100%; border-radius: 6px; background: hsl(var(--tone)); }
.ds-split__bar i:first-child { border-radius: 12px 6px 6px 12px; }
.ds-split__bar i:last-child { border-radius: 6px 12px 12px 6px; }
.ds-split__bar i:only-child { border-radius: 12px; }
.ds-split__legend { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; }
.ds-split__legend li { display: inline-flex; align-items: baseline; gap: 8px; }
.ds-split__legend i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--tone)); align-self: center; }
.ds-split__label { color: hsl(var(--ds-text-2)); }
.ds-split__legend b { font: 500 18px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }

/* ---------- packed bubbles ---------- */
.ds-bubbles { display: grid; gap: 24px 40px; align-items: center; margin: 0; }
@media (min-width: 960px) { .ds-bubbles { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ds-bubbles__box { position: relative; width: 100%; max-width: 620px; container-type: inline-size; }
@container (max-width: 419px) { .ds-bubbles .ds-bubble__text { display: none; } } /* the list beside carries every name */
.ds-bubble {
  position: absolute; display: grid; place-items: center; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: hsl(var(--b)); color: hsl(var(--v-700)); text-align: center;
}
/* Mid tints by rank (SimilarWeb's interest bubbles); the full brand only on
   the page's own part (tone 0, lit). */
.ds-bubble[data-tone="0"] { --b: var(--v-500); color: hsl(0 0% 100%); }
.ds-bubble[data-tone="1"] { --b: var(--v-350); }
.ds-bubble[data-tone="2"] { --b: var(--v-300); }
.ds-bubble[data-tone="3"] { --b: var(--v-250); }
.ds-bubble[data-tone="4"] { --b: var(--v-200); }
.ds-bubble[data-tone="5"] { --b: var(--v-150); }
.ds-bubbles .ds-bubble:not([data-tone="0"]) { color: hsl(var(--v-700)); }
.ds-bubble__text { display: grid; gap: 0.4cqi; padding: 0 10%; overflow-wrap: normal; }
/* Label size follows the box (container units), matching bubbleFits in ds_viz.go. */
.ds-bubble__text b { font-size: 2.4cqi; font-weight: 600; line-height: 1.25; }
.ds-bubble__text em { font-style: normal; font-size: 2.2cqi; font-variant-numeric: tabular-nums; font-weight: 500; } /* full ink: no translucent text at rest */
.ds-bubbles__list { list-style: none; margin: 0; padding: 8px 20px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); display: grid; }
.ds-bubbles__list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; font-size: 15px; }
.ds-bubbles__list li + li { border-top: 1px solid hsl(var(--ds-line)); }
.ds-bubbles__list i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--b)); }
.ds-bubbles__list [data-tone="0"] { --b: var(--v-500); }
.ds-bubbles__list [data-tone="1"] { --b: var(--v-350); }
.ds-bubbles__list [data-tone="2"] { --b: var(--v-300); }
.ds-bubbles__list [data-tone="3"] { --b: var(--v-250); }
.ds-bubbles__list [data-tone="4"] { --b: var(--v-200); }
.ds-bubbles__list [data-tone="5"] { --b: var(--v-150); }
.ds-bubbles__list b { font: 600 15px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
.pseo .ds-bubbles__list a { color: hsl(var(--ds-text)); }

/* ---------- sparkline, small multiples ---------- */
.ds-spark { position: relative; display: inline-block; width: 120px; height: 32px; vertical-align: middle; }
.ds-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-spark__fill { fill: hsl(var(--v-500) / 0.1); }
.ds-spark__line { fill: none; stroke: hsl(var(--v-500)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ds-spark__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: hsl(var(--v-500)); box-shadow: 0 0 0 2px hsl(var(--ds-s1)); }
.ds-multiples { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ds-multiple { display: grid; align-content: start; gap: 2px; padding: 18px 20px 20px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-multiple--lit { background: hsl(var(--v-100)); }
.ds-multiple__title { font-size: 14.5px; font-weight: 600; color: hsl(var(--ds-text)); }
.pseo .ds-multiple__title a { color: hsl(var(--ds-text)); }
.ds-multiple__fig { font: 500 26px/1.15 var(--ds-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-multiple__sub { font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-multiple .ds-spark { width: 100%; height: 44px; margin-top: 12px; }
.ds-minicols { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 14px; }
.ds-minicol { flex: 1; min-height: 2px; border-radius: 3px 3px 1px 1px; background: hsl(var(--v-200)); }
.ds-minicols .ds-minicol--hi { background: hsl(var(--v-500)); }

/* ---------- charts: columns and area ---------- */
.ds-chart { margin: 0; padding: 28px 24px 20px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-chart figcaption { margin-top: 14px; font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-chart__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 20px; font-size: 16px; color: hsl(var(--ds-text-2)); }
.ds-chart__fig b { font: 500 var(--t-fig)/1 var(--ds-font-display); letter-spacing: -0.03em; color: hsl(var(--ds-text)); font-variant-numeric: tabular-nums; }
.ds-columns, .ds-area { position: relative; height: 300px; }
.ds-grid { position: absolute; inset: 8px 0 30px 48px; }
.ds-grid span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid hsl(var(--ds-line) / 0.7); }
.ds-grid em { position: absolute; right: calc(100% + 10px); top: -8px; font-style: normal; font-size: 13px; line-height: 1; color: hsl(var(--ds-text-3)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid hsl(var(--ds-line-2)); }
.ds-columns__plot { position: absolute; inset: 8px 0 0 48px; display: flex; gap: clamp(4px, 2%, 24px); }
.ds-col { flex: 1; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 30px; }
.ds-col__bar { position: relative; align-self: end; min-height: 2px; border-radius: 4px 4px 0 0; background: hsl(var(--v-250)); }
.ds-col--peak .ds-col__bar { background: hsl(var(--v-500)); }
.ds-col__bar b .ds-short { display: none; }
.ds-col__bar b {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  font-size: 13px; font-weight: 600; line-height: 1; color: hsl(var(--ds-text-2)); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ds-col--peak .ds-col__bar b { color: hsl(var(--ds-text)); font-size: 14px; }
.ds-col__label { padding-top: 10px; font-size: 13px; line-height: 1; color: hsl(var(--ds-text-3)); text-align: center; white-space: nowrap; overflow: visible; }
.ds-area__plot { position: absolute; inset: 8px 0 30px 48px; }
.ds-area__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-area__stop-top, .ds-area__stop-bottom { stop-color: hsl(var(--v-500)); stop-opacity: 0.1; } /* flat fill */
.ds-area__line { fill: none; stroke: hsl(var(--v-500)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ds-area__mark { position: absolute; width: 0; height: 0; }
.ds-area__mark::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--v-500)); box-shadow: 0 0 0 3px hsl(var(--ds-s1)); }
.ds-area__mark b {
  position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: hsl(var(--v-100)); color: hsl(var(--v-700));
}
.ds-area__mark:last-child b { transform: translateX(-85%); }
.ds-area__axis { position: absolute; left: 48px; right: 0; bottom: 0; height: 20px; }
.ds-area__axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; line-height: 1; color: hsl(var(--ds-text-3)); white-space: nowrap; }
.ds-area__axis span:first-child { transform: none; }
.ds-area__axis span:last-child { transform: translateX(-100%); }
@media (max-width: 639px) {
  .ds-chart { padding: 20px 14px 16px; }
  .ds-columns, .ds-area { height: 230px; }
  .ds-grid, .ds-area__plot, .ds-columns__plot, .ds-area__axis { left: 38px; }
  .ds-col { grid-template-rows: minmax(0, 1fr) 40px; }
  .ds-columns .ds-grid { bottom: 40px; }
  .ds-col__label { padding-top: 8px; font-size: 13px; line-height: 1.25; white-space: normal; }
  .ds-col__bar b { font-size: 13px; }
  .ds-columns__plot:has(> .ds-col:nth-child(8)) .ds-col:not(.ds-col--peak):not(:last-child) .ds-col__bar b { display: none; }
  /* Compact figures (5.6M) so neighbouring labels never run together (critique-a 11). */
  .ds-col__bar b .ds-full { display: none; }
  .ds-col__bar b .ds-short { display: inline; }
}
/* Bar chart of the older view model (charts.html). */
.ch-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-base { stroke: hsl(var(--ds-line-2)); stroke-width: 1; }
.ch-bar { fill: hsl(var(--v-250)); }
.ch-bar:last-of-type { fill: hsl(var(--v-500)); }
.ch-value { fill: hsl(var(--ds-text)); font-size: 13px; font-weight: 600; }
.ch-label { fill: hsl(var(--ds-text-3)); font-size: 13px; }

/* ---------- horizontal bars ---------- */
.ds-hbars { list-style: none; margin: 0; padding: 8px 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); display: grid; }
.ds-hbar { display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr) 6rem; align-items: center; gap: 20px; padding: 12px 0; }
.ds-hbar__label { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; }
.ds-hbar__label > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseo .ds-hbar__label a { color: hsl(var(--ds-text)); }
.ds-hbar__label .ds-icon { width: 28px; height: 28px; }
.ds-hbar__sub { margin-left: 8px; font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-hbar__track { height: 8px; border-radius: 999px; background: hsl(var(--ds-s3)); overflow: clip; }
.ds-hbar__track i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--v-500)); }
.ds-hbar__value { text-align: right; font: 600 16px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .ds-hbars { padding: 6px 16px; }
  .ds-hbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .ds-hbar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- run-length timeline ---------- */
.ds-runs { margin: 0; padding: 20px 24px 12px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-runs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ds-runs__axis, .ds-run { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 7fr) minmax(96px, 1.2fr); column-gap: 20px; align-items: center; }
.ds-runs__axis { height: 24px; margin-bottom: 4px; }
.ds-runs__ticks { position: relative; height: 100%; }
.ds-runs__ticks span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 13px; color: hsl(var(--ds-text-3)); white-space: nowrap; }
.ds-runs__ticks span:first-child { transform: none; }
@media (max-width: 1099px) { .ds-runs__minor { display: none; } .ds-runs__ticks span { transform: none; } } /* narrow: year labels only, each starting at its month */
.ds-run { min-height: 60px; padding: 8px 0; border-radius: 10px; }
.ds-run__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-run__who img, .ds-run__thumb { flex: none; width: 36px; height: 44px; object-fit: cover; border-radius: 6px; overflow: clip; background: hsl(var(--ds-s3)); }
.ds-run__who > span { display: grid; min-width: 0; }
.ds-run__who b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseo .ds-run__who b a { color: hsl(var(--ds-text)); }
.ds-run__who em { font-style: normal; font-size: 13px; color: hsl(var(--ds-text-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-run__track { position: relative; height: 14px; border-radius: 999px; background: hsl(var(--ds-s2)); }
.ds-run__track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: hsl(var(--v-300)); }
.ds-run--hi .ds-run__track i { background: hsl(var(--v-500)); }
.ds-run__fig { display: grid; text-align: right; }
.ds-run__fig b { font: 600 17px/1.2 var(--ds-font-display); font-variant-numeric: tabular-nums; }
/* The date line sits under the bar on every width (one line, no wrap
   after the "·"); the days figure stays at the right of the bar. */
.ds-run__fig { display: contents; }
.ds-run__fig b { grid-column: 3; grid-row: 1; text-align: right; }
.ds-run__fig em { grid-column: 2 / -1; grid-row: 2; margin-top: 4px; text-align: left; }
.ds-run__fig em span { white-space: nowrap; }
.ds-run__fig em { font-style: normal; font-size: 13px; color: hsl(var(--ds-text-3)); }
.ds-run__who { grid-row: 1 / span 2; }
.ds-run__track { grid-column: 2; grid-row: 1; }
@media (max-width: 759px) {
  .ds-runs { padding: 16px; }
  .ds-runs__axis { display: none; }
  .ds-run { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .ds-run__track { grid-column: 1 / -1; grid-row: 2; }
  /* Phones: the days stay beside the name, the date line goes under the bar,
     so a long "Since … · last seen …" never squeezes the name. */
  .ds-run__who { grid-row: 1; }
  .ds-run__fig b { grid-column: 2; grid-row: 1; text-align: right; }
  .ds-run__fig em { grid-column: 1 / -1; grid-row: 3; text-align: left; }
}

/* ---------- flow into a total ---------- */
.ds-flow { display: grid; grid-template-columns: minmax(200px, 4fr) minmax(0, 5fr) minmax(180px, 3fr); align-items: center; margin: 0; }
.ds-flow__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-flow__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 16px; border-radius: 10px; background: hsl(var(--ds-s1)); }
.ds-flow__rows li > b { font: 600 15px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; }
.ds-flow__rows .ds-icon { width: 26px; height: 26px; }
.ds-flow__rest { background: hsl(var(--ds-s2)) !important; color: hsl(var(--ds-text-2)); font-size: 14.5px; }
.ds-flow { align-items: stretch; }
.ds-flow__mid { position: relative; min-width: 0; }
.ds-flow__bands { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ds-flow__bands path { fill: hsl(var(--v-350) / 0.75); }
.ds-flow__bands path:nth-child(2n) { fill: hsl(var(--v-450) / 0.7); }
.ds-flow__bands path.ds-flow__band-rest { fill: hsl(var(--v-200)); }
.ds-flow__total { align-self: center; }
.ds-flow__total {
  display: grid; place-content: center; justify-self: start; text-align: center; aspect-ratio: 1; width: 100%; max-width: 220px;
  border-radius: 50%; background: hsl(var(--ds-s1)); margin-left: -12px;
}
.ds-flow__total span { font-size: 14px; color: hsl(var(--ds-text-2)); }
.ds-flow__total b { font: 500 var(--t-fig)/1.05 var(--ds-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) {
  .ds-flow { grid-template-columns: 1fr; gap: 16px; }
  .ds-flow__mid { display: none; }
  .ds-flow__total { order: -1; aspect-ratio: auto; max-width: none; margin: 0; padding: 16px; border-radius: var(--ds-radius); justify-self: stretch; }
}

/* ---------- creative cards ---------- */
.ds-creatives { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }
@media (max-width: 519px) { .ds-creatives { grid-template-columns: 1fr 1fr; gap: 20px 12px; } }
.ds-creative { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ds-creative__cover { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: hsl(var(--ds-s3)); }
.ds-creative__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Neutral scrims under the text on the picture (the one gradient the house
   rules allow): the figure at the bottom, the chips at the top. */
.ds-creative__cover::after {
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, hsl(var(--ds-scrim) / 0.88) 0, hsl(var(--ds-scrim) / 0.88) 56px, hsl(var(--ds-scrim) / 0) 100%);
}
.ds-creative__cover::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 56px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, hsl(var(--ds-scrim) / 0.35), hsl(var(--ds-scrim) / 0));
}
.ds-creative__cover:not(:has(.ds-creative__rank, .ds-creative__format))::before { display: none; }
.ds-creative__cover:not(:has(.ds-creative__metric))::after { display: none; }
.ds-creative__cover:not(:has(img)) .ds-creative__metric { color: hsl(var(--ds-text-2)); }
.ds-creative__cover:not(:has(img)) .ds-creative__metric b { color: hsl(var(--ds-text)); }
.ds-creative__cover:not(:has(img))::after { display: none; }
/* ds-blank: a missing cover is a quiet tile with its format glyph, the
   same everywhere (cards, posts, timeline thumbs, strips). */
.ds-blank, .ds-creative__empty { display: grid; place-items: center; width: 100%; height: 100%; color: hsl(var(--ds-text-3)); background: hsl(var(--ds-s3)); }
.ds-blank .ds-glyph, .ds-creative__empty .ds-glyph { width: 40%; max-width: 32px; height: auto; fill: currentColor; }
.ds-blank .ds-glyph rect { stroke: currentColor; }
.ds-creative__rank, .ds-creative__format {
  position: absolute; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1;
  color: hsl(var(--ds-text)); background: hsl(0 0% 100% / 0.94);
}
.ds-creative__rank { left: 10px; font-family: var(--ds-font-display); font-variant-numeric: tabular-nums; }
.ds-creative__format { right: 10px; font-weight: 500; }
.ds-glyph { width: 12px; height: 12px; fill: currentColor; }
.ds-creative__metric { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; font-size: 13px; color: hsl(0 0% 100% / 0.85); line-height: 1.3; }
.ds-creative__metric b { display: block; font: 600 22px/1.1 var(--ds-font-display); letter-spacing: -0.02em; color: hsl(0 0% 100%); font-variant-numeric: tabular-nums; }
.ds-creative__bar { position: absolute; left: 0; bottom: 0; z-index: 2; height: 4px; background: hsl(var(--v-400)); }
.ds-creative__body { display: grid; gap: 4px; padding: 0 2px; min-width: 0; }
.ds-creative__body .ds-icon { width: 24px; height: 24px; font-size: 13px; }
.ds-creative__body .ds-entity { gap: 8px; margin-bottom: 2px; }
.ds-creative__body .ds-entity__name { font-size: 14.5px; }
.pseo .ds-creative__owner { font-weight: 600; overflow-wrap: anywhere; }
.pseo .ds-creative__line { font-size: 13px; color: hsl(var(--ds-text-3)); line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  a.ds-creative__cover img { transition: transform 320ms var(--ds-ease); }
  a.ds-creative__cover:hover img { transform: scale(1.03); }
}
.ds-creative--ghost .ds-creative__blank { display: block; height: 10px; border-radius: 4px; background: hsl(var(--ds-s3)); }

/* ---------- chips, tabs, menus ---------- */
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; color: hsl(var(--ds-text-2)); background: hsl(var(--ds-s1));
}
.pseo a.ds-chip { color: hsl(var(--ds-text)); }
.pseo a.ds-chip:hover { text-decoration: none; background: hsl(var(--v-50)); color: hsl(var(--ds-brand-text)); }
.ds-chip em { font-style: normal; font-size: 13px; color: hsl(var(--ds-text-3)); font-variant-numeric: tabular-nums; }
.ds-chip--on { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-chip--on em { color: hsl(0 0% 100% / 0.8); }
.ds-chip--text { background: hsl(var(--ds-s2)); }

.ds-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: hsl(var(--ds-s1)); }
.ds-tab { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.pseo a.ds-tab { color: hsl(var(--ds-text-2)); }
.pseo a.ds-tab:hover { color: hsl(var(--ds-text)); text-decoration: none; background: hsl(var(--v-50)); }
.ds-tab--on { color: hsl(var(--v-650)); background: hsl(var(--v-100)); font-weight: 600; }

.ds-switch { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
/* Panels hang from the switcher row, not from their own button, so a wide
   panel opened from the second menu stays inside the column. */
.ds-switch .ds-menu { position: static; }
.ds-menu { position: relative; }
.ds-menu summary {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 20px; border-radius: 999px;
  list-style: none; cursor: pointer; font-size: 15px; white-space: nowrap; background: hsl(var(--ds-s1));
}
.ds-menu summary::-webkit-details-marker { display: none; }
.ds-menu summary:hover { background: hsl(var(--v-50)); }
.ds-menu[open] summary { background: hsl(var(--v-100)); }
.ds-menu__label { color: hsl(var(--ds-text-3)); }
.ds-menu__current { font-weight: 600; color: hsl(var(--ds-text)); }
.ds-menu__chev { width: 14px; height: 14px; fill: none; stroke: hsl(var(--ds-text-2)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-menu__panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: 400px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; border-radius: 14px; transform-origin: top left;
  background: hsl(var(--ds-s1));
}
.ds-menu[open] .ds-menu__panel { box-shadow: 0 0 0 1px hsl(var(--ds-line)), 0 24px 48px -12px hsl(252 40% 10% / 0.25); } /* floating layer, only when open */
.ds-menu__panel--wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(680px, calc(100vw - 2 * var(--ds-gutter))); }
@media (max-width: 639px) { .ds-menu__panel--wide { grid-template-columns: 1fr 1fr; } }
.ds-menu__panel a, .ds-menu__on { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35; }
.pseo .ds-menu__panel a { color: hsl(var(--ds-text)); }
.pseo .ds-menu__panel a:hover { background: hsl(var(--v-50)); color: hsl(var(--ds-brand-text)); text-decoration: none; }
.ds-menu__panel .pseo-text-link { display: block; padding: 8px 12px; font-size: 14px; color: hsl(var(--ds-text-3)); }
.ds-menu__on { font-weight: 600; color: hsl(var(--v-650)); background: hsl(var(--v-100)); }
@media (prefers-reduced-motion: no-preference) {
  .ds-menu[open] .ds-menu__panel { animation: ds-pop 150ms var(--ds-ease); }
  .ds-menu__chev { transition: transform 150ms var(--ds-ease); }
}
.ds-menu[open] .ds-menu__chev { transform: rotate(180deg); }
@keyframes ds-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

/* ---------- cut line, band ---------- */
.ds-cut {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 12px; padding: 16px 16px 16px 24px; border-radius: var(--ds-radius); background: hsl(var(--v-100));
}
.ds-cut p { font-size: 15px; color: hsl(var(--v-700)); }
.ds-cut .ds-btn { height: 42px; padding: 0 18px; font-size: 14px; }
/* A full-bleed white field behind one section, for rhythm (one per page). */
.ds-band { margin-inline: calc(50% - 50vw); padding: 88px calc(50vw - 50%); background: hsl(var(--ds-s1)); }
@media (min-width: 768px) { .ds-band { padding-block: 112px; } }
.ds-band :is(.ds-chart, .ds-hbars, .ds-table-wrap, .ds-stat, .ds-geo__side, .ds-bubbles__list, .ds-multiple, .ds-runs, .ds-sheet, .ds-cite, .ds-neighbors, .ds-related__group) { background: hsl(var(--ds-canvas)); }
.ds-band .ds-ranked li, .ds-band .ds-flow__rows li, .ds-band .ds-flow__total, .ds-band .ds-chip, .ds-band .ds-tabs, .ds-band .ds-menu summary { background: hsl(var(--ds-canvas)); }
.ds-band .ds-geo__map path { stroke: hsl(var(--ds-s1)); }

/* ---------- cite, empty, skeleton ---------- */
.ds-cite { display: grid; gap: 16px 40px; padding: 24px 28px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
@media (min-width: 900px) { .ds-cite { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; } }
.ds-cite__text p { margin-top: 6px; font-size: 15px; color: hsl(var(--ds-text-2)); }
/* The quote and its button share one tinted strip: no hole under the quote. */
.ds-cite__quote { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 16px 16px 20px; border-radius: 12px; background: hsl(var(--v-50)); }
.ds-cite blockquote { flex: 1 1 22rem; margin: 0; }
.ds-cite blockquote p { font-size: 15px; line-height: 1.6; color: hsl(var(--ds-text)); user-select: all; overflow-wrap: anywhere; }
.ds-cite__btn { flex: none; height: 40px; padding: 0 18px; font-size: 14px; cursor: pointer; border: 0; }
.ds-cite__btn[hidden] { display: none; }
.pseo .ds-cite__btn[data-state="done"] { color: hsl(var(--ds-good)); }

.ds-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border-radius: var(--ds-radius); text-align: center; background: hsl(var(--ds-s2)); color: hsl(var(--ds-text-2)); font-size: 15px; }
.ds-empty svg { width: 32px; height: 32px; margin-bottom: 6px; fill: none; stroke: hsl(var(--v-400)); stroke-width: 1.5; stroke-linecap: round; }
.pseo .ds-empty__title { font-size: 17px; font-weight: 600; color: hsl(var(--ds-text)); }
.ds-empty__action { margin-top: 8px; font-weight: 600; }

.ds-skeleton { display: grid; gap: 10px; }
.ds-skeleton i { display: block; height: 44px; border-radius: 10px; background: hsl(var(--ds-s3)); }
.ds-skeleton i:nth-child(2n) { width: 86%; }

/* ---------- ds-switch: the one live thing (no JS) ---------- */
.ds-sw { display: grid; gap: 16px; }
.ds-sw__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-sw__label { margin-right: 6px; font-size: 15px; font-weight: 600; color: hsl(var(--ds-text)); }
.ds-sw__tab {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: hsl(var(--ds-text-2)); background: hsl(var(--ds-s1)); user-select: none;
}
.ds-sw__tab .ds-icon { width: 24px; height: 24px; }
.ds-sw__tab:hover { background: hsl(var(--v-50)); color: hsl(var(--ds-text)); }
/* Standard tab pattern: every panel is in the HTML, only the checked one is
   displayed (the others display: none), so a short panel leaves no empty
   space; the height changes only when the reader picks. */
.ds-sw__panel { display: none; align-content: start; gap: 16px; padding: 24px; border-radius: var(--ds-radius); background: hsl(var(--ds-s1)); }
.ds-sw__title { font-size: 15px; font-weight: 600; color: hsl(var(--ds-text-2)); }
/* The lead row uses the bar list's columns (ds-hbar: label 15rem · track ·
   6rem), so its bar sits on the same track as #2, #3… below it. */
.ds-sw__lead { display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr) 6rem; align-items: center; gap: 8px 20px; }
.ds-sw__lead .ds-icon { width: 44px; height: 44px; }
.ds-sw__lead .ds-entity__name { font-size: 18px; }
.ds-sw__fig { grid-column: 1; grid-row: 2; justify-self: start; font-size: 15px; color: hsl(var(--ds-text-2)); } /* under the name, left (critique-a) */
.ds-sw__fig b { font: 500 var(--t-fig)/1 var(--ds-font-display); letter-spacing: -0.03em; color: hsl(var(--ds-text)); font-variant-numeric: tabular-nums; }
.ds-sw__bar { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: block; height: 8px; border-radius: 999px; background: hsl(var(--ds-s3)); overflow: clip; }
.ds-sw__bar i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--v-500)); }
.ds-sw__panel .ds-hbars { padding: 0; background: none; }
.ds-sw__panel .ds-hbar__label > span:last-child { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; } /* names wrap, never cut */
.ds-sw__note { font-size: 14px; color: hsl(var(--ds-text-3)); }
.ds-sw__link { font-size: 15px; font-weight: 600; }
@media (max-width: 639px) {
  .ds-sw__panel { padding: 18px 16px; }
  /* Phones: mark + name on one row (the name may wrap to two lines), the
     figure under it, then the bar: nothing squeezes the name. */
  .ds-sw__lead { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ds-sw__lead > .ds-entity { grid-column: 1; }
  .ds-sw__lead .ds-entity__name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ds-sw__fig { grid-column: 1; grid-row: auto; justify-self: start; }
  .ds-sw__bar { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .ds-sw__panel { animation: ds-swfade 220ms var(--ds-ease); }
  .ds-sw__tab { transition: background-color 150ms var(--ds-ease), color 150ms var(--ds-ease); }
  .ds-sw__bar i { transition: transform 420ms var(--ds-ease); transform-origin: 0 50%; }
}
@keyframes ds-swfade { from { opacity: 0; } }
/* Choice n shows panel n and lights tab n (up to 12 choices). */
.ds-sw__radio:nth-of-type(1):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(1) { display: grid; }
.ds-sw__radio:nth-of-type(1):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(1) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(1):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(1) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(2):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(2) { display: grid; }
.ds-sw__radio:nth-of-type(2):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(2) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(2):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(2) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(3):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(3) { display: grid; }
.ds-sw__radio:nth-of-type(3):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(3) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(3):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(3) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(4):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(4) { display: grid; }
.ds-sw__radio:nth-of-type(4):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(4) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(4):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(4) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(5):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(5) { display: grid; }
.ds-sw__radio:nth-of-type(5):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(5) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(5):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(5) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(6):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(6) { display: grid; }
.ds-sw__radio:nth-of-type(6):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(6) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(6):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(6) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(7):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(7) { display: grid; }
.ds-sw__radio:nth-of-type(7):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(7) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(7):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(7) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(8):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(8) { display: grid; }
.ds-sw__radio:nth-of-type(8):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(8) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(8):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(8) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(9):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(9) { display: grid; }
.ds-sw__radio:nth-of-type(9):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(9) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(9):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(9) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(10):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(10) { display: grid; }
.ds-sw__radio:nth-of-type(10):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(10) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(10):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(10) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(11):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(11) { display: grid; }
.ds-sw__radio:nth-of-type(11):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(11) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(11):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(11) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }
.ds-sw__radio:nth-of-type(12):checked ~ .ds-sw__panels > .ds-sw__panel:nth-child(12) { display: grid; }
.ds-sw__radio:nth-of-type(12):checked ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(12) { color: hsl(var(--ds-brand-ink)); background: hsl(var(--v-500)); }
.ds-sw__radio:nth-of-type(12):focus-visible ~ .ds-sw__tabs > .ds-sw__tab:nth-of-type(12) { outline: 2px solid hsl(var(--v-500)); outline-offset: 3px; }

/* ---------- motion (D-085 §6) ---------- */
/* Rule: a data mark is never at a partial length at rest, and content is
   never partly transparent at rest. The base style is always the final
   state. Entrances are one-shot and time-based: when a block that was below
   the fold scrolls in, pseo.js sets .ds-enter (the from-state, no
   transition), then swaps it for .ds-entering, so the block plays once to
   its base state in ≤ 0.7 s and is never touched again. Blocks in view at
   load, readers without JS and reduced motion get no entrance. The hero
   rises once on load (≤ 450 ms). */
@media (prefers-reduced-motion: no-preference) {
  .ds-hero__text > *, .ds-hero__aside { animation: ds-rise 360ms var(--ds-ease) backwards; }
  .ds-hero__text > :nth-child(2) { animation-delay: 30ms; }
  .ds-hero__text > :nth-child(3) { animation-delay: 60ms; }
  .ds-hero__text > :nth-child(n + 4) { animation-delay: 90ms; }
  .ds-hero__aside { animation-delay: 60ms; }

  .ds-enter > * { opacity: 0; transform: translateY(24px); }
  .ds-enter :is(:is(.ds-ranked__bar, .ds-hbar__track, .ds-run__track, .ds-geo__bar, .ds-bar) > i, .ds-split__bar > i) { transform: scaleX(0.02); }
  .ds-enter :is(.ds-col__bar, .ds-minicol) { transform: scaleY(0.02); }
  .ds-enter :is(.ds-table tbody tr, .ds-ranked li):nth-child(-n + 8) { opacity: 0; transform: translateY(10px); }
  .ds-entering :is(.ds-table tbody tr, .ds-ranked li):nth-child(-n + 8) { transition: opacity 360ms var(--ds-ease), transform 400ms var(--ds-ease); }
  .ds-entering :is(.ds-table tbody tr, .ds-ranked li):nth-child(2) { transition-delay: 40ms; }
  .ds-entering :is(.ds-table tbody tr, .ds-ranked li):nth-child(3) { transition-delay: 80ms; }
  .ds-entering :is(.ds-table tbody tr, .ds-ranked li):nth-child(n + 4):nth-child(-n + 8) { transition-delay: 120ms; }
  .ds-entering > * { transition: opacity 400ms var(--ds-ease), transform 440ms var(--ds-ease); }
  .ds-entering > :nth-child(2) { transition-delay: 60ms; }
  .ds-entering > :nth-child(n + 3) { transition-delay: 110ms; }
  .ds-entering :is(:is(.ds-ranked__bar, .ds-hbar__track, .ds-run__track, .ds-geo__bar, .ds-bar) > i, .ds-split__bar > i) { transform-origin: 0 50%; transition: transform 460ms var(--ds-ease) 80ms; }
  .ds-entering :is(.ds-col__bar, .ds-minicol) { transform-origin: 50% 100%; transition: transform 460ms var(--ds-ease) 80ms; }
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(24px); } }

/* Feedback: rows, cards and marks answer the pointer. */
.ds-ranked li:not(.ds-ranked__hi):hover, .ds-geo__list li:hover, .ds-neighbors li:not(.ds-neighbors__hi):hover, .ds-flow__rows li:not(.ds-flow__rest):hover { background: hsl(var(--v-50)); }
.ds-geo__list li { margin-inline: -8px; padding-inline: 8px; border-radius: 10px; }
.ds-multiple:hover { background: hsl(var(--v-50)); }
.ds-multiple--lit:hover { background: hsl(var(--v-150)); }
.ds-geo:has(.ds-geo__list li:nth-child(1):hover) .ds-geo__pin:nth-of-type(1) circle, .ds-geo__pin:nth-of-type(1):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(1):hover) .ds-geo__list li:nth-child(1) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(2):hover) .ds-geo__pin:nth-of-type(2) circle, .ds-geo__pin:nth-of-type(2):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(2):hover) .ds-geo__list li:nth-child(2) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(3):hover) .ds-geo__pin:nth-of-type(3) circle, .ds-geo__pin:nth-of-type(3):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(3):hover) .ds-geo__list li:nth-child(3) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(4):hover) .ds-geo__pin:nth-of-type(4) circle, .ds-geo__pin:nth-of-type(4):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(4):hover) .ds-geo__list li:nth-child(4) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(5):hover) .ds-geo__pin:nth-of-type(5) circle, .ds-geo__pin:nth-of-type(5):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(5):hover) .ds-geo__list li:nth-child(5) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(6):hover) .ds-geo__pin:nth-of-type(6) circle, .ds-geo__pin:nth-of-type(6):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(6):hover) .ds-geo__list li:nth-child(6) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(7):hover) .ds-geo__pin:nth-of-type(7) circle, .ds-geo__pin:nth-of-type(7):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(7):hover) .ds-geo__list li:nth-child(7) { background: hsl(var(--v-50)); }
.ds-geo:has(.ds-geo__list li:nth-child(8):hover) .ds-geo__pin:nth-of-type(8) circle, .ds-geo__pin:nth-of-type(8):hover circle { fill: hsl(var(--v-500)); }
.ds-geo:has(.ds-geo__pin:nth-of-type(8):hover) .ds-geo__list li:nth-child(8) { background: hsl(var(--v-50)); }
@media (prefers-reduced-motion: no-preference) {
  .ds-ranked li, .ds-geo__list li, .ds-neighbors li, .ds-multiple, .ds-flow__rows li { transition: background-color 150ms var(--ds-ease); }
  .ds-geo__pin circle { transition: fill 150ms var(--ds-ease); }
  .ds-bubble { transition: transform 180ms var(--ds-ease); }
  .ds-bubble:hover { transform: translate(-50%, -50%) scale(1.04); }
  .ds-chip, .ds-tab, .ds-menu summary { transition: background-color 120ms var(--ds-ease), transform 120ms var(--ds-ease); }
  :is(.ds-chip, .ds-tab, .ds-menu summary):active { transform: scale(0.97); }
}

/* ---------- buttons (one shape: the pill) ---------- */
.ds-btn, .pseo .pseo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px; white-space: nowrap; font: 600 15px/1 var(--ds-font-body); cursor: pointer;
}
.ds-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pseo .ds-btn--primary, .pseo .pseo-btn { background: hsl(var(--ds-brand)); color: hsl(var(--ds-brand-ink)); }
.pseo .ds-btn--primary:hover, .pseo .pseo-btn:hover { background: hsl(var(--ds-brand-hover)); text-decoration: none; }
.pseo .ds-btn--ghost { color: hsl(var(--v-650)); background: hsl(var(--ds-s1)); }
.pseo .ds-btn--ghost:hover { background: hsl(var(--v-50)); text-decoration: none; }
.pseo .ds-btn--invert { color: hsl(var(--v-650)); background: hsl(0 0% 100%); }
.pseo .ds-btn--invert:hover { background: hsl(var(--v-100)); text-decoration: none; }
.ds-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .ds-btn, .pseo .pseo-btn { transition: background-color 120ms var(--ds-ease), transform 120ms var(--ds-ease); }
  .ds-btn:active { transform: scale(0.98); }
}

/* ---------- FAQ ---------- */
.ds-faq { display: grid; gap: 24px 64px; }
@media (min-width: 960px) {
  .ds-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ds-faq > h2 { position: sticky; top: 112px; align-self: start; }
}
.ds-faq__list { display: grid; gap: 8px; }
.ds-qa { border-radius: 14px; background: hsl(var(--ds-s1)); }
.ds-qa summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 24px;
  list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.4; color: hsl(var(--ds-text));
}
.ds-qa summary::-webkit-details-marker { display: none; }
.ds-qa summary:hover { color: hsl(var(--ds-brand-text)); }
.ds-qa__icon { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: hsl(var(--v-500)); stroke-width: 1.8; stroke-linecap: round; }
.ds-qa[open] .ds-qa__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .ds-qa__icon { transition: transform 150ms var(--ds-ease); } }
.ds-qa p { padding: 0 64px 22px 24px; max-width: 64ch; color: hsl(var(--ds-text)); font-size: 16px; line-height: 1.65; }

/* ---------- CTA band: one violet field ---------- */
.ds-cta {
  display: grid; gap: 32px; align-items: end; margin-top: 128px; padding: 64px 56px;
  border-radius: 28px; background: hsl(var(--v-500)); color: hsl(var(--ds-brand-ink));
}
@media (min-width: 960px) { .ds-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.pseo .ds-cta h2 { max-width: 16em; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: hsl(var(--ds-brand-ink)); }
.ds-cta__lead { max-width: 36em; margin-top: 16px; font-size: 17px; color: hsl(0 0% 100% / 0.86); text-wrap: pretty; }
.ds-cta .ds-btn { max-width: 100%; height: auto; min-height: 56px; padding-block: 14px; white-space: normal; line-height: 1.25; text-align: center; }
@media (max-width: 639px) { .ds-cta { margin-top: 88px; padding: 40px 20px; border-radius: 22px; } .ds-cta .ds-btn { width: 100%; } }

/* ---------- related links: link pills under the CTA, no sheets ---------- */
.ds-related { display: grid; gap: 20px; }
.ds-related__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ds-related__group:not(:has(li)) { display: none; }
.pseo .ds-related h2 { flex: 0 0 100%; margin: 0 0 2px; font: 600 15px/1.3 var(--ds-font-body); letter-spacing: 0; color: hsl(var(--ds-text)); }
@media (min-width: 960px) { .pseo .ds-related h2 { flex: 0 0 15rem; margin: 0; } }
.ds-related ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.2; }
.ds-related li > a, .ds-related__soon { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: hsl(var(--ds-s1)); }
.pseo .ds-related a { color: hsl(var(--ds-text)); font-weight: 500; }
.pseo .ds-related a:hover { background: hsl(var(--v-100)); color: hsl(var(--v-650)); text-decoration: none; }
.ds-related__soon { color: hsl(var(--ds-text-3)); background: hsl(var(--ds-s2)); cursor: default; }
.ds-related__soon em { flex: none; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 500; line-height: 1.2; color: hsl(var(--ds-text-3)); background: hsl(var(--ds-s3)); }
.pseo > .ds-related { margin-top: 56px; }

/* ---------- attribution ---------- */
.pseo .pseo-attribution { display: flex; align-items: flex-start; gap: 10px; margin-top: 40px; font-size: 13.5px; color: hsl(var(--ds-text-3)); }
.pseo-attribution svg { flex: none; width: 14px; height: 14px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.pseo .pseo-attribution a { color: hsl(var(--ds-text-2)); text-decoration: underline; text-decoration-color: hsl(var(--ds-line-2)); }
.pseo-attribution .pseo-text-link { color: inherit; }

/* ========== Night glow: the dark theme (D-093, 2026-10-19) ==========
   Layered over the light report above. Chosen by the user from four
   variants (task plan/redesign3/); folding it into the token block is
   later polish.
   The spytrend.com home page carried into a report: the site's canvas, the
   home hero's violet light from the top, the tools pages' cards, table of
   contents and callout, the home FAQ and final CTA, luminous violet data and
   ad posts in the apps' own dark mode. Round 2 (2026-10-19) copies the site's
   computed values (plan/redesign3/tools/probe-site.mjs); literals live in the
   token block, everything below uses tokens. Behaviour: v2.js. */

:root {
  /* ---- literals (Spytrend site palette, dark) ---- */
  --n-ink-0: 220 12% 4.9%;   /* canvas: #0B0C0E, html/body on /, /tools, /data, /pricing */
  --n-ink-1: 225 10% 7.8%;   /* cards: #121316, the tools pages' related-tool card */
  --n-ink-2: 228 9% 11%;     /* inside a sheet */
  --n-ink-3: 228 8% 15%;     /* tracks, hover, land */
  --n-ink-4: 228 8% 19%;     /* lines */
  --n-ink-5: 228 7% 27%;     /* strong lines */
  --n-snow: 220 14% 96%;
  --n-mist: 222 8% 68%;      /* --lp-text-2 */
  --n-fog: 224 6% 57%;       /* --lp-text-3 */
  --n-gray-200: 220 13% 91%; /* tools article body (text-gray-200) */
  --n-gray-400: 218 11% 65%; /* tools secondary text (text-gray-400) */
  --n-gray-500: 220 9% 46%;  /* tools small caps titles (text-gray-500) */
  --n-line: 228 8% 18%;      /* --lp-line */
  --n-line-strong: 228 7% 26%; /* --lp-line-strong */
  --n-head-bar: 240 29% 5.5%;  /* the shell's scrolled header, #0a0a12 */
  --n-brand: 272 100% 50%;   /* #8800FF: fields, buttons, the lit row */
  --n-brand-hover: 272 100% 58%;
  --n-lift: 272 100% 67%;    /* data ink on dark: 5.0:1 on a sheet */
  --n-lilac: 272 100% 76%;   /* violet as text: 7.2:1 */
  --n-white: 0 0% 100%;
  --n-paper-ink: 220 9% 12%; /* dark ink on the white chips over pictures */
  --n-paper-ink-2: 220 6% 38%;
  --n-paper-grey: 220 14% 94%;
  --n-paper-grey-2: 220 12% 89%;
  --n-bezel: 228 10% 3%;
  --n-glow: 272 100% 50%;
  --n-glow-hot: 282 100% 62%;
  --n-glow-cool: 258 100% 40%;
  --n-good: 158 64% 52%;
}

:root, :root body { background: hsl(var(--n-ink-0)); }
/* Header (the landing's useHeaderScroll): transparent over the glow while the
   page is at its top (v2.js sets data-at-top at scrollY ≤ 40), the exported
   solid bar (#0a0a12/95, blur 12px, shadow-lg black/20) once scrolled or
   without JS. The blur stays on the inner bar, never on the header element
   (it would trap the fixed mobile drawer). */
:root header[data-shell="header"] { background: transparent; }
:root header[data-shell="header"] > input + div { transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 300ms cubic-bezier(0.4, 0, 0.2, 1); }
:root header[data-shell="header"]:not([data-ready]) > input + div { transition: none; }
:root header[data-shell="header"][data-at-top] > input + div { background-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { :root header[data-shell="header"] > input + div { transition: none; } }

:root .pseo {
  color-scheme: dark;
  /* The ladder turns over: low steps are dark violet tints (fields, hovers,
     lit rows), high steps are the light marks and violet text. Rules that
     used v-650/700 as text on v-50/150 fields keep working in reverse. */
  --v-50: 266 32% 11%;  --v-100: 268 45% 14%;  --v-150: 269 60% 18%;
  --v-200: 270 70% 26%; --v-250: 271 80% 34%;  --v-300: 271 90% 42%;
  --v-350: 272 100% 50%; --v-400: 272 100% 58%; --v-450: 272 100% 63%;
  --v-500: var(--n-lift); --v-550: var(--n-lilac); --v-600: 271 100% 82%;
  --v-650: 270 100% 87%; --v-700: 268 100% 92%;
  /* Categorical slots, the site's direction colours (each ≥ 6:1 on a sheet). */
  --c-aqua: 160 64% 48%; --c-orange: 14 92% 64%; --c-blue: 213 77% 62%; --c-pink: 338 70% 68%;

  --ds-canvas: var(--n-ink-0);
  --ds-s1: var(--n-ink-1);
  --ds-s2: var(--n-ink-2);
  --ds-s3: var(--n-ink-3);
  --ds-text: var(--n-snow);
  --ds-text-2: var(--n-mist);
  --ds-text-3: var(--n-fog);
  --ds-brand: var(--n-brand);
  --ds-brand-hover: var(--n-brand-hover);
  --ds-brand-ink: var(--n-white);
  --ds-brand-text: var(--n-lilac);
  --ds-brand-lift: var(--n-lift);
  --ds-brand-tint: var(--v-100);
  --ds-good: var(--n-good);
  --ds-scrim: 228 14% 3%;
  --st-chart-cat-1: var(--n-lift); --st-chart-cat-2: var(--c-aqua); --st-chart-cat-3: var(--c-orange);
  --st-chart-cat-4: var(--c-blue); --st-chart-cat-5: var(--c-pink);
  --lp-primary-lifted: var(--n-lift);
  /* Card edge, the tools pages' card: 1px white/8 border, white/5 top highlight. */
  --n-rim: inset 0 0 0 1px hsl(var(--n-white) / 0.08), inset 0 1px 0 0 hsl(var(--n-white) / 0.05);
  --ds-line: var(--n-line);
  --ds-line-2: var(--n-line-strong);
  --t-h1: clamp(34px, 2.4vw + 20px, 54px);
  --t-h2: clamp(30px, 2.6vw, 40px); /* .lp-h2: 30 → 40 px */
  --lp-canvas: var(--n-ink-0); --lp-surface-1: var(--n-ink-1); --lp-surface-2: var(--n-ink-2); --lp-surface-3: var(--n-ink-3);
  --lp-line: var(--n-line); --lp-line-strong: var(--n-line-strong);
  --lp-text: var(--n-snow); --lp-text-2: var(--n-mist); --lp-text-3: var(--n-fog);

  position: relative;
  isolation: isolate;
  background: hsl(var(--n-ink-0));
}

/* ---------- the light: the home hero's brand glow ----------
   .lp-hero__glows [data-glow=brand]: a 1400 × 800 box centred at the top,
   320 px above the page, radial-gradient(closest-side) of the lifted violet
   (rgb 176 87 255) at 0.44 → 0.37 → 0.22 → 0.07 → 0; phones 960 × 960 from
   −220 px. closest-side fades to nothing inside the box, so no edge shows. */
:root .pseo::before {
  --glow-a: 0.44;
  content: ""; position: absolute; z-index: -1; left: 50%; top: -320px; width: 1400px; height: 800px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, hsl(var(--n-lift) / var(--glow-a)), hsl(var(--n-lift) / calc(var(--glow-a) * 0.84)) 25%, hsl(var(--n-lift) / calc(var(--glow-a) * 0.5)) 50%, hsl(var(--n-lift) / calc(var(--glow-a) * 0.16)) 75%, hsl(var(--n-lift) / 0));
}
@media (max-width: 767px) { :root .pseo::before { top: -220px; width: 960px; height: 960px; } }
/* A fainter second light behind the map, the same falloff. */
:root .pseo .pa-section:has(.ds-geo) { position: relative; isolation: isolate; }
:root .pseo .pa-section:has(.ds-geo)::before {
  content: ""; position: absolute; z-index: -1; left: 40%; top: 50%; width: 1100px; height: 760px; transform: translate(-50%, -45%); pointer-events: none;
  background: radial-gradient(closest-side, hsl(var(--n-lift) / 0.14), hsl(var(--n-lift) / 0.07) 50%, hsl(var(--n-lift) / 0));
}

/* ---------- type: big white headings, figures in lifted violet ---------- */
:root :where(.pseo) h2 { font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; } /* .lp-h2 */
:root .ds-hero h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
:root .ds-lead { color: hsl(var(--n-mist)); }
:root .pseo :is(.pa-herofigs dd, .pa-herostats dd, .pa-figure dd, .ds-answer b, .ds-rankstat__fig, .ds-chart__fig b, .ds-sw__fig b, .ds-donut__center b, .ds-stat dd:first-of-type) {
  color: hsl(var(--n-lilac));
}
:root .pseo .pa-herofigs > div:last-child dd { color: hsl(var(--n-snow)); }
:root .pseo .pa-finding { color: hsl(var(--n-snow)); }
:root .pseo ::selection { background: hsl(var(--n-brand)); color: hsl(var(--n-white)); }

/* ---------- cards: the tools pages' card ----------
   #121316, radius 16, 1px white/8 border, white/5 top highlight; a linked
   card answers the pointer with a violet border (hover:border-tone/45). */
:root .pseo :is(.ds-sheet, .ds-chart, .ds-hbars, .ds-table-wrap, .ds-stat, .ds-geo__side, .ds-bubbles__list,
  .ds-multiple, .ds-runs, .ds-cite, .ds-neighbors, .ds-facts, .ds-leaders, .ds-sw__panel, .pa-figures, .pa-show__panel,
  .rk-board, .rk-analysis__text, .rk-fig, .rk-figure > :is(.ds-units, .ds-donut), .rk-formats__strip, .s01-platforms,
  .s02-compare, .s02-matrix, .pa-card, .ds-flow__total, .pseo-block.st-card, .ds-empty) {
  box-shadow: var(--n-rim);
}
:root .pseo .ds-ranked li { box-shadow: var(--n-rim); }
:root .pseo :is(.ds-ranked li:not(.ds-ranked__hi), .ds-multiple:not(.ds-multiple--lit), .pa-card, .ds-flow__rows li:not(.ds-flow__rest)):hover {
  background: hsl(var(--n-ink-1)); box-shadow: inset 0 0 0 1px hsl(var(--n-lift) / 0.45), inset 0 1px 0 0 hsl(var(--n-white) / 0.05);
}
:root .pseo :is(.ds-geo__list li, .ds-neighbors li:not(.ds-neighbors__hi)):hover { background: hsl(var(--n-white) / 0.04); }
:root .pseo .ds-ranked li.ds-ranked__hi { box-shadow: 0 0 0 1px hsl(var(--n-lilac) / 0.35), 0 12px 40px -12px hsl(var(--n-glow) / 0.7); }
/* Pills (switch tabs, chips, menus): the tools pages' round buttons, border
   white/10 on white/3, gray-300 text. */
:root .pseo :is(.ds-sw__tab, .ds-chip, .ds-tabs, .ds-menu summary) { background: hsl(var(--n-white) / 0.03); box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.1); }
:root .pseo :is(.ds-sw__tab, a.ds-chip, .ds-menu summary):hover { background: hsl(var(--n-white) / 0.06); color: hsl(var(--n-white)); }
:root .pseo .ds-anchors { background: hsl(var(--n-ink-1) / 0.94); box-shadow: 0 1px 0 hsl(var(--n-ink-4)); }
:root .ds-band { background: hsl(var(--n-ink-1)); box-shadow: inset 0 1px 0 hsl(var(--n-ink-4)), inset 0 -1px 0 hsl(var(--n-ink-4)); }

/* Brand fields (buttons, the lit row, chips and tabs that are on) use the
   deep #8800FF with white ink, not the lifted data violet. */
:root .pseo :is(.ds-ranked__hi, .ds-sw__tabs, .ds-chip--on, .rk-strip__dot.is-first, .rk-formats__play, .ds-bubble[data-tone="0"], .ds-anchors__links) {
  --v-500: var(--n-brand);
}
:root .pseo .ds-ranked__hi .ds-ranked__bar { background: hsl(var(--n-white) / 0.22); }
:root .pseo .ds-anchors__links a[aria-current] { color: hsl(var(--n-lilac)); }
:root .pseo .ds-anchors__links a[aria-current]::after { background: hsl(var(--n-lift)); box-shadow: 0 0 12px hsl(var(--n-glow)); }
/* Buttons: the landing's .lp-btn (radius 10, 48 px, 600 15 px); primary
   #8800FF with a white/18 top highlight and a violet drop; ghost a 1px
   line-strong ring that fills with surface-2 on hover. */
:root .pseo :is(.ds-btn, .pseo-btn) { border-radius: 10px; padding: 0 22px; }
:root .pseo :is(.ds-btn--primary, .pseo-btn) { box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.18); } /* no glow under buttons (user review, 2026-10-20) */
:root .pseo .ds-btn--ghost { color: hsl(var(--n-snow)); background: transparent; box-shadow: inset 0 0 0 1px hsl(var(--n-line-strong)); }
:root .pseo .ds-btn--ghost:hover { background: hsl(var(--n-ink-2)); }
:root .pseo .ds-btn--invert { color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.22), 0 14px 36px -12px hsl(var(--n-brand) / 0.7); }
:root .pseo .ds-btn--invert:hover { background: hsl(var(--n-brand)); filter: brightness(1.08); }
:root .pseo .ds-stamp__dot { box-shadow: 0 0 10px hsl(var(--n-good)); }

/* ---------- monogram tiles ---------- */
:root .pseo .ds-icon[data-tone="1"] { background: hsl(var(--v-150)); color: hsl(var(--n-lilac)); }
:root .pseo .ds-icon[data-tone="2"] { background: hsl(var(--c-aqua) / 0.16); color: hsl(160 64% 62%); }
:root .pseo .ds-icon[data-tone="3"] { background: hsl(var(--c-orange) / 0.16); color: hsl(14 92% 72%); }
:root .pseo .ds-icon[data-tone="4"] { background: hsl(var(--c-blue) / 0.16); color: hsl(213 77% 72%); }
:root .pseo .ds-icon[data-tone="5"] { background: hsl(var(--c-pink) / 0.18); color: hsl(338 70% 76%); }
/* Logos keep their white tile: most are drawn for white. */
:root .pseo .ds-logo-tile { background: hsl(var(--n-white)); }
:root .pseo .ds-icon:has(> i)::after { box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.12); }
:root .pseo .ds-icon--flag { box-shadow: 0 0 0 1px hsl(var(--n-white) / 0.10); }

/* ---------- data marks: luminous violet ---------- */
:root .pseo :is(.ds-bar, .ds-hbar__track, .ds-ranked__bar, .ds-sw__bar, .ds-geo__bar, .rk-meter, .s01-platbars__track) { background: hsl(var(--n-ink-3)); }
:root .pseo :is(.ds-bar, .ds-hbar__track, .ds-ranked__bar, .ds-sw__bar, .ds-geo__bar, .s01-platbars__track) > i,
:root .pseo .ds-ranked li:not(.ds-ranked__hi) .ds-ranked__bar i {
  background: linear-gradient(to right, hsl(var(--v-400)), hsl(var(--n-lift)));
  box-shadow: 0 0 12px -2px hsl(var(--n-glow) / 0.8);
}
:root .pseo .ds-ranked__hi .ds-ranked__bar i { background: hsl(var(--n-white)); box-shadow: none; }
/* Columns brighten toward the value; the peak burns hottest. */
:root .pseo .ds-col__bar { background: linear-gradient(to top, hsl(var(--v-300)), hsl(var(--v-400))); box-shadow: inset 0 1px 0 hsl(var(--n-lilac) / 0.6); }
:root .pseo .ds-col--peak .ds-col__bar { background: linear-gradient(to top, hsl(var(--v-350)), hsl(var(--n-lilac))); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.8), 0 0 36px -6px hsl(var(--n-glow) / 0.9); }
:root .pseo .ds-col--peak .ds-col__bar b { color: hsl(var(--n-white)); }
:root .pseo .ds-grid span { border-top-color: hsl(var(--n-ink-4) / 0.8); }
:root .pseo .ds-minicol { background: hsl(var(--v-350)); }
:root .pseo .ds-minicols .ds-minicol--hi { background: hsl(var(--n-lilac)); }
:root .pseo .ch-bar { fill: hsl(var(--v-350)); }
:root .pseo .ch-bar:last-of-type { fill: hsl(var(--n-lilac)); }
:root .pseo .ds-run__track i { background: hsl(var(--v-400)); }
:root .pseo .ds-run--hi .ds-run__track i { background: hsl(var(--n-lilac)); box-shadow: 0 0 14px -2px hsl(var(--n-glow)); }
:root .pseo .ta-ladder__bar { background: linear-gradient(to top, hsl(var(--v-300)), hsl(var(--v-400))); }
:root .pseo .ta-ladder__cols li:first-child .ta-ladder__bar { background: linear-gradient(to top, hsl(var(--v-350)), hsl(var(--n-lilac))); }
:root .pseo .ds-spark__fill { fill: hsl(var(--n-lift) / 0.16); }
:root .pseo .ds-spark__line, :root .pseo .ds-area__line { filter: drop-shadow(0 0 6px hsl(var(--n-glow) / 0.8)); }
:root .pseo .ds-area__stop-top { stop-color: hsl(var(--n-lift)); stop-opacity: 0.28; }
:root .pseo .ds-area__stop-bottom { stop-color: hsl(var(--n-lift)); stop-opacity: 0; }
:root .pseo .ds-flow__bands path { fill: hsl(var(--v-300) / 0.7); }
:root .pseo .ds-flow__bands path:nth-child(2n) { fill: hsl(var(--v-400) / 0.6); }
:root .pseo .ds-flow__bands path.ds-flow__band-rest { fill: hsl(var(--n-ink-4)); }
:root .pseo [data-tone="5"] { --tone: 262 30% 58%; }
:root .pseo [data-tone="6"] { --tone: var(--n-ink-5); }
:root .pseo .ds-donut__track { stroke: hsl(var(--n-ink-3)); }
:root .pseo .ds-donut__arc { filter: drop-shadow(0 0 6px hsl(var(--tone) / 0.55)); }
:root .pseo .ds-split__bar i { box-shadow: 0 0 16px -4px hsl(var(--tone) / 0.8); }
:root .pseo .rk-dots > span:not(.is-multi) i, :root .pseo .rk-dots > span:nth-child(2n):not(.is-multi) i { background: hsl(var(--v-250)); }

/* Bubbles: dark violet glass, the brightest for the biggest part. */
:root .pseo .ds-bubble { box-shadow: inset 0 0 0 1px hsl(var(--n-lilac) / 0.28), inset 0 18px 40px -20px hsl(var(--n-white) / 0.22); }
:root .pseo .ds-bubble[data-tone="0"] { --b: var(--n-brand); color: hsl(var(--n-white)); box-shadow: inset 0 0 0 1px hsl(var(--n-lilac) / 0.6), 0 0 60px -6px hsl(var(--n-glow) / 0.85); }
:root .pseo .ds-bubble[data-tone="1"], :root .pseo .ds-bubbles__list [data-tone="1"] { --b: var(--v-300); }
:root .pseo .ds-bubble[data-tone="2"], :root .pseo .ds-bubbles__list [data-tone="2"] { --b: var(--v-250); }
:root .pseo .ds-bubble[data-tone="3"], :root .pseo .ds-bubbles__list [data-tone="3"] { --b: var(--v-200); }
:root .pseo .ds-bubble[data-tone="4"], :root .pseo .ds-bubbles__list [data-tone="4"] { --b: var(--v-150); }
:root .pseo .ds-bubble[data-tone="5"], :root .pseo .ds-bubbles__list [data-tone="5"] { --b: 270 50% 22%; }
:root .pseo .ds-bubbles .ds-bubble:not([data-tone="0"]) { color: hsl(var(--v-700)); }
:root .pseo .ds-bubbles__list [data-tone="0"] { --b: var(--n-lift); }
:root .pseo .ds-bubbles__list i { box-shadow: inset 0 0 0 1px hsl(var(--n-lilac) / 0.5); }

/* ---------- map: dim land, glowing countries ---------- */
:root .pseo .ds-geo__map path { fill: hsl(var(--n-ink-3)); stroke: hsl(var(--n-ink-0)); }
:root .pseo .ds-geo__key-land { background: hsl(var(--n-ink-3)); box-shadow: inset 0 0 0 1px hsl(var(--n-ink-5)); }
:root .pseo :is(.ds-geo__map path, .ds-geo *)[data-q="1"] { fill: hsl(270 70% 30%); background: hsl(270 70% 30%); }
:root .pseo :is(.ds-geo__map path, .ds-geo *)[data-q="2"] { fill: hsl(271 85% 40%); background: hsl(271 85% 40%); }
:root .pseo :is(.ds-geo__map path, .ds-geo *)[data-q="3"] { fill: hsl(272 100% 52%); background: hsl(272 100% 52%); }
:root .pseo :is(.ds-geo__map path, .ds-geo *)[data-q="4"] { fill: hsl(var(--n-lift)); background: hsl(var(--n-lift)); }
:root .pseo :is(.ds-geo__map path, .ds-geo *)[data-q="5"] { fill: hsl(var(--v-650)); background: hsl(var(--v-650)); }
:root .pseo .ds-geo__map path[data-q]:hover { fill: hsl(var(--n-white)); }
:root .pseo .ds-geo__map svg { filter: drop-shadow(0 0 18px hsl(var(--n-glow) / 0.35)); }
:root .pseo .ds-geo__pin circle { fill: hsl(var(--n-ink-0) / 0.92); stroke: hsl(var(--n-lilac)); stroke-width: 1.6; }
:root .pseo .ds-geo__pin line { stroke: hsl(var(--n-lilac)); }
:root .pseo .ds-geo__pin .ds-geo__anchor { fill: hsl(var(--n-lilac)); }
:root .pseo .ds-geo__key-pin { background: hsl(var(--n-ink-0)); box-shadow: inset 0 0 0 1.5px hsl(var(--n-lilac)); }
:root .pseo .ds-geo__num { color: hsl(var(--n-snow)); }
:root .pseo .ds-geo:has(.ds-geo__list li:hover) .ds-geo__pin circle { fill: hsl(var(--n-ink-0) / 0.92); }
:root .pseo :is(.ds-geo__pin:hover, .ds-geo:has(.ds-geo__list li:nth-child(1):hover) .ds-geo__pin:nth-of-type(1), .ds-geo:has(.ds-geo__list li:nth-child(2):hover) .ds-geo__pin:nth-of-type(2), .ds-geo:has(.ds-geo__list li:nth-child(3):hover) .ds-geo__pin:nth-of-type(3), .ds-geo:has(.ds-geo__list li:nth-child(4):hover) .ds-geo__pin:nth-of-type(4), .ds-geo:has(.ds-geo__list li:nth-child(5):hover) .ds-geo__pin:nth-of-type(5)) circle { fill: hsl(var(--n-brand)); }

/* ---------- heat tables: bright cells take dark ink ---------- */
:root .pseo .pa-matrix td[data-q="4"], :root .pseo .pa-matrix td[data-q="5"],
:root .pseo .s02-matrix td[data-q="4"], :root .pseo .s02-matrix td[data-q="5"],
:root .pseo .s02-matrix__legend b[data-q="4"], :root .pseo .s02-matrix__legend b[data-q="5"] { color: hsl(var(--n-ink-0)); }

/* ---------- hero stages ---------- */
:root .pseo .rk-hero::before {
  background:
    radial-gradient(70% 90% at 35% 50%, hsl(var(--n-glow) / 0.55), hsl(var(--n-glow-cool) / 0.22) 60%, hsl(var(--n-glow) / 0.04) 100%),
    hsl(var(--v-100));
  /* the stage radiates into the page instead of ending at its outline */
  /* no rim: a lit hairline ran on along the top to the viewport edge */
  box-shadow: 0 0 120px -10px hsl(var(--n-glow) / 0.45);
}
:root .pseo .ds-mosaic { background: radial-gradient(80% 80% at 50% 0%, hsl(var(--n-glow) / 0.35), hsl(var(--v-100)) 70%); box-shadow: var(--n-rim); }

/* ---------- ad frames: Facebook's and Instagram's own dark mode ---------- */
/* User, 2026-10-19: the white posts were the one light thing left on the
   page. The frames take the apps' real dark-mode values (Facebook #242526
   card, #E4E6EB text, #B0B3B8 meta, #3A3B3C fields; Instagram black). No
   violet light under them (user review, 2026-10-20): a hairline rim and a
   short dark shadow lift them off the page. */
:root {
  --n-fb-card: 220 2% 14.5%;   /* #242526 */
  --n-fb-field: 210 1% 23%;    /* #3A3B3C */
  --n-fb-sunk: 200 4% 9.8%;    /* #18191A, behind a loading picture */
  --n-fb-text: 225 13% 91%;    /* #E4E6EB */
  --n-fb-meta: 216 4% 71%;     /* #B0B3B8: 7.6:1 on the card */
  --n-ig-card: 0 0% 0%;
  --n-ig-text: 0 0% 96%;
}
/* Every white chip on a picture keeps dark ink (rank, format, top-ads thumbs). */
:root .pseo :is(.ds-creative__rank, .ds-creative__format, .ta-thumb b, .ta-mix__cover b, .ta-mix__cover em) { color: hsl(var(--n-paper-ink)); }
:root .pseo .ta-phone {
  background: hsl(var(--n-bezel));
  box-shadow: 0 0 0 1px hsl(var(--n-white) / 0.16), 0 40px 100px -30px hsl(var(--n-glow) / 0.8);
}
:root .pseo .ds-creative__cover { box-shadow: 0 0 0 1px hsl(var(--n-white) / 0.08); }
:root .pseo .ds-creative__bar { background: hsl(var(--n-lift)); box-shadow: 0 0 10px hsl(var(--n-glow)); }
/* Floating stamps and open menus: rim + violet glow (dark shadows vanish on black). */
/* Hero stamps only: a card's stamp sits plain on the page under its post. */
:root .pseo .rk-hero .rk-stamp, :root .pseo .rk-hero.rk-hero--wide .rk-stamp {
  box-shadow: 0 0 0 1px hsl(var(--n-ink-5)), 0 18px 48px -16px hsl(var(--n-glow) / 0.6);
}
:root .pseo .ds-menu[open] .ds-menu__panel {
  background: hsl(var(--n-ink-2));
  box-shadow: 0 0 0 1px hsl(var(--n-ink-5)), 0 24px 60px -12px hsl(0 0% 0% / 0.8), 0 0 40px -10px hsl(var(--n-glow) / 0.4);
}

/* ---------- switch, cut line ---------- */
:root .pseo .ds-sw__panel { background: linear-gradient(to bottom, hsl(var(--v-50)), hsl(var(--n-ink-1)) 160px); }
:root .pseo .ds-sw__tabs .ds-sw__tab { --v-50: 268 45% 14%; }
:root .pseo .ds-cut { background: hsl(var(--v-100)); box-shadow: inset 0 0 0 1px hsl(var(--n-lift) / 0.25); }

/* ---------- "In this report": the tools pages' table of contents ----------
   Title 12 px 500 caps, tracking .18em, gray-500; items 14/20 px gray-400 with
   a 2px left rule, padding 6/12; the active item (v2.js) white on white/6
   with the rule in #8800FF. A plain list on phones too (mb-10). */
:root .pseo .pa-toc__title { display: block; margin-bottom: 12px; font: 500 12px/16px var(--ds-font-body); letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--n-gray-500)); }
:root .pseo .pa-toc ul { display: flex; flex-direction: column; gap: 2px; }
:root .pseo .pa-toc a {
  display: block; padding: 6px 12px; border-radius: 0; border-left: 2px solid transparent; background: none; box-shadow: none;
  font-size: 14px; line-height: 20px; color: hsl(var(--n-gray-400));
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root .pseo .pa-toc a:hover { color: hsl(var(--n-white)); background: none; }
:root .pseo .pa-toc a[data-active] { color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.06); border-left-color: hsl(var(--n-brand)); }
@media (max-width: 1099px) { :root .pseo .pa-toc { margin-bottom: 40px; } }

/* ---------- FAQ: the home page's .lp-faq ----------
   Heading 360 px | list, 64 px apart; each item a top rule (--lp-line), the
   question 600 16.5 px/1.4 Inter on 20 px of air, the plus in text-3 turning
   45° in 150 ms; the answer 15 px/1.6 text-2, ≤ 680 px, 20 px under. */
@media (min-width: 960px) { :root .pseo .ds-faq { grid-template-columns: 360px minmax(0, 1fr); gap: 28px 64px; } }
:root .pseo .ds-faq__list { gap: 0; }
:root .pseo .ds-qa { border-radius: 0; background: none; box-shadow: none; border-top: 1px solid hsl(var(--n-line)); }
:root .pseo .ds-qa summary { gap: 20px; padding: 20px 0; font: 600 16.5px/1.4 var(--ds-font-body); color: hsl(var(--n-snow)); }
:root .pseo .ds-qa summary:hover { color: hsl(var(--n-white)); }
:root .pseo .ds-qa__icon { width: 16px; height: 16px; margin-top: 3px; stroke: hsl(var(--n-fog)); stroke-width: 1.6; transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1); }
:root .pseo .ds-qa p { padding: 0 0 20px; max-width: 680px; font-size: 15px; line-height: 1.6; color: hsl(var(--n-mist)); }
@media (prefers-reduced-motion: reduce) { :root .pseo .ds-qa__icon { transition: none; } }

/* ---------- Cite this data ----------
   The citation is the tools pages' callout (2px #8800FF left rule on white/3,
   20/24 px padding, gray-200 text); "Cite this" sits under it as the site's
   primary button with a copy glyph. */
:root .pseo .ds-cite { align-items: start; padding: 28px; }
:root .pseo .ds-cite__text h3 { font-size: 19px; line-height: 1.25; }
:root .pseo .ds-cite__quote { display: grid; justify-items: start; gap: 16px; padding: 0; background: none; box-shadow: none; }
:root .pseo .ds-cite blockquote { width: 100%; padding: 20px 24px; border-left: 2px solid hsl(var(--n-brand)); background: hsl(var(--n-white) / 0.03); }
:root .pseo .ds-cite blockquote p { font-size: 16px; line-height: 1.75; color: hsl(var(--n-gray-200)); }
:root .pseo .ds-cite__btn {
  height: 44px; padding: 0 18px 0 16px; border-radius: 10px; font: 600 15px/1 var(--ds-font-body);
  color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.18), 0 10px 30px -12px hsl(var(--n-brand) / 0.6);
}
:root .pseo .ds-cite__btn:hover { background: hsl(var(--n-brand-hover)); }
:root .pseo .ds-cite__btn::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .pseo .ds-cite__btn[data-state="done"] { color: hsl(var(--n-white)); background: hsl(158 64% 30%); }

/* ---------- related links: the tools pages' round buttons ---------- */
:root .pseo .ds-related li > a { background: hsl(var(--n-white) / 0.03); box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.1); }
:root .pseo .ds-related a { color: hsl(var(--n-gray-200)); }
:root .pseo .ds-related a:hover { background: hsl(var(--n-white) / 0.06); color: hsl(var(--n-white)); }
:root .pseo .ds-related__soon { background: none; box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.06); }

/* ---------- CTA band: the home page's final CTA (.lp-final) ----------
   #121316 lit from the top by a 560 × 260 violet light (.3) over a violet
   wash (.1 → 0 at 62%), a 1px violet/40 ring, a 2px violet rule fading at
   the top edge, radius 24, a violet glow under it; the button is the
   landing's large primary (56 px, radius 14). */
:root .pseo .ds-cta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px;
  color: hsl(var(--n-snow));
  background:
    radial-gradient(560px 260px at 50% -10%, hsl(var(--n-brand) / 0.3), transparent 70%),
    linear-gradient(180deg, hsl(var(--n-brand) / 0.1), transparent 62%),
    hsl(var(--n-ink-1));
  box-shadow: inset 0 0 0 1px hsl(var(--n-brand) / 0.4), inset 0 1px 0 hsl(var(--n-white) / 0.07), 0 30px 80px -40px hsl(var(--n-brand) / 0.55);
}
:root .pseo .ds-cta::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, hsl(var(--n-brand)), transparent); }
:root .pseo .ds-cta h2 { color: hsl(var(--n-snow)); }
:root .pseo .ds-cta__lead { color: hsl(var(--n-mist)); }
:root .pseo .ds-cta .ds-btn { min-height: 56px; padding-inline: 28px; border-radius: 14px; font-size: 17px; color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.22), 0 14px 36px -12px hsl(var(--n-brand) / 0.7); }
:root .pseo .ds-cta .ds-btn:hover { filter: brightness(1.08); }

/* ---------- glows fade out instead of stopping at a box edge ---------- */
/* Bar glows reach past their rounded track (overflow: clip keeps the ends round). */
:root .pseo :is(.ds-bar, .ds-hbar__track, .ds-ranked__bar, .ds-sw__bar, .ds-geo__bar, .s01-platbars__track, .ds-run__track) { overflow-clip-margin: 16px; }
/* SVG clips its own content by default: the ring and pin glows need room. */
:root .pseo :is(.ds-donut__ring svg, .ds-geo__map svg) { overflow: visible; }

/* Sheets nested in a sheet carry no second rim. */
:root .pseo :is(.ds-sw__panel, .ds-sheet, .pa-show__panel, .ds-band) :is(.ds-hbars, .ds-chart, .ds-table-wrap) { box-shadow: none; }

/* ---------- rollout fixes (kit asks from the lanes, plan/redesign3/kit-asks.md) ---------- */
/* Inside a band the kit sets sheets to the canvas, which on dark is deeper
   than the band itself: sheets read as holes. They take the inner tone and
   the card rim instead. */
:root .pseo .ds-band :is(.ds-chart, .ds-hbars, .ds-table-wrap, .ds-stat, .ds-geo__side, .ds-bubbles__list, .ds-multiple, .ds-runs, .ds-sheet, .ds-cite, .ds-neighbors, .ds-related__group),
:root .pseo .ds-band :is(.ds-ranked li, .ds-flow__rows li, .ds-flow__total) { background: hsl(var(--ds-s2)); box-shadow: var(--n-rim); }
:root .pseo .ds-band .ds-geo__map path { stroke: hsl(var(--n-ink-1)); }
/* Air between the sticky anchor bar and the first section (was 8 px). */
.ds-anchors + .ds-body > .ds-section:first-child { margin-top: 40px; }
@media (min-width: 768px) { .ds-anchors + .ds-body > .ds-section:first-child { margin-top: 56px; } }
/* ========== Page system (D-095, 2026-10-20) ==========
   One skeleton and twelve components for every page type
   (plan/redesign4/system/SYSTEM.md; partials templates/system.html, view
   models transport/ds_system.go, every one shown at /__pseo/gallery/system/).
   A page is on it when it sets Page.Head; the rules below touch only .ps-*
   classes, so pages on the hero skeleton are unchanged. Night glow tokens.
   Principles: the searcher's order; white marks what was searched for, all
   other data is violet; ads small, numbers as text. No in-page menu: each
   section opens with a hairline and its H2 across the full column. */

/* ---------- skeleton ---------- */
.ps-frame { width: calc(100% - 2 * var(--ds-gutter)); max-width: calc(80rem - 2 * var(--ds-gutter)); margin-inline: auto; }
.ps-head { padding-top: 104px; }
@media (min-width: 768px) { .ps-head { padding-top: 120px; } }
.ps-crumbs { margin: 0 0 18px; font-size: 14px; color: hsl(var(--n-mist)); }
.ps-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.ps-crumbs li { display: inline-flex; gap: 6px; min-width: 0; }
.ps-crumbs li + li::before { content: "›"; color: hsl(var(--n-fog)); }
.pseo .ps-crumbs a { color: hsl(var(--n-mist)); }
.ps-crumbs .pseo-text-link { color: hsl(var(--n-fog)); }
.ps-head h1 {
  max-width: 24ch; font-size: clamp(32px, 2.4vw + 18px, 52px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.ps-result-head { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 410px); justify-content: space-between; gap: 72px; align-items: end; }
.ps-result-head__copy { min-width: 0; }
.ps-result-head__copy h1 { max-width: 760px; }
.ps-result-head__summary { max-width: 410px; font-size: 18px; line-height: 1.55; color: hsl(var(--n-mist)); }
.ps-result-head__summary strong { font-weight: 600; color: hsl(var(--n-snow)); }
@media (max-width: 1020px) {
  .ps-result-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ps-result-head__summary { max-width: 680px; }
}
.ps-title { display: flex; align-items: center; gap: 18px; }
.ps-title h1 { max-width: none; min-width: 0; }
.ps-title > .ds-icon { width: 60px; height: 60px; border-radius: 14px; font-size: 26px; }
.ps-title > .ds-icon:has(> i) { background: hsl(var(--n-white)); }
.ps-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ps-tags :is(a, span) { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: 14.5px; line-height: 1.4; color: hsl(var(--n-mist)); box-shadow: inset 0 0 0 1px hsl(var(--n-line-strong)); }
.pseo .ps-tags a { color: hsl(var(--n-snow)); }
.pseo .ps-tags a:hover { text-decoration: none; box-shadow: inset 0 0 0 1px hsl(var(--n-lift)); }
.ps-tags b { font-weight: 600; color: hsl(var(--n-lilac)); }
.ps-answer { max-width: 62ch; margin-top: 16px; font-size: 18px; line-height: 1.55; color: hsl(var(--n-mist)); text-wrap: pretty; }
.ps-date { margin-top: 12px; font-size: 14px; color: hsl(var(--n-fog)); font-variant-numeric: tabular-nums; }
.ps-date time { color: hsl(var(--n-mist)); }
.ps-date a { color: hsl(var(--n-mist)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--n-line-strong)); }
.ps-date a:hover { color: hsl(var(--n-snow)); text-decoration-color: currentColor; }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.ps-actions .ds-btn { height: 48px; }
.pseo .ps-actions__cite { font-weight: 600; }
.ps-visual { margin-top: 44px; }
.ps-head--result .ps-visual { margin-top: 48px; }

.ps-sec { margin-top: 96px; padding-top: 36px; border-top: 1px solid hsl(var(--n-line)); }
.ps-visual + .ps-sec, .ps-head + .ps-sec { margin-top: 88px; }
.ps :is(.ps-sec, .ps-faq, .ps-band) h2 { font-size: clamp(26px, 2.1vw + 4px, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: hsl(var(--n-snow)); }
.ps-say { max-width: 64ch; margin: 12px 0 28px; font-size: 17px; line-height: 1.55; color: hsl(var(--n-mist)); }
.ps-details, .ps-limit { max-width: 72ch; margin-top: 18px; font-size: 14.5px; color: hsl(var(--n-mist)); }
.ps-limit { margin-top: 16px; }
.ps-panel { border-radius: 16px; padding: 24px; background: hsl(var(--n-ink-1)); box-shadow: var(--n-rim); }
.ps-panel--flush { padding: 6px 8px; }

/* Shared marks: a bar with its figure beside it (white for the subject), a country code. */
.ps-bar { display: block; height: 8px; border-radius: 999px; background: hsl(var(--n-white) / 0.06); }
.ps-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: hsl(var(--n-lift)); }
.ps-me .ps-bar i { background: hsl(var(--n-white)); }
.ps-cc { display: inline-block; min-width: 28px; padding: 5px 6px; border-radius: 5px; font: 600 11.5px/1 var(--ds-font-body); letter-spacing: 0.02em; text-align: center; text-decoration: none; color: hsl(var(--n-mist)); background: hsl(var(--n-ink-3)); }
.ps-cc + .ps-cc { margin-left: 4px; }
/* Country flags (psCode.Flag): emoji at text size, no chip. */
.ps-flag { display: inline-block; font-size: 20px; line-height: 1; text-decoration: none; cursor: default; }
.ps-flag + .ps-flag { margin-left: 6px; }
.ps-r { text-align: right; }

/* ---------- C1 key figures ---------- */
.ps-figs { display: flex; flex-wrap: wrap; gap: 22px 56px; margin: 0; }
.ps-figs div { display: flex; flex-direction: column; }
.ps-figs dd { margin: 0; font: 500 clamp(32px, 2.2vw + 12px, 46px)/1.05 var(--ds-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }
.ps-figs dt { margin-top: 6px; font-size: 14.5px; color: hsl(var(--n-mist)); }

/* ---------- C2 ad card (D-101): one card for every ad on every page ----------
   The cover in its own shape on a sheet, the rank on it, a play/pause button
   for our stored video; our figure with the "See ad details" pill, small
   lines, the page, the headline. The whole card is one link (a stretched
   <a>); the pill, the page name and the play button sit above it. Hover and
   keyboard focus do one thing: the card lifts a little and the pill lifts
   and fills (AdMakeAI's move); reduced motion keeps the fill, not the lift.
   Reduced size: at most 300 px wide on desktop (copyright, D-085). */
.ad-grid { display: grid; gap: 24px 20px; align-items: start; margin: 0; padding: 0; list-style: none; }
.ad-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ad-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 14px; }
@media (max-width: 1099px) { .ad-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859px) { .ad-grid--4, .ad-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

.ad-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 14px; cursor: pointer;
  background: hsl(var(--n-ink-1)); box-shadow: var(--n-rim); }
.ad-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pseo .ad-card__link:focus-visible { outline: none; }
.ad-card:has(.ad-card__link:focus-visible) { outline: 2px solid hsl(var(--n-lilac)); outline-offset: 3px; }

.ad-card__media { position: relative; overflow: hidden; border-radius: 9px; background: hsl(var(--n-fb-sunk)); }
.ad-card__media > img { display: block; width: 100%; height: auto; }
.ad-card__media > .ds-blank { aspect-ratio: 4 / 5; }
.ad-card__video { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: hsl(var(--n-bezel)); }
/* Once a clip has started the cover is the player: above the card link, so
   a click on it pauses or resumes instead of leaving. */
.ad-card[data-state] .ad-card__video { z-index: 2; cursor: pointer; }
.ad-card__rank { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 5px 8px; border-radius: 7px; pointer-events: none;
  font: 600 12.5px/1 var(--ds-font-display); font-variant-numeric: tabular-nums; color: hsl(var(--n-white)); background: hsl(var(--n-ink-0) / 0.72); }
.ad-card__rank[data-top] { padding: 6px 9px; font-size: 15px; background: hsl(var(--n-brand)); }
.ad-card[data-state="playing"] .ad-card__rank { opacity: 0; }
.ad-card__play, .ad-card__format { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; border-radius: 50%; color: hsl(var(--n-white)); background: hsl(0 0% 0% / 0.55); }
.ad-card__play { z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; cursor: pointer; }
.ad-card__format { z-index: 2; width: 26px; height: 26px; pointer-events: none; }
.ad-card__play svg, .ad-card__format svg { width: 14px; height: 14px; fill: currentColor; }
.ad-card__format svg { width: 11px; height: 11px; margin-left: 1px; }
.ad-card__i-play { margin-left: 2px; }
.ad-card__i-pause, .ad-card[data-state="playing"] .ad-card__i-play { display: none; }
.ad-card[data-state="playing"] .ad-card__i-pause { display: block; }
.ad-card__play:hover { background: hsl(var(--n-brand)); }
.ad-card__play:focus-visible { outline: 2px solid hsl(var(--n-white)); outline-offset: 2px; }

.ad-card__meta { display: flex; flex-direction: column; min-width: 0; padding: 12px 6px 6px; }
.ad-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ad-card__fig { margin: 0; font-size: 13px; line-height: 1.2; color: hsl(var(--n-mist)); }
.ad-card__fig b { font: 600 20px/1 var(--ds-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }
.pseo .ad-card__pill { position: relative; z-index: 2; padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; color: hsl(var(--n-lilac)); background: hsl(var(--n-brand) / 0.2); }
.ad-card__bar { display: block; height: 4px; margin-top: 10px; border-radius: 999px; overflow: clip; background: hsl(var(--n-white) / 0.08); }
.ad-card__bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: hsl(var(--n-lift)); }
.ad-card__line { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: hsl(var(--n-fog)); overflow-wrap: anywhere; }
.ad-card__who { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 12px 0 0; font-size: 13.5px; line-height: 1.3; color: hsl(var(--n-snow)); }
.ad-card__who .ds-icon { flex: none; width: 20px; height: 20px; font-size: 10px; border-radius: 50%; }
.ad-card__who > :is(a, span) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseo .ad-card__who > a { position: relative; z-index: 2; color: hsl(var(--n-snow)); }
.pseo .ad-card__who > a:hover { color: hsl(var(--n-lilac)); }
.ad-card__headline { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: hsl(var(--n-mist)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hover and focus: the pill fills (always), the card and the pill lift
   (motion allowed, pointer that hovers), together, once, 200 ms. */
.ad-card:hover, .ad-card:has(.ad-card__link:focus-visible) { box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.16); }
.pseo .ad-card:hover .ad-card__pill, .pseo .ad-card:has(.ad-card__link:focus-visible) .ad-card__pill { color: hsl(var(--n-white)); background: hsl(var(--n-brand)); }
@media (prefers-reduced-motion: no-preference) {
  .ad-card, .pseo .ad-card__pill { transition: transform 200ms var(--ds-ease), box-shadow 200ms var(--ds-ease), background-color 200ms var(--ds-ease), color 200ms var(--ds-ease); }
  .ad-card:hover, .ad-card:has(.ad-card__link:focus-visible) { transform: translateY(-2px); }
  .pseo .ad-card:hover .ad-card__pill, .pseo .ad-card:has(.ad-card__link:focus-visible) .ad-card__pill { transform: translateY(-3px); }
}
@media (hover: none) { .ad-card:hover { transform: none; } }
@media (max-width: 519px) {
  .ad-card { padding: 6px; border-radius: 12px; }
  .ad-card__meta { padding: 10px 4px 4px; }
  .ad-card__fig b { font-size: 18px; }
  .pseo .ad-card__pill { padding: 6px 9px; font-size: 12px; }
}


/* ---------- C3 result filter bar ---------- */
.ps-results-controls { display: grid; gap: 16px; }
.ps-query-row { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px; border-radius: 11px; overflow-x: auto; scrollbar-width: none; background: hsl(var(--n-ink-1)); }
.ps-query-row::-webkit-scrollbar { display: none; }
.ps-query-row :is(a, span) { flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 7px; font-size: 15px; font-weight: 550; white-space: nowrap; color: hsl(var(--n-mist)); }
.pseo .ps-query-row a { cursor: pointer; }
.pseo .ps-query-row a:hover { text-decoration: none; color: hsl(var(--n-snow)); background: hsl(var(--n-ink-2)); }
.pseo .ps-query-row a:active { color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.1); }
.ps-query-row span[aria-current] { font-weight: 650; color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.26); cursor: default; }
.ps-query-row span[aria-current]::before { content: "✓"; margin-right: 7px; font-size: 12px; }
.ps-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 62px; padding: 9px 11px; border-radius: 14px; background: hsl(var(--n-ink-1)); }
.ps-filterbar__count { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 15px; color: hsl(var(--n-mist)); }
.ps-filterbar__count svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ps-pick { position: relative; }
.ps-pick summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 15px; color: hsl(var(--n-fog)); background: hsl(var(--n-ink-2)); cursor: pointer; list-style: none; }
.ps-pick summary::-webkit-details-marker { display: none; }
.ps-pick summary b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 550; color: hsl(var(--n-snow)); }
.ps-pick summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.ps-pick[open] summary, .ps-pick summary:hover { color: hsl(var(--n-mist)); background: hsl(var(--n-ink-3)); }
.ps-pick summary:active { color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.12); }
.ps-pick ul {
  position: absolute; z-index: 5; top: 50px; left: 0; width: max-content; min-width: min(240px, calc(100vw - 2 * var(--ds-gutter)));
  max-width: min(360px, calc(100vw - 2 * var(--ds-gutter))); max-height: min(60vh, 480px); overflow-y: auto; overflow-x: hidden;
  margin: 0; padding: 8px; list-style: none; border-radius: 12px; background: hsl(var(--n-ink-2));
  box-shadow: 0 0 0 1px hsl(var(--n-ink-5)), 0 24px 60px -12px hsl(0 0% 0% / 0.8); overscroll-behavior: contain;
}
.ps-pick[data-ps-edge="end"] ul { right: 0; left: auto; }
.ps-pick li :is(a, span) { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; line-height: 1.35; overflow-wrap: anywhere; color: hsl(var(--n-mist)); }
.pseo .ps-pick li a { cursor: pointer; }
.pseo .ps-pick li a:hover { text-decoration: none; color: hsl(var(--n-snow)); background: hsl(var(--n-white) / 0.06); }
.pseo .ps-pick li a:active { color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.12); }
.ps-pick li span { justify-content: space-between; font-weight: 650; color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.06); box-shadow: inset 2px 0 0 hsl(var(--n-lilac)); cursor: default; }
.ps-pick li span::after { content: "✓"; margin-left: 16px; color: hsl(var(--n-lilac)); }
.ps-pick[data-ps-menu-js][open]:not([data-ps-menu-state]) ul { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.ps-pick[data-ps-menu-state="open"] ul { opacity: 1; transform: none; pointer-events: auto; }
.ps-pick[data-ps-menu-state="closing"] ul { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.ps-seg { display: flex; padding: 4px; border-radius: 8px; background: hsl(var(--n-ink-2)); }
.ps-seg :is(a, span) { display: grid; place-items: center; min-height: 44px; padding: 7px 13px; border-radius: 6px; font-size: 15px; font-weight: 550; color: hsl(var(--n-mist)); }
.pseo .ps-seg a { cursor: pointer; }
.pseo .ps-seg a:hover { text-decoration: none; color: hsl(var(--n-snow)); background: hsl(var(--n-white) / 0.06); }
.pseo .ps-seg a:active { color: hsl(var(--n-white)); background: hsl(var(--n-white) / 0.12); }
.ps-seg span[aria-current] { font-weight: 650; color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 0 0 1px hsl(var(--n-white) / 0.26); cursor: default; }
.ps-seg span[aria-current]::before { content: "✓"; margin-right: 6px; font-size: 12px; }
.pseo .ps-filterbar__action { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 8px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pseo .ps-filterbar__action:active { color: hsl(var(--n-white)); }
@media (prefers-reduced-motion: no-preference) {
  .ps-pick[data-ps-menu-js] ul { transition: opacity 120ms var(--ds-ease), transform 120ms var(--ds-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-pick[data-ps-menu-js] ul { transition: none; transform: none; }
}

/* ---------- whole-row links (user review, 2026-10-20) ----------
   A row that has a page is one real <a> stretched over the whole row (its
   ::after), so the row is the target; the chevron (system.html "ps-go")
   says it goes somewhere, hover lifts the row, keyboard focus rings it.
   Rows without a page stay plain: no chevron, no hover. */
:is(.ps-rank, .ps-geo, .ps-mix, .ps-menu) li { position: relative; }
:is(.ps-rank__who, .ps-geo__name, .ps-mix__name, .ps-card__name) > a::after, .ps-menu li > a::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.pseo :is(.ps-rank, .ps-geo, .ps-mix, .ps-menu, .ps-cards) a:focus-visible { outline: none; }
:is(.ps-rank, .ps-geo, .ps-mix, .ps-menu, .ps-cards) li:has(a:focus-visible) {
  outline: 2px solid hsl(var(--n-lilac)); outline-offset: -2px; border-radius: 10px;
}
.ps-go { flex: none; width: 16px; height: 16px; fill: none; stroke: hsl(var(--n-fog)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-rank__go, .ps-rank__go:empty { display: flex; justify-content: flex-end; }
.ps-menu li > a { margin-right: auto; }
.ps-mix__name .ps-go { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
@media (hover: hover) {
  :is(.ps-rank, .ps-geo, .ps-mix, .ps-menu, .ps-cards) li:has(a) { transition: background-color 160ms var(--ds-ease); }
  :is(.ps-rank, .ps-geo) li:has(a):hover, .ps-card:has(.ps-card__name a):hover { background: hsl(var(--n-lift) / 0.08); }
  :is(.ps-rank, .ps-geo) li:has(a):hover { border-radius: 10px; }
  :is(.ps-rank, .ps-geo, .ps-mix, .ps-menu, .ps-cards) li:has(a):hover .ps-go { stroke: hsl(var(--n-lilac)); transform: translateX(2px); }
  .pseo :is(.ps-mix, .ps-menu) li:has(a):hover a { color: hsl(var(--n-lilac)); }
  .pseo :is(.ps-rank, .ps-geo, .ps-cards) li:has(a):hover :is(.ps-rank__who, .ps-geo__name, .ps-card__name) > a { color: hsl(var(--n-white)); text-decoration: none; }
  .ps-go { transition: transform 160ms var(--ds-ease), stroke 160ms var(--ds-ease); }
}
@media (prefers-reduced-motion: reduce) { .ps-go { transition: none; } :is(.ps-rank, .ps-geo, .ps-mix, .ps-menu) li:has(a):hover .ps-go { transform: none; } }

/* ---------- C4 ranked list ---------- */
.ps-rank { margin: 0; padding: 0; list-style: none; }
.ps-rank li { display: grid; grid-template-columns: 30px 30px minmax(0, 1.15fr) minmax(0, 1fr) 92px auto; gap: 14px; align-items: center; padding: 12px 10px; border-bottom: 1px solid hsl(var(--n-line)); }
.ps-rank li:first-child { border-top: 1px solid hsl(var(--n-line)); }
.ps-rank--text li { grid-template-columns: 30px minmax(0, 1.15fr) minmax(0, 1fr) 92px auto; }
.ps-rank .ds-icon { width: 28px; height: 28px; border-radius: 7px; }
.ps-rank__n { font: 500 15px/1 var(--ds-font-display); text-align: right; color: hsl(var(--n-fog)); font-variant-numeric: tabular-nums; }
.ps-rank__who { display: grid; min-width: 0; }
.ps-rank__who > :is(a, span) { font-weight: 600; color: hsl(var(--n-snow)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rank__who small { font-size: 13px; color: hsl(var(--n-mist)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rank__v { font: 600 16px/1 var(--ds-font-display); text-align: right; font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }
.ps-rank li:is(.ps-me, :target) { border-radius: 10px; background: hsl(var(--n-white) / 0.045); }
.ps-rank li:target .ps-bar i { background: hsl(var(--n-white)); }
@media (max-width: 859px) {
  .ps-rank li { grid-template-columns: 24px 26px minmax(0, 1fr) 70px auto; gap: 10px; }
  .ps-rank--text li { grid-template-columns: 24px minmax(0, 1fr) 70px auto; }
  .ps-geo li { grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 0.6fr) 58px auto; gap: 8px; }
  .ps-rank .ps-bar { display: none; }
}

/* ---------- C13 entity cards (S-02 hero; G2 "alternatives" cards) ----------
   Two columns of cards on the panel colour, the searched site's card white-
   rimmed; a card with a page is one stretched link (whole-row links), the
   newest-ad cover sits at its right edge as a plain picture. */
.ps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ps-card { position: relative; display: flex; gap: 20px; padding: 20px 20px 18px; border-radius: 16px; background: hsl(var(--n-ink-1)); box-shadow: var(--n-rim); }
.ps-card.ps-me { background: hsl(var(--n-white) / 0.06); box-shadow: inset 0 0 0 1.5px hsl(var(--n-white) / 0.7); }
.ps-card__main { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.ps-card__who { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.ps-card__n { flex: none; width: 22px; font: 500 15px/1 var(--ds-font-display); color: hsl(var(--n-fog)); font-variant-numeric: tabular-nums; }
.ps-card__who .ds-icon { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.ps-card__name { display: grid; flex: 1; min-width: 0; }
.ps-card__name > :is(a, span) { font: 600 18px/1.25 var(--ds-font-display); color: hsl(var(--n-snow)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-card.ps-me .ps-card__name > :is(a, span) { color: hsl(var(--n-white)); }
.ps-card__name small { font-size: 13px; color: hsl(var(--n-fog)); }
.ps-card__figs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.ps-card__figs div { display: flex; align-items: baseline; gap: 6px; }
.ps-card__figs dd { margin: 0; font: 600 17px/1.2 var(--ds-font-display); font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }
.ps-card__figs div:first-child dd { font-size: 22px; letter-spacing: -0.02em; }
.ps-card__figs dt { font-size: 13.5px; color: hsl(var(--n-mist)); }
.ps-card__mk { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: hsl(var(--n-mist)); }
.ps-card__mk > span { margin-right: 4px; }
.ps-card__ad { flex: none; display: flex; flex-direction: column; gap: 6px; width: 128px; margin: 0; }
.ps-card__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: hsl(var(--n-fb-sunk)); box-shadow: 0 0 0 1px hsl(var(--n-white) / 0.10); }
.ps-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-card__img .ad-card__format { top: 6px; right: 6px; width: 22px; height: 22px; }
.ps-card__ad figcaption { font-size: 12.5px; color: hsl(var(--n-fog)); }
.ps-card .ps-go { align-self: center; }
@media (max-width: 1023px) { .ps-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 519px) {
  .ps-card { gap: 14px; padding: 16px 14px; }
  .ps-card__ad { width: 92px; }
  .ps-card__figs div:first-child dd { font-size: 19px; }
}

/* ---------- C6 country bars ---------- */
.ps-geo { display: grid; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.ps-geo--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ps-geo li { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 80px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid hsl(var(--n-line)); }
.ps-geo__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--n-snow)); }
.ps-geo b { font: 600 15px/1 var(--ds-font-display); text-align: right; font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }

/* ---------- C9 breakdowns: bars out of the N rows, the count beside each ---------- */
.ps-mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; align-items: start; }
.ps-mix__group { margin: 0; }
.ps-mix figcaption { padding-bottom: 10px; border-bottom: 1px solid hsl(var(--n-line-strong)); font: 600 16px/1.3 var(--ds-font-body); color: hsl(var(--n-snow)); }
.ps-mix ol { margin: 0; padding: 0; list-style: none; }
.ps-mix li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; padding: 12px 0 14px; border-bottom: 1px solid hsl(var(--n-line)); }
.ps-mix__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: hsl(var(--n-mist)); }
.pseo .ps-mix__name a { color: hsl(var(--n-snow)); }
.ps-mix b { font: 600 20px/1 var(--ds-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: hsl(var(--n-snow)); }
.ps-mix .ps-bar { grid-column: 1 / -1; }
.ps-mix:has(> :only-child) { grid-template-columns: minmax(0, 760px); }
.ps-mix:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A category's bar and dot in its own colour (categoryColor): the same
   colour it wears in the product; the searched row (ps-me) is white. */
.ps-mix li[style] .ps-bar i { background: var(--c); }
.ps-mix li[style] .ps-mix__name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; background: var(--c); }
.ps-mix li.ps-me .ps-mix__name { color: hsl(var(--n-white)); font-weight: 600; }
/* In a chart of coloured categories the rest is grey, not one more colour. */
.ps-mix ol:has(li[style]) li:not([style], .ps-me) .ps-bar i { background: hsl(var(--n-white) / 0.28); }

/* ---------- C10 link menu ---------- */
.ps-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; }
.ps .ps-menu h3 { margin: 0 0 8px; font: 600 17px/1.3 var(--ds-font-body); color: hsl(var(--n-snow)); }
.ps-menu h3 small { margin-left: 6px; font-size: 14px; font-weight: 400; color: hsl(var(--n-fog)); }
.ps-menu ul { margin: 0; padding: 0; list-style: none; }
.ps-menu li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid hsl(var(--n-line)); font-size: 15.5px; }
.pseo .ps-menu li a { color: hsl(var(--n-snow)); }
.ps-menu li span { white-space: nowrap; color: hsl(var(--n-fog)); font-variant-numeric: tabular-nums; }
.pseo .ps-menu li.ps-menu__more a { font-weight: 600; color: hsl(var(--n-lilac)); }

/* ---------- C11 cite box (user review 2026-10-20; Our World in Data "Cite this work") ----------
   Left: what it is for, after a quote mark. Right: the citation as a
   reference card with its two actions (pseo.js). */
.ps-cite { scroll-margin-top: 96px; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px 48px; align-items: start; }
.ps-cite__why { display: flex; gap: 16px; align-items: flex-start; }
.ps-cite__mark { flex: none; width: 34px; height: 34px; fill: hsl(var(--n-lift)); }
.ps-cite__why p { max-width: 36ch; font-size: 17px; line-height: 1.55; color: hsl(var(--n-snow)); }
.ps-cite__card { margin: 0; padding: 22px 24px 24px; border-radius: 16px; background: hsl(var(--n-ink-1)); box-shadow: var(--n-rim), inset 3px 0 0 hsl(var(--n-lift)); }
.ps-cite__card figcaption { font-size: 13px; font-weight: 600; color: hsl(var(--n-fog)); }
.ps-cite blockquote { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: hsl(var(--n-snow)); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ps-cite__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ps-cite__actions:not(:has(button:not([hidden]))) { display: none; }
.ps-cite__btn { height: 42px; padding-inline: 18px; border-radius: 10px; font-size: 15px; }
:root .pseo .ps-cite__btn--ghost { color: hsl(var(--n-snow)); background: transparent; box-shadow: inset 0 0 0 1px hsl(var(--n-line-strong)); }
:root .pseo .ps-cite__btn--ghost:hover { box-shadow: inset 0 0 0 1px hsl(var(--n-lilac)); }
.ps-cite__btn[data-state="done"] { pointer-events: none; }
@media (max-width: 859px) { .ps-cite { grid-template-columns: minmax(0, 1fr); } }

/* ---------- C12 sign-up band: the home page's final CTA (spytrend.com) ----------
   A card lit from the top inside (a violet light and wash, a 1px violet ring,
   a bright rule fading at the top edge), no glow under it; the headline and
   lead left, the landing's large button (56 px, radius 14, arrow) right
   with "free sign-up" under it; a rule, then three checks in the home
   page's green. Phones stack it and the button goes full width. */
.ps-band {
  position: relative; overflow: hidden; isolation: isolate; margin-top: 96px; padding: 48px 56px 36px; border-radius: 24px;
  background:
    radial-gradient(640px 280px at 30% -12%, hsl(var(--n-brand) / 0.32), transparent 70%),
    linear-gradient(180deg, hsl(var(--n-brand) / 0.12), transparent 62%),
    hsl(var(--n-ink-1));
  box-shadow: inset 0 0 0 1px hsl(var(--n-brand) / 0.45), inset 0 1px 0 hsl(var(--n-white) / 0.07);
}
.ps-band::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, hsl(var(--n-lift)), transparent); }
.ps-band__main { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ps .ps-band h2 { font-size: clamp(28px, 2vw + 8px, 38px); letter-spacing: -0.03em; line-height: 1.1; color: hsl(var(--n-white)); }
.ps-band__text p { max-width: 54ch; margin-top: 12px; font-size: 17px; line-height: 1.55; color: hsl(var(--n-mist)); }
.ps-band__act { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
:root .pseo .ps-band__btn {
  height: auto;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding-inline: 30px; border-radius: 14px; font-size: 17px; font-weight: 600;
  color: hsl(var(--n-white)); background: hsl(var(--n-brand)); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.22);
}
:root .pseo .ps-band__btn:hover { background: hsl(var(--n-brand-hover)); }
.ps-band__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .ps-band__btn svg { transition: transform 160ms var(--ds-ease); } .ps-band__btn:hover svg { transform: translateX(3px); } }
.ps-band__note { font-size: 14px; color: hsl(var(--n-mist)); }
.ps-band__gets { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid hsl(var(--n-white) / 0.08); }
.ps-band__gets li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: hsl(var(--n-mist)); }
.ps-band__gets li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: -3px; border-left: 2px solid hsl(var(--n-good)); border-bottom: 2px solid hsl(var(--n-good)); transform: rotate(-45deg); }

/* ---------- shared page close (D-103, FAQ layout restored by D-106) ----------
   The FAQ is one full-width block: its heading sits above plain ruled rows.
   Related links form one compact directory band. Attribution is a quiet final
   editorial line. Each region is optional, so an empty region leaves no gap. */
.ps-close { margin-top: 96px; }
.ps-faq { scroll-margin-top: 96px; }
.ps .ps-faq h2 { margin-bottom: 20px; }
:root .pseo .ps-faq .ds-qa { overflow: hidden; }
:root .pseo .ps-faq .ds-qa:last-child { border-bottom: 1px solid hsl(var(--n-line)); }
:root .pseo .ps-faq .ds-qa summary {
  justify-content: space-between; min-height: 64px; padding: 20px 0;
  font: 600 17px/1.4 var(--ds-font-body); color: hsl(var(--n-snow)); cursor: pointer;
}
:root .pseo .ps-faq .ds-qa summary:active { color: hsl(var(--n-lilac)); }
:root .pseo .ps-faq .ds-qa__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ds-qa__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms var(--ds-ease); }
.ds-qa[open] > .ds-qa__answer { grid-template-rows: 1fr; }
:root .pseo .ps-faq .ds-qa__answer > p {
  min-height: 0; overflow: hidden; max-width: 70ch; padding: 0 44px 20px 0;
  font-size: 16px; line-height: 1.6; color: hsl(var(--n-mist)); overflow-wrap: anywhere;
}

.ps-related { margin-top: 56px; padding: 32px; border-radius: 18px; background: hsl(var(--n-ink-1)); box-shadow: inset 0 1px 0 hsl(var(--n-white) / 0.06); }
.ps .ps-related > h2 { margin: 0 0 28px; font: 600 clamp(24px, 1.4vw + 12px, 30px)/1.15 var(--ds-font-display); letter-spacing: -0.025em; color: hsl(var(--n-snow)); }
.ps-related__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px 40px; }
.ps-related__groups:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.ps-related__groups:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-related__group { min-width: 0; }
.ps .ps-related__group h3 { margin: 0 0 10px; font: 600 14px/1.4 var(--ds-font-body); color: hsl(var(--n-fog)); }
.ps-related__group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ps-related__group li { min-width: 0; }
.pseo .ps-related__group a {
  display: flex; align-items: center; min-height: 44px; width: calc(100% + 10px); padding: 9px 10px; margin-left: -10px;
  border-radius: 9px; font-size: 15px; line-height: 1.45; color: hsl(var(--n-snow)); overflow-wrap: anywhere; cursor: pointer;
}
.pseo .ps-related__group a:hover { text-decoration: none; color: hsl(var(--n-lilac)); background: hsl(var(--n-lift) / 0.08); }
.pseo .ps-related__group a:active { background: hsl(var(--n-lift) / 0.14); }
.pseo .ps-related__group a[aria-current="page"] { color: hsl(var(--n-white)); background: hsl(var(--n-brand) / 0.2); box-shadow: inset 2px 0 0 hsl(var(--n-brand)); }

.ps-attribution { max-width: 980px; margin-top: 24px; font-size: 13px; line-height: 1.6; color: hsl(var(--n-fog)); overflow-wrap: anywhere; }
.pseo .ps-attribution a { color: hsl(var(--n-mist)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pseo .ps-attribution a:hover { color: hsl(var(--n-snow)); }

@media (prefers-reduced-motion: reduce) {
  .ds-qa__answer, :root .pseo .ps-faq .ds-qa__icon { transition: none; }
}

/* ---------- phones ---------- */
@media (max-width: 859px) {
  .ps-geo--two, .ps-mix, .ps-mix:has(> *), .ps-menu { grid-template-columns: minmax(0, 1fr); }
  .ps-sec { margin-top: 72px; padding-top: 28px; }
  .ps-close, .ps-band { margin-top: 72px; }
  .ps-related { margin-top: 48px; padding: 28px 24px; }
  .ps-band { padding: 32px 24px 26px; }
  .ps-band__main { flex-direction: column; align-items: stretch; gap: 24px; }
  :root .pseo .ps-band__btn { justify-content: center; width: 100%; height: auto; padding-block: 12px; white-space: normal; text-align: center; }
}
@media (max-width: 519px) {
  .ps-head h1 { font-size: 32px; }
  :root .pseo .ps-faq .ds-qa__answer > p { padding-right: 24px; }
  .ps-related { margin-top: 42px; padding: 24px 20px; }
  .ps .ps-related > h2 { margin-bottom: 24px; }
  .ps-related__groups, .ps-related__groups:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ps-attribution { margin-top: 22px; }
  .ps-result-head { gap: 20px; }
  .ps-result-head__summary { font-size: 15px; }
  .ps-head--result .ps-visual { margin-top: 36px; }
  .ps-query-row { padding: 4px; }
  .ps-query-row :is(a, span) { min-height: 44px; padding: 0 11px; font-size: 13px; }
  .ps-filterbar { gap: 6px; min-height: 0; padding: 7px; border-radius: 10px; }
  .ps-filterbar__count { width: 100%; padding: 0 3px; font-size: 13px; }
  .ps-filterbar__count svg { width: 15px; height: 15px; }
  .ps-filterbar .ps-pick { flex: 1; min-width: 0; }
  .ps-filterbar .ps-pick summary { min-height: 44px; padding: 0 9px; font-size: 13px; }
  .ps-filterbar .ps-pick summary > span { display: none; }
  .ps-filterbar .ps-seg { order: 3; width: 100%; }
  .ps-filterbar .ps-seg :is(a, span) { flex: 1; min-height: 44px; padding: 7px 9px; text-align: center; font-size: 13px; }
  .ps-pick ul { position: fixed; top: var(--ps-menu-top, 0); right: var(--ds-gutter); left: var(--ds-gutter); width: auto; min-width: 0; max-width: none; max-height: min(60vh, calc(100dvh - var(--ps-menu-top, 0px) - 12px)); }
  .ps-title { align-items: flex-start; gap: 14px; }
  .ps-title > .ds-icon { width: 46px; height: 46px; font-size: 20px; }
  .ps-figs { gap: 18px 32px; }
}

/* Finding + evidence (D-104): one result leads; up to two ordered bar
   distributions support it. This is one composition, not equal card boxes. */
.fe__lead { max-width: 76ch; color: hsl(var(--n-mist)); }
.fe__layout { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); gap: 56px 88px; align-items: start; }
.fe__primary { position: relative; display: flex; min-height: 500px; flex-direction: column; padding: 4px 0; }
.fe__primary-link { position: absolute; inset: -14px; border-radius: 14px; cursor: pointer; }
.fe__primary-link:focus-visible { outline: 2px solid hsl(var(--n-lilac)); outline-offset: 3px; }
.fe__finding { max-width: 22ch; margin: 0; font: 600 clamp(27px, 2.6vw, 34px)/1.12 var(--ds-font-display); letter-spacing: -0.035em; color: hsl(var(--n-snow)); text-wrap: balance; }
.fe__sentence { max-width: 36ch; margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: hsl(var(--n-mist)); }
.fe__percent { margin: 62px 0 0; font: 600 clamp(68px, 7.5vw, 92px)/0.88 var(--ds-font-display); letter-spacing: -0.055em; color: hsl(var(--n-snow)); font-variant-numeric: tabular-nums; }
.fe__of { margin: 18px 0 0; font-size: 17px; font-weight: 600; color: hsl(var(--n-mist)); font-variant-numeric: tabular-nums; }
.fe__proportion { display: flex; gap: 2px; height: 10px; margin-top: 30px; }
.fe__proportion span, .fe__proportion i { display: block; min-width: 0; }
.fe__proportion span, .fe__proportion i { border-radius: 0 4px 4px 0; }
.fe__proportion span { background: hsl(var(--n-lift)); }
.fe__proportion i { flex: 1; background: hsl(var(--n-fog)); }
.fe__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; color: hsl(var(--n-mist)); font-size: 14px; }
.fe__legend div { display: flex; align-items: center; gap: 7px; }
.fe__legend dt { display: flex; align-items: center; gap: 7px; }
.fe__legend dd { margin: 0; font-weight: 600; color: hsl(var(--n-snow)); font-variant-numeric: tabular-nums; }
.fe__key { display: inline-block; width: 18px; height: 6px; border-radius: 0 3px 3px 0; }
.fe__key--main { background: hsl(var(--n-lift)); }
.fe__key--rest { background: hsl(var(--n-fog)); }
.fe__evidence { display: grid; gap: 58px; }
.fe__distribution { min-width: 0; margin: 0; }
.fe__distribution figcaption h3 { margin: 0; font: 600 20px/1.25 var(--ds-font-display); letter-spacing: -0.02em; color: hsl(var(--n-snow)); }
.fe__distribution figcaption p { max-width: 54ch; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: hsl(var(--n-mist)); }
.fe__distribution ol { display: grid; gap: 4px; margin: 26px 0 0; padding: 0; list-style: none; }
.fe__row { position: relative; display: grid; grid-template-columns: minmax(132px, 0.72fr) minmax(150px, 1.28fr) 52px; gap: 14px; align-items: center; min-height: 40px; }
.fe__label { min-width: 0; font-size: 15px; line-height: 1.35; color: hsl(var(--n-mist)); overflow-wrap: anywhere; }
.pseo .fe__label a { color: hsl(var(--n-snow)); }
.fe__label .ps-go { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.fe__track { height: 10px; background: hsl(var(--n-white) / 0.065); }
.fe__track i { display: block; width: 0; height: 100%; min-width: 0; border-radius: 0 4px 4px 0; background: var(--fe-color, #CB9DFB); }
.fe__row[data-tone="1"] .fe__track i { background: #CB9DFB; }
.fe__row[data-tone="2"] .fe__track i { background: #A878D1; }
.fe__row[data-tone="3"] .fe__track i { background: #855BA7; }
.fe__row[data-tone="4"] .fe__track i { background: #654481; }
.fe__row b { text-align: right; font: 600 15px/1 var(--ds-font-display); color: hsl(var(--n-snow)); font-variant-numeric: tabular-nums; }
.fe__row--link { min-height: 44px; cursor: pointer; }
.fe__row--link .fe__label > a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.fe__row--link:has(a:focus-visible) { outline: 2px solid hsl(var(--n-lilac)); outline-offset: 2px; border-radius: 8px; }
.pseo .fe__row--link a:focus-visible { outline: none; }
.fe__interpretation { max-width: 76ch; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid hsl(var(--n-line)); font-size: 16px; line-height: 1.55; color: hsl(var(--n-mist)); }
@media (hover: hover) {
  .fe__row--link { transition: background-color 160ms var(--ds-ease); }
  .fe__row--link:hover { border-radius: 8px; background: hsl(var(--n-lift) / 0.08); }
  .fe__row--link:hover .ps-go { stroke: hsl(var(--n-lilac)); transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .fe__row--link, .fe__row--link .ps-go { transition: none; } .fe__row--link:hover .ps-go { transform: none; } }
@media (max-width: 859px) {
  .fe__layout { grid-template-columns: minmax(0, 1fr); gap: 68px; }
  .fe__primary { min-height: 0; }
}
@media (max-width: 519px) {
  .fe__layout { gap: 64px; }
  .fe__finding { font-size: 27px; }
  .fe__percent { margin-top: 44px; font-size: 68px; }
  .fe__evidence { gap: 52px; }
  .fe__row { grid-template-columns: minmax(116px, 0.9fr) minmax(86px, 1.1fr) 34px; gap: 10px; }
  .fe__label { font-size: 14px; }
  .fe__interpretation { margin-top: 36px; }
}
@media (forced-colors: active) {
  .fe__proportion span, .fe__proportion i, .fe__track, .fe__track i, .fe__key { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .fe__track i, .fe__proportion span { background: CanvasText; }
  .fe__proportion i { background: Canvas; }
  .fe__row--link:has(a:focus-visible) { outline-color: Highlight; }
}