/* Shared, unchanged money-page hero and provider-card styling. */
/* Loaded by storefront components so articles and tools skip these rules. */
/* ── Editorial buy-page hero (.bhe) ─────────────────────────────────────────
Scoped to .bhe consumers so compact .blp-* heroes keep their own styles.
Palette: the page's own ink tokens plus a blush accent used only as a
highlight behind the platform phrase and as the leading-service card's
surface. The rose ink is #9c2b4f, which measures 7.4:1 on that surface. */
.bhe { --bhe-blush: #fbe7ed; --bhe-blush-soft: #fdf2f6; --bhe-blush-line: #f2d3de; --bhe-rose-ink: #9c2b4f; }
.bhe .bhe-top { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .bhe .bhe-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.bhe-label { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blp-muted); }
/* Keep the platform phrase together while balancing the surrounding title. */
.bhe-h1 { margin: 14px 0 0; font-size: clamp(2.125rem, 4.2vw, 3.375rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--blp-ink); text-wrap: balance; }
/* box-decoration-break keeps the blush behind every wrapped line of the
highlighted phrase instead of one long bar behind the first line. */
/* The phrase in buzzoid.com's headline form: no tint box; the platform word
after its brand tile in the brand treatment, the service word after the
speed glyph (shared glyph rules: .hl-* below). */
.bhe-h1-mark { background: none; padding: 0; }
.bhe-h1-platform { background: linear-gradient(90deg, #f58529 0%, #dd2a7b 55%, #8134af 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bhe-intro { margin: clamp(16px, 1.8vw, 20px) 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--blp-muted); }
.bhe-intro-lead { font-weight: 600; color: var(--blp-ink); }
.bhe-intro-arrow { display: inline-block; font-weight: 600; color: var(--blp-ink); }
.bhe-byline { display: flex; align-items: center; gap: 10px; margin: clamp(18px, 2vw, 22px) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--blp-muted); }
.bhe-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.bhe-byline-name { font-weight: 600; color: var(--blp-ink); text-decoration: none; }
.bhe-byline-date { white-space: nowrap; }
.bhe-byline-name:hover { text-decoration: underline; }
.bhe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(20px, 2.4vw, 28px); }
.bhe-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 8px; background: var(--blp-ink); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.bhe-cta:hover { background: oklch(26% 0.012 280); }
.bhe-cta:focus-visible, .bhe-cta-secondary:focus-visible { outline: 2px solid var(--blp-ink); outline-offset: 3px; border-radius: 8px; }
.bhe-cta-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.bhe-cta-secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--blp-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blp-rule-strong); }
.bhe-cta-secondary:hover { text-decoration-color: var(--blp-ink); }
.bhe-art { width: 100%; max-width: 540px; justify-self: center; }
.bhe-art-img { display: block; width: 100%; height: auto; object-fit: contain; }
.bhe-stats { margin: clamp(28px, 3.6vw, 44px) 0 0; padding: clamp(18px, 2.2vw, 24px) 0; border-top: 1px solid var(--blp-rule); border-bottom: 1px solid var(--blp-rule); display: grid; gap: 18px; }
/* Label above value in the DOM (a must precede its ), value above
label on screen — column-reverse, so the reading order stays correct for a
screen reader and the number leads visually. */
/* justify-content: flex-end packs the reversed column toward the TOP, so
the three numbers share a baseline whether a label is one line or two. */
.bhe-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
.bhe-stat-value { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--blp-ink); font-variant-numeric: tabular-nums; }
.bhe-stat-label { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--blp-muted); }
@media (min-width: 720px) {
.bhe-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.bhe-stat { padding-right: clamp(16px, 2.5vw, 36px); }
.bhe-stat + .bhe-stat { padding-left: clamp(16px, 2.5vw, 36px); border-left: 1px solid var(--blp-rule); }
}
.bhe-disc { margin-top: 16px; max-width: 70ch; }
.bhe-feature { margin-top: clamp(18px, 2.2vw, 24px); padding: clamp(18px, 2.2vw, 26px); background: var(--bhe-blush-soft); border: 1px solid var(--bhe-blush-line); border-radius: 14px; display: grid; gap: 18px; }
@media (min-width: 900px) { .bhe-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px); } }
.bhe-feature-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bhe-rose-ink); }
.bhe-feature-name { margin: 6px 0 0; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--blp-ink); }
.bhe-feature-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--blp-ink-soft); }
.bhe-feature-figures { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); }
.bhe-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bhe-figure-value { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.15; color: var(--blp-ink); font-variant-numeric: tabular-nums; }
.bhe-figure-label { font-size: 12.5px; line-height: 1.4; color: var(--blp-muted); }
.bhe-feature-action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 900px) { .bhe-feature-action { align-items: flex-end; text-align: right; } }
/* Wide enough for the English sentence to sit on one line (26ch left an
orphaned "vary."); balance keeps the longer German and Dutch strings to
two even lines instead of a one-word tail. */
.bhe-feature-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--blp-muted); max-width: 36ch; text-wrap: balance; }
/* The short-answer pair under the leading-service card: the shared hero's own
.blp-lede and .blp-answer, set a little tighter so they read as a footnote
to the card rather than a second opening. */
.bhe-brief { margin-top: clamp(20px, 2.6vw, 28px); }
.bhe-brief .blp-lede { margin-top: 0; font-size: 1rem; max-width: 70ch; }
.bhe-brief .blp-answer { margin-top: 14px; }
.bhe-toc { margin-top: clamp(18px, 2.4vw, 26px); }
/* ── Editorial provider card (.pce) ─────────────────────────────────────────
Shared by editorial money-page cards and the Buzzoid alternatives cards.
The form is buzzoid.com's home-page service
card, measured on their DOM 2026-09-29 at 1440px: #f6f7fa card, 44px
radius, 64/56/24 padding, 48px between the top block and the accordion
row; text column with 32px gaps; 36px white logo tile + 25px pills; 54px
title; 16/24 bullets with 23px accent icons in two columns 40px apart;
53px dark button (radius 16, 4px hard shadow) with a 42×39 accent chip;
accordion titles 24px with a 38px "+" circle. Measured and advertised
figures are styled identically on purpose — the distinction is carried by
the note after each one, so it survives a greyscale print. */
.pce { --pce-ink: #292f3b; --pce-muted: #626976; --pce-line: #e9ecf2; --pce-accent: #e1306c; --pce-blush: #fbe7ed; --pce-blush-soft: #fdf2f6; --pce-rose-ink: #9c2b4f;
display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 48px); padding: clamp(28px, 4.4vw, 64px) clamp(20px, 3.9vw, 56px) clamp(8px, 1.7vw, 24px); background: #f6f7fa; border-radius: clamp(28px, 3vw, 44px); color: var(--pce-ink); }
/* Five direct children in Buzzoid's order on a phone (rating, name, figure,
bullets, key); on a laptop the figure takes the right column beside all
four text blocks. */
.pce-top { display: grid; grid-template-areas: "rating" "name" "art" "bullets" "actions"; gap: 24px; align-items: center; min-width: 0; }
.pce-rating { grid-area: rating; }
.pce-name { grid-area: name; }
.pce-art { grid-area: art; }
.pce-bullets { grid-area: bullets; }
.pce-actions { grid-area: actions; }
@media (min-width: 900px) {
.pce-top { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "rating art" "name art" "bullets art" "actions art"; column-gap: 36px; row-gap: 32px; }
/* Pinned to the top of the text block: centred art floated to a different
height on every card (−43px to +8px against the name), review 2026-09-29. */
.pce-art { align-self: start; }
}
@media (min-width: 1200px) { .pce-top { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
/* Rating row */
.pce-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: -8px; align-self: end; }
.pce-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #fff; border: 1px solid var(--pce-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04); }
.pce-tile img { width: 30px; height: 30px; object-fit: contain; }
.pce-tile-initial { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.pce-pill { display: inline-flex; align-items: stretch; height: 25px; background: #fff; border: 1px solid var(--pce-line); border-radius: 999px; font-size: 12px; line-height: 1; color: var(--pce-muted); overflow: hidden; }
.pce-pill > * { display: inline-flex; align-items: center; padding: 0 10px; }
.pce-pill > * + * { border-left: 1px solid var(--pce-line); }
.pce-pill-score { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 44px tap target on a 25px pill: pad the hit box and pull it back with a
negative margin, so the pill's height and the label's position do not move. */
.pce-pill-label { color: var(--pce-muted); text-decoration: none; padding-block: 11px; margin-block: -11px; }
a.pce-pill-label:hover { color: var(--pce-ink); }
/* #01 rank pill: gold trophy (owner, 2026-10-02). Transform/opacity only. */
.pce-pill-top { border-color: #ecd08c; background: linear-gradient(135deg, #fffaf0, #fff1cf); }
.pce-pill-top > * + * { border-left-color: #f1dca6; }
.pce-pill-top .pce-pill-score { color: #8a5a00; }
.pce-pill-top .pce-pill-label { color: #6b4a07; font-weight: 500; gap: 6px; white-space: nowrap; }
@media (max-width: 639px) {
.pce-pill-top { max-width: 100%; height: auto; min-height: 25px; }
.pce-pill-top .pce-pill-label { white-space: normal; min-width: 0; padding-block: 4px; margin-block: 0; }
}
/* Phones: a long translated #01 label wraps inside the pill instead of
widening the card past the screen (de/nl/pt-br SoundCloud comments twins
scrolled sideways by 46-78px, review 2026-10-03). A label that fits stays
on one line at the same 25px height. */
.pce-trophy { width: 15px; height: 15px; flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(185, 122, 14, 0.35)); }
.pce-trophy-shine { transform-box: view-box; animation: pce-trophy-shine 3.6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.pce-trophy-spark { transform-box: fill-box; transform-origin: center; animation: pce-trophy-spark 3.6s ease-in-out infinite; }
@keyframes pce-trophy-shine { 0%, 55% { transform: translateX(0) rotate(20deg); } 85%, 100% { transform: translateX(30px) rotate(20deg); } }
@keyframes pce-trophy-spark { 0%, 60%, 100% { opacity: 0; transform: scale(0.4); } 72% { opacity: 1; transform: scale(1); } 86% { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .pce-trophy-shine, .pce-trophy-spark { animation: none; } .pce-trophy-shine { opacity: 0; } }
/* Title and bullets */
/* --pce-name-scale (set inline past 14 characters) shrinks a long name so it
keeps one line; overflow-wrap stays as the last resort after the
word joints (2026-10-03). */
.pce-name { margin: 0; font-size: calc(clamp(2rem, 3.75vw, 3.375rem) * var(--pce-name-scale, 1)); font-weight: 700; line-height: 1.13; letter-spacing: -0.03em; color: var(--pce-ink); overflow-wrap: anywhere; }
@media (max-width: 899px) {
.pce-name { font-size: calc(2rem * max(var(--pce-name-scale, 1), 0.78)); }
}
/* Phones and tablets (up to 899px, where the clamp sits at its 2rem floor):
never below 78% of 32px (about 25px), so a long name stays a heading and
is never smaller on a 768px screen than on a 390px one (review,
2026-10-03); past that it wraps at its word joints. */
/* Two INDEPENDENT columns (multicol), not a two-column grid: a grid aligns
rows, so a one-line bullet beside a four-line one left a hole under it and
the list read as misaligned (owner, 2026-09-29). Items flow down the first
column, then the second; each bullet stays whole. */
.pce-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
.pce-bullets { display: block; columns: 2; column-gap: 28px; }
.pce-bullet { break-inside: avoid; margin: 0 0 10px; }
}
.pce-bullet { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--pce-ink); }
.pce-bullet-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; color: var(--pce-accent); line-height: 0; }
.pce-bullet-ic svg { width: 22px; height: 22px; }
.pce-bullet-body { min-width: 0; }
.pce-bullet strong { font-weight: 600; }
.pce-bullet-note { display: block; color: var(--pce-muted); font-size: 14px; line-height: 20px; }
/* The button: Buzzoid's dark key with the accent chip. */
.pce-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pce-cta { display: inline-flex; align-items: center; gap: 16px; min-height: 53px; padding: 0 6px 0 20px; border-radius: 16px; background: var(--pce-ink); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #0b1a29; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.pce-cta:hover { transform: translateY(1px); box-shadow: 0 3px 0 #0b1a29; }
.pce-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1a29; }
/* VisitSiteCta renders its arrow as a bare ↗; that span is the chip. */
.pce-cta > span:last-child { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 39px; border-radius: 10px; background: var(--pce-accent); color: #fff; font-size: 18px; font-weight: 700; line-height: 1; flex-shrink: 0; }
@media (max-width: 639px) { .pce-cta { width: 100%; justify-content: space-between; } }
/* A one-word vendor name ("Visit BuySocialMediaMarketing") was wider than a
320px card and pushed the whole page 22px sideways (production check,
2026-10-03): the label may break rather than overflow. */
.pce-cta > span:first-child { min-width: 0; overflow-wrap: break-word; }
.pce-price-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--pce-muted); }
.pce-review-link { color: var(--pce-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 15px; margin-block: -15px; }
/* The figure */
.pce-art { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pce-art-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pce-art-img { display: block; width: 100%; height: auto; }
.pce-art-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px rgba(41, 47, 59, 0.12); }
.pce-art-logo img { width: 72px; height: 72px; object-fit: contain; }
.pce-art-initial { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.pce-art-mark { position: absolute; top: 10%; right: 14%; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(41, 47, 59, 0.12); color: var(--pce-ink); }
.pce-art-mark-instagram { color: #d62976; }
.pce-art-mark-youtube { color: #e02424; }
.pce-art-mark-kick { color: #0b0e0f; background: #53fc18; }
.pce-art-mark-threads { color: #101010; }
.pce-art-mark-facebook { color: #1877f2; }
.pce-art-mark-twitter { color: #0f1419; }
.pce-art-mark-spotify { color: #1db954; }
.pce-art-mark-soundcloud { color: #ff5500; }
.pce-art-mark-twitch { color: #9146ff; }
.pce-art-mark-linkedin { color: #0a66c2; }
.pce-art-mark-telegram { color: #26a5e4; }
.pce-art-mark-pinterest { color: #e60023; }
.pce-art-score { position: absolute; bottom: 14%; left: 10%; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(41, 47, 59, 0.12); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pce-art-score small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--pce-muted); }
/* Disclosure and the accordion row */
.pce-disclosure { margin: calc(-1 * clamp(12px, 2vw, 32px)) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--pce-muted); }
/* align-items: start — with the default stretch, the shorter open panel was
sized to the taller one and the flagship card carried ~590px of blank
space under "Why it ranks #01" (review 2026-09-29). */
.pce-acc { display: grid; gap: 0 48px; border-top: 1px solid var(--pce-line); align-items: start; }
@media (max-width: 899px) {
.pce-summary { padding: 18px 0; }
.pce-acc > .pce-details + .pce-details { border-top: 1px solid var(--pce-line); }
/* Score rows on a phone read as a table: "Account Quality 30% …… 9.7" on
one line, the note in 13px muted under it, a hairline per row. The dd's
own value and separator hide; the dt's aria-hidden copy shows. */
.pce-details-body .blp-ac-dl { display: block; }
.pce-details-body .blp-ac-dl dt { display: flex; align-items: baseline; gap: 6px; padding-top: 10px; font-size: 15px; font-weight: 600; color: var(--pce-ink); }
.pce-details-body .blp-ac-dl dt:first-of-type { padding-top: 0; }
.pce-details-body .blp-ac-dl dt .blp-ac-weight { margin-left: 0; }
.pce-details-body .blp-ac-value-phone { display: inline; margin-left: auto; padding-left: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pce-details-body .blp-ac-dl dd .blp-ac-score-value, .pce-details-body .blp-ac-dl dd .blp-ac-sep { display: none; }
.pce-details-body .blp-ac-dl dd { margin: 3px 0 0; padding: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--pce-muted); border-bottom: 1px solid var(--pce-line); overflow-wrap: anywhere; }
.pce-details-body .blp-ac-dl dd:last-of-type { border-bottom: 0; }
}
@media (max-width: 479px) {
.pce-rating { gap: 8px; }
.pce-pill { font-size: 11.5px; }
.pce-pill > * { padding: 0 8px; }
a.pce-pill-label { display: none; }
}
@media (min-width: 900px) { .pce-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the rating row fits one line when the score pill carries only the
number (the "Editorial score" label lives on the art badge and in the
breakdown, which also keeps the criteria link). */
.pce-summary { display: flex; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.pce-summary::-webkit-details-marker { display: none; }
.pce-summary::marker { content: ""; }
.pce-summary-h { margin: 0; font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.13; letter-spacing: -0.03em; color: var(--pce-ink); }
/* Plus that becomes a minus: two bars, the vertical one rotated away when the
section is open. The state itself is , which assistive tech
announces — this is decoration. */
.pce-plus { position: relative; margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: #fff; border: 1px solid #dce0e8; }
.pce-plus::before, .pce-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--pce-ink); transform: translate(-50%, -50%); }
.pce-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 160ms ease-out; }
.pce-details[open] .pce-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .pce-plus::after { transition: none; } }
.pce-summary:focus-visible, .pce-cta:focus-visible, .pce-review-link:focus-visible, .pce-study-link:focus-visible, .pce-pill-label:focus-visible { outline: 2px solid var(--pce-ink); outline-offset: 3px; border-radius: 8px; }
.pce-details-body { padding: 0 0 24px; }
/* The score breakdown follows the editorial paragraph: give it its own rule
line, and a label column wide enough that "Account Quality 30%" does not
wrap onto two lines beside a one-line value. */
.pce-details-body .blp-ac-score-head { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pce-line); }
@media (min-width: 640px) { .pce-details-body .blp-ac-dl { grid-template-columns: 158px minmax(0, 1fr); } }
.pce-sub-h { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pce-muted); }
.pce-verdict-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pce-ink); }
.pce-callout { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--pce-line); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--pce-ink); }
.pce-callout-ic { color: var(--pce-rose-ink); flex-shrink: 0; line-height: 0; margin-top: 2px; }
.pce-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pce-table th { text-align: left; font-weight: 500; color: var(--pce-muted); padding: 9px 0; border-bottom: 1px solid var(--pce-line); }
.pce-table td { text-align: right; font-weight: 600; color: var(--pce-ink); padding: 9px 0; border-bottom: 1px solid var(--pce-line); font-variant-numeric: tabular-nums; }
.pce-table-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--pce-muted); }
.pce-details-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.pce-study-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--pce-ink); text-decoration: underline; text-underline-offset: 3px; }
.pce-foot-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--pce-muted); }
/* A storefront card that keeps the shared card's evidence (/buy-youtube-views,
2026-09-30): the config takeaway sits under the name, and the evidence rows
(ProviderEvidenceBody) follow the score breakdown in "Details & evidence",
in the breakdown's own row style. The Instagram followers card renders
neither, so none of these rules reach it. */
.pce-top-take { grid-template-areas: "rating" "name" "take" "art" "bullets" "actions"; }
.pce-takeaway { grid-area: take; margin: -12px 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 600; line-height: 1.45; color: var(--pce-ink); }
@media (min-width: 900px) { .pce-top-take { grid-template-areas: "rating art" "name art" "take art" "bullets art" "actions art"; } }
/* The evidence rows sit folded under one quiet row after the breakdown. */
.pce-more { margin-top: 18px; border-top: 1px solid var(--pce-line); }
.pce-more-sum { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0 0; cursor: pointer; list-style: none; }
.pce-more-sum::-webkit-details-marker { display: none; }
.pce-more-sum::marker { content: ""; }
.pce-more-sum:focus-visible { outline: 2px solid var(--pce-ink); outline-offset: 3px; border-radius: 8px; }
.pce-more-h { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pce-ink); }
.pce-more-mark { position: relative; margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 1px solid #dce0e8; }
.pce-more-mark::before, .pce-more-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--pce-ink); transform: translate(-50%, -50%); }
.pce-more-mark::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 160ms ease-out; }
.pce-more[open] .pce-more-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .pce-more-mark::after { transition: none; } }
.pce-evidence { --ac-ink: var(--pce-ink); padding-top: 4px; font-size: 14px; line-height: 1.55; color: var(--pce-muted); }
.pce-evidence .blp-ac-dl { margin-top: 8px; }
@media (min-width: 640px) {
.pce-full .pce-details-body .blp-ac-dl dt { font-size: 15px; }
.pce-full .pce-details-body .blp-ac-dl dd { font-size: 14px; line-height: 1.5; }
}
.pce-art-flip .pce-art-mark { right: auto; left: 14%; }
.pce-art-flip .pce-art-score { left: auto; right: 10%; }
/* Owner artwork puts the vendor's wordmark bottom-right and a portrait
bottom-left; its top-right corner is clear on every piece, so the score
badge moves there on cards that carry an image (the drawn figure keeps
the badge low, its own marks sit high). */
.pce-art:has(.pce-art-img) .pce-art-score { bottom: auto; top: 2%; left: auto; right: 2%; }
.pce-pilot { margin-top: 16px; }
.pce-why-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pce-ink); }
.pce-pros { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pce-pros li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--pce-ink); }
/* The check mark, as a masked data URI instead of an inline