/* BetAdvisor.ng front page blocks (loaded on the front page only, after main.css). Mobile first. */

.home-flow { padding-bottom: 8px; }
.home-flow > :not(.hb) { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.home-flow > .rv-related { display: none; }
.home-flow > .rv-faq { margin-top: 0; padding-top: 40px; padding-bottom: 24px; max-width: var(--narrow); }
.home-flow > .rv-faq h2 { text-align: center; }

/* ----- Section bands ----- */
.hb { padding: 44px 0; }
.hb--white { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hb--green { background: var(--green); color: #e4efe9; }
.hb--green h2, .hb--green h3 { color: #fff; }
.hb--green a:not(.rv-btn) { color: var(--lime); }
.hb__in { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.hb__head { max-width: 720px; margin: 0 0 24px; }
.hb__head--c { margin-left: auto; margin-right: auto; text-align: center; }
.hb h2 { margin: 0 0 .45em; scroll-margin-top: 80px; }
.hb__kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); }
.hb--green .hb__kicker { color: var(--lime); }
.hb__lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
.hb--green .hb__lead { color: #cfe2d8; }
.hb__more { margin: 22px 0 0; }
.hb__more--c { text-align: center; }
.hb p:last-child { margin-bottom: 0; }

/* ----- Stats strip ----- */
.hb--stats { padding: 0; background: var(--card); border-bottom: 1px solid var(--line); }
.hb-stats { list-style: none; margin: 0 auto; padding: 14px 16px; max-width: var(--wrap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.hb-stats li { margin: 0; display: flex; flex-direction: column; line-height: 1.3; padding-left: 12px; border-left: 3px solid var(--lime); }
.hb-stats strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--green); }
.hb-stats span { font-size: .84rem; color: var(--ink-soft); }
@media (min-width: 760px) { .hb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 16px; } }

/* ----- Shared bits ----- */
.rv-btn--sm { min-height: 38px; padding: 7px 14px; font-size: .9rem; }
.hb-rank { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-family: var(--font-head); flex: none; }
.hb-rank--sm { width: 26px; height: 26px; font-size: .85rem; }
.hb-badge { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--green-soft); color: var(--green); }
.hb-badge--inline { margin: 0 0 0 4px; padding: 1px 8px; vertical-align: 1px; }
.hb-score { font-weight: 800; color: var(--green); white-space: nowrap; }
.hb-score small { font-weight: 600; color: var(--ink-soft); }
.hb-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chips li { margin: 0; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--ink-soft); background: #fff; }
.hb-tc { margin: 8px 0 0; font-size: .75rem; color: var(--ink-soft); text-align: center; }
.hb-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hb-grid--2, .hb-grid--3, .hb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hb-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.hb--white .hb-box { background: #fbfaf6; box-shadow: none; }
.hb--green .hb-box { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; color: #dbe9e2; }
.hb-box h3 { margin: 0 0 6px; font-size: 1.08rem; }
.hb-box p { margin: 0 0 .6em; font-size: .95rem; }
.hb-box__tag { display: inline-block; margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.hb--green .hb-box__tag { color: var(--lime); }
.hb-ico { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 12px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 800; font-family: var(--font-head); font-size: 1rem; }
.hb--green .hb-ico { background: var(--lime); color: var(--green); }

/* ----- Ranked cards ----- */
.hb-top { margin: 0; }
.hb-podium { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .hb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-card { margin: 0; position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.hb-card--first { border: 2px solid var(--gold); }
.hb-card__head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.hb-card__flag { position: absolute; top: -12px; right: 14px; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.hb-card__name { margin: 0 0 4px; font-size: 1.25rem; }
.hb-card__name a { color: inherit; text-decoration: none; }
.hb-card__name a:hover { text-decoration: underline; }
.hb-card .rv-rate { margin: 0 0 8px; }
.hb-card__offer { margin: 0 0 10px; font-weight: 700; color: var(--ink); line-height: 1.4; flex: 1 0 auto; }
.hb-card__btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.hb-card__btns .rv-btn, .hb-row__btns .rv-btn, .hb-match__btns .rv-btn { margin: 0; text-align: center; justify-content: center; }

.hb-rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.hb-row { margin: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.hb-row:first-child { border-top: 0; }
.hb-row__main { min-width: 0; }
.hb-row__name { margin: 0; font-weight: 800; }
.hb-row__offer { margin: 2px 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.hb-row__btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 760px) {
	.hb-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
	.hb-row__btns { grid-column: auto; display: flex; }
}

/* ----- Finder ----- */
.hb-finder { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: grid; gap: 18px; }
@media (min-width: 960px) { .hb-finder { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 26px; column-gap: 32px; } .hb-finder__out { grid-column: 2; grid-row: 1 / span 3; } .hb-finder__note { grid-column: 1; } }
.hb-finder__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.hb-finder__q legend { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 10px; font-weight: 800; color: var(--green); font-family: var(--font-head); font-size: 1.05rem; }
.hb-finder__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--green); font-size: .85rem; }
.hb-finder__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-finder__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-finder__opts label { cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fbfaf6; font-size: .92rem; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s; }
.hb-finder__opts label:hover { border-color: var(--green-2); }
.hb-finder__opts input:checked + label { background: var(--green); border-color: var(--green); color: #fff; }
.hb-finder__opts input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }
.hb-finder__out { background: var(--green-soft); border-radius: var(--radius); padding: 14px; min-height: 120px; }
.hb-finder__title { margin: 0 0 10px; font-weight: 800; color: var(--green); font-family: var(--font-head); }
.hb-finder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hb-match { margin: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 10px; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: 10px 12px; }
.hb-match__main { min-width: 0; }
.hb-match__name { margin: 0; font-weight: 800; }
.hb-match__why { list-style: none; margin: 2px 0 0; padding: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }
.hb-match__why li { margin: 0; }
.hb-match__why li::before { content: "+ "; color: var(--green-2); font-weight: 800; }
.hb-match__btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-finder__note { margin: 0; font-size: .8rem; color: var(--ink-soft); }

/* ----- Image tiles ----- */
.hb-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .hb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.hb-tile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.hb-tile:hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 2px 4px rgba(13, 59, 44, .08), 0 12px 26px rgba(13, 59, 44, .12); }
.hb-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--green-soft); }
.hb-tile__t { margin: 10px 12px 2px; font-weight: 800; font-family: var(--font-head); color: var(--green); line-height: 1.25; }
.hb-tile__d { margin: 0 12px 12px; font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }

/* ----- Placeholder for images to be added ----- */
.hb-ph { margin: 0; display: grid; place-items: center; aspect-ratio: 16 / 10; border: 2px dashed #b9c9bf; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #f1f5f2 0 12px, #e9f0eb 12px 24px); color: var(--ink-soft); text-align: center; padding: 16px; font-size: .9rem; }
.hb-ph strong { display: block; color: var(--green); }

/* ----- Steps ----- */
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); counter-reset: hbstep; }
@media (min-width: 640px) { .hb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hb-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb-steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-steps > li { margin: 0; position: relative; padding: 16px 16px 16px 62px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); counter-increment: hbstep; }
.hb--white .hb-steps > li { background: #fbfaf6; }
.hb--green .hb-steps > li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.hb-steps > li::before { content: counter(hbstep); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 800; font-family: var(--font-head); }
.hb-steps h3 { margin: 0 0 4px; font-size: 1.02rem; }
.hb-steps p { margin: 0; font-size: .93rem; }

/* ----- Split layouts ----- */
.hb-split { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .hb-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .hb-split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .hb-split--mid { align-items: center; } }
.hb-split img { display: block; width: 100%; border-radius: var(--radius); }
.hb-split .rv-calc { margin: 0; }
.hb-split .rv-fig { margin: 0; }

/* ----- Check cards ----- */
.hb-check h3 { margin-bottom: 10px; }
.hb-check p { position: relative; padding-left: 26px; }
.hb-check p::before { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .72rem; font-weight: 800; line-height: 1; }
.hb-ok::before { content: "\2713"; background: var(--green-soft); color: var(--green-2); }
.hb-no::before { content: "!"; background: var(--red-soft); color: #a4511b; border: 1px solid var(--red-line); }

/* ----- Payments ----- */
.hb-pay__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hb-pay__badges span { padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--green-soft); color: var(--green); }
.hb-pay__badges span.is-soft { background: #f1efe8; color: var(--ink-soft); }
.hb-mins { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hb-mins li { margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.hb-mins .rv-tile { transform: scale(.85); }
.hb-mins b { color: var(--green); font-family: var(--font-head); }
.hb-mins span { font-size: .85rem; color: var(--ink-soft); }

/* ----- Market tiles ----- */
.hb-mkts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .hb-mkts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.hb-mkt { display: block; padding: 14px; background: #fbfaf6; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.hb-mkt:hover { border-color: var(--green-2); transform: translateY(-2px); color: var(--ink); }
.hb-mkt__code { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--green); line-height: 1.1; }
.hb-mkt__name { display: block; margin: 4px 0 2px; font-weight: 700; font-size: .92rem; }
.hb-mkt__d { display: block; font-size: .83rem; color: var(--ink-soft); line-height: 1.4; }

/* ----- Feature cards with image ----- */
.hb-feature { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hb-feature img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hb-feature__b { padding: 18px; display: flex; flex-direction: column; flex: 1 0 auto; }
.hb-feature h3 { margin: 0 0 6px; }
.hb-feature ul, .hb-feature ol { margin: 0 0 14px; font-size: .95rem; }
.hb-feature .rv-btn { align-self: flex-start; margin-top: auto; }

/* ----- Warnings ----- */
.hb-warns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-warns li { margin: 0; padding: 12px 14px 12px 48px; position: relative; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red-line); border-radius: var(--radius-sm); font-size: .94rem; }
.hb-warns li::before { content: "!"; position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red-soft); color: #a4511b; font-weight: 800; font-size: .8rem; }
.hb-warns strong { display: block; color: var(--ink); }

/* ----- Details (more text) ----- */
.hb-more { margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.hb--green .hb-more { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.hb-more summary { cursor: pointer; list-style: none; padding: 12px 40px 12px 14px; font-weight: 700; position: relative; }
.hb-more summary::-webkit-details-marker { display: none; }
.hb-more summary::after { content: "+"; position: absolute; right: 14px; top: 8px; font-size: 1.3rem; color: var(--green-2); }
.hb--green .hb-more summary::after { color: var(--lime); }
.hb-more[open] summary::after { content: "-"; }
.hb-more__b { padding: 0 14px 12px; font-size: .95rem; }

/* ----- Responsible gambling ----- */
.hb-rg { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .hb-rg { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.hb-18 { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--lime); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; }
.hb-rg ul { margin: 0; padding-left: 1.2em; }
.hb-rg li { margin: .3em 0; }

@media (prefers-reduced-motion: reduce) { .hb-tile, .hb-mkt { transition: none; } .hb-tile:hover, .hb-mkt:hover { transform: none; } }
.hb-tiles--after { margin-top: 16px; }
.hb-card .hb-badge, .hb-card .rv-rate { align-self: flex-start; }
.hb-pay__badges span { white-space: nowrap; }

/* ----- Accumulator reality check [rv_acca_chart] ----- */
.hb-acca { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.hb-acca__ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 18px; margin: 0 0 16px; padding: 12px 14px; background: var(--green-soft); border-radius: var(--radius-sm); }
@media (min-width: 560px) { .hb-acca__ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto; } }
.hb-acca__ctl label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--green); }
.hb-acca__ctl output { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; color: var(--green); }
.hb-acca__ctl input[type=range] { width: 100%; margin: 2px 0 8px; accent-color: var(--green-2); }
.hb-acca__grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.hb-acca__lbl { font-size: .72rem; line-height: 1.25; color: var(--ink-soft); font-weight: 700; }
.hb-acca__lbl--top { align-self: end; padding-bottom: 6px; }
.hb-acca__bars, .hb-acca__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.hb-acca__bars { height: 170px; align-items: end; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); border-bottom: 2px solid var(--ink-soft); }
.hb-acca__col { all: unset; box-sizing: border-box; cursor: pointer; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px 6px 0 0; }
.hb-acca__col:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hb-acca__val { font-size: .74rem; font-weight: 800; color: var(--ink); margin-bottom: 3px; white-space: nowrap; }
.hb-acca__bar { display: block; width: 78%; min-height: 2px; border-radius: 5px 5px 0 0; transition: height .25s ease, opacity .15s; opacity: .8; }
.hb-acca__col.z-hi .hb-acca__bar { background: var(--green-2); }
.hb-acca__col.z-mid .hb-acca__bar { background: #d99a00; }
.hb-acca__col.z-lo .hb-acca__bar { background: #b3261e; }
.hb-acca__col:hover .hb-acca__bar { opacity: 1; }
.hb-acca__col.is-sel { background: rgba(183, 227, 74, .28); }
.hb-acca__col.is-sel .hb-acca__bar { opacity: 1; box-shadow: 0 0 0 2px var(--green); }
.hb-acca__row span { text-align: center; font-size: .74rem; font-weight: 700; color: var(--ink); padding: 3px 0; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hb-acca__row--legs span { font-size: .85rem; color: var(--ink-soft); }
.hb-acca__row span.is-sel { background: rgba(183, 227, 74, .35); color: var(--green); }
.hb-acca__read { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); border-left: 4px solid var(--green-2); background: #fbfaf6; font-size: .93rem; }
.hb-acca__read.z-mid { border-left-color: #d99a00; }
.hb-acca__read.z-lo { border-left-color: #b3261e; }
.hb-acca__read p { margin: 0 0 .4em; }
.hb-acca__read p:last-child { margin: 0; }
.hb-acca__big { font-size: 1.05rem; }
.hb-acca figcaption { font-size: .78rem; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 420px) { .hb-acca { padding: 12px; } .hb-acca__grid { grid-template-columns: 58px minmax(0, 1fr); } .hb-acca__bars, .hb-acca__row { gap: 2px; } .hb-acca__val, .hb-acca__row span { font-size: .66rem; } .hb-acca__lbl { font-size: .66rem; } }
@media (prefers-reduced-motion: reduce) { .hb-acca__bar { transition: none; } }

/* ----- Hero section tiles ----- */
.hero-tiles { position: relative; z-index: 1; margin: 22px 0 0; }
.hero-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .hero-tiles ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
.hero-tiles li { margin: 0; min-width: 0; }
.hero-tile { position: relative; height: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s, transform .15s; }
.hero-tile:hover, .hero-tile:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); border-color: var(--lime); transform: translateY(-2px); }
.hero-tile__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(183, 227, 74, .14); color: var(--lime); }
.hero-tile__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hero-tile__t { font-weight: 800; font-size: .95rem; font-family: var(--font-head); }
.hero-tile__d { margin-top: 2px; font-size: .74rem; color: #a9c6b7; overflow: hidden; text-overflow: ellipsis; }
.hero-tile--hot { background: linear-gradient(135deg, rgba(183, 227, 74, .22), rgba(183, 227, 74, .06)); border-color: rgba(183, 227, 74, .55); }
.hero-tile--hot .hero-tile__ico { background: var(--lime); color: var(--green); }
.hero-tile__hot { position: absolute; top: -8px; right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hero .meta-line { margin-bottom: 0; }
@media (max-width: 400px) { .hero-tile { padding: 9px 10px; gap: 8px; } .hero-tile__ico { width: 32px; height: 32px; } .hero-tile__ico svg { width: 19px; height: 19px; } .hero-tile__t { font-size: .88rem; } .hero-tile__d { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .hero-tile { transition: none; } .hero-tile:hover { transform: none; } }

/* ----- FAQ on the front page: two columns ----- */
.home-flow > .rv-faq { max-width: var(--wrap); padding-top: 44px; }
.home-flow > .rv-faq h2 { margin-bottom: 18px; }
@media (min-width: 900px) {
	.home-flow > .rv-faq { column-count: 2; column-gap: 18px; }
	.home-flow > .rv-faq > :not(.rv-faq__item) { column-span: all; }
	.home-flow > .rv-faq .rv-faq__item { break-inside: avoid; margin: 0 0 10px; display: block; }
}
.home-flow > .rv-faq .rv-faq__item { background: var(--card); box-shadow: var(--shadow); }
.home-flow > .rv-faq .rv-faq__item[open] { border-color: var(--green-2); }

/* ----- Sign-up illustration [rv_signup_mock] ----- */
.sm { margin: 0; }
.sm-stage { position: relative; min-height: 470px; border-radius: var(--radius); overflow: hidden; padding: 24px 16px;
	background: radial-gradient(60% 50% at 75% 15%, rgba(183, 227, 74, .35), transparent 70%), radial-gradient(70% 60% at 10% 100%, rgba(20, 92, 67, .35), transparent 70%), var(--green-soft);
	border: 1px solid var(--line); display: grid; place-items: center; }
.sm-stage::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 2px dashed rgba(20, 92, 67, .18); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sm-phone { position: relative; z-index: 1; width: 232px; border-radius: 34px; background: #10241c; padding: 10px; box-shadow: 0 24px 50px rgba(13, 59, 44, .35), inset 0 0 0 2px #2d4a3e; }
.sm-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 16px; border-radius: 10px; background: #10241c; z-index: 2; }
.sm-screen { background: #fff; border-radius: 26px; padding: 30px 14px 14px; font-size: 11px; line-height: 1.3; color: var(--ink); }
.sm-status { position: absolute; top: 16px; left: 26px; right: 26px; display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; color: var(--ink); }
.sm-bars { display: flex; gap: 2px; align-items: flex-end; }
.sm-bars i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.sm-bars i:nth-child(1) { height: 4px; } .sm-bars i:nth-child(2) { height: 6px; } .sm-bars i:nth-child(3) { height: 8px; } .sm-bars i:nth-child(4) { height: 10px; }
.sm-app { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.sm-logo { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--green); }
.sm-logo b { color: var(--green-2); background: var(--lime); padding: 0 3px; border-radius: 3px; margin-left: 1px; }
.sm-x { width: 18px; height: 18px; border-radius: 50%; background: #f1efe8; display: grid; place-items: center; font-size: 9px; color: var(--ink-soft); }
.sm-title { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--green); }
.sm-sub { margin: 0 0 10px; color: var(--ink-soft); font-size: 10px; }
.sm-field { position: relative; margin: 0 0 8px; }
.sm-field label { display: block; font-size: 9.5px; font-weight: 700; color: var(--ink-soft); margin: 0 0 3px; }
.sm-input { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 11px; }
.sm-field:first-of-type .sm-input { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(20, 92, 67, .12); }
.sm-cc { padding-right: 6px; border-right: 1px solid var(--line); color: var(--green); font-size: 10px; }
.sm-dots { letter-spacing: 1px; color: var(--ink-soft); }
.sm-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sm-otp span { height: 28px; border: 1.5px solid var(--line); border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--green); }
.sm-otp span.is-cur { border-color: var(--green-2); box-shadow: inset 0 -3px 0 var(--lime); }
.sm-hint { margin: 3px 0 0; font-size: 8.5px; color: #a4511b; font-weight: 700; }
.sm-check { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 9.5px; }
.sm-box { width: 13px; height: 13px; border-radius: 3px; background: var(--green-2); position: relative; flex: none; }
.sm-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sm-btn { height: 32px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.sm-legal { margin: 8px 0 0; text-align: center; font-size: 8.5px; color: var(--ink-soft); }
.sm-pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: var(--lime); font-weight: 800; font-size: 12px; font-family: var(--font-head); box-shadow: 0 0 0 3px #fff; flex: none; }
.sm-pin--in { position: absolute; right: -20px; top: 14px; z-index: 3; }
.sm-tip, .sm-dep, .sm-ver { position: absolute; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 28px rgba(13, 59, 44, .18); padding: 10px 12px; font-size: 12px; line-height: 1.35; }
.sm-tip { left: 14px; top: 18px; width: 170px; }
.sm-tip .sm-pin { position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; font-size: 11px; }
.sm-tip b { display: block; color: var(--green); font-size: 12.5px; }
.sm-tip span { color: var(--ink-soft); font-size: 11.5px; }
.sm-dep { right: 14px; bottom: 18px; width: 172px; }
.sm-dep .sm-pin { position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; font-size: 11px; }
.sm-dep__t { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.sm-dep__amt { margin: 2px 0 6px; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--green); }
.sm-dep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sm-dep li { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 6px; border-radius: 7px; background: #f6f4ee; }
.sm-dep li i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.sm-dep li.is-on { background: var(--green-soft); color: var(--green); }
.sm-dep li.is-on i { border-color: var(--green-2); background: var(--lime); }
.sm-ver { right: 14px; top: 70px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 12px 8px 8px; }
.sm-ver span { font-weight: 800; color: var(--green); font-size: 12px; }
.sm-ver em { grid-column: 2; font-style: normal; font-size: 10.5px; color: var(--ink-soft); }
.sm figcaption { margin-top: 8px; font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 520px) {
	.sm-stage { min-height: 0; padding: 16px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
	.sm-stage::before { display: none; }
	.sm-tip, .sm-dep, .sm-ver { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; max-width: 300px; }
	.sm-tip { order: 0; } .sm-phone { order: 1; } .sm-ver { order: 2; } .sm-dep { order: 3; }
	.sm-pin--in { right: -14px; }
}
@media (min-width: 900px) and (max-width: 1100px) { .sm-tip { width: 150px; } .sm-dep { width: 160px; } }
/* sign-up mock: layout v2 - phone left, notes in a column on the right; pin colours win over card text rules */
.sm-stage .sm-pin { color: var(--lime); font-size: 11px; font-weight: 800; }
@media (min-width: 521px) {
	.sm-stage { display: block; min-height: 480px; padding: 20px; }
	.sm-stage::before { left: 34%; }
	.sm-phone { margin: 0 0 0 4%; }
	.sm-tip, .sm-ver, .sm-dep { left: auto; right: 16px; width: 44%; max-width: 200px; }
	.sm-tip { top: 26px; bottom: auto; }
	.sm-ver { top: 150px; bottom: auto; }
	.sm-dep { top: auto; bottom: 26px; }
	.sm-ver .sm-pin, .sm-tip .sm-pin, .sm-dep .sm-pin { position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; }
	.sm-ver { display: block; padding: 10px 12px; }
	.sm-ver span:not(.sm-pin), .sm-ver em { display: block; }
}

/* ----- Colour icons (hb-ico--*) ----- */
.hb-ico[class*="hb-ico--"] { color: transparent; position: relative; background: var(--ico, var(--green)); box-shadow: 0 6px 14px -6px var(--ico, var(--green)); }
.hb-ico[class*="hb-ico--"]::before { content: ""; position: absolute; inset: 10px; background: #fff; -webkit-mask: var(--ico-svg) center / contain no-repeat; mask: var(--ico-svg) center / contain no-repeat; }
.hb--green .hb-ico[class*="hb-ico--"] { box-shadow: none; }
.hb-ico--bank { --ico: #2563eb; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h18L12%204z%22%2F%3E%3Cpath%20d%3D%22M5%2010v8M9.5%2010v8M14.5%2010v8M19%2010v8M3%2020h18%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--ussd { --ico: #7c3aed; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222.5%22%20width%3D%2212%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9.5%208h1M13.5%208h1M9.5%2011.5h1M13.5%2011.5h1M9.5%2015h1M13.5%2015h1%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--wallet { --ico: #0d9488; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207a2%202%200%200%201%202-2h11v4%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M16%2014h2%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--card { --ico: #ea580c; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M7%2015h4%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--crypto { --ico: #d97706; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M10%207.5v9M10%207.5h3.2a2.2%202.2%200%200%201%200%204.4H10M10%2011.9h3.8a2.3%202.3%200%200%201%200%204.6H10M11.5%206v1.5M11.5%2016.5V18%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--payout { --ico: #dc2626; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M3.5%2019c.6-3.2%202.8-5%205.5-5s4.9%201.8%205.5%205%22%2F%3E%3Cpath%20d%3D%22M15.5%2011.5l2%202%203.5-4%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--lagos { --ico: #145c43; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h18L12%204z%22%2F%3E%3Cpath%20d%3D%22M5%2010v8M9.5%2010v8M14.5%2010v8M19%2010v8M3%2020h18%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--fct { --ico: #2563eb; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-10.5a6.5%206.5%200%200%201%2013%200C18.5%2015.4%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210.5%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--states { --ico: #7c3aed; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206l6-2%206%202%206-2v14l-6%202-6-2-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v14M15%206v14%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--calc { --ico: #0d9488; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2012h2M12%2012h2M16%2012h0M8%2016h2M12%2016h2M16%2016h0%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--facts { --ico: #2563eb; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M15%2015l5.5%205.5M8%2010.5h5M10.5%208v5%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--money { --ico: #d97706; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M6%209.5v5M18%209.5v5%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--fix { --ico: #dc2626; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l4-1%2010.5-10.5a2.1%202.1%200%200%200-3-3L5%2016z%22%2F%3E%3Cpath%20d%3D%22M14%207l3%203%22%2F%3E%3C%2Fsvg%3E"); }

/* sign-up mock v3: phone pinned left */
@media (min-width: 521px) {
	.sm-stage .sm-phone { position: absolute; left: 20px; top: 20px; margin: 0; transform-origin: top left; }
	.sm-stage::before { left: 140px; }
}
@media (min-width: 521px) and (max-width: 1150px) { .sm-stage .sm-phone { transform: scale(.88); } .sm-stage { min-height: 430px; } }

.hb-ico--ticket { --ico: #7c3aed; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v3a2%202%200%200%200%200%204v3a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-3a2%202%200%200%200%200-4z%22%2F%3E%3Cpath%20d%3D%22M14%205v14%22%20stroke-dasharray%3D%222%202.5%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--boost { --ico: #ea580c; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2018l5-5%204%204%207-8%22%2F%3E%3Cpath%20d%3D%22M15%209h5v5%22%2F%3E%3C%2Fsvg%3E"); }
.hb-ico--gift { --ico: #dc2626; --ico-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%208v13%22%2F%3E%3Cpath%20d%3D%22M12%208c-2-4-6-4-6-1.5S10%208%2012%208zM12%208c2-4%206-4%206-1.5S14%208%2012%208z%22%2F%3E%3C%2Fsvg%3E"); }
/* ----- Bonus types, visualised; both columns the same height ----- */
@media (min-width: 900px) { .hb-split--eq { align-items: stretch; } .hb-split--eq .hb-split__calc, .hb-split--eq .rv-calc { height: 100%; margin: 0; } }
.hb-bts { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hb-bts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
.hb-bt { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--bt, var(--green-2)); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.hb-bt--match { --bt: #d97706; } .hb-bt--free { --bt: #7c3aed; } .hb-bt--boost { --bt: #ea580c; } .hb-bt--nodep { --bt: #dc2626; }
.hb-bt__top { display: flex; gap: 12px; align-items: flex-start; }
.hb-bt__top .hb-ico { margin: 0; flex: none; }
.hb-bt .hb-box__tag { margin: 2px 0 2px; color: var(--bt); }
.hb-bt__what { margin: 0; font-size: .92rem; line-height: 1.4; }
.hb-bt__viz { flex: 1 1 auto; background: #f8f7f2; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.hb-bt__ex { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hb-bt__note { margin: 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.hb-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; font-size: .72rem; font-weight: 800; }
.hb-bar__fill { flex: 1 1 50%; display: grid; place-items: center; white-space: nowrap; padding: 0 4px; }
.hb-bar__fill--you { background: var(--green-2); color: #fff; }
.hb-bar__fill--bonus { background: repeating-linear-gradient(45deg, #fbbf24 0 8px, #f59e0b 8px 16px); color: #3a2a00; }
.hb-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 4px; text-align: center; }
.hb-eq > span:not(.hb-eq__op) { display: flex; flex-direction: column; gap: 2px; font-size: .64rem; font-weight: 700; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; line-height: 1.2; }
.hb-eq b { font-size: .86rem; color: var(--ink); font-family: var(--font-head); }
.hb-eq__b b { color: #b3261e; text-decoration: line-through; }
.hb-eq > .hb-eq__r { border-color: #7c3aed; } .hb-eq__r b { color: #7c3aed; }
.hb-eq__op { font-weight: 800; color: var(--ink-soft); }
.hb-legs { display: grid; gap: 6px; }
.hb-legs span { display: flex; align-items: center; gap: 4px; }
.hb-legs i { width: 12px; height: 12px; border-radius: 50%; background: #ea580c; opacity: .85; }
.hb-legs b { margin-left: auto; font-size: .8rem; font-weight: 800; color: #ea580c; }
.hb-nd { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 6px; }
.hb-nd > span:not(.hb-nd__arrow) { display: flex; flex-direction: column; gap: 2px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; }
.hb-nd b { font-size: .86rem; color: var(--ink); font-family: var(--font-head); }
.hb-nd__out b { color: #dc2626; }
.hb-nd__arrow { height: 2px; background: var(--ink-soft); position: relative; }
.hb-nd__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--ink-soft); border-right: 0; }
.hb-catch { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hb-catch b { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a4511b; margin-right: 2px; }
.hb-catch span { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--red-soft); border: 1px solid var(--red-line); color: #7a3a10; }
/* bonus cards: catch row as a one-line footer; keep the free-bet formula inside the card */
.hb-bt { overflow: hidden; }
.hb-bt__viz { min-width: 0; }
.hb-eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.hb-eq > span:not(.hb-eq__op) { min-width: 0; }
.hb-catch { flex-wrap: nowrap; gap: 5px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #ead9cc; min-width: 0; }
.hb-catch b { flex: none; font-size: .66rem; margin-right: 1px; }
.hb-catch span { flex: 0 1 auto; min-width: 0; font-size: .72rem; padding: 2px 8px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) and (max-width: 1100px) { .hb-catch b { display: none; } }
/* catch row v3: one tinted strip, items separated by dots, never cut */
.hb-catch { flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin-top: auto; padding: 7px 10px; border: 0; border-radius: 8px; background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red-line); }
.hb-catch b { font-size: .64rem; margin-right: 8px; }
.hb-catch span { padding: 0; border: 0; background: none; border-radius: 0; overflow: visible; text-overflow: clip; font-size: .76rem; line-height: 1.35; color: #7a3a10; }
.hb-catch span + span::before { content: "\00B7"; display: inline-block; margin: 0 6px; font-weight: 800; color: #c2410c; }
@media (min-width: 900px) and (max-width: 1100px) { .hb-catch b { display: inline; } }
@media (min-width: 900px) { .hb-split--eq { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; } }
.hb-catch { padding: 6px 9px; }
.hb-catch span { font-weight: 600; font-size: .74rem; }
.hb-catch span + span::before { margin: 0 5px; }
@media (min-width: 900px) { .hb-catch { flex-wrap: nowrap; white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1179px) { .hb-catch { flex-wrap: wrap; white-space: normal; } .hb-catch span { white-space: nowrap; } }
.hb-split__calc .rv-calc__out > * { min-width: 0; }
@media (min-width: 900px) and (max-width: 1179px) { .hb-split__calc .rv-calc__out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-badge--warn { background: var(--red-soft); color: #a4511b; border: 1px solid var(--red-line); }