/* /rules and /terms: hero facts, numbered section panels, the contents card and side boxes. Every class rb-. */
.rb-hero h1 { font-size: clamp(42px, 6vw, 80px); }
.rb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.rb-fact { padding: var(--s4); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--line); border-radius: var(--rl); animation: scr-up .5s cubic-bezier(.2,.8,.2,1) both; }
.rb-fact:first-child { border-color: var(--gold-line); box-shadow: 0 0 32px rgba(201,162,39,.1); }
.rb-fact:first-child b { color: var(--gold-2); }
.rb-fact:nth-child(2) { animation-delay: .06s; } .rb-fact:nth-child(3) { animation-delay: .12s; } .rb-fact:nth-child(4) { animation-delay: .18s; }
.rb-fact span { display: block; font: 700 11px/1 var(--fd); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.rb-fact b { display: block; margin-top: var(--s2); font: 700 21px/1.15 var(--fd); letter-spacing: .02em; text-transform: uppercase; }

.rb-cols { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--s6); }
.rb-prose { max-width: none; }
.rb-sec { position: relative; margin: 0 0 var(--s4); padding: var(--s5) var(--s6) var(--s4); border: 1px solid var(--line); border-radius: var(--rl); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); scroll-margin-top: var(--s5); }
.rb-sec:target { border-color: var(--gold-line); box-shadow: 0 0 32px rgba(201,162,39,.08); }
.rb-sec h2, .prose .rb-sec h2 { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font: 800 26px/1.05 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.rb-n { flex: none; font: 500 18px/1 var(--fm); letter-spacing: 0; color: var(--gold-2); }
.rb-sec p { color: var(--ink-2); line-height: 1.7; }
.rb-sec p b, .rb-sec li b { color: var(--ink); }
.rb-sec ul { list-style: none; padding-left: 0; }
.rb-sec li { position: relative; padding-left: var(--s5); margin-bottom: var(--s2); color: var(--ink-2); line-height: 1.65; }
.rb-sec li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.rb-sec a { color: var(--gold-2); }
.rb-sec .note { color: var(--ink-3); }

.rb-side { position: sticky; top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.rb-toc { padding: var(--s4) var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--rl); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); }
.rb-toc h3 { margin: 0 0 var(--s3); font: 700 12px/1 var(--fd); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.rb-toc ol { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.rb-toc li a { display: flex; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.rb-toc li:first-child a { border-top: 0; }
.rb-toc li a:hover { color: var(--ink); }
.rb-toc li span { flex: none; width: 22px; font: 500 12px/1.4 var(--fm); color: var(--gold-2); }
.rb-box { position: relative; overflow: hidden; padding: var(--s4) var(--s5) var(--s5); border: 1px solid var(--line-2); border-left: 3px solid var(--line-3); border-radius: var(--rl); background: var(--panel); }
.rb-box.is-gold { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(201,162,39,.09), var(--panel) 60%); }
.rb-box.is-gold::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px); }
.rb-box > * { position: relative; }
.rb-box em { display: block; font: 700 11px/1 var(--fd); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.rb-box h3 { margin: var(--s2) 0; font: 800 24px/1.05 var(--fd); text-transform: uppercase; }
.rb-box p { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.rb-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (prefers-reduced-motion: reduce) { .rb-fact { animation: none; } }
@media (max-width: 1000px) { .rb-cols { grid-template-columns: 1fr; } .rb-side { position: static; order: -1; } .rb-side > .card { display: none; } .rb-toc ol { max-height: 260px; } }
@media (max-width: 560px) { .rb-sec { padding: var(--s4); } .rb-sec h2, .prose .rb-sec h2 { font-size: 22px; } .rb-facts { grid-template-columns: 1fr; } }