:root {
  --green-deep:  oklch(0.26 0.10 155);
  --green-mid:   oklch(0.34 0.13 155);
  --green-field: oklch(0.45 0.15 155);
  --coral:       oklch(0.70 0.16 40);
  --coral-hover: oklch(0.65 0.18 40);
  --white:       #fff;
  --white-70:    rgba(255,255,255,0.72);
  --white-40:    rgba(255,255,255,0.4);
  --white-12:    rgba(255,255,255,0.12);
  --font: 'Manrope', -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font);
  background: var(--green-deep); color: var(--white);
  line-height: 1.62; -webkit-font-smoothing: antialiased;
}
main { max-width: 720px; margin: 0 auto; padding: 32px 22px 72px; }
.home { color: var(--coral); font-weight: 700; text-decoration: none; font-size: 15px; }
.home:hover { text-decoration: underline; }
h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; margin: 26px 0 18px; }
h2 { font-size: clamp(20px, 4vw, 25px); font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; }
p { color: var(--white-70); font-size: 17px; margin: 0 0 16px; }
p strong, li strong { color: var(--white); font-weight: 700; }
.lede { font-size: 19px; color: rgba(255,255,255,0.86); }
ul, ol { color: var(--white-70); font-size: 17px; padding-left: 22px; margin: 0 0 18px; }
li { margin: 0 0 10px; }
ol.ladder { counter-reset: rung; list-style: none; padding-left: 0; }
ol.ladder li { position: relative; padding: 12px 14px 12px 52px; margin-bottom: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--white-12); border-radius: 12px; }
ol.ladder li::before { counter-increment: rung; content: counter(rung); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 8px; background: var(--coral); color: var(--green-deep); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--white-12); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--white-12); vertical-align: top; }
thead th { background: rgba(255,255,255,0.06); font-weight: 700; color: var(--white); }
tbody td:first-child { font-weight: 600; color: var(--white); white-space: nowrap; }
td { color: var(--white-70); }
tr:last-child td { border-bottom: none; }
.rank { list-style: none; padding-left: 0; counter-reset: club; }
.rank li { counter-increment: club; position: relative; padding: 14px 16px 14px 56px; margin-bottom: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--white-12); border-radius: 12px; }
.rank li::before { content: counter(club); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 8px; background: var(--green-field); color: var(--white); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rank b { color: var(--white); }
.rank .meta { display: block; font-size: 14px; color: var(--white-40); margin-top: 2px; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 800; }
.cta { margin: 48px 0 28px; padding: 28px 24px; background: linear-gradient(160deg, var(--green-mid), var(--green-field)); border-radius: 18px; text-align: center; }
.cta h2 { margin-top: 0; }
.cta p { color: rgba(255,255,255,0.9); }
.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 10px; }
.badge { display: inline-block; padding: 12px 20px; border-radius: 12px; background: var(--white); color: var(--green-deep); font-weight: 700; text-decoration: none; font-size: 15px; }
.badge:hover { background: rgba(255,255,255,0.9); }
.tag { font-weight: 700; color: var(--white) !important; margin: 8px 0 0; }
.more { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--white-12); }
.more a { color: var(--coral); font-weight: 600; text-decoration: none; font-size: 16px; }
.more a:hover { text-decoration: underline; }
.updated { color: var(--white-40); font-size: 14px; margin-top: 4px; }