/* Reelbook home (block mode). Loaded on the front page only, after style.css. Classes rb-h*, rb-t*, rb-chk, rb-fd, rb-wg, rb-pay, rb-boards. */

.rb-page--home > * { max-width: none; }
/* the theme narrows every child of .rb-prose to the reading width; block sections set their own widths */
.rb-page .rb-hbody > * { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- hero ---------- */
.rb-hero { display: grid; gap: 1.25rem 2.5rem; align-items: start; margin: 0.25rem 0 1.25rem; }
.rb-hero--tool { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.rb-hero .rb-head__h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem); margin: 0 0 0.7rem; }
.rb-hero .rb-head__lead { max-width: 38rem; font-size: 1.1rem; }
.rb-hero__tool { padding: 1.25rem 1.3rem 1.3rem; background: var(--rb-green); color: var(--rb-paper); border-radius: 16px; box-shadow: 8px 8px 0 var(--rb-gold); }
.rb-hero__tool-k { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rb-gold); }
.rb-hero__tool-h { margin: 0 0 0.75rem; font-size: 1.45rem; color: #fff; }
.rb-hero__tool .rb-chk { margin: 0; }
.rb-hero__tool .rb-chk__form label { font-size: 0.9rem; font-weight: 400; opacity: 0.85; }
.rb-hero__tool .rb-chk__out { max-height: 22rem; overflow: auto; }
@media (max-width: 900px) { .rb-hero--tool { grid-template-columns: 1fr; } }

/* section tiles */
.rb-htiles ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 760px) { .rb-htiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-ht { display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center; height: 100%; padding: 0.7rem 0.8rem; background: var(--rb-sheet); border: 1px solid var(--rb-line); border-radius: var(--rb-r); color: var(--rb-ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rb-ht:hover { border-color: var(--rb-green-2); color: var(--rb-ink); transform: translateY(-2px); box-shadow: 0 4px 0 var(--rb-gold); }
.rb-ht .rb-ico { grid-row: span 2; }
.rb-ht__t { font-weight: 700; line-height: 1.2; }
.rb-ht__d { font-size: 0.8rem; color: var(--rb-muted); line-height: 1.25; }

/* icons: CSS masks, colour from currentColor */
.rb-ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--rb-green); color: var(--rb-gold); }
.rb-ico::before { content: ""; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.rb-ico--shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.rb-ico--card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.rb-ico--gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='5'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13M12 8C10 4 6.5 4.5 7.5 7c.5 1 4.5 1 4.5 1s4-.1 4.5-1c1-2.5-2.5-3-4.5 1z'/%3E%3C/svg%3E"); }
.rb-ico--reels { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E"); }
.rb-ico--plane { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 15l14-8c1.5-.8 3 .7 2.2 2.1L12 14l-6 3z'/%3E%3C/svg%3E"); }
.rb-ico--balls { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='7' cy='8' r='4'/%3E%3Ccircle cx='17' cy='8' r='4'/%3E%3Ccircle cx='12' cy='17' r='4'/%3E%3C/svg%3E"); }
.rb-ico--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rb-ico--book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 5c3-1 6-1 9 1 3-2 6-2 9-1v14c-3-1-6-1-9 1-3-2-6-2-9-1z'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }
.rb-ico--phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }

/* facts */
.rb-hfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--rb-line); border-radius: var(--rb-r); background: var(--rb-sheet); overflow: hidden; }
.rb-hfacts > div { padding: 0.85rem 1rem; border-left: 1px solid var(--rb-line); }
.rb-hfacts > div:first-child { border-left: 0; }
.rb-hfacts dt { font-weight: 700; line-height: 1.25; }
.rb-hfacts dt b { display: block; font-family: var(--rb-display); font-size: 1.9rem; line-height: 1; color: var(--rb-green); margin-bottom: 0.2rem; font-variant-numeric: tabular-nums lining-nums; }
.rb-hfacts dd { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--rb-muted); line-height: 1.35; }
.rb-hfacts__note { margin: 0.45rem 0 1.5rem; font-size: 0.85rem; color: var(--rb-muted); }
@media (max-width: 760px) {
	.rb-hfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-hfacts > div:nth-child(3) { border-left: 0; }
	.rb-hfacts > div:nth-child(n+3) { border-top: 1px solid var(--rb-line); }
}

/* ---------- block sections ---------- */
.rb-hbody { max-width: none; }
.rb-hs { padding: clamp(1.75rem, 4vw, 2.75rem) 0; border-top: 1px solid var(--rb-line); }
.rb-hs--intro { border-top: 0; padding-top: 0.5rem; }
.rb-hs__lede { font-size: 1.15rem; line-height: 1.6; max-width: 46rem; margin: 0; }
.rb-hs > h2, .rb-hs__main > h2 { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.2rem); margin: 0 0 0.8rem; max-width: 46rem; }
.rb-hs > h3, .rb-hs__main > h3 { font-size: 1.25rem; margin: 1.75rem 0 0.6rem; }
.rb-hs > p, .rb-hs > ul, .rb-hs > ol { max-width: 46rem; }
.rb-hs--sheet { background: var(--rb-sheet); border: 1px solid var(--rb-line); border-radius: 14px; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); margin: 1.5rem 0; }
.rb-hs--sheet + .rb-hs { border-top: 0; }
.rb-hs--tool { background: var(--rb-green); color: var(--rb-paper); border: 0; border-radius: 14px; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); margin: 1.5rem 0; }
.rb-hs--tool + .rb-hs { border-top: 0; }
.rb-hs--tool h2, .rb-hs--tool h3 { color: #fff; }
.rb-hs--tool a { color: var(--rb-gold-soft); }
.rb-hs--tool a:hover { color: #fff; }
.rb-hs--rg { background: var(--rb-gold-soft); border: 2px solid var(--rb-gold); border-radius: 14px; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); margin: 1.5rem 0; }
.rb-hs--rg + * { border-top: 0; }

/* figure floats beside text on wide screens */
.rb-hfig { margin: 0 0 1rem; border: 1px solid var(--rb-line); border-radius: var(--rb-r); overflow: hidden; background: var(--rb-sheet); }
.rb-hfig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rb-hfig figcaption { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--rb-muted); border-top: 1px solid var(--rb-line); }
@media (min-width: 980px) {
	.rb-hs { display: flow-root; }
	.rb-hfig { float: right; width: min(40%, 26rem); margin: 0.25rem 0 1rem 2rem; }
	.rb-hs > h2 ~ .rb-hfig ~ p { max-width: none; }
}

/* numbered steps */
.rb-hsteps { list-style: none; counter-reset: s; padding: 0; margin: 1rem 0; }
.rb-hsteps li { counter-increment: s; position: relative; padding: 0.15rem 0 0.75rem 2.6rem; }
.rb-hsteps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: 50%; background: var(--rb-gold); color: var(--rb-ink); font-weight: 700; font-size: 0.95rem; }
.rb-hs--tool .rb-hsteps li::before { background: var(--rb-gold); }
.rb-hsteps--big li { padding: 0.9rem 1rem 0.9rem 3.4rem; margin: 0 0 0.5rem; background: var(--rb-sheet); border: 1px solid var(--rb-line); border-radius: var(--rb-r); }
.rb-hsteps--big li::before { left: 0.9rem; top: 0.85rem; background: var(--rb-green); color: var(--rb-gold); }

/* mistakes */
.rb-hmist { list-style: none; counter-reset: m; padding: 0; margin: 0.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; max-width: none !important; }
.rb-hmist li { counter-increment: m; padding: 0.9rem 1rem 0.9rem 1rem; border: 1px solid var(--rb-line); border-left: 5px solid var(--rb-red); border-radius: var(--rb-r); background: var(--rb-paper); }
.rb-hmist li::before { content: "0" counter(m); display: block; font: 600 1.1rem var(--rb-display); color: var(--rb-red); margin-bottom: 0.2rem; }

/* sports grid */
.rb-sports { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1rem; }
.rb-sports > div { padding: 0.9rem 1rem; border: 1px solid var(--rb-line); border-radius: var(--rb-r); background: var(--rb-paper); }
.rb-sports h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.rb-sports p { margin: 0; font-size: 0.95rem; }

/* weights */
.rb-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.rb-weights > div { padding: 0.8rem 0.9rem; border-radius: var(--rb-r); background: var(--rb-green); color: var(--rb-paper); }
.rb-weights b { display: block; font: 600 1.7rem/1 var(--rb-display); color: var(--rb-gold); margin-bottom: 0.3rem; }
.rb-weights span { font-size: 0.9rem; font-weight: 700; }

/* legal table */
.rb-legal-t { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; background: var(--rb-sheet); }
.rb-legal-t th, .rb-legal-t td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--rb-line); }
.rb-legal-t thead th { background: var(--rb-green); color: var(--rb-paper); font-size: 0.85rem; letter-spacing: 0.03em; }
.rb-legal-t td:first-child { font-weight: 700; min-width: 11rem; }
.rb-st { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.rb-st--ok { background: var(--rb-green-3); color: var(--rb-green); }
.rb-st--no { background: var(--rb-red-soft); color: var(--rb-red); }
.rb-st--mid { background: var(--rb-gold-soft); color: #6b4a07; }

/* RG list */
.rb-rgl { list-style: none; padding: 0; }
.rb-rgl li { padding: 0.6rem 0 0.6rem 1.75rem; position: relative; border-bottom: 1px dashed rgba(22, 24, 26, 0.2); }
.rb-rgl li::before { content: ""; position: absolute; left: 0.2rem; top: 1.05rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rb-green); }

/* ---------- top 10 ---------- */
.rb-top { margin: 1.25rem 0 1rem; }
.rb-tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; align-items: stretch; }
.rb-tc { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem 1.1rem 1.1rem; background: var(--rb-sheet); border: 1px solid var(--rb-line); border-radius: 14px; position: relative; }
.rb-tc--first { border: 2px solid var(--rb-gold); box-shadow: 6px 6px 0 var(--rb-gold-soft); }
.rb-tc__pos { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-green-2); display: flex; align-items: center; gap: 0.5rem; }
.rb-tc__pos span { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rb-green); color: var(--rb-gold); font: 600 1rem var(--rb-display); letter-spacing: 0; }
.rb-tc__head { display: flex; gap: 0.75rem; align-items: center; }
.rb-tc__name { margin: 0; font-size: 1.35rem; }
.rb-tc__name a { color: inherit; text-decoration: none; }
.rb-tc__name a:hover { text-decoration: underline; }
.rb-tc__lic { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--rb-muted); }
.rb-tc__offer { margin: 0; padding: 0.6rem 0.75rem; background: var(--rb-green-3); border-radius: 8px; font-weight: 700; font-size: 0.95rem; line-height: 1.4; }
.rb-tc__offer span { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-green-2); margin-bottom: 0.15rem; }
.rb-tc__pros { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; line-height: 1.4; }
.rb-tc__pros li { position: relative; padding: 0.2rem 0 0.2rem 1.4rem; }
.rb-tc__pros li::before { content: ""; position: absolute; left: 0.15rem; top: 0.55rem; width: 0.65rem; height: 0.35rem; border-left: 2px solid var(--rb-green-2); border-bottom: 2px solid var(--rb-green-2); transform: rotate(-45deg); }
.rb-tc__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.rb-tc__foot .rb-btn { flex: 1 1 100%; }
@media (max-width: 900px) { .rb-tcards { grid-template-columns: 1fr; } }

.rb-trows { list-style: none; padding: 0; margin: 0.9rem 0 0; border: 1px solid var(--rb-line); border-radius: 14px; background: var(--rb-sheet); overflow: hidden; }
.rb-tr { display: grid; grid-template-columns: 2rem 36px minmax(9rem, 1.1fr) auto minmax(0, 1.6fr) auto; align-items: center; gap: 0.5rem 0.9rem; padding: 0.7rem 1rem; border-top: 1px solid var(--rb-line); }
.rb-tr:first-child { border-top: 0; }
.rb-tr__id { display: flex; flex-direction: column; min-width: 0; }
.rb-tr__n { font-weight: 700; }
.rb-tr__n a { color: var(--rb-ink); }
.rb-tr__lic { font-size: 0.8rem; color: var(--rb-muted); }
.rb-tr__o { font-size: 0.9rem; line-height: 1.35; }
.rb-tr__none { color: var(--rb-muted); }
@media (max-width: 760px) {
	.rb-tr { grid-template-columns: 2rem 36px 1fr; }
	.rb-tr__s, .rb-tr__o, .rb-tr__go { grid-column: 3; }
	.rb-tr__go .rb-btn { width: 100%; }
}
.rb-top__foot { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--rb-muted); }

/* ---------- licence checker ---------- */
.rb-chk { margin: 1rem 0 0.5rem; max-width: 46rem; }
.rb-chk__form label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.rb-chk__row { display: flex; gap: 0.5rem; }
.rb-chk__row input { flex: 1; min-width: 0; min-height: 48px; padding: 0.6rem 0.9rem; border: 2px solid var(--rb-gold); border-radius: 10px; font: 400 1.05rem var(--rb-text); background: var(--rb-sheet); color: var(--rb-ink); }
.rb-chk__row input:focus { outline: 3px solid #fff; outline-offset: 1px; }
.rb-chk__row .rb-btn { min-height: 48px; }
.rb-chk__out { margin-top: 0.9rem; }
.rb-chk__hint { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.rb-chk__res { padding: 1rem 1.1rem; border-radius: 12px; background: var(--rb-sheet); color: var(--rb-ink); border-left: 6px solid var(--rb-green-2); }
.rb-chk__res + .rb-chk__res { margin-top: 0.6rem; }
.rb-chk__res--warn { border-left-color: var(--rb-red); }
.rb-chk__res h3 { margin: 0 0 0.35rem; font-size: 1.2rem; color: var(--rb-green); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rb-chk__res dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.9rem; font-size: 0.92rem; }
.rb-chk__res dt { font-weight: 700; color: var(--rb-muted); }
.rb-chk__res dd { margin: 0; }
.rb-chk__res p { margin: 0.4rem 0 0; font-size: 0.92rem; }
.rb-chk__res a { color: var(--rb-green-2); }
@media (max-width: 520px) { .rb-chk__res dl { grid-template-columns: 1fr; } .rb-chk__res dd { margin-bottom: 0.3rem; } }

/* ---------- finder ---------- */
.rb-fd { margin: 1rem 0 0; }
.rb-fd__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 900px) { .rb-fd__form { grid-template-columns: 1fr; } }
.rb-fd__q { margin: 0; padding: 0.9rem 1rem 1rem; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-paper); min-width: 0; }
.rb-fd__q legend { padding: 0 0.3rem; font-weight: 700; display: flex; gap: 0.5rem; align-items: center; }
.rb-fd__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rb-green); color: var(--rb-gold); font-size: 0.85rem; }
.rb-fd__opts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.rb-fd__opts label { position: relative; cursor: pointer; }
.rb-fd__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rb-fd__opts span { display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.8rem; border: 1.5px solid var(--rb-line); border-radius: 999px; background: var(--rb-sheet); font-size: 0.92rem; font-weight: 700; }
.rb-fd__opts input:checked + span { background: var(--rb-green); border-color: var(--rb-green); color: #fff; }
.rb-fd__opts input:focus-visible + span { outline: 3px solid var(--rb-gold); outline-offset: 2px; }
.rb-fd__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 900px) { .rb-fd__out { grid-template-columns: 1fr; } }
.rb-fd__r { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-sheet); }
.rb-fd__r:first-child { border: 2px solid var(--rb-gold); }
.rb-fd__r h3 { margin: 0; font-size: 1.2rem; display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.rb-fd__r h3 small { font: 700 0.85rem var(--rb-text); color: var(--rb-muted); white-space: nowrap; }
.rb-fd__why { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rb-fd__why li { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--rb-green-3); color: var(--rb-green); }
.rb-fd__why li.is-no { background: var(--rb-paper-2); color: var(--rb-muted); font-weight: 400; }
.rb-fd__o { margin: 0; font-size: 0.88rem; color: var(--rb-muted); }
.rb-fd__act { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.rb-fd__note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--rb-muted); max-width: 46rem; }

/* ---------- boards chart ---------- */
.rb-boards { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-paper); }
.rb-boards figcaption { font-weight: 700; margin-bottom: 0.75rem; }
.rb-boards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.rb-boards li { display: grid; grid-template-columns: 8.5rem 1fr 2rem; gap: 0.2rem 0.75rem; align-items: center; }
.rb-boards__b { font-weight: 700; font-size: 0.95rem; }
.rb-boards__bar { height: 1.1rem; background: var(--rb-paper-2); border-radius: 4px; overflow: hidden; }
.rb-boards__bar i { display: block; height: 100%; background: var(--rb-green-2); border-right: 3px solid var(--rb-gold); min-width: 6px; }
.rb-boards__c { font: 600 1.2rem var(--rb-display); color: var(--rb-green); text-align: right; font-variant-numeric: tabular-nums; }
.rb-boards__who { grid-column: 2 / 4; font-size: 0.8rem; color: var(--rb-muted); line-height: 1.35; }
@media (max-width: 520px) { .rb-boards li { grid-template-columns: 1fr 2rem; } .rb-boards__b { grid-column: 1 / 3; } .rb-boards__bar { grid-column: 1; } .rb-boards__who { grid-column: 1 / 3; } }

/* ---------- payments grid ---------- */
.rb-pay { position: relative; margin: 1rem 0; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-sheet); overflow-x: auto; }
.rb-pay__t { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.rb-pay__t caption { text-align: left; padding: 0.75rem 0.9rem 0.25rem; font-weight: 700; caption-side: top; }
.rb-pay__t th, .rb-pay__t td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rb-line); text-align: center; }
.rb-pay__t tbody th { text-align: left; font-weight: 700; white-space: nowrap; position: sticky; left: 0; background: var(--rb-sheet); z-index: 1; }
.rb-pay__op { vertical-align: bottom; height: 7.5rem; min-width: 2.4rem; }
.rb-pay__op span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.82rem; white-space: nowrap; }
.rb-pay__y { display: inline-block; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--rb-green-2); position: relative; }
.rb-pay__y::after { content: ""; position: absolute; left: 0.36rem; top: 0.22rem; width: 0.3rem; height: 0.55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rb-pay__sum { font-weight: 700; color: var(--rb-green); }
.rb-pay__t tbody tr:hover td, .rb-pay__t tbody tr:hover th { background: var(--rb-green-3); }

/* ---------- rollover calculator ---------- */
.rb-wg { margin: 1rem 0; padding: 1rem 1.1rem 1.1rem; border: 2px solid var(--rb-green); border-radius: 14px; background: var(--rb-sheet); }
.rb-wg__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 760px) { .rb-wg__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-wg__f label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.25rem; }
.rb-wg__in { display: flex; align-items: center; border: 1.5px solid var(--rb-line); border-radius: 8px; background: #fff; }
.rb-wg__in input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.5rem 0.6rem; font: 400 1rem var(--rb-text); min-height: 42px; }
.rb-wg__in span { padding: 0 0.6rem; color: var(--rb-muted); font-weight: 700; }
.rb-wg__f select { width: 100%; min-height: 45px; border: 1.5px solid var(--rb-line); border-radius: 8px; background: #fff; padding: 0.4rem 0.5rem; font: 400 1rem var(--rb-text); }
.rb-wg__out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0 0; }
@media (max-width: 760px) { .rb-wg__out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-wg__out > div { padding: 0.7rem 0.8rem; border-radius: 10px; background: var(--rb-green); color: var(--rb-paper); }
.rb-wg__out dt { font-size: 0.8rem; line-height: 1.3; }
.rb-wg__out dd { margin: 0.25rem 0 0; font: 600 1.45rem/1.1 var(--rb-display); color: var(--rb-gold); font-variant-numeric: tabular-nums lining-nums; }
.rb-wg__out dd.is-neg { color: #ffb7a8; }
.rb-wg__note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--rb-muted); }

/* latest draws inside a section */
.rb-hs .rb-feed { margin: 1rem 0; }

/* ---------- reset of the theme's prose rules inside components (.rb-prose h3/p/ul win over single classes) ---------- */
.rb-hbody .rb-top h3, .rb-hbody .rb-fd h3, .rb-hbody .rb-chk h3, .rb-hbody .rb-sports h3 { margin-top: 0; padding-top: 0; }
.rb-hbody .rb-tc h3 { margin: 0; }
.rb-hbody .rb-tc p, .rb-hbody .rb-fd p, .rb-hbody .rb-chk__res p, .rb-hbody .rb-sports p { margin-bottom: 0; }
.rb-hbody .rb-tc__pros, .rb-hbody .rb-fd__why, .rb-hbody .rb-trows, .rb-hbody .rb-boards ul, .rb-hbody .rb-hmist, .rb-hbody .rb-rgl, .rb-hbody .rb-hsteps { padding-left: 0; }
.rb-hbody .rb-tc__pros li, .rb-hbody .rb-fd__why li, .rb-hbody .rb-boards li, .rb-hbody .rb-tr { margin-bottom: 0; }
.rb-hbody .rb-trows { margin-bottom: 0; }
.rb-hbody .rb-fd__why { margin: 0; }
/* wide components start below a floated figure */
.rb-hs > .rb-scroll, .rb-hs > .rb-pay, .rb-hs > .rb-wg, .rb-hs > .rb-boards, .rb-hs > .rb-feed { clear: both; }
.rb-pay__t thead th:first-child { text-align: left; vertical-align: bottom; }
.rb-pay__op { height: 6.5rem; }

/* ---------- split sections: text column + aside ---------- */
.rb-hs--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 1.5rem 3rem; align-items: start; }
.rb-hs--split > .rb-hs__main > p, .rb-hs--split > .rb-hs__main > ul, .rb-hs--split > .rb-hs__main > ol { max-width: none; }
.rb-hs__side { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.rb-hs__side > * { margin: 0 !important; }
.rb-hs--sheet.rb-hs--split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
@media (max-width: 980px) { .rb-hs--split, .rb-hs--sheet.rb-hs--split { grid-template-columns: 1fr; } .rb-hs__side { position: static; } }
.rb-hs__sign { margin: 0.9rem 0 0; padding-left: 0.9rem; border-left: 4px solid var(--rb-gold); font-weight: 700; color: var(--rb-green); }

/* in-page navigation */
.rb-hs__toc .rb-toc { margin: 0; padding: 1rem 1.1rem; background: var(--rb-sheet); border: 1px solid var(--rb-line); border-radius: 12px; }
.rb-hs__toc .rb-toc__h { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rb-green-2); }
.rb-hs__toc .rb-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; max-height: 19rem; overflow: auto; }
.rb-hs__toc .rb-toc li { counter-increment: t; margin: 0; border-bottom: 1px dashed var(--rb-line); }
.rb-hs__toc .rb-toc li:last-child { border-bottom: 0; }
.rb-hs__toc .rb-toc a { display: grid; grid-template-columns: 1.8rem 1fr; padding: 0.3rem 0; font-size: 0.9rem; line-height: 1.3; color: var(--rb-ink); text-decoration: none; }
.rb-hs__toc .rb-toc a::before { content: counter(t, decimal-leading-zero); font: 600 0.85rem var(--rb-display); color: var(--rb-gold); }
.rb-hs__toc .rb-toc a:hover { color: var(--rb-green-2); text-decoration: underline; }

/* illustration figure */
.rb-hill { margin: 0; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; background: var(--rb-sheet); }
.rb-hill img { display: block; width: 100%; height: auto; }
.rb-hill figcaption { padding: 0.55rem 0.8rem; font-size: 0.83rem; color: var(--rb-muted); border-top: 1px solid var(--rb-line); }
.rb-hs__side .rb-hfig { float: none; width: auto; }

/* legal table: one frame only */
.rb-hs .rb-scroll { border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-sheet); }
.rb-hs .rb-scroll > .rb-legal-t { margin: 0; border: 0; }

/* quick answer and helpline cards */
.rb-qcard { padding: 1rem 1.1rem; background: var(--rb-green); color: var(--rb-paper); border-radius: 12px; }
.rb-qcard__k, .rb-call__k { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rb-gold); }
.rb-qcard dl { margin: 0; }
.rb-qcard dl > div { padding: 0.45rem 0; border-bottom: 1px dashed rgba(246, 241, 230, 0.25); }
.rb-qcard dt { font-size: 0.8rem; opacity: 0.8; }
.rb-qcard dd { margin: 0.1rem 0 0; font: 600 1.1rem var(--rb-display); color: #fff; }
.rb-qcard__f { margin: 0.6rem 0 0; font-size: 0.78rem; opacity: 0.75; }
.rb-call { padding: 1.2rem; background: var(--rb-sheet); border: 2px solid var(--rb-ink); border-radius: 14px; text-align: center; }
.rb-call__k { color: var(--rb-green-2); }
.rb-call__n { display: block; font: 600 clamp(1.9rem, 1.4rem + 1.5vw, 2.4rem)/1.1 var(--rb-display); color: var(--rb-green); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.rb-call p { margin: 0.35rem 0 0; font-size: 0.9rem; }
.rb-call__w { color: var(--rb-muted); }

/* mistakes: 4 columns, the 8th cell closes the grid */
.rb-hmist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rb-hmist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rb-hmist { grid-template-columns: 1fr; } }
.rb-hmist li.rb-hmist__cta { counter-increment: none; background: var(--rb-green); color: var(--rb-paper); border-color: var(--rb-green); border-left-color: var(--rb-gold); }
.rb-hmist li.rb-hmist__cta::before { content: "+"; color: var(--rb-gold); }
.rb-hmist__cta a { display: inline-block; margin-top: 0.4rem; color: var(--rb-gold-soft); font-weight: 700; }

/* ---------- head to head ---------- */
.rb-vs { margin: 1rem 0 0; }
.rb-vs__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: end; max-width: 46rem; }
.rb-vs__pick label span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--rb-muted); margin-bottom: 0.25rem; }
.rb-vs__pick select { width: 100%; min-height: 46px; padding: 0.4rem 0.6rem; border: 2px solid var(--rb-green-2); border-radius: 10px; background: #fff; font: 700 1rem var(--rb-text); color: var(--rb-ink); }
.rb-vs__x { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.2rem; border-radius: 50%; background: var(--rb-gold); font: 600 1rem var(--rb-display); }
.rb-vs__grid { display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: 1rem; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; background: #fff; }
.rb-vs__grid > div { padding: 0.55rem 0.8rem; border-top: 1px solid var(--rb-line); font-size: 0.92rem; }
.rb-vs__grid > div:nth-child(-n+3) { border-top: 0; }
.rb-vs__hd { background: var(--rb-green-3); }
.rb-vs__id { display: flex; gap: 0.6rem; align-items: center; }
.rb-vs__id img, .rb-vs__mono { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rb-line); background: #fff; object-fit: contain; flex: none; }
.rb-vs__mono { display: grid; place-items: center; font-weight: 700; color: var(--rb-green); }
.rb-vs__id b { display: block; font: 600 1.1rem var(--rb-display); color: var(--rb-green); }
.rb-vs__id span { font-size: 0.82rem; color: var(--rb-muted); }
.rb-vs__l { font-weight: 700; color: var(--rb-muted); background: var(--rb-paper); }
.rb-vs__c { display: flex; align-items: center; gap: 0.6rem; }
.rb-vs__bar { flex: 1; height: 0.6rem; background: var(--rb-paper-2); border-radius: 999px; overflow: hidden; }
.rb-vs__bar i { display: block; height: 100%; background: #9aa197; border-radius: 999px; }
.rb-vs__bar.is-win i { background: var(--rb-green-2); }
.rb-vs__c b { min-width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.rb-vs__nil { color: var(--rb-muted); }
.rb-vs__go { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.rb-vs__note { margin: 0.6rem 0 0 !important; font-size: 0.83rem; color: var(--rb-muted); }
@media (max-width: 640px) {
	.rb-vs__pick { grid-template-columns: 1fr; }
	.rb-vs__x { display: none; }
	.rb-vs__grid { grid-template-columns: 1fr 1fr; }
	.rb-vs__grid > div:nth-child(-n+3) { border-top: 1px solid var(--rb-line); }
	.rb-vs__grid > .rb-vs__hd:first-child { display: none; }
	.rb-vs__l { grid-column: 1 / -1; padding-bottom: 0.15rem !important; font-size: 0.8rem !important; }
	.rb-vs__grid > .rb-vs__l:empty { display: none; }
	.rb-vs__id img, .rb-vs__mono { width: 32px; height: 32px; }
}

/* ---------- accumulator check ---------- */
.rb-acca { margin: 1rem 0 0; padding: 1rem 1.1rem 1.1rem; background: #fff; border: 2px solid var(--rb-green); border-radius: 14px; }
.rb-acca__top { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; justify-content: space-between; }
.rb-acca__presets { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--rb-muted); }
.rb-acca__presets button { min-height: 36px; padding: 0.25rem 0.75rem; border: 1.5px solid var(--rb-line); border-radius: 999px; background: var(--rb-paper); font: 700 0.85rem var(--rb-text); color: var(--rb-ink); cursor: pointer; }
.rb-acca__presets button:hover { border-color: var(--rb-green-2); background: var(--rb-green-3); }
.rb-acca__stake span { display: block; font-size: 0.78rem; font-weight: 700; color: var(--rb-muted); margin-bottom: 0.2rem; }
.rb-acca__stake input, .rb-acca__legs input { width: 7rem; min-height: 42px; padding: 0.35rem 0.6rem; border: 1.5px solid var(--rb-line); border-radius: 8px; font: 700 1rem var(--rb-text); font-variant-numeric: tabular-nums; }
.rb-hbody .rb-acca__legs { list-style: none; counter-reset: l; margin: 1rem 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.rb-acca__legs li { counter-increment: l; display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.4rem 0.35rem 0.6rem; border: 1px solid var(--rb-line); border-radius: 10px; background: var(--rb-paper); margin: 0 !important; }
.rb-acca__legs li::before { content: counter(l); font: 600 0.9rem var(--rb-display); color: var(--rb-green-2); min-width: 1.2rem; }
.rb-acca__legs label { flex: 1; }
.rb-acca__legs input { width: 100%; }
.rb-acca__legs input.is-bad { border-color: var(--rb-red); }
.rb-acca__rm { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; flex: none; }
.rb-acca__rm::before, .rb-acca__rm::after { content: ""; position: absolute; left: 8px; top: 14px; width: 14px; height: 2px; background: var(--rb-muted); transform: rotate(45deg); }
.rb-acca__rm::after { transform: rotate(-45deg); }
.rb-acca__rm:hover { background: var(--rb-red-soft); }
.rb-acca__res { margin-top: 0.9rem; padding: 0.9rem 1rem; background: var(--rb-green); color: var(--rb-paper); border-radius: 12px; }
.rb-acca__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 700px) { .rb-acca__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-acca__nums span { display: block; font-size: 0.78rem; opacity: 0.85; }
.rb-acca__nums b { font: 600 1.45rem/1.15 var(--rb-display); color: var(--rb-gold); font-variant-numeric: tabular-nums lining-nums; }
.rb-acca__bar { height: 0.7rem; margin: 0.8rem 0 0.4rem; background: rgba(255, 255, 255, 0.15); border-radius: 999px; overflow: hidden; }
.rb-acca__bar i { display: block; height: 100%; background: var(--rb-gold); border-radius: 999px; transition: width 0.25s; }
.rb-acca__say { margin: 0 !important; font-size: 0.92rem; }
.rb-acca__note { margin: 0.6rem 0 0 !important; font-size: 0.82rem; color: var(--rb-muted); }

/* ---------- FICA checklist ---------- */
.rb-fica { padding: 1rem 1.1rem; background: var(--rb-sheet); border: 2px solid var(--rb-green-2); border-radius: 14px; }
.rb-fica__h { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; margin: 0 0 0.4rem !important; font: 600 1.15rem var(--rb-display); color: var(--rb-green); }
.rb-fica__h span { font: 700 0.82rem var(--rb-text); color: var(--rb-muted); }
.rb-fica__bar { height: 0.45rem; background: var(--rb-paper-2); border-radius: 999px; overflow: hidden; margin-bottom: 0.6rem; }
.rb-fica__bar i { display: block; height: 100%; width: 0; background: var(--rb-gold); transition: width 0.2s; }
.rb-fica.is-done .rb-fica__bar i { background: var(--rb-green-2); }
.rb-hbody .rb-fica ul { list-style: none; margin: 0; padding: 0; }
.rb-fica li { margin: 0 !important; border-bottom: 1px dashed var(--rb-line); }
.rb-fica label { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; padding: 0.5rem 0; cursor: pointer; }
.rb-fica input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--rb-green-2); }
.rb-fica b { display: block; font-size: 0.95rem; }
.rb-fica small { display: block; color: var(--rb-muted); line-height: 1.35; }
.rb-fica input:checked + span b { text-decoration: line-through; text-decoration-color: var(--rb-gold); text-decoration-thickness: 2px; }
.rb-fica__note { margin: 0.5rem 0 0 !important; font-size: 0.78rem; color: var(--rb-muted); }

/* boards chart in a side column */
.rb-hs__side .rb-boards li { grid-template-columns: 7.5rem 1fr 1.8rem; }

.rb-hs__main > .rb-hill { margin: 1.25rem 0 1rem; }

/* ---------- finder v2: picture tiles and logo results ---------- */
.rb-fd__form { align-items: stretch; }
.rb-fd__q { background: var(--rb-sheet); }
.rb-fd__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.rb-fd__q--pay .rb-fd__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-fd__opts label { display: flex; }
.rb-fd__opts .rb-fd__t { flex: 1; display: grid; justify-items: center; align-content: start; gap: 0.15rem; min-height: 0; padding: 0.7rem 0.45rem 0.6rem; border: 1.5px solid var(--rb-line); border-radius: 12px; background: #fff; text-align: center; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.rb-fd__opts label:hover .rb-fd__t { border-color: var(--rb-green-2); transform: translateY(-1px); }
.rb-fd__opts .rb-fd__t b { font-size: 0.93rem; line-height: 1.2; }
.rb-fd__opts .rb-fd__t small { font-size: 0.75rem; line-height: 1.25; color: var(--rb-muted); font-weight: 400; }
.rb-fd__opts input:checked + .rb-fd__t { background: var(--rb-green-3); border-color: var(--rb-green); box-shadow: 0 0 0 2px var(--rb-green) inset, 0 4px 0 var(--rb-gold); color: var(--rb-ink); }
.rb-fd__opts input:checked + .rb-fd__t small { color: var(--rb-green-2); }
.rb-fdi { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.25rem; border-radius: 50%; background: var(--rb-green); color: var(--rb-gold); }
.rb-fdi::before { content: ""; width: 1.7rem; height: 1.7rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.rb-fd__opts input:checked + .rb-fd__t .rb-fdi { background: var(--rb-gold); color: var(--rb-green); }
.rb-fdi--football { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5l4 2.9-1.5 4.6h-5L8 10.4z' fill='%23000'/%3E%3Cpath d='M12 2.5v5M16 10.4l4.6-1.6M14.5 15l2.8 4M9.5 15l-2.8 4M8 10.4L3.4 8.8'/%3E%3C/svg%3E"); }
.rb-fdi--rugby { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6' transform='rotate(-35 12 12)'/%3E%3Cpath d='M8.5 14.5l7-5M10 11.5l2 2M12 10l2 2M8.5 13l2 2'/%3E%3C/svg%3E"); }
.rb-fdi--racing { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 20v-8a6 6 0 0 1 12 0v8'/%3E%3C/svg%3E"); }
.rb-fdi--live { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13V9M12 13l3 2M10 2h4'/%3E%3C/svg%3E"); }
.rb-fdi--any { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.rb-fdi--ozow, .rb-fdi--capitec, .rb-fdi--voucher, .rb-fdi--card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3C/svg%3E"); }
.rb-fdi--w-bonus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='5'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13M12 8C10 4 6.5 4.5 7.5 7c.5 1 4.5 1 4.5 1s4-.1 4.5-1c1-2.5-2.5-3-4.5 1z'/%3E%3C/svg%3E"); }
.rb-fdi--w-pay { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h13a3 3 0 0 1 3 3v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11'/%3E%3Ccircle cx='16' cy='14' r='1.5' fill='%23000'/%3E%3C/svg%3E"); }
.rb-fdi--w-safe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.rb-fdi--w-offer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.rb-fd__logo { display: flex; align-items: center; justify-content: center; min-height: 3rem; margin-bottom: 0.25rem; }
.rb-fd__logo .rb-pay__logos { justify-content: center; }
.rb-fd__r { padding: 0 0 1rem; overflow: hidden; }
.rb-fd__r > *:not(.rb-fd__top) { margin-left: 1rem !important; margin-right: 1rem !important; }
.rb-fd__top { display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.8rem 1rem; background: var(--rb-green-3); border-bottom: 1px solid var(--rb-line); }
.rb-fd__r:first-child .rb-fd__top { background: var(--rb-gold-soft); }
.rb-fd__rank { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--rb-green); color: var(--rb-gold); font: 600 0.95rem var(--rb-display); }
.rb-fd__lg { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--rb-line); background: #fff; object-fit: contain; }
.rb-fd__lg--mono { display: grid; place-items: center; font-weight: 700; color: var(--rb-green); }
.rb-fd__id h3 { margin: 0 !important; font-size: 1.15rem; }
.rb-fd__id span { font-size: 0.8rem; color: var(--rb-muted); }
.rb-fd__match { display: grid; place-items: center; align-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: radial-gradient(closest-side, #fff 76%, transparent 78%), conic-gradient(var(--rb-green-2) calc(var(--m) * 1%), var(--rb-paper-2) 0); line-height: 1; }
.rb-fd__match b { font: 600 0.95rem var(--rb-display); color: var(--rb-green); }
.rb-fd__match small { font-size: 0.62rem; color: var(--rb-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rb-fd__r .rb-fd__why { margin-top: 0.8rem !important; }

/* ---------- payment logo tiles (table, finder) ---------- */
.rb-pay__logos { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.rb-pay__m { display: inline-flex; align-items: center; gap: 0.6rem; }
.rb-pay__m .rb-pay__logos { min-width: 5.5rem; }
.rb-pay__logos .rb-pl { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 3px 6px; border: 1px solid var(--rb-line); border-radius: 6px; background: #fff; }
.rb-pay__logos .rb-pl img { width: auto; height: 100%; max-width: 70px; object-fit: contain; }
.rb-pay__logos .rb-pl--dark { background: #1b2a24; border-color: #1b2a24; }
.rb-pay__logos .rb-pl--bank { color: var(--rb-green); }
.rb-fd__logo .rb-pl { height: 34px; }

/* ---------- sports cards ---------- */
.rb-sp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin: 0.5rem 0 1.25rem; }
@media (max-width: 1000px) { .rb-sp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rb-sp { grid-template-columns: 1fr; } }
.rb-sp__c { display: flex; flex-direction: column; border: 1px solid var(--rb-line); border-radius: 14px; overflow: hidden; background: #fff; }
.rb-sp__art { position: relative; display: grid; place-items: center; height: 8.5rem; background: var(--rb-green); background-image: radial-gradient(rgba(233, 164, 37, 0.18) 1.5px, transparent 1.7px); background-size: 16px 16px; }
.rb-sp__c--rugby .rb-sp__art { background-color: #1d5743; }
.rb-sp__c--racing .rb-sp__art { background-color: #5a3a12; }
.rb-sp__c--live .rb-sp__art { background-color: #0f3a52; }
.rb-sp__art svg { width: 6rem; height: 6rem; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.25)); }
.rb-sp__pct { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 0.75rem; }
.rb-sp__pct b { color: var(--rb-gold); }
.rb-sp__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem 1rem 1rem; flex: 1; }
.rb-hbody .rb-sp__body h3 { margin: 0; font-size: 1.2rem; }
.rb-hbody .rb-sp__body p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.rb-sp__cov { height: 0.45rem; border-radius: 999px; background: var(--rb-paper-2); overflow: hidden; margin-top: auto; }
.rb-sp__cov i { display: block; height: 100%; background: var(--rb-gold); }
.rb-hbody .rb-sp__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rb-sp__logos li { margin: 0 !important; }
.rb-sp__logos a { display: block; border-radius: 9px; transition: transform 0.15s; }
.rb-sp__logos a:hover { transform: translateY(-2px); }
.rb-sp__more { font-weight: 700; font-size: 0.9rem; }
.rb-sp__more::after { content: " \203A"; color: var(--rb-gold); }
.rb-spc { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-paper); }
.rb-spc figcaption { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.7rem; }
.rb-hbody .rb-spc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2rem; }
.rb-spc li { display: grid; grid-template-columns: 7rem 1fr 1.6rem; gap: 0.6rem; align-items: center; margin: 0 !important; font-size: 0.9rem; font-weight: 700; }
.rb-spc__bar { height: 0.8rem; border-radius: 4px; background: var(--rb-paper-2); overflow: hidden; }
.rb-spc__bar i { display: block; height: 100%; background: var(--rb-green-2); border-right: 3px solid var(--rb-gold); }
.rb-spc b { font: 600 1.05rem var(--rb-display); color: var(--rb-green); text-align: right; }
@media (max-width: 700px) { .rb-hbody .rb-spc ul { grid-template-columns: 1fr; } }

/* ---------- games strip ---------- */
.rb-hbody .rb-gms ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 1100px) { .rb-hbody .rb-gms ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rb-hbody .rb-gms ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-gms li { margin: 0 !important; }
.rb-gm { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; background: #fff; color: var(--rb-ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.rb-gm:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--rb-gold); color: var(--rb-ink); }
.rb-gm__art { display: block; aspect-ratio: 230 / 130; overflow: hidden; background: var(--rb-green); }
.rb-gm__art img, .rb-gm__art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-gm__b { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem 0.7rem; flex: 1; }
.rb-gm__b b { font: 600 1rem/1.2 var(--rb-display); color: var(--rb-green); }
.rb-gm__b small { font-size: 0.78rem; color: var(--rb-muted); }
.rb-gm__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.rb-gm__chips span { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--rb-green-3); color: var(--rb-green); font-size: 0.7rem; font-weight: 700; }
.rb-gm__more { margin-top: auto; padding-top: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--rb-green-2); }
.rb-gm__more::after { content: " \203A"; color: var(--rb-gold); }
.rb-gms__note { margin: 0.6rem 0 0 !important; font-size: 0.82rem; color: var(--rb-muted); }

/* ---------- mistakes v2: icon, the cost in one figure, what to do instead ---------- */
.rb-hmist li.rb-hmist__i { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; background: #fff; border: 1px solid var(--rb-line); border-top: 5px solid var(--rb-red); border-left-width: 1px; border-left-color: var(--rb-line); }
.rb-hmist li.rb-hmist__i::before { position: absolute; right: 0.9rem; top: 0.8rem; margin: 0; font-size: 0.95rem; opacity: 0.6; }
.rb-hmist__ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 12px; background: var(--rb-red-soft); color: var(--rb-red); }
.rb-hmist__ico::before { content: ""; width: 1.6rem; height: 1.6rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.rb-hmist__stat { display: inline-block; align-self: flex-start; padding: 0.1rem 0.55rem; border-radius: 6px; background: var(--rb-ink); color: var(--rb-gold); font: 600 1rem var(--rb-display); }
.rb-hmist__i strong { font-size: 1rem; line-height: 1.3; }
.rb-hmist__fix { display: block; margin-top: auto; padding: 0.5rem 0.6rem 0.5rem 1.9rem; border-radius: 8px; background: var(--rb-green-3); color: var(--rb-green); font-size: 0.88rem; font-weight: 700; position: relative; }
.rb-hmist__fix::before { content: ""; position: absolute; left: 0.7rem; top: 0.72rem; width: 0.4rem; height: 0.7rem; border: solid var(--rb-green-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rb-hmist__i--ad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M18 6a8 8 0 0 1 0 12'/%3E%3C/svg%3E"); }
.rb-hmist__i--id { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='11' r='2.2'/%3E%3Cpath d='M5.5 16c.6-1.6 1.7-2.4 3-2.4s2.4.8 3 2.4M14 10h5M14 14h4'/%3E%3C/svg%3E"); }
.rb-hmist__i--gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='5'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13M12 8C10 4 6.5 4.5 7.5 7c.5 1 4.5 1 4.5 1s4-.1 4.5-1c1-2.5-2.5-3-4.5 1z'/%3E%3C/svg%3E"); }
.rb-hmist__i--acca { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M8.5 7h7M8.5 11h7M8.5 15h4'/%3E%3C/svg%3E"); }
.rb-hmist__i--chase { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6 6 4-4 8 8'/%3E%3Cpath d='M15 16h6v-6'/%3E%3C/svg%3E"); }
.rb-hmist__i--dice { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.rb-hmist__i--tip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5h16v10H9l-5 4z'/%3E%3Cpath d='M12 8v3M12 13.2v.1'/%3E%3C/svg%3E"); }
/* the v1 pill rule ".rb-fd__opts span" must not touch spans inside the tiles */
.rb-fd__opts .rb-fd__t span { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; }
.rb-fd__opts .rb-fd__t .rb-pl { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 3px 6px; border: 1px solid var(--rb-line); border-radius: 6px; background: #fff; }
.rb-fd__opts .rb-fd__t .rb-pl--dark { background: #1b2a24; border-color: #1b2a24; }
.rb-fd__opts .rb-fd__t .rb-pl img { height: 100%; width: auto; max-width: 64px; object-fit: contain; }
.rb-fd__opts .rb-fd__t .rb-fd__logo { display: flex; min-height: 3rem; align-items: center; }
/* payments table: bookmaker logos in the header, aligned method column */
.rb-pay__op--lg { height: auto; vertical-align: middle; }
.rb-pay__op--lg img { display: block; width: 34px; height: 34px; margin: 0 auto; border-radius: 8px; background: #fff; object-fit: contain; }
.rb-pay__m .rb-pay__logos { min-width: 9.5rem; }
/* finder: voucher logos in one compact row */
.rb-fd__opts .rb-fd__t .rb-fd__logo .rb-pay__logos { flex-wrap: nowrap; gap: 3px; }
.rb-fd__opts .rb-fd__t .rb-fd__logo .rb-pl { height: 26px; padding: 2px 4px; }
.rb-fd__opts .rb-fd__t .rb-fd__logo .rb-pl img { max-width: 52px; }
.rb-fd__opts .rb-fd__t .rb-fd__logo .rb-pl--blu { display: none; }
.rb-fd__opts .rb-fd__t { min-width: 0; }