/* Skin "ranks" (setting skin = ranks): the old predictionranks.com look, "dark, crypto-native, finance-forward".
   Electric cyan #00d4ff with glow on near-black #0a0a0f, neon green #00ff80 as the only second accent, Space Grotesk
   headlines + Inter text, 12px-radius glow cards on a fixed 28px dot grid. Loaded after site.css on every page of a
   site that names this skin. Tokens and site-wide pieces first; the home page (templates/partials/home/showcase-ranks
   .php, -end.php, classes .pr-*) and the review parts (App\Services\Skins\RanksBody) below; motion and reduced motion
   last. Values: Brand & Design restore spec v1 (hub/handoffs/cms/2026-10-15-ranks-restore-spec.md), tokens
   hub/brand/predictionranks/tokens.css and the source inventory. Network fixes R1-R14 of the spec are marked "R". */

/* Fonts of the original design, self-hosted (SIL Open Font License 1.1, licence texts in public/assets/fonts/). */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens (hub/brand/predictionranks/tokens.css) */
body.skin-ranks {
  --pr-bg: #0a0a0f; --pr-card: #13131b; --pr-muted-bg: #1f1f28; --pr-line: #272735; --pr-bar: #0d0d14;
  --pr-text: #f3f5f7; --pr-muted: #9da3af;
  --pr-cyan: #00d4ff; --pr-neon: #00ff80; --pr-amber: #fcd34d; --pr-down: #f04242; --pr-on-cyan: #0a0a0f;
  --pr-star-off: #5c5f70; /* R3 */
  --pr-ring: rgb(0 212 255 / .2); --pr-ring-hover: rgb(0 212 255 / .5);
  --pr-outline: rgb(0 212 255 / .6); /* R3 */
  --pr-glow-sm: 0 0 12px rgb(0 212 255 / .25); --pr-glow: 0 0 24px rgb(0 212 255 / .35);
  --pr-card-shadow: 0 0 0 1px rgb(0 212 255 / .2), 0 8px 24px -12px rgb(0 212 255 / .15);
  --pr-glow-text: 0 0 18px rgb(0 212 255 / .45);
  --pr-display: "Space Grotesk", system-ui, sans-serif;
  --pr-sans: "Inter", system-ui, sans-serif;
  --pr-h1: clamp(36px, 6vw, 72px); --pr-h2: clamp(30px, 3vw, 36px); --pr-track: -.025em;
  --pr-label: 12px; --pr-r: 12px; --pr-r-btn: 10px; --pr-r-panel: 16px; --pr-tap: 44px;
  --pr-ease: cubic-bezier(.22, 1, .36, 1); --pr-fast: 150ms;
  /* site.css tokens in the skin's colours */
  --paper: #0a0a0f; --paper-2: #13131b; --ink: #f3f5f7; --ink-2: #c9cdd4; --muted: #9da3af; --line: #272735;
  --accent: #00d4ff; --accent-ink: #0a0a0f; --brand: #00d4ff; --focus: #00d4ff;
  --sans: var(--pr-sans); --serif: var(--pr-display); --serif-text: var(--pr-sans); --serif-display: var(--pr-display);
  --wrap: 1400px; --gutter: 16px; --radius: 12px; /* R9: 16px phone gutters, 32px from 768 */
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgb(0 212 255 / .08), transparent 60%), radial-gradient(circle, #272735 1px, transparent 1px) 0 0 / 28px 28px, #0a0a0f;
  background-attachment: fixed;
  color: var(--pr-text); font-family: var(--pr-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body.skin-ranks { --gutter: 32px; } }
body.skin-ranks ::selection { background: var(--pr-cyan); color: var(--pr-on-cyan); }
body.skin-ranks :focus-visible { outline: 2px solid var(--pr-cyan); outline-offset: 2px; border-radius: 4px; }
body.skin-ranks a { color: inherit; }
body.skin-ranks a:hover { color: var(--pr-cyan); }
body.skin-ranks h1, body.skin-ranks h2, body.skin-ranks h3, body.skin-ranks h4 { font-family: var(--pr-display); letter-spacing: -.02em; color: var(--pr-text); }
body.skin-ranks small { font-size: 12px; }
body.skin-ranks .sr-only { position: absolute !important; }

/* Buttons (spec 5.6; R2: 44px, hero 48px) */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--pr-tap); padding: 10px 16px; border-radius: var(--pr-r-btn); border: 1px solid transparent;
  background: var(--pr-cyan); color: var(--pr-on-cyan) !important; font-family: var(--pr-sans); font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none; text-align: center;
  box-shadow: var(--pr-glow-sm); transition: box-shadow var(--pr-fast), background-color var(--pr-fast), border-color var(--pr-fast); }
.pr-btn:hover { background: rgb(0 212 255 / .9); box-shadow: var(--pr-glow); color: var(--pr-on-cyan) !important; }
.pr-btn--lg { min-height: 48px; padding: 12px 32px; font-size: 15px; }
.pr-btn--sm { min-height: var(--pr-tap); padding: 8px 14px; }
.pr-btn--block { width: 100%; }
.pr-btn--outline { background: transparent; border-color: var(--pr-outline); color: var(--pr-cyan) !important; box-shadow: none; }
.pr-btn--outline:hover { background: rgb(0 212 255 / .1); border-color: var(--pr-cyan); color: var(--pr-cyan) !important; }
.pr-arrow { flex: none; transition: transform var(--pr-fast); }
.pr-btn:hover .pr-arrow, .pr-card:hover .pr-btn .pr-arrow { transform: translateX(2px); }
.pr-code { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); background: rgb(0 212 255 / .1); border: 1px solid rgb(0 212 255 / .4); border-radius: 6px; padding: 1px 6px; }

/* Affiliate disclosure bar above the header (spec frame; R2 dismiss 44x44) */
.pr-disclosure { background: var(--pr-bar); border-bottom: 1px solid rgb(39 39 53 / .6); font-size: 12px; line-height: 1.5; color: var(--pr-muted); }
.pr-disclosure-in { display: flex; align-items: center; gap: 8px; }
.pr-disclosure p { margin: 0; padding: 8px 0; flex: 1; }
.pr-disclosure strong { color: var(--pr-text); font-weight: 600; }
.pr-disclosure a { color: var(--pr-cyan); text-decoration: none; display: inline-block; }
.pr-disclosure a:hover { text-decoration: underline; }
.pr-disclosure-close { flex: none; width: 44px; height: 44px; margin-right: -12px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--pr-muted); cursor: pointer; border-radius: 8px; }
.pr-disclosure-close:hover { color: var(--pr-text); }
.pr-disclosure.is-closed { display: none; }

/* Header: 64px, sticky, transparent at the top, glass after scrolling (site.js is-scrolled) */
body.skin-ranks .site-header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--pr-fast), border-color var(--pr-fast), backdrop-filter var(--pr-fast); }
body.skin-ranks .site-header.is-scrolled { background: rgb(10 10 15 / .65); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom-color: rgb(0 212 255 / .15); }
body.skin-ranks .header-top { min-height: 64px; }
body.skin-ranks .header-top .brand { min-height: 44px; display: inline-flex; align-items: center; }
.pr-logo { font-family: var(--pr-display); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: var(--pr-track); color: var(--pr-text); white-space: nowrap; }
.pr-logo-accent { color: var(--pr-cyan); text-shadow: var(--pr-glow-text); }
body.skin-ranks .search-form input { background: rgb(19 19 27 / .8); border: 1px solid var(--pr-line); color: var(--pr-text); border-radius: var(--pr-r-btn); min-height: 44px; font-size: 14px; }
body.skin-ranks .search-form button, body.skin-ranks .menu-toggle { min-width: 44px; min-height: 44px; color: var(--pr-text); background: transparent; border: 1px solid var(--pr-line); border-radius: var(--pr-r-btn); }
body.skin-ranks .menu-toggle:hover, body.skin-ranks .search-form button:hover { border-color: var(--pr-outline); color: var(--pr-cyan); }
body.skin-ranks .menu-toggle-label { font-size: 14px; font-weight: 600; }
.pr-header-cta { display: none; white-space: nowrap; }
@media (min-width: 640px) { .pr-header-cta { display: inline-flex; } }
body.skin-ranks .primary-nav { border-top: 0; }
body.skin-ranks .nav-list a, body.skin-ranks .nav-more-btn { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--pr-r-btn); font-family: var(--pr-sans); font-size: 14px; font-weight: 500; color: var(--pr-muted); text-decoration: none; transition: color var(--pr-fast), background-color var(--pr-fast); }
body.skin-ranks .nav-list a:hover, body.skin-ranks .nav-more-btn:hover { color: var(--pr-cyan); }
body.skin-ranks .nav-list a[aria-current="page"] { color: var(--pr-cyan); }
.nav-more-btn { background: transparent; border: 0; cursor: pointer; gap: 6px; }
.nav-more-btn::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--pr-fast); }
.nav-more:hover .nav-more-btn::after, .nav-more:focus-within .nav-more-btn::after { transform: translateY(1px) rotate(225deg); }
/* phones: ONE Menu button (R10); the panel lists every item, the "More" groups as small cyan headings with their links in two columns */
@media (max-width: 767px) {
  .js body.skin-ranks .primary-nav.is-open { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); overflow-y: auto; background: rgb(10 10 15 / .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(0 212 255 / .15); }
  .js body.skin-ranks .site-header { position: sticky; }
  .js body.skin-ranks .nav-list { padding: 8px var(--gutter) 16px; gap: 0; }
  .js body.skin-ranks .nav-list a { min-height: 44px; padding: 0; border-bottom: 1px solid rgb(39 39 53 / .6); font-size: 15px; color: var(--pr-text); border-radius: 0; }
  .js body.skin-ranks .nav-more-btn { display: none; }
  .js body.skin-ranks .nav-more-panel { padding: 0; }
  .js body.skin-ranks .nav-more-panel > .nav-group > a { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); border-bottom: 0; margin-top: 8px; }
  .js body.skin-ranks .nav-more-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .js body.skin-ranks .nav-more-panel ul a { font-size: 14px; color: var(--pr-muted); }
}
@media (min-width: 768px) {
  body.skin-ranks .nav-list { gap: 0 2px; flex-wrap: nowrap; position: relative; }
  body.skin-ranks .has-children:hover > .sub-nav, body.skin-ranks .has-children:focus-within > .sub-nav { background: rgb(19 19 27 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgb(39 39 53 / .6); border-radius: var(--pr-r); box-shadow: var(--pr-glow); padding: 6px; }
  body.skin-ranks .sub-nav a { min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--pr-text); border-radius: 8px; }
  body.skin-ranks .sub-nav a:hover { color: var(--pr-cyan); background: rgb(0 212 255 / .05); }
  body.skin-ranks .nav-more:hover > .nav-more-panel, body.skin-ranks .nav-more:focus-within > .nav-more-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; left: auto; right: 0; width: min(760px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 96px); overflow-y: auto; }
  body.skin-ranks .nav-more-panel ul { list-style: none; margin: 0; padding: 0; }
  body.skin-ranks .nav-more-panel > .nav-group > a { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
  body.skin-ranks .nav-more-panel ul a { color: var(--pr-muted); }
  body.skin-ranks .nav-more-panel > li:not(.nav-group) { grid-column: 1 / -1; }
}
/* sliding cyan underline under the active or hovered link (site.js adds .pr-nav-ind) */
.pr-nav-ind { position: absolute; left: 0; bottom: 4px; height: 2px; width: 0; border-radius: 2px; background: var(--pr-cyan); box-shadow: 0 0 8px rgb(0 212 255 / .7); pointer-events: none; opacity: 0;
  transition: transform 380ms cubic-bezier(.34, 1.4, .64, 1), width 380ms cubic-bezier(.34, 1.4, .64, 1), opacity var(--pr-fast); }
.pr-nav-ind.is-on { opacity: 1; }
@media (max-width: 767px) { .pr-nav-ind { display: none; } }
@media (min-width: 1024px) {
  body.skin-ranks.header-inline .site-header { gap: 16px; min-height: 64px; }
  body.skin-ranks.header-inline .nav-list { justify-content: center; flex-wrap: nowrap; }
  body.skin-ranks.header-inline .search-form input { width: 120px; }
}
@media (min-width: 1280px) { body.skin-ranks.header-inline .search-form input { width: 150px; } }

/* Site-wide text, cards and lists in the skin's colours */
body.skin-ranks .article-title { font-family: var(--pr-display); font-weight: 700; letter-spacing: var(--pr-track); line-height: 1.2; font-size: clamp(30px, 4.2vw, 48px); }
body.skin-ranks .section-title { font-family: var(--pr-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(24px, 3vw, 30px); }
body.skin-ranks .standfirst, body.skin-ranks .card-excerpt { color: var(--pr-muted); font-family: var(--pr-sans); }
body.skin-ranks .kicker, body.skin-ranks a.kicker { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
body.skin-ranks .meta, body.skin-ranks .byline { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .byline a { color: var(--pr-text); display: inline-block; }
body.skin-ranks .breadcrumbs, body.skin-ranks .breadcrumbs a { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
/* One baseline: links, separator and current item all on 44px lines; the separator stays with the item before it; the current item is cut with an ellipsis (Brand round 1 fix 1) */
body.skin-ranks .breadcrumbs ol { flex-wrap: nowrap; align-items: center; gap: 0; }
body.skin-ranks .breadcrumbs li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
body.skin-ranks .breadcrumbs li:not(:last-child) { flex: none; }
body.skin-ranks .breadcrumbs li + li::before { content: none; }
body.skin-ranks .breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--pr-muted); }
body.skin-ranks .breadcrumbs [aria-current] { display: block; min-width: 0; max-width: none; line-height: 44px; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; color: var(--pr-text); }
body.skin-ranks .card-title { font-family: var(--pr-display); font-weight: 600; letter-spacing: -.01em; }
body.skin-ranks .card { position: relative; }
body.skin-ranks .card-title a { display: inline; text-decoration: none; }
body.skin-ranks .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pr-r); } /* the whole card is the link (44px rule) */
body.skin-ranks .card .kicker { position: relative; z-index: 2; }
body.skin-ranks .card-title a:hover { color: var(--pr-cyan); }
body.skin-ranks .card-media { border-radius: var(--pr-r); border: 1px solid var(--pr-ring); background: var(--pr-card); }
body.skin-ranks .card--standard .card-body, body.skin-ranks .card--lead .card-body { padding-top: 2px; }
body.skin-ranks .section-head .more, body.skin-ranks a.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--pr-cyan); font-size: 14px; font-weight: 500; text-decoration: none; }
body.skin-ranks .page-updated { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .empty-state { color: var(--pr-muted); }
body.skin-ranks .pagination a, body.skin-ranks .tags a { min-height: 44px; display: inline-flex; align-items: center; }

/* Article text (reviews, guides, blog posts) */
body.skin-ranks .prose { color: var(--pr-muted); font-family: var(--pr-sans); font-size: 16px; line-height: 1.625; }
@media (min-width: 768px) { body.skin-ranks .prose { font-size: 18px; } }
body.skin-ranks .prose h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 2.2em; color: var(--pr-text); }
body.skin-ranks .prose h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: 1.8em; color: var(--pr-text); }
body.skin-ranks .prose strong, body.skin-ranks .prose b { color: var(--pr-text); }
body.skin-ranks .prose a:not(.button) { color: var(--pr-cyan); text-decoration-color: rgb(0 212 255 / .45); text-underline-offset: 3px; }
body.skin-ranks .prose a:not(.button):hover { text-decoration-color: currentColor; }
body.skin-ranks .prose li { margin-block: .4em; }
body.skin-ranks .prose a.button, body.skin-ranks .prose a.button:hover { min-height: 44px; padding: 10px 18px; border-radius: var(--pr-r-btn); background: var(--pr-cyan); color: var(--pr-on-cyan); font-size: 15px; font-weight: 600; box-shadow: var(--pr-glow-sm); filter: none; }
body.skin-ranks .prose a.button:hover { box-shadow: var(--pr-glow); background: rgb(0 212 255 / .9); }
body.skin-ranks .prose a.button[href^="/compare"], body.skin-ranks .prose a.button:not([href*="/go/"]) { background: transparent; color: var(--pr-cyan); border: 1px solid var(--pr-outline); box-shadow: none; }
body.skin-ranks .prose .box { position: relative; background: var(--pr-card); border: 1px solid var(--pr-ring); border-radius: var(--pr-r); box-shadow: var(--pr-card-shadow); padding: 20px; }
@media (min-width: 768px) { body.skin-ranks .prose .box { padding: 24px 28px; } }
body.skin-ranks .prose .box .box { box-shadow: none; background: rgb(0 212 255 / .04); border-color: rgb(0 212 255 / .25); padding: 14px 16px; }
body.skin-ranks .prose .cards { gap: 16px; }
body.skin-ranks .prose .cards > * { min-width: 0; }
body.skin-ranks .prose p.label { display: block; font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
body.skin-ranks .prose dl { display: grid; gap: 12px; margin: 1em 0; }
@media (min-width: 640px) { body.skin-ranks .prose dl { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
body.skin-ranks .prose dl > .box { margin: 0; }
body.skin-ranks .prose dt { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-muted); }
body.skin-ranks .prose dd { margin: 4px 0 0; color: var(--pr-text); font-size: 15px; }
body.skin-ranks .prose table { border: 1px solid rgb(0 212 255 / .3); border-radius: var(--pr-r); border-collapse: separate; border-spacing: 0; overflow-x: auto; font-size: 14px; }
body.skin-ranks .prose th { background: rgb(0 212 255 / .1); color: var(--pr-cyan); font-family: var(--pr-display); font-weight: 700; padding: 12px 16px; text-align: left; }
body.skin-ranks .prose td { padding: 12px 16px; border-top: 1px solid rgb(39 39 53 / .5); color: var(--pr-text); }
body.skin-ranks .prose tbody tr:nth-child(even) td { background: rgb(19 19 27 / .4); }
body.skin-ranks .prose figure img, body.skin-ranks .article-hero img { border-radius: var(--pr-r); border: 1px solid rgb(255 255 255 / .1); }
body.skin-ranks .prose figcaption, body.skin-ranks figcaption { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .prose blockquote { border-left: 4px solid var(--pr-cyan); background: rgb(19 19 27 / .8); padding: 16px 20px; border-radius: 0 var(--pr-r) var(--pr-r) 0; color: var(--pr-text); }
body.skin-ranks .disclosure { background: rgb(19 19 27 / .8); border-left-color: var(--pr-cyan); color: var(--pr-muted); font-size: 13px; }
body.skin-ranks .offer-terms { font-size: 12px; color: var(--pr-muted); border-top: 1px solid var(--pr-line); margin-top: 2em; padding-top: 1em; }
body.skin-ranks .offer-terms p { font-size: 12px; }
body.skin-ranks .faq details { background: var(--pr-card); border: 1px solid var(--pr-ring); border-radius: var(--pr-r); box-shadow: var(--pr-card-shadow); padding: 0 20px; margin: 12px 0; }
body.skin-ranks .faq summary { min-height: 56px; display: flex; align-items: center; font-family: var(--pr-display); font-weight: 600; color: var(--pr-text); cursor: pointer; }
body.skin-ranks .faq-answer { padding-bottom: 16px; font-size: 15px; }
body.skin-ranks .ed-toc, body.skin-ranks .side-box { background: var(--pr-card); border: 1px solid var(--pr-ring); border-radius: var(--pr-r); box-shadow: var(--pr-card-shadow); }
body.skin-ranks .side-title { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
body.skin-ranks .side-list a, body.skin-ranks .ed-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; }
body.skin-ranks .promo-button { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--pr-r-btn); background: var(--pr-cyan); color: var(--pr-on-cyan); font-weight: 600; text-decoration: none; box-shadow: var(--pr-glow-sm); }
body.skin-ranks .promo-disclaimer, body.skin-ranks .promo-disclaimer p { font-size: 12px; color: var(--pr-muted); }

/* Review parts drawn from the text (RanksBody, spec section 4 / 5.2) */
body.skin-ranks .prose .pr-offerstrip { background: linear-gradient(90deg, rgb(0 212 255 / .1), rgb(0 212 255 / .05) 50%, transparent), var(--pr-card); border-color: rgb(0 212 255 / .4); }
body.skin-ranks .prose .pr-offerstrip > p:first-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
body.skin-ranks .prose .pr-offerstrip > p:first-child strong { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
body.skin-ranks .prose .pr-offerstrip > p:first-child strong + strong { border: 1px solid rgb(0 212 255 / .4); background: rgb(0 212 255 / .1); border-radius: 6px; padding: 1px 6px; }
body.skin-ranks .prose .pr-offerstrip > p:nth-child(2) strong { font-family: var(--pr-display); font-size: 18px; }
.pr-bars { display: grid; gap: 16px 20px; margin: 16px 0; }
@media (min-width: 640px) { .pr-bars { grid-template-columns: 1fr 1fr; } }
.pr-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.pr-bar-label { font-size: 12px; color: var(--pr-muted); }
.pr-bar-value { font-family: var(--pr-display); font-size: 12px; font-weight: 600; color: var(--pr-cyan); font-variant-numeric: tabular-nums; }
.pr-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgb(31 31 40 / .9); overflow: hidden; }
.pr-bar-fill { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--pr-cyan); box-shadow: 0 0 8px rgb(0 212 255 / .6); transition: width 1s var(--pr-ease); }
.pr-score-total { display: flex; align-items: center; gap: 16px; margin: 8px 0 0; }
body.skin-ranks .prose .box > a:not(.button):not(:has(img)) { display: inline-flex; align-items: center; min-height: 44px; }
.pr-score-total-label { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-muted); }
.pr-ring { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; flex: none; }
.pr-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgb(0 212 255 / .6)); }
.pr-ring-track { fill: none; stroke: var(--pr-line); stroke-width: 6; }
.pr-ring-arc { fill: none; stroke: var(--pr-cyan); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--pr-ease); }
.pr-ring-num { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pr-ring-num strong { font-family: var(--pr-display); font-size: 22px; font-weight: 700; color: var(--pr-cyan) !important; font-variant-numeric: tabular-nums; }
.pr-ring-max { margin-top: 3px; font-size: 12px; color: var(--pr-muted); text-transform: uppercase; }
body.skin-ranks .prose .pr-pros h3, body.skin-ranks .prose .pr-cons h3 { margin-top: 0; font-size: 18px; }
body.skin-ranks .prose .pr-pros ul, body.skin-ranks .prose .pr-cons ul { list-style: none; padding: 0; }
body.skin-ranks .prose .pr-pros li, body.skin-ranks .prose .pr-cons li { position: relative; padding-left: 26px; font-size: 15px; }
body.skin-ranks .prose .pr-pros li::before, body.skin-ranks .prose .pr-cons li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
body.skin-ranks .prose .pr-pros li::before { content: "✓"; color: var(--pr-neon); }
body.skin-ranks .prose .pr-cons li::before { content: "✕"; color: var(--pr-down); }
.pr-facts { display: grid; gap: 12px; margin: 12px 0 0; }
@media (min-width: 640px) { .pr-facts { grid-template-columns: 1fr 1fr; } }
.pr-facts > div { padding: 12px 14px; border: 1px solid rgb(39 39 53 / .8); border-radius: 10px; background: rgb(10 10 15 / .4); }
body.skin-ranks .prose .pr-tested { border-left: 4px solid var(--pr-neon); }
body.skin-ranks .prose .pr-tested dl { grid-template-columns: 1fr; }
@media (min-width: 640px) { body.skin-ranks .prose .pr-tested dl { grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 8px; } body.skin-ranks .prose .pr-tested dd { margin: 0; } }

/* The network promo-code box, the phone code box and the sticky bar in the skin's style (R11, R14) */
body.skin-ranks .prose .code-box, body.skin-ranks .code-box-compact { background: linear-gradient(180deg, rgb(0 212 255 / .1), transparent), var(--pr-card); border: 1px solid rgb(0 212 255 / .4); border-radius: var(--pr-r); box-shadow: var(--pr-glow-sm); }
body.skin-ranks code.code-chip, body.skin-ranks .prose code.code-chip { font-family: var(--pr-display); font-weight: 700; letter-spacing: .05em; color: var(--pr-cyan); background: rgb(0 212 255 / .1); border: 1px dashed rgb(0 212 255 / .6); border-radius: 8px; }
body.skin-ranks .copy-code { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--pr-outline); border-radius: var(--pr-r-btn); background: transparent; color: var(--pr-cyan); font-size: 14px; font-weight: 600; cursor: pointer; }
body.skin-ranks .copy-code:hover { background: rgb(0 212 255 / .1); }
body.skin-ranks .copy-code.is-copied { background: var(--pr-neon); border-color: var(--pr-neon); color: var(--pr-on-cyan); }
body.skin-ranks .code-box .button, body.skin-ranks .code-box-compact .button { background: var(--pr-cyan); color: var(--pr-on-cyan); border-radius: var(--pr-r-btn); min-height: 44px; font-weight: 600; box-shadow: var(--pr-glow-sm); }
body.skin-ranks .code-terms small, body.skin-ranks .code-checked small, body.skin-ranks .code-box-compact .cbc-foot { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .code-terms small, body.skin-ranks .code-checked small, body.skin-ranks .second-platform small { display: inline-block; line-height: 1.5; }
body.skin-ranks .second-platform small { font-size: 12px; }
@media (max-width: 767px) {
  body.skin-ranks .sticky-cta:not([hidden]) { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: var(--pr-r); background: rgb(19 19 27 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgb(0 212 255 / .4); box-shadow: var(--pr-glow); color: var(--pr-text); font-size: 14px; margin-bottom: env(safe-area-inset-bottom); }
  body.skin-ranks .sticky-cta .sticky-text strong:first-child { font-family: var(--pr-display); }
  body.skin-ranks .sticky-cta .sticky-text strong:not(:first-child) { font-family: var(--pr-display); font-size: 12px; letter-spacing: .05em; color: var(--pr-cyan); background: rgb(0 212 255 / .1); border: 1px solid rgb(0 212 255 / .4); border-radius: 6px; padding: 1px 6px; }
  body.skin-ranks .sticky-cta .sticky-copy { min-height: 44px; padding: 0 10px; font-size: 13px; vertical-align: middle; }
  body.skin-ranks .sticky-cta .button-primary { background: var(--pr-cyan); color: var(--pr-on-cyan); text-decoration: none; border-radius: var(--pr-r-btn); min-height: 44px; padding: 0 18px; font-weight: 600; box-shadow: var(--pr-glow-sm); }
  body.skin-ranks .sticky-cta .sticky-terms { font-size: 12px; color: var(--pr-muted); }
  body.skin-ranks .sticky-cta .sticky-terms summary { min-height: 44px; display: flex; align-items: center; }
  body.skin-ranks .sticky-cta .sticky-close { color: var(--pr-muted); font-size: 22px; order: 1; margin: -6px -6px 0 0; }
  /* row 1: offer, code, Copy and the close button; row 2: terms and Claim */
  body.skin-ranks .sticky-cta:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text close" "terms claim"; column-gap: 8px; row-gap: 2px; align-items: center; }
  body.skin-ranks .sticky-cta .sticky-text { grid-area: text; }
  body.skin-ranks .sticky-cta .sticky-close { grid-area: close; align-self: start; }
  body.skin-ranks .sticky-cta .sticky-terms { grid-area: terms; flex-basis: auto; order: 0; min-width: 0; }
  body.skin-ranks .sticky-cta .button-primary { grid-area: claim; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) { body.skin-ranks .sticky-cta:not([hidden]) { animation-duration: 300ms; } }

/* Author box = the network author box in the Ranks AuthorBio style (cyan left rule, 64px photo) */
body.skin-ranks .author-box { margin-top: 32px; background: var(--pr-card); border: 1px solid var(--pr-line); border-left: 4px solid var(--pr-cyan); border-radius: var(--pr-r); box-shadow: var(--pr-glow-sm); padding: 24px; color: var(--pr-muted); font-size: 14px; }
body.skin-ranks .author-box .avatar-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid rgb(0 212 255 / .4); box-shadow: var(--pr-glow-sm); flex: none; }
@media (max-width: 639px) { body.skin-ranks .author-box .avatar-lg { width: 56px; height: 56px; } }
body.skin-ranks .author-name { font-family: var(--pr-display); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
body.skin-ranks .author-name a { color: var(--pr-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
body.skin-ranks .byline .avatar { border: 1px solid rgb(0 212 255 / .4); }
body.skin-ranks .share a, body.skin-ranks .share button { min-height: 44px; }

/* Footer: card/30 band, 14px links (44px rows on phones), helpline amber 12px, RG + operator lines 12px */
body.skin-ranks .site-footer { margin-top: 96px; background: rgb(19 19 27 / .3); border-top: 1px solid rgb(39 39 53 / .6); color: var(--pr-muted); font-size: 14px; }
body.skin-ranks .site-footer .brand-name { font-family: var(--pr-display); font-size: 20px; font-weight: 700; letter-spacing: var(--pr-track); color: var(--pr-text); }
body.skin-ranks .footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pr-muted); text-decoration: none; font-size: 14px; }
body.skin-ranks .footer-links a:hover { color: var(--pr-cyan); }
@media (min-width: 1024px) { body.skin-ranks .footer-links a { min-height: 32px; } body.skin-ranks .footer-links { display: block; columns: 3; column-gap: 32px; } body.skin-ranks .footer-links li { break-inside: avoid; } }
body.skin-ranks .rg-notice { font-size: 12px; color: var(--pr-amber); opacity: 1; }
body.skin-ranks .footer-bottom, body.skin-ranks .footer-bottom p { font-size: 12px; color: var(--pr-muted); }
body.skin-ranks .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Home page ---------------------------------------------------------------------------------------------- */
body.skin-ranks.t-home main { overflow-x: clip; }
body.skin-ranks.home-showcase .page-updated { display: none; } /* the same date is in the trust bar (Last updated) */
.pr-sec { position: relative; padding-top: 64px; }
@media (min-width: 768px) { .pr-sec { padding-top: 80px; } }
.pr-sec-head { margin-bottom: 32px; }
.pr-sec-head--center { text-align: center; max-width: 672px; margin-inline: auto; margin-bottom: 40px; }
.pr-platforms .pr-sec-head--center { max-width: 820px; margin-bottom: 24px; }
@media (min-width: 768px) { .pr-sec.pr-platforms { padding-top: 32px; } .pr-platforms .pr-sec-head--center { margin-bottom: 20px; } }
.pr-sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.pr-h2 { margin: 0; font-family: var(--pr-display); font-size: var(--pr-h2); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--pr-text); }
.pr-h2--sm { font-size: clamp(24px, 2.6vw, 30px); }
.pr-h3 { margin: 0; font-family: var(--pr-display); font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--pr-text); }
.pr-h3--sm { font-size: 16px; }
.pr-intro { margin-top: 12px; color: var(--pr-muted); font-size: 16px; line-height: 1.6; }
.pr-intro p { margin: 0 0 8px; }
.pr-intro a, .pr-prose a { color: var(--pr-cyan); text-decoration-color: rgb(0 212 255 / .45); text-underline-offset: 3px; }
.pr-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
.pr-eyebrow .pr-icon { width: 14px; height: 14px; }
.pr-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--pr-muted); } /* R1 + R3: 12px, muted (7.8:1) */
.pr-terms-link { color: var(--pr-cyan) !important; text-decoration: underline; text-decoration-color: rgb(0 212 255 / .45); text-underline-offset: 2px; position: relative; z-index: 2; }
.pr-more { margin: 0; }
.pr-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pr-cyan); font-size: 14px; font-weight: 500; text-decoration: none; }
.pr-more a:hover { text-decoration: underline; }
.pr-more--center { text-align: center; margin-top: 24px; }
.pr-grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-grid > li { min-width: 0; display: flex; }
.pr-grid > li > * { flex: 1; }
.pr-grid > li.pr-card { display: block; }
.pr-card { position: relative; display: block; background: var(--pr-card); border: 1px solid var(--pr-ring); border-radius: var(--pr-r); box-shadow: var(--pr-card-shadow); padding: 24px;
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
.pr-card:hover, .pr-card:focus-within { transform: translateY(-4px); box-shadow: var(--pr-glow); border-color: var(--pr-ring-hover); }
.pr-card-text { margin: 8px 0 0; font-size: 14px; line-height: 1.625; color: var(--pr-muted); }
.pr-stretch { text-decoration: none; }
.pr-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pr-r); }
.pr-stretch:hover { color: var(--pr-cyan); }
.pr-cat { margin: 0 0 6px; font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-cyan); }
.pr-card-go { display: inline-flex; align-items: center; gap: 6px; margin: 20px 0 0; font-size: 14px; font-weight: 500; color: var(--pr-cyan); }
.pr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; border: 1px solid; }
.pr-chip--cftc { border-color: rgb(0 212 255 / .4); background: rgb(0 212 255 / .1); color: var(--pr-cyan); }
.pr-chip--sweeps { border-color: rgb(245 158 11 / .4); background: rgb(245 158 11 / .1); color: var(--pr-amber); }
.pr-chip--amber { border-color: rgb(245 158 11 / .4); background: rgb(245 158 11 / .1); color: var(--pr-amber); }
.pr-chip--state { border-color: rgb(52 211 153 / .4); background: rgb(52 211 153 / .1); color: #6ee7b7; }
.pr-icon { flex: none; }

/* 1. Hero */
.pr-hero { position: relative; isolation: isolate; overflow: hidden; padding: 32px 0 40px; text-align: center; }
@media (min-width: 768px) { .pr-hero { padding: 40px 0 24px; } } /* first screen at 1280x800: h1, both buttons and the top of the platform grid (spec acceptance 1) */
.pr-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, rgb(0 212 255 / .12) 0%, rgb(153 71 235 / .10) 50%, rgb(0 212 255 / .12) 100%); background-size: 200% 200%; background-position: 0% 50%; }
.pr-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; }
@media (min-width: 1024px) { .pr-particles { display: block; } } /* R13: desktop only, 12 at most */
.pr-particles span { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--pr-cyan); box-shadow: 0 0 8px rgb(0 212 255 / .8); opacity: 0; }
.pr-hero-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.pr-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--pr-outline); background: rgb(0 212 255 / .05); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--pr-cyan); }
.pr-pill--amber { border-color: rgb(245 158 11 / .5); background: rgb(245 158 11 / .1); color: var(--pr-amber); margin-bottom: 12px; }
.pr-live { width: 6px; height: 6px; border-radius: 50%; background: var(--pr-neon); flex: none; }
.pr-h1 { margin: 16px 0 0; max-width: 896px; font-family: var(--pr-display); font-size: var(--pr-h1); line-height: 1.08; font-weight: 700; letter-spacing: var(--pr-track); color: var(--pr-text); text-wrap: balance; }
@media (max-width: 400px) { .pr-h1 { font-size: 34px; } }
.pr-glow { color: var(--pr-cyan); text-shadow: var(--pr-glow-text); }
.pr-w { display: inline-block; }
.pr-sub { margin: 16px 0 0; max-width: 672px; font-size: 16px; line-height: 1.5; color: var(--pr-muted); }
@media (min-width: 768px) { .pr-sub { margin-top: 16px; font-size: 18px; line-height: 1.5; } .pr-cta { margin-top: 20px; } .pr-offer-line { margin-top: 10px; } }
.pr-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; width: 100%; }
@media (max-width: 639px) { .pr-cta .pr-btn { width: 100%; } .pr-cta { gap: 10px; margin-top: 20px; } }
.pr-textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 14px; font-weight: 500; color: var(--pr-muted); text-decoration: underline; text-decoration-color: rgb(157 163 175 / .5); text-underline-offset: 3px; }
.pr-textlink:hover { color: var(--pr-cyan); }
.pr-offer-line { order: 0; margin: 12px 0 0; max-width: 640px; font-size: 13px; line-height: 1.5; color: var(--pr-muted); }
.pr-offer-line strong { color: var(--pr-text); }
@media (max-width: 639px) {
  /* phones: the offer line sits right under the main button (first screen, spec acceptance 1) */
  .pr-hero-in { display: grid; justify-items: center; }
  .pr-cta { display: contents; }
  .pr-btn--hero { order: 1; margin-top: 20px; }
  .pr-offer-line { order: 2; margin-top: 8px; }
  .pr-cta .pr-btn--outline { order: 3; margin-top: 12px; }
  .pr-cta .pr-textlink { order: 4; margin-top: 4px; }
}

/* 2. Ticker (feed only) */
.pr-ticker { position: relative; overflow: hidden; border-block: 1px solid rgb(0 212 255 / .2); background: rgb(19 19 27 / .4); }
.pr-ticker::before, .pr-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 1; pointer-events: none; }
.pr-ticker::before { left: 0; background: linear-gradient(90deg, var(--pr-bg), transparent); }
.pr-ticker::after { right: 0; background: linear-gradient(-90deg, var(--pr-bg), transparent); }
.pr-ticker-run { display: flex; width: max-content; }
.pr-ticker ul { display: flex; margin: 0; padding: 0; list-style: none; }
.pr-ticker li > a, .pr-ticker li > span { display: flex; align-items: center; gap: 10px; padding: 12px 32px; white-space: nowrap; font-size: 14px; text-decoration: none; }
.pr-ticker .pr-icon { width: 14px; height: 14px; color: var(--pr-neon); }
.pr-tk-src { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--pr-muted); }
.pr-tk-q { color: var(--pr-cyan); font-weight: 500; }
.pr-tk-label { color: var(--pr-text); }
.pr-tk-pct { color: var(--pr-neon); font-weight: 700; }
.pr-ticker:hover .pr-ticker-run, .pr-ticker:focus-within .pr-ticker-run, .pr-ticker:focus .pr-ticker-run { animation-play-state: paused; }

/* 3. Ranked platform cards (spec 5.1) */
.pr-rank { display: flex; flex-direction: column; height: 100%; }
.pr-rank.has-ribbon { margin-top: 12px; padding-top: 28px; }
.pr-ribbon { position: absolute; top: -13px; left: 24px; z-index: 2; margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--pr-cyan); color: var(--pr-on-cyan); font-size: 12px; font-weight: 600; line-height: 1.6; box-shadow: var(--pr-glow-sm); max-width: calc(100% - 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rank > .pr-chip { position: absolute; top: 16px; right: 16px; }
.pr-rank.has-ribbon > .pr-chip { top: 20px; }
.pr-rank-head { display: flex; align-items: center; gap: 16px; padding-right: 92px; }
.pr-tile { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--pr-r); background: rgb(0 212 255 / .1); border: 1px solid rgb(0 212 255 / .3); font-family: var(--pr-display); font-size: 20px; font-weight: 700; color: var(--pr-cyan); }
.pr-rank-id { min-width: 0; }
.pr-rank-name { margin: 0; font-family: var(--pr-display); font-size: 18px; font-weight: 700; line-height: 1.3; }
.pr-rank-name a { color: var(--pr-text); }
.pr-rank:hover .pr-rank-name a { color: var(--pr-cyan); }
.pr-rank-no { font-size: 12px; font-weight: 500; color: var(--pr-muted); font-family: var(--pr-sans); }
.pr-stars { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--pr-muted); }
.pr-stars-row { display: inline-flex; gap: 2px; }
.pr-stars svg { fill: var(--pr-cyan); }
.pr-stars svg.is-off { fill: var(--pr-star-off); }
.pr-rating { font-variant-numeric: tabular-nums; }
.pr-verdict { margin: 16px 0 0; font-size: 14px; line-height: 1.625; color: var(--pr-muted); }
/* d80 groups ("Platforms we partner with" / "Other platforms we reviewed"): each heading sits above its own grid */
.pr-group-h { margin: 40px 0 16px; font-family: var(--pr-display); font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--pr-text); }
.pr-platforms .pr-sec-head + .pr-group-h, .pr-platforms .pr-offer-disclosure + .pr-group-h { margin-top: 8px; }
.pr-tagline { margin: 12px 0 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--pr-cyan); }
.pr-strengths { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: rgb(243 245 247 / .9); }
.pr-strengths li { position: relative; padding-left: 20px; }
.pr-strengths li::before { content: "✦"; position: absolute; left: 0; color: var(--pr-cyan); }
.pr-card-cta { position: relative; z-index: 2; margin-top: auto; padding-top: 20px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.pr-card-offer { margin-top: 2px; }
.pr-readlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 12px; color: var(--pr-muted); text-decoration: none; }
.pr-readlink .pr-arrow { width: 12px; height: 12px; }
.pr-readlink:hover { color: var(--pr-cyan); }

/* 4. Offer panels (spec 5.3) */
.pr-panel-wrap { padding-top: 40px; }
.pr-panel { position: relative; display: grid; overflow: hidden; border-radius: var(--pr-r-panel); border: 1px solid rgb(0 212 255 / .4); background: linear-gradient(135deg, rgb(0 212 255 / .1), rgb(0 212 255 / .05) 50%, transparent), var(--pr-bg); box-shadow: var(--pr-glow-sm); }
@media (min-width: 768px) { .pr-panel { grid-template-columns: 1fr 1fr; } .pr-panel-art { order: 2; } }
.pr-panel-art { display: flex; align-items: center; overflow: hidden; background: #000; }
.pr-panel-art img { display: block; width: 100%; height: auto; transition: transform 500ms; } /* the partner's creative is never cropped */
.pr-panel:hover .pr-panel-art img { transform: scale(1.02); }
.pr-panel-text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px; }
@media (min-width: 768px) { .pr-panel-text { padding: 32px; } }
@media (min-width: 1024px) { .pr-panel-text { padding: 40px; } }
.pr-panel-title { margin: 0; font-family: var(--pr-display); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.pr-panel-copy { margin: 0; color: var(--pr-muted); font-size: 15px; line-height: 1.6; }
@media (min-width: 768px) { .pr-panel-copy { font-size: 16px; } }
.pr-panel-offer { margin: 0; font-size: 14px; color: var(--pr-text); }
.pr-codebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px dashed rgb(0 212 255 / .5); border-radius: var(--pr-r-btn); background: rgb(10 10 15 / .5); }
.pr-codebox-label { font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-muted); }
.pr-codebox .pr-code { font-size: 15px; padding: 4px 10px; }
.pr-codebox .pr-copy { margin-left: auto; }
@media (max-width: 419px) { .pr-codebox-label { display: none; } }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pr-panel-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pr-disclaimer { margin-top: 4px; }

/* 5. Promo-code tiles: 56px rows (spec block 5) */
.pr-grid--codes { gap: 12px; }
@media (min-width: 640px) { .pr-grid--codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pr-grid--codes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-codetile { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 10px 16px; text-decoration: none; font-size: 14px; }
.pr-codetile-name { font-weight: 600; color: var(--pr-text); }
.pr-codetile-offer { grid-column: 1; font-size: 13px; color: var(--pr-muted); }
.pr-codetile .pr-arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--pr-cyan); }
.pr-codetile--all .pr-codetile-name { color: var(--pr-cyan); }
.pr-codetile:hover .pr-codetile-name { color: var(--pr-cyan); }
.pr-gridnote { margin-top: 12px; }

/* 6. Comparison teaser */
.pr-teaser { overflow: hidden; padding: 32px 24px; text-align: center; }
@media (min-width: 768px) { .pr-teaser { padding: 48px; } }
.pr-teaser::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgb(0 212 255 / .15), transparent 60%); opacity: .4; pointer-events: none; }
.pr-teaser:hover { transform: none; }
.pr-teaser > * { position: relative; }
.pr-teaser-icon { display: inline-flex; color: var(--pr-cyan); margin-bottom: 12px; }
.pr-teaser-icon .pr-icon { width: 40px; height: 40px; }
.pr-teaser .pr-intro { max-width: 576px; margin-inline: auto; }
.pr-teaser-act { margin: 24px 0 0; }

/* 7. How it works */
.pr-step { text-align: center; }
.pr-step-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--pr-r); background: rgb(0 212 255 / .1); border: 1px solid rgb(0 212 255 / .3); color: var(--pr-cyan); margin-bottom: 12px; }
.pr-step-no { margin: 0 0 4px; font-family: var(--pr-display); font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--pr-cyan); }

/* 8. Featured guides, 9. blog, 11. news */
.pr-guide { display: flex; flex-direction: column; padding-top: 28px; }
.pr-guide > .pr-chip { position: absolute; top: 16px; right: 16px; }
.pr-guide:hover { border-color: rgb(245 158 11 / .4); }
.pr-guide .pr-cat { padding-right: 96px; }
.pr-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pr-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgb(39 39 53 / .7); font-size: 12px; color: var(--pr-muted); }
.pr-guide .pr-card-text { margin-bottom: 20px; }
.pr-card-foot .pr-card-go { margin: 0; font-size: 12px; }
.pr-post { display: flex; flex-direction: column; }
.pr-post .pr-card-go { margin-top: auto; padding-top: 24px; }
.pr-news { padding: 20px; }

/* 10. Network links + FAQ */
.pr-text { max-width: 768px; }
.pr-text .pr-intro { font-size: 16px; }
.pr-faq { max-width: 768px; }
.pr-faq-list { display: grid; gap: 16px; }
.pr-faq-item { padding: 0; }
.pr-faq-item:hover { transform: none; }
.pr-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; cursor: pointer; list-style: none; font-family: var(--pr-display); font-size: 16px; font-weight: 600; color: var(--pr-text); }
@media (min-width: 768px) { .pr-faq-item summary { font-size: 18px; } }
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-plus { position: relative; flex: none; width: 16px; height: 16px; color: var(--pr-cyan); transition: transform var(--pr-fast); }
.pr-plus::before, .pr-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 1px; }
.pr-plus::after { transform: rotate(90deg); }
.pr-faq-item[open] .pr-plus { transform: rotate(45deg); }
.pr-faq-answer { padding: 0 20px 20px; font-size: 14px; line-height: 1.65; color: var(--pr-muted); }
.pr-faq-answer a { color: var(--pr-cyan); }
.pr-faq-answer p { margin: 0 0 8px; }

/* 11. Latest updates + trust bar (R6: facts from the CMS only) */
.pr-band { margin-top: 80px; border-top: 1px solid rgb(0 212 255 / .15); background: rgb(19 19 27 / .3); padding-bottom: 32px; }
.pr-band > .pr-sec { padding-top: 48px; }
.pr-trust { display: grid; grid-template-columns: 1fr; gap: 12px 24px; margin: 32px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid rgb(39 39 53 / .6); font-size: 14px; color: var(--pr-text); }
@media (min-width: 640px) { .pr-trust { grid-template-columns: repeat(3, auto); justify-content: center; } }
.pr-trust li { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pr-trust .pr-icon { width: 16px; height: 16px; color: var(--pr-neon); }
.pr-trust a { color: var(--pr-text); text-decoration: underline; text-decoration-color: rgb(0 212 255 / .45); text-underline-offset: 3px; }

/* CMS article lists under the designed blocks, in glow cards */
body.skin-ranks .section-title { color: var(--pr-text); text-transform: none; letter-spacing: -.02em; }
body.skin-ranks.home-showcase .card--lead .card-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
body.skin-ranks.home-showcase .home-top, body.skin-ranks.home-showcase main > .section { padding-top: 48px; }
body.skin-ranks.home-showcase .home-top .card, body.skin-ranks.home-showcase main > .section .card { background: var(--pr-card); border: 1px solid var(--pr-ring); border-radius: var(--pr-r); box-shadow: var(--pr-card-shadow); padding: 12px; transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
body.skin-ranks.home-showcase .home-top .card:hover, body.skin-ranks.home-showcase main > .section .card:hover { transform: translateY(-4px); box-shadow: var(--pr-glow); border-color: var(--pr-ring-hover); }
body.skin-ranks.home-showcase .card-body { padding: 0 4px 4px; }

/* Offer terms at the end of the home page */
.pr-terms { padding-top: 48px; }
.pr-terms-card:hover { transform: none; }
.pr-terms-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 13px; color: var(--pr-text); }
.pr-terms-list li { scroll-margin-top: 96px; }
.pr-terms-list li:target { outline: 1px solid var(--pr-outline); outline-offset: 6px; border-radius: 6px; }
.pr-terms-list .pr-fine { display: inline-block; margin-top: 4px; }
.pr-helpline { margin: 16px 0 0; font-size: 12px; color: var(--pr-amber); }

/* ---- Motion (spec motion table); everything stops under "reduce motion" ---------------------------------------- */
/* cursor spotlight (desktop, site.js adds .pr-cursor) */
.pr-cursor { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(200px circle at var(--mx, -400px) var(--my, -400px), rgb(0 212 255 / .05), transparent 70%); transition: background-position 100ms; }
@media (prefers-reduced-motion: no-preference) {
  .pr-hero-bg { animation: pr-sweep 8s ease-in-out infinite; }
  .pr-particles span { animation: pr-rise var(--d) linear var(--t) infinite; }
  .pr-live { animation: pr-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
  /* motion audit #4/#6: hero pill, subtitle and buttons rise in (the offer line and commission note stay still) */
  .js .pr-hero-in > .pr-pill { animation: pr-up10 .5s ease-out both; }
  .js .pr-hero-in > .pr-sub { animation: pr-up10 .5s ease-out .6s both; }
  .js .pr-cta > * { animation: pr-up10 .5s ease-out .75s both; }
  .pr-ticker-run { animation: pr-marquee 35s linear infinite; }
  .js .pr-w { animation: pr-word .5s var(--pr-ease) both; animation-delay: calc(.15s + var(--i) * .08s); }
  .js [data-reveal].will-reveal > * { transition: opacity .5s var(--pr-ease), transform .5s var(--pr-ease); }
  .js [data-reveal].will-reveal:not(.is-in) > * { opacity: 0; transform: translateY(20px); }
  .js [data-reveal].is-in > :nth-child(2) { transition-delay: .1s; } .js [data-reveal].is-in > :nth-child(3) { transition-delay: .2s; }
  .js [data-reveal].is-in > :nth-child(4) { transition-delay: .3s; } .js [data-reveal].is-in > :nth-child(5) { transition-delay: .4s; }
  .js [data-reveal].is-in > :nth-child(n+6) { transition-delay: .5s; }
  .js .pr-bars.will-reveal:not(.is-in) .pr-bar-fill { width: 0; }
  .js .pr-score-total.will-reveal:not(.is-in) .pr-ring-arc { stroke-dashoffset: var(--c); }
  .pr-hero[data-motion].is-offscreen .pr-hero-bg, .pr-hero[data-motion].is-offscreen .pr-particles span { animation-play-state: paused; }
}
@keyframes pr-sweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pr-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .4; } 85% { opacity: .4; } 100% { transform: translateY(-110vh); opacity: 0; } }
@keyframes pr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes pr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pr-up10 { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pr-word { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* R8: reduce motion stops everything and hides nothing */
@media (prefers-reduced-motion: reduce) {
  body.skin-ranks *, body.skin-ranks *::before, body.skin-ranks *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pr-particles, .pr-cursor { display: none !important; }
  .js [data-reveal] > * { opacity: 1 !important; transform: none !important; }
  .pr-card:hover, .pr-card:focus-within { transform: none; }
  .pr-ticker { overflow-x: auto; }
}

/* Review side column: the partner's offer card (ranks-sidebar.php), sticky on wide screens */
.pr-side-offer { display: grid; gap: 10px; margin-bottom: 20px; padding: 24px; background: var(--pr-card); border: 1px solid rgb(0 212 255 / .4); border-radius: var(--pr-r); box-shadow: var(--pr-glow-sm); }
.pr-side-offer-text { margin: 0; font-family: var(--pr-display); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--pr-text); }
@media (min-width: 1024px) { body.skin-ranks .article-sidebar:has(.pr-side-offer) { align-self: start; position: sticky; top: 96px; } }

/* BD-057: commission note from the affiliate_disclosure setting, under the hero offer line and once above the platform grid. 15px, --pr-muted on --pr-bg (7.8:1). Own class: .pr-disclosure is the site-wide top bar (ranks-before.php). */
.pr-offer-disclosure { margin: 6px auto 0; max-width: 640px; font-size: 15px; line-height: 1.4; color: var(--pr-muted); text-align: center; }
.pr-offer-disclosure--list { margin: -12px auto 16px; }
@media (max-width: 639px) { .pr-hero .pr-offer-disclosure { order: 2; } }

/* C19 (Brand 24 Oct): on phones the see-through header keeps its blur at 90% opacity at least */
@media (max-width: 767px) {
  body.skin-ranks .site-header.is-scrolled { background: rgb(10 10 15 / .9); }
}

/* BD-068: the "Live Markets" dot pulses twice (4 s) and then rests (WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) { .pr-live { animation-iteration-count: 2; } }

/* P3 (Brand 26 Oct): the focused skip link is dark text on the cyan brand colour (white was 1.77:1) */
body.skin-ranks .skip, body.skin-ranks .skip:focus { color: var(--pr-bg); }

/* WCAG 2.2.2 (Brand 27 Oct): the hero sweep makes one pass (4.8 s) and rests where it started; the desktop particles
   rise from load and stand still from 5 s (site.js .motion-rested); without script they don't move at all */
@media (prefers-reduced-motion: no-preference) {
  .pr-hero-bg { animation-duration: 4.8s; animation-iteration-count: 1; }
  html:not(.js) .pr-particles span { animation: none; }
  .motion-rested .pr-particles span { animation-play-state: paused; }
}