/**
 * The ranking explainer.
 *
 * Its own stylesheet, loaded only when the plugin answers `registry_ranking`.
 * Deliberately quiet: this page is answering a suspicion, and a page that shouts
 * while explaining that nothing is for sale reads like a sales page.
 */
.rg-rank .rk-narrow{max-width:820px}

.rg-rank .rk-hero{padding:46px 0 30px;text-align:center}
.rg-rank .rk-eyebrow{margin:0 0 9px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
   text-transform:uppercase;color:var(--brand,#1d4ed8)}
.rg-rank .rk-hero h1{margin:0 0 12px;font-size:clamp(28px,4.6vw,42px);line-height:1.12;letter-spacing:-.022em}
.rg-rank .rk-lede{margin:0 auto;max-width:60ch;font-size:17px;line-height:1.62;color:var(--muted,#7e939b)}

.rg-rank .rk-band{padding:38px 0}
.rg-rank .rk-band--tint{background:var(--wash,#f4f6f8)}
.rg-rank .rk-band h2{margin:0 0 10px;font-size:clamp(21px,2.8vw,27px);letter-spacing:-.015em}
.rg-rank .rk-body{margin:0 0 22px;font-size:16px;line-height:1.62;color:var(--muted,#7e939b);max-width:62ch}

/* ── how we verify ── two routes, and only one of them is instant ── */
.rg-rank .rk-ways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.rg-rank .rk-ways{grid-template-columns:1fr}}
.rg-rank .rk-way{background:#fff;border:1px solid var(--line);border-radius:var(--r12,14px);padding:20px}
.rg-rank .rk-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
   text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#e8f3ec;color:#1f6b3f}
.rg-rank .rk-way:last-child .rk-tag{background:#fdf6e7;color:var(--warn)}
.rg-rank .rk-way h3{margin:11px 0 8px;font-size:16.5px;letter-spacing:-.01em}
.rg-rank .rk-eg{display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:var(--r8);
   background:var(--wash,#f4f6f8);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.rg-rank .rk-way p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted,#7e939b)}

/* ── the score ────────────────────────────────────────────────────────────────
   ONE COLUMN OF TEN POINTS, SPLIT SIX WAYS. A row of separate bars invites the
   reader to compare each factor against an invisible maximum; a single stack
   says the true thing — this is the whole score and these are its parts.
   Hovering either half lights the other, so colour is never the only link. ═ */
/* ⚠️ ONE HUE, SIX SHADES. This was six different colours — teal, olive, amber,
   purple — which read as a category chart, as though the factors were unrelated
   kinds of thing. They are six parts of one number. A single ramp says that, and
   it runs darkest at the top where the heaviest factor sits, so the column reads
   as weight without anybody consulting the legend. */
.rg-rank{
  --rk-activity:     #12307f;
  --rk-work_shown:   #1d4ed8;
  --rk-reputation:   #2f6fe0;
  --rk-track_record: #4b8ce8;
  --rk-depth:        #79adf0;
  --rk-engaged:      #a9ccf7;
}
.rg-rank .rk-scale{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:stretch;margin:0 0 22px}
@media(max-width:620px){.rg-rank .rk-scale{grid-template-columns:34px 1fr;gap:15px}}

.rg-rank .rk-stack{display:flex;flex-direction:column;border-radius:var(--r12,14px);overflow:hidden;
   min-height:330px;box-shadow:var(--shadow)}
.rg-rank .rk-seg{display:block;flex-grow:0;flex-shrink:0;transition:opacity .16s,transform .16s;
   transform-origin:left center}
.rg-rank .rk-seg--activity{background:var(--rk-activity)}
.rg-rank .rk-seg--work_shown{background:var(--rk-work_shown)}
.rg-rank .rk-seg--reputation{background:var(--rk-reputation)}
.rg-rank .rk-seg--track_record{background:var(--rk-track_record)}
.rg-rank .rk-seg--depth{background:var(--rk-depth)}
.rg-rank .rk-seg--engaged{background:var(--rk-engaged)}

.rg-rank .rk-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rg-rank .rk-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r8);
   transition:background .16s,opacity .16s;cursor:default}
.rg-rank .rk-row:hover{background:#fff}
.rg-rank .rk-swatch{flex:0 0 11px;width:11px;height:11px;margin-top:6px;border-radius:3px}
.rg-rank .rk-row--activity     .rk-swatch{background:var(--rk-activity)}
.rg-rank .rk-row--work_shown   .rk-swatch{background:var(--rk-work_shown)}
.rg-rank .rk-row--reputation   .rk-swatch{background:var(--rk-reputation)}
.rg-rank .rk-row--track_record .rk-swatch{background:var(--rk-track_record)}
.rg-rank .rk-row--depth        .rk-swatch{background:var(--rk-depth)}
.rg-rank .rk-row--engaged      .rk-swatch{background:var(--rk-engaged)}
.rg-rank .rk-rtext{min-width:0}
.rg-rank .rk-rtext b{font-size:15.5px;letter-spacing:-.01em}
.rg-rank .rk-fw{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--muted,#7e939b);white-space:nowrap}
.rg-rank .rk-rtext p{margin:4px 0 0;font-size:13.8px;line-height:1.55;color:var(--muted,#7e939b)}

/* Hovering one part quiets the rest. `dim` sits on the container so both halves
   fade together and the highlighted pair is the only thing at full strength. */
.rg-rank .rk-scale.dim .rk-seg{opacity:.28}
.rg-rank .rk-scale.dim .rk-seg.lit{opacity:1;transform:scaleX(1.16)}
.rg-rank .rk-scale.dim .rk-row{opacity:.42}
.rg-rank .rk-scale.dim .rk-row.lit{opacity:1;background:#fff}

.rg-rank .rk-note{margin:0 0 24px;font-size:14px;line-height:1.6;color:var(--muted,#7e939b);
   border-left:3px solid var(--line);padding-left:14px;max-width:64ch}

.rg-rank .rk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.rg-rank .rk-grid{grid-template-columns:1fr}}
.rg-rank .rk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r12,14px);padding:18px}
.rg-rank .rk-card h3{margin:0 0 7px;font-size:15.5px;letter-spacing:-.01em}
.rg-rank .rk-card p{margin:0;font-size:14px;line-height:1.6;color:var(--muted,#7e939b)}

/* ── who gets in touch ── */
.rg-rank .rk-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px;counter-reset:s}
.rg-rank .rk-steps li{display:flex;gap:15px;align-items:flex-start}
.rg-rank .rk-num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--brand,#1d4ed8);color:#fff;
   font-size:14px;font-weight:700;display:grid;place-items:center}
.rg-rank .rk-steps h3{margin:3px 0 5px;font-size:16px;letter-spacing:-.01em}
.rg-rank .rk-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted,#7e939b)}
.rg-rank .rk-aside{margin:0 0 24px;font-size:14px;line-height:1.6;color:var(--muted,#7e939b);
   background:var(--wash,#f4f6f8);border-radius:var(--r8);padding:13px 16px}

/* The paid disclosure. One sentence — the rest of the pricing story lives on the
   builders' page — but it is set apart, because it is the thing being disclosed. */
.rg-rank .rk-line{margin:0;font-size:16.5px;font-weight:600;color:var(--bd);line-height:1.5;
   border-left:3px solid var(--brand,#1d4ed8);padding-left:14px;max-width:62ch}

/* ── the promises ── */
.rg-rank .rk-promises{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rg-rank .rk-promises li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.58}
.rg-rank .rk-promises svg{flex:0 0 auto;margin-top:3px;color:#1f6b3f}

/* ── questions ── */
.rg-rank .rk-faq details{border-bottom:1px solid var(--line)}
.rg-rank .rk-faq summary{cursor:pointer;padding:15px 0;font-size:16px;font-weight:600;letter-spacing:-.01em;
   list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.rg-rank .rk-faq summary::-webkit-details-marker{display:none}
.rg-rank .rk-faq summary::after{content:"+";font-size:19px;font-weight:400;color:var(--muted,#7e939b)}
.rg-rank .rk-faq details[open] summary::after{content:"–"}
.rg-rank .rk-faq p{margin:0 0 17px;font-size:14.8px;line-height:1.65;color:var(--muted,#7e939b);max-width:66ch}

.rg-rank .rk-cta{padding:34px 0 56px;text-align:center}
.rg-rank .rk-cta h2{margin:0 0 9px}
.rg-rank .rk-cta p{margin:0 0 16px;font-size:16px;color:var(--muted,#7e939b)}