.intro-ranking{padding:20px 22px;min-width:0;overflow:visible}
.intro-ranking .intro-rank{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:10px 6px;border:0;border-bottom:1px solid #edf2ef;border-radius:6px;background:#fff;text-align:left;color:#456455;font:14px/1.8 system-ui;cursor:pointer;transition:background-color .18s ease}
.intro-ranking .intro-rank>b{width:24px;flex:none;font-size:13px;color:#83998b}
.intro-ranking .intro-rank:nth-child(-n+3)>b{color:#cf8e28}
.intro-ranking .intro-rank-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intro-ranking .intro-rank:hover,.intro-ranking .intro-rank:focus-visible{background:#F8FCFA}
.intro-ranking .intro-rank:focus-visible{outline:2px solid #05CCB0;outline-offset:2px}
.intro-ranking .intro-rank-preview{display:none;position:absolute;bottom:100%;left:0;width:min(360px,100%);max-height:200px;overflow-y:auto;z-index:975;white-space:pre-line;overflow-wrap:anywhere;padding:12px 16px;background:#E2F8F1;color:#355B4E;border:1px solid #CDEBDF;border-radius:10px;box-shadow:0 6px 18px #264c3d18;font-size:13px;font-weight:400;text-align:left;line-height:1.8}
.intro-ranking .intro-rank:hover .intro-rank-preview,.intro-ranking .intro-rank:focus-visible .intro-rank-preview{display:block}
@media(max-width:768px){.intro-ranking{padding:18px}.intro-ranking .intro-rank{min-height:44px}.intro-ranking .intro-rank-preview{max-height:160px}}
/* Public ranking introduction: consistent page heading and per-board membership entry. */
.ranking-intro-page .intro-hero{padding:24px 28px;margin-bottom:16px;border-radius:14px;background:linear-gradient(110deg,#e2f8f1,#f8fcfa);border-color:#d5eee5}
.ranking-intro-page .intro-hero h1{font-size:26px;margin:0 0 8px;color:#35564a}
.ranking-intro-page .intro-hero p{margin:0;font-size:16px;line-height:1.8;color:#5c7969;max-width:none}
.ranking-intro-page .intro-ranking{display:flex;flex-direction:column}
.ranking-intro-page .intro-ranking>div[aria-live]{flex:1}
.ranking-intro-page .ranking-membership{padding-top:16px;margin-top:14px;border-top:1px solid #edf2ef;text-align:center}
.ranking-intro-page .ranking-membership .btn{margin:0;background:#F8FCFA;border-color:#d8e9df;color:#348c70;font-size:13px;padding:9px 16px}
.ranking-intro-page .ranking-membership .btn:hover{background:#E2F8F1;border-color:#b5dac7;color:#217257}
@media(max-width:768px){.ranking-intro-page .intro-hero{padding:20px}.ranking-intro-page .intro-hero h1{font-size:23px}.ranking-intro-page .ranking-membership .btn{min-height:42px}}
/* Match the swapped header membership treatment. */
.ranking-intro-page .ranking-membership .btn{background:#3288B3;border:1px solid #3288B3;color:#fff;box-shadow:0 3px 8px #3288b318}
.ranking-intro-page .ranking-membership .btn:hover{background:#287497;border-color:#287497;color:#fff;box-shadow:0 5px 12px #28749722}
.ranking-intro-page .ranking-membership .btn:active{background:#21617E;border-color:#21617E}
.ranking-intro-page .ranking-membership .btn:focus-visible{outline:2px solid #287497;outline-offset:3px}
.ranking-intro-page .ranking-membership{border-top:0}
.intro-ranking .intro-rank-preview{width:100%;max-width:none;box-sizing:border-box}