/* Betting / Bookmakers section styles.
   Hand-authored (same approach as style-newbury-hospitality.css). Values from the
   Figma "Work_page" file, page "bookmakers_des", frame "Bookmaker Reviews"
   (1440px artboard, 1312px content width). Classes are `bk-` prefixed and scoped
   under .bk-page so nothing else in the theme is touched.

   Palette: navy #16486D, accent yellow #FFE208, tints #F4F6FB / #E2EFFF,
   borders #E3E6EE / #E5E5E5, pro green #67B550, con red #DD3F3F. */

/* The theme's global stylesheet only loads Open Sans 400/500/700 upright; this
   section also uses 600 and 800, plus a Bold Italic (byline name), so pull the
   full range including italics. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap');

:root {
    --bk-navy: #16486d;
    --bk-navy-2: #15486e;
    --bk-yellow: #ffe208;
    --bk-tint: #f4f6fb;
    --bk-tint-blue: #e2efff;
    --bk-border: #e3e6ee;
    --bk-green: #67b550;
    --bk-red: #dd3f3f;
    --bk-wrap: 1312px;
}

/* Type scale, taken verbatim from the Figma "Bookmaker Reviews" frame:
   48 = page H1 / section H2   32 = verdict brand   24 = sub-heads, card labels,
   glance title   20 = list items, FAQ question, breadcrumb, buttons
   18 = body copy   16 = labels, values, meta   Weights: 400 / 600 / 700 only. */
.bk-page {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
    overflow-x: clip;
}

.bk-page *,
.bk-page *::before,
.bk-page *::after {
    box-sizing: border-box;
}

.bk-page img {
    max-width: 100%;
    height: auto;
}

.bk-page p {
    font-weight: 400;
}

.bk-wrap {
    max-width: var(--bk-wrap);
    margin: 0 auto;
    padding-inline: 20px;
}

/* ----------------------------------------------------------- buttons ---- */
.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    /* Figma: text 20 / line-height 32 -> 64px tall button */
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.bk-btn--primary {
    background: var(--bk-yellow);
    color: var(--bk-navy);
}

.bk-btn--primary:hover {
    background: #f4d500;
}

.bk-btn--ghost {
    border-color: var(--bk-yellow);
    color: var(--bk-yellow);
}

.bk-btn--ghost:hover {
    background: rgba(255, 226, 8, .12);
}

.bk-btn--navy {
    background: var(--bk-navy);
    color: #fff;
}

.bk-btn--navy:hover {
    background: #0f3450;
}

/* ------------------------------------------------------------- bands ---- */
.bk-band {
    padding: 100px 0;
}

/* Figma: 100px top/bottom on every band except the byline */
.bk-band--navy {
    background: var(--bk-navy);
    color: #fff;
}

.bk-band--yellow {
    background: var(--bk-yellow);
    color: var(--bk-navy);
    padding: 32px 0;
}

.bk-band--tint {
    background: var(--bk-tint-blue);
    color: var(--bk-navy);
}

.bk-band--plain {
    background: #fff;
}

.bk-band--connect {
    padding-top: 0;
}

/* .bk-compliance carries its own 50px margin-top (for when it follows content
   inside the SAME band on the review/toplist pages). With padding-top:0 here,
   that margin no longer has anything to collapse into and just adds 50px of
   unwanted blank space above the box (confirmed via measured getBoundingClientRect
   — every other adjacent .bk-band pair is flush, only this one wasn't) — so
   drop it specifically for the Section Hub's connected compliance band. */
.bk-band--connect .bk-compliance {
    margin-top: 0;
}

/* hug the band above (Figma: How We Rank has 0 top padding) */
/* pros & cons band: the racing photo already carries the navy wash (from the
   Figma frame), so it is used as-is over a matching solid fallback */
.bk-band--proscons {
    background-color: var(--bk-navy);
    background-image: linear-gradient(rgba(22, 72, 109, .25), rgba(22, 72, 109, .25)), url(../images/betting/proscons-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* section headings shared by pros/cons, FAQ and compare — Figma: Bold 48 / 1.2 */
.bk-proscons__title,
.bk-faq__title,
.bk-compare__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

/* ---------------------------------------------------------- title bar ---- */
.bk-titlebar {
    background: var(--bk-yellow);
    padding: 36px 0;
    text-align: center;
}

.bk-titlebar__h1 {
    margin: 0;
    color: var(--bk-navy);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.2;
}

.bk-titlebar__meta {
    margin: 8px 0 0;
    font-weight: 600;
    /* Figma: Semibold 16 / 1.4 */
    font-size: 16px;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* Category Hub strap line under the H1 — Figma "Category Hubs": Bold 16 / 1.4 */
.bk-titlebar__sub {
    margin: 12px auto 0;
    max-width: 760px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* --------------------------------------------------------- breadcrumb ---- */
/* Figma: Open Sans Regular 20 / 1.4, current page in Bold 20 */
.bk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 32px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    border-bottom: 1px solid rgba(21, 72, 110, .25);
}

.bk-breadcrumb a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
}

.bk-breadcrumb a:hover {
    text-decoration: underline;
}

.bk-breadcrumb [aria-current] {
    font-weight: 700;
}

@media (max-width: 600px) {
    .bk-breadcrumb {
        font-size: 15px;
    }
}

/* ------------------------------------------------------------- stars ---- */
.bk-stars {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bk-stars__label {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .5px;
    color: var(--bk-yellow);
}

.bk-stars__outof {
    font-size: 15px;
    font-weight: 600;
    opacity: .8;
}

.bk-stars__track {
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 4px;
    white-space: nowrap;
}

.bk-stars__empty {
    color: rgba(255, 255, 255, .28);
}

.bk-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--bk-yellow);
}

/* on light backgrounds */
.bk-stars--on-light .bk-stars__label {
    color: var(--bk-navy);
}

.bk-stars--on-light .bk-stars__empty {
    color: rgba(22, 72, 109, .25);
}

.bk-stars--on-light .bk-stars__fill {
    color: var(--bk-navy);
}

/* --------------------------------------------------------- main / body ---- */
.bk-main {
    background: #fff;
    padding: 40px 0 80px;
}

/* ----------------------------------------------------------- verdict ---- */
.bk-verdict {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 32px;
    color: #fff;
}

.bk-verdict__rank {
    position: absolute;
    top: -16px;
    left: 32px;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--bk-yellow);
    color: var(--bk-navy);
    font-weight: 700;
    font-size: 18px;
}

.bk-verdict__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    padding: 0;
    background: #181f1d;
    border-radius: 50%;
    overflow: hidden;
}

.bk-verdict__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-verdict__info {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bk-verdict__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bk-verdict__brand {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* Figma: one uniform block — Open Sans Regular 18 / 1.4, #ffffff, including the
   "18+, new customers only. T&Cs apply." sentence. No separate fine print. */
.bk-verdict__offer {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    overflow-wrap: anywhere;
}

.bk-verdict__cta {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* -------------------------------------------------- at a glance + body ---- */
.bk-body {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 48px;
    margin-top: 40px;
    align-items: start;
}

.bk-glance,
.bk-review {
    min-width: 0;
}

.bk-glance {
    border: 1px solid var(--bk-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bk-tint);
}

.bk-glance__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--bk-navy);
    color: #fff;
}

.bk-glance__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}

.bk-glance__year {
    font-size: 16px;
    font-weight: 400;
    opacity: .85;
}

.bk-glance__rows {
    margin: 0;
}

.bk-glance__row {
    --bk-glance-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px var(--bk-glance-gap);
    padding: 16px 24px;
    border-top: 1px solid var(--bk-border);
    font-size: 16px;
    line-height: 1.4;
}

/* each column is half the row minus half the column gap, so dt + gap + dd == 100%
   and dd never wraps onto its own line */
.bk-glance__row dt,
.bk-glance__row dd {
    flex: 0 0 calc(50% - var(--bk-glance-gap) / 2);
    max-width: calc(50% - var(--bk-glance-gap) / 2);
    min-width: 0;
    margin: 0;
    color: var(--bk-navy);
    overflow-wrap: anywhere;
}

.bk-glance__row dd {
    font-weight: 600;
    text-align: right;
}

.bk-review {
    color: var(--bk-navy);
}

.bk-review__intro {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}

.bk-review__section {
    margin-bottom: 28px;
}

/* Figma: first section head Bold 48, the rest Bold 24; body Regular 18 / 1.4 */
.bk-review__section h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-review__section:first-of-type h3 {
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.2;
    margin-bottom: 16px;
}

.bk-review__section p {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-review__section a {
    color: var(--bk-navy);
    text-decoration: underline;
}

/* --------------------------------------------------------- pros & cons ---- */
.bk-proscons__title {
    color: inherit;
}

.bk-proscons__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.bk-proscons__col {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    color: var(--bk-navy);
}

/* Figma: headers carry no icon (the badge layers are hidden in the frame) */
.bk-proscons__head {
    margin: 0;
    padding: 22px 28px;
    font-weight: 700;
    font-size: 24px;
    /* Figma: Bold 24 / 1.3 */
    line-height: 1.3;
}

.bk-proscons__col--pro .bk-proscons__head {
    background: var(--bk-yellow);
    color: var(--bk-navy);
}

.bk-proscons__col--con .bk-proscons__head {
    background: #d5e0e8;
    color: var(--bk-navy);
}

.bk-proscons__col ul {
    list-style: none;
    margin: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bk-proscons__col li {
    position: relative;
    padding: 2px 0 20px 48px;
    font-size: 20px;
    /* Figma: Regular 20 / 1.4 */
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid rgba(5, 5, 5, .1);
}

.bk-proscons__col li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* row markers use the exact Figma icons (ant-design check / fluent error) */
.bk-proscons__col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: center / contain no-repeat;
}

.bk-proscons__col--pro li::before {
    background-image: url(../images/betting/icon-pro.svg);
}

.bk-proscons__col--con li {
    color: #7b7b7b;
}

.bk-proscons__col--con li::before {
    background-image: url(../images/betting/icon-con.svg);
}

/* ------------------------------------------------------------ byline ---- */
.bk-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bk-byline__who {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bk-byline__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--bk-navy);
    object-fit: cover;
    background: #fff;
}

/* Figma: "Reviewed by: " Bold 24, the name Bold Italic 24; date Regular 16 */
.bk-byline__name {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-byline__name em {
    font-weight: 700;
    font-style: italic;
}

.bk-byline__date {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

/* --------------------------------------------------------------- FAQ ---- */
/* Figma (Frame 55, node 1271:1436): NO outer container border and NO per-row
   box. Each row is a white block whose ONLY border is a 1px #E5E5E5 hairline on
   the bottom edge (strokeBottomWeight:1, all other sides 0) — kept on the last
   row too. Row padding 30/24, inner gap 10. Question Bold 20 / lh 26 #17486D.
   Toggle is a + that loses its vertical bar (becomes −) when open; when open a
   1px #E5E5E5 line sits directly under the question, above the answer. */
.bk-faq__title {
    color: var(--bk-navy);
}

.bk-faq__list {
    display: block;
    background: #fff;
}

.bk-faq__item {
    border-bottom: 1px solid #e5e5e5;
}

.bk-faq__q {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 30px 24px;
    background: none;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #17486d;
    text-align: left;
    cursor: pointer;
    transition: padding-bottom .3s ease;
}

.bk-faq__toggle {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
}

.bk-faq__toggle::before,
.bk-faq__toggle::after {
    content: "";
    position: absolute;
    background: #17486d;
    border-radius: 2px;
}

.bk-faq__toggle::before {
    left: 0;
    top: 7px;
    width: 16px;
    height: 2px;
}

.bk-faq__toggle::after {
    left: 7px;
    top: 0;
    width: 2px;
    height: 16px;
    transition: opacity .2s ease;
}

.bk-faq__item.is-open .bk-faq__toggle::after {
    opacity: 0;
}

/* Open: the question tucks up (padding-bottom 16) and a 1px navy divider, inset
   24px to the text column, sits between it and the answer — same treatment as
   the hospitality FAQ (.nh-faq__item.is-open .nh-faq__question::after). Closed
   rows keep the full 30/30 so every collapsed row is the same height. */
.bk-faq__item.is-open .bk-faq__q {
    padding-bottom: 16px;
}

.bk-faq__item.is-open .bk-faq__q::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: #16486d;
}

/* same grid 0fr → 1fr open/close as .bk-h2h__a; the 16/30 vertical gaps are
   spacers inside the clipped wrapper (and the question's padding-bottom is
   transitioned) so nothing jumps while the height animates */
.bk-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 24px;
    transition: grid-template-rows .3s ease;
}

.bk-faq__item.is-open .bk-faq__a {
    grid-template-rows: 1fr;
}

.bk-faq__a-in {
    min-height: 0;
    overflow: hidden;
}

.bk-faq__a-in::before,
.bk-faq__a-in::after {
    content: "";
    display: block;
    height: 16px;
}

.bk-faq__a-in::after {
    height: 30px;
}

.bk-faq__a p {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #17486d;
}

.bk-faq__a p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------- compare ---- */
.bk-compare__title {
    color: var(--bk-navy);
}

.bk-compare__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Figma "Related Category Hubs" card (Frame 3, 424x203): navy #15486e, 2px
   yellow border, r40, 32px padding, 32px gap between the label block and the
   button. The label carries a full-width yellow hairline under it (16px below
   the text) — there is NO sub-label in the mock. */
.bk-compare__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy-2);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
    color: var(--bk-yellow);
    text-decoration: none;
}

.bk-compare__card-label {
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bk-yellow);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}

.bk-compare__card-btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 32px;
    /* Figma: tighter than the standard .bk-btn */
}

/* ------------------------------------------------------- compliance ---- */
/* Figma: white card, radius 40, 64px "!" icon, and a 1px navy border with an
   exact 4-on / 4-off dash (Figma dashPattern [4,4]). CSS `border: dashed` lets
   the browser pick the dash rhythm, so the border is drawn as an inline SVG
   stroke (stroke-width 2, half clipped by the box = 1px shown) with an explicit
   stroke-dasharray of 4 4, matching the mock exactly. */
.bk-compliance {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 50px;
    padding: 32px 40px;
    border-radius: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3Crect%20width='100%25'%20height='100%25'%20rx='40'%20ry='40'%20fill='none'%20stroke='%2316486d'%20stroke-width='2'%20stroke-dasharray='4%204'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bk-compliance__badge {
    flex: none;
    width: 64px;
    height: 64px;
    font-size: 0;
    background: url(../images/betting/icon-attention.svg) center / contain no-repeat;
}

.bk-compliance__body {
    min-width: 0;
}

.bk-compliance__lead {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--bk-navy);
}

/* Figma: ExtraBold 24 */
.bk-compliance__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-compliance__text a {
    color: inherit;
}

/* bk_hub_compliance_text is a wysiwyg field (hub-compliance block) — its own
   <p> replaces the single hard-coded <p> this container used to wrap
   directly, so give it back the same zero margin. */
.bk-compliance__text p {
    margin: 0;
}

/* ============================================ toplist / Category Hub ---- */
/* single-bk_toplist.php. Figma frame "Category Hubs" (1271:2599):
   navy ranked rows (yellow 2px border, r40, a yellow rank tab on the left
   edge, 112px round logo), a navy "How We Rank" callout, and the related-hub
   cards reuse the .bk-compare card style. */

.bk-band--flush {
    padding: 0;
}

/* intro: photo bleeds to the left edge, copy sits in the right half with the
   normal wrap gutter on its right (Figma "Category Hubs" intro). */
.bk-tl-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.bk-tl-intro__media {
    align-self: stretch;
}

.bk-tl-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.bk-tl-intro__copy {
    align-self: center;
    padding: 64px max(20px, calc((100vw - var(--bk-wrap)) / 2)) 64px 64px;
    color: var(--bk-navy-2);
}

.bk-tl-intro__copy p {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-tl-intro__copy p:last-child {
    margin-bottom: 0;
}

/* Figma row (compact + detailed share the same geometry): card padding
   32/32/32/0, 48px column gap; the navy rank pill is the first in-flow child
   sitting flush at the left edge — 64px wide, square left corners, 30px round
   right (a welded tab, not an overhang). */
.bk-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-rank__item {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 32px 32px 32px 0;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
    color: #fff;
}

.bk-rank__num,
.bk-tl-card__num {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 18px 32px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    border-radius: 0 30px 30px 0;
}

.bk-rank__num {
    background: var(--bk-yellow);
    color: #000;
}

.bk-tl-card__num {
    background: var(--bk-navy);
    color: #fff;
}

.bk-rank__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
    display: grid;
    place-items: center;
}

.bk-rank__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-rank__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bk-rank__brand {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    /* Figma: lh 1.6 — the generous line-height is what gives the row its air */
    color: var(--bk-yellow);
}

.bk-rank__offer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
}

.bk-rank__offer {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.bk-rank__offer-row .bk-stars__label {
    color: #fff;
}

/* Figma shows just "4.5 ★★★★★" in the ranked rows — no "/ 5" suffix */
.bk-rank__offer-row .bk-stars__outof {
    display: none;
}

.bk-rank__chip {
    align-self: flex-start;
    margin-top: 8px;
    /* Figma: 8px brand->offer row, then 16px to the chip; text 16 / pad 8x12 */
    padding: 8px 12px;
    border: 1px solid var(--bk-yellow);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-yellow);
}

.bk-rank__cta {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 250px;
}

.bk-rank__cta .bk-btn {
    width: 100%;
}

/* Figma "How We Rank" (Frame 97, 1320x264): navy box, 2px WHITE border, r40,
   padding 50/64, 64px gap between the title and the body; title 48 Bold #ffe208,
   body text 24 Regular #fff. */
.bk-hwr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 64px;
    padding: 50px 64px;
    background: var(--bk-navy);
    border: 2px solid #fff;
    border-radius: 40px;
    color: #fff;
}

.bk-hwr__title {
    margin: 0;
    flex: none;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-yellow);
}

.bk-hwr__body {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-left: 64px;
    border-left: 1px solid var(--bk-yellow);
}

.bk-hwr__text {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* detailed "Top N" cards — yellow, one review excerpt per bookmaker */
.bk-tl-detailed__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-tl-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-tl-card {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 32px 32px 32px 0;
    background: var(--bk-yellow);
    border: 2px solid var(--bk-navy);
    border-radius: 40px;
    color: var(--bk-navy);
}

.bk-tl-card__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
    display: grid;
    place-items: center;
}

.bk-tl-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-tl-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-tl-card__brand {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

/* excerpt clamps to 2 lines; "Show more" toggles .is-expanded to reveal the rest */
.bk-tl-card__excerpt {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.bk-tl-card.is-expanded .bk-tl-card__excerpt {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.bk-tl-card__more {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--bk-navy);
    cursor: pointer;
}

.bk-tl-card__more:hover {
    text-decoration: underline;
}

.bk-tl-card__cta {
    flex: none;
}

.bk-tl-card__cta .bk-btn {
    width: 250px;
}

/* guides teaser — post cards on a tint band */
.bk-tl-guides__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy-2);
}

.bk-tl-guides__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.bk-tl-guide {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.bk-tl-guide__media {
    display: block;
    aspect-ratio: 400 / 277;
    background: #eef2f7;
    overflow: hidden;
}

.bk-tl-guide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-tl-guide__avatar {
    margin: -30px 0 0 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.bk-tl-guide__title {
    margin: 16px 24px 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: #17486d;
}

.bk-tl-guide__title a {
    color: inherit;
    text-decoration: none;
}

.bk-tl-guide__title a:hover {
    text-decoration: underline;
}

.bk-tl-guide__meta {
    margin: 16px 24px 20px;
    padding-top: 16px;
    border-top: 1px solid #eaeaea;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #adadad;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* --------------------------------------------------------- Section Hub ---- */
/* /betting/ — page-betting-hub.php + hub.php. Figma "Section Hub  Bookmakers"
   (1271:422). Shared section heading used by every band below. */
.bk-band--flush-y {
    padding: 60px 0;
}

.bk-hub-head {
    margin-bottom: 50px;
    text-align: center;
}

.bk-hub-head__title {
    margin: 0 0 8px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-hub-head__sub {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* category cards reuse .bk-compare__cards / .bk-compare__card (Related Hubs
   component) plus an optional description line under the divider — Figma's
   inner gap there is 16px against the card's outer 32px gap, so pull it up */
.bk-compare__card-desc {
    margin-top: -16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* "This Week's Offers" only — the hero photo again, under a navy wash (same
   trick as .bk-band--proscons, but with this page's own photo). "Learn How It
   Works" is a plain .bk-band--navy with NO photo — confirmed by a full
   re-export of the Figma frame: that band renders 100% flat navy, no texture,
   despite its layer technically carrying the same (fully covered) image fill. */
.bk-band--hub-photo {
    background-color: var(--bk-navy);
    /* The actual Figma asset for this band — already pre-toned dark navy by
       the designer, not the bright hero photo + a CSS alpha guess. Exported
       directly from the same image fill Figma uses here (hash f7bf8030...),
       so no opacity tuning needed to match it. */
    background-image: url(../images/betting/betting-band-wash.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* both "This Week's Offers" (photo band) and "Learn How It Works" (flat navy,
   no photo — Figma) share the navy-band heading colours */
.bk-band--navy .bk-hub-head__title {
    color: var(--bk-yellow);
}

.bk-band--navy .bk-hub-head__sub {
    color: #fff;
}

/* "This Week's Offers" row — .bk-rank reused, but at 50% navy opacity (Figma)
   and with a terms paragraph instead of the Category Hub's stars + chip. */
.bk-rank--tint .bk-rank__item {
    background: rgba(22, 72, 109, .5);
}

.bk-rank__terms {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* ============================================== Offers page (bk_offer) -- */
/* Figma "Offers": filter dropdown, white bg / 1px navy border / 10px radius
   / 20 Semibold navy text (sampled from node 1271:3598/3599). Right-aligned
   in the band (Frame 98's own children read left-to-right as label then
   select, but the row itself sits flush against the band's right edge). */
.bk-offer-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.bk-offer-filter label {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.bk-offer-filter__select {
    min-width: 240px;
    padding: 12px 16px;
    border: 1px solid var(--bk-navy);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    color: var(--bk-navy);
    cursor: pointer;
}

/* "How offers work" — plain text panel inside the same navy band as the
   grid above it (Figma: Frame 22 is a sibling of the grid inside the same
   outer Frame 10, and its background image hash matches the band's own
   photo-wash). Yellow fill / navy text, sampled directly (Frame 1271:3703
   fill + heading/paragraph fills) — NOT the .bk-tl-intro split used
   elsewhere: the Figma frame's photo + hospitality-perks bullet list here
   are leftover cruft from reusing a hospitality-page component (see
   offers.php rc_offer_explainer() docblock), the spec asks for a plain
   ~150-200 word text block only. */
.bk-offer-explain {
    margin-top: 50px;
    padding: 64px;
    background: var(--bk-yellow);
    border-radius: 40px;
}

.bk-offer-explain__title {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-offer-explain__text p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-offer-explain__text p:last-child {
    margin-bottom: 0;
}

/* Event cross-link teaser(s) — .bk-band--tint, own section below the offers
   band. TWO real Figma variants for two different row counts (see
   rc_offer_event_links()'s docblock: both "Frame 12"s under the Bookmakers
   section are genuine, finished designs, not one right and one wrong):
   --single (1 event, node 1271:3811) is a wide photo/copy split with sharp
   corners; --card (2-3 events, node 1271:4003, one .bk-event-teasers grid)
   is a compact stacked card. Shared element classes (__media, __dates,
   __title, __venue, __cta), styled differently per variant below. */
.bk-event-block__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-event-teaser {
    background: #fff;
}

.bk-event-teaser__media {
    position: relative;
}

.bk-event-teaser__media img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.bk-event-teaser__dates {
    position: absolute;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bk-navy);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.bk-event-teaser__title,
.bk-event-teaser__venue {
    margin: 0;
    color: var(--bk-navy);
}

/* --single: one event (Figma 1271:3811) — 46/54 split, sharp corners. */
.bk-event-teaser--single {
    display: grid;
    grid-template-columns: 46fr 54fr;
}

.bk-event-teaser--single .bk-event-teaser__media img {
    height: 100%;
    min-height: 320px;
}

.bk-event-teaser--single .bk-event-teaser__dates {
    top: 32px;
    left: 24px;
}

.bk-event-teaser--single .bk-event-teaser__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    padding: 64px 48px;
}

.bk-event-teaser--single .bk-event-teaser__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.bk-event-teaser--single .bk-event-teaser__venue {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

/* --card: 2-3 events (Figma alternate "Frame 12" 1271:4003) — compact
   stacked card, ~3px corner radius (near-square), thin divider before CTA. */
.bk-event-teasers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.bk-event-teaser--card {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
}

.bk-event-teaser--card .bk-event-teaser__media img {
    aspect-ratio: 397 / 277;
}

.bk-event-teaser--card .bk-event-teaser__dates {
    top: 20px;
    left: 20px;
}

.bk-event-teaser--card .bk-event-teaser__body {
    padding: 32px 32px 0;
}

.bk-event-teaser--card .bk-event-teaser__title {
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.bk-event-teaser--card .bk-event-teaser__venue {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-event-teaser--card .bk-event-teaser__rule {
    display: block;
    margin: 24px 32px 0;
    height: 1px;
    background: rgba(22, 72, 109, .15);
}

.bk-event-teaser--card .bk-event-teaser__cta {
    align-self: center;
    margin: 24px 32px 32px;
}

/* =============================================== Event Page (bk_event) -- */
/* Meeting Summary / Tips & Preview — both reuse .bk-tl-intro (image + copy
   split); Tips needs the photo on the right instead of the left, hence the
   plain CSS order swap below rather than a second markup shape. */
.bk-tl-intro--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Fixed 64px on all four sides, not the base rule's "64 fixed / responsive
   max()" shape — Figma's own node data (1271:4170, 1271:4155/4472) is
   uniform 64,64,64,64 on both Meeting Summary and Tips & Preview; the
   base .bk-tl-intro__copy's right-side max(20px, (100vw - wrap)/2) formula
   is a Hub-hero-specific "align to the page's centred wrap on wide
   screens" choice that only happens to equal 64px at exactly 1440px width
   (where 100vw - wrap = 128px) — at 1920px it balloons to ~304px. It's
   also on the wrong SIDE for the reverse (Tips) layout specifically: text
   sits in the LEFT column there (order: -1), so the edge that should hug
   the true viewport edge is the left, not the right — copying the base
   formula unchanged put the fixed 64px on the wrong side twice over. */
.bk-tl-intro--reverse .bk-tl-intro__copy,
.bk-tl-intro--event .bk-tl-intro__copy {
    padding: 64px;
}

.bk-tl-intro--reverse .bk-tl-intro__copy {
    order: -1;
}

/* Cap the actual reading measure at Figma's own ~590px (Frame 23 is
   592px inside this 64px padding) — border-box, so max-width includes the
   padding: 590 + 64 + 64 = 718px. On any column wider than that (every
   viewport past ~1440px, since the column is half the full-bleed band),
   centre the capped box in the leftover space instead of leaving it
   pinned to whichever edge borders the image — a block that only grows
   away from the image looks stuck to one side rather than sitting in the
   column. */
.bk-tl-intro--reverse .bk-tl-intro__copy {
    max-width: 718px;
    margin-left: auto;
}

.bk-tl-intro--event .bk-tl-intro__copy {
    max-width: 718px;
    margin-right: auto;
}

/* Both variants: the row height must come from the COPY column only, at any
   viewport width — not from the photo. An aspect-ratio on the img (tried
   first) only matches Figma's own 1440px canvas by coincidence: the image's
   pixel height still scales with the column's width, so on anything wider
   than 1440 the photo once again outgrows the (fixed-size) text and
   .bk-tl-intro__copy's align-self:center pads the gap back out — confirmed
   live at 1920px (padding grew to ~180px). Taking the img out of flow
   entirely with absolute positioning fixes this at every width: its parent
   .bk-tl-intro__media keeps stretching to the grid row's height as before,
   but now contributes nothing of its own to that height (its only child no
   longer participates in layout), so the row is sized purely by the copy
   column, and the image just covers whatever that turns out to be. */
.bk-tl-intro--reverse .bk-tl-intro__media,
.bk-tl-intro--event .bk-tl-intro__media {
    position: relative;
}

.bk-tl-intro--reverse .bk-tl-intro__media img,
.bk-tl-intro--event .bk-tl-intro__media img {
    position: absolute;
    inset: 0;
    min-height: 0;
    aspect-ratio: auto;
}

/* Meeting Summary heading — white on the navy band (Figma 1271:4172).
   Tips & Preview reuses the same title class with --navy since its band is
   yellow, not navy (Figma 1271:4470). */
.bk-event-summary__title {
    margin: 0 0 32px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-event-summary__title--navy {
    color: var(--bk-navy);
}

.bk-event-summary__facts {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* A second (or third) bk_event_races row — Figma: no icon, no label, 60%
   white, smaller and tighter to the fact row above it than the standard
   32px gap (negative margin pulls it in to roughly the ~16px the render
   shows). Deliberately plain text, not another .bk-event-fact row. */
.bk-event-summary__note {
    margin: -16px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

/* One fact row: an 80px icon circle (2px yellow stroke, Figma sampled) +
   yellow bold label + white value. Reused for Venue/Dates and the first
   bk_event_races row only — any further races render as the muted
   .bk-event-summary__note above instead (see rc_event_meeting_summary()). */
.bk-event-fact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bk-event-fact__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 2px solid var(--bk-yellow);
    border-radius: 50%;
}

.bk-event-fact__icon-svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

/* .bk-event-summary ancestor bumps specificity to 2 classes, beating the
   existing .bk-tl-intro__copy p rule (1 class + 1 element) that would
   otherwise repaint these <p> tags navy-on-navy and make them invisible —
   found live: the label/value text was in the HTML but not visible on the
   page, this is why. */
.bk-event-summary .bk-event-fact__label {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bk-yellow);
}

.bk-event-summary .bk-event-fact__value {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* Best Bookmakers for This Event — rc_bk_ranking_table() in render.php.
   Figma 1271:4399: navy header row, 66px-tall white body rows. The tint is
   on the "Best for" COLUMN specifically, every row — not alternating row
   stripes, confirmed by sampling pixels (Rank/Bookmaker stay white on every
   sample row; "Best for" is #f4f6fb-ish on every sample row). An earlier
   pass built ordinary zebra striping instead, mistaking that column's own
   background for row banding. */
.bk-rank-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
}

.bk-rank-table th,
.bk-rank-table td {
    padding: 20px 32px;
    text-align: left;
    font-size: 18px;
    border: 1px solid #e3e6ee;
}

.bk-rank-table thead th {
    background: var(--bk-navy);
    font-weight: 700;
    color: #fff;
}

.bk-rank-table__rank {
    width: 1%;
    white-space: nowrap;
    padding-left: 32px;
    padding-right: 16px;
    text-align: center;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-rank-table tbody tr {
    background: #fff;
}

.bk-rank-table__brand a {
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-rank-table__best {
    background: #f4f6fb;
    color: var(--bk-navy);
}

/* Cross-link cards (racecourse guide, RC Syndicates CTA) — same navy/2px
   yellow border/40px radius shape as .bk-rank__item and .bk-hub-trust,
   but its own row layout: a 128px badge on the left, title/subtitle/CTA
   stacked in a column to its right (Figma 1271:4475 — re-zoomed into after
   a report the badge looked wrong: it's a big left column, not a small
   64px image stacked above the text like an earlier pass had it). */
.bk-event-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.bk-event-link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
}

.bk-event-link__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
}

.bk-event-link__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bk-event-link__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.bk-event-link__text {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.bk-event-link__cta {
    margin-top: auto;
}

/* upcoming races — placeholder cards until bk_event (Phase 6) replaces them.
   Figma: card padding is 32px top/bottom only (the date pill and photo sit
   flush with the sides); simplified here to a uniform 32px with the date pill
   pulled back out to the corner. */
.bk-hub-races__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bk-hub-race {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 64px 32px 32px;
    background: var(--bk-yellow);
    border: 2px solid var(--bk-navy);
    border-radius: 40px;
    color: var(--bk-navy);
    /* Figma: this card does NOT clip its content (clipsContent: false). The
       date pill's square corner sits right at the card's true top-left point
       and simply paints over the small rounded notch of the card underneath
       (both navy, so even the 2px border seam is invisible) — overflow:hidden
       here would instead clip the pill DOWN to the card's curve, separating
       it from the corner. Deliberately not set. */
}

.bk-hub-race__dates {
    align-self: flex-start;
    margin: -32px 0 0 -32px;
    padding: 18px 24px;
    border-radius: 0 30px 30px 0;
    background: var(--bk-navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* a single circular photo, centred — not a banner image (Figma: 150x150,
   radius 100, centred in the card) */
.bk-hub-race__media {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
}

.bk-hub-race__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-hub-race__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Figma: no rule between the photo and the title — the two hairlines sit
   directly above and below the summary paragraph instead */
.bk-hub-race__rule {
    display: block;
    height: 1px;
    background: rgba(22, 72, 109, .25);
}

.bk-hub-race__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.bk-hub-race__venue {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.bk-hub-race__summary {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-hub-race__cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

.bk-hub-race__cta .bk-btn {
    width: 100%;
}

/* .bk-btn--primary is yellow-on-yellow here (the card itself is yellow) — give
   it a navy outline so it still reads as a button */
.bk-hub-race__cta .bk-btn--primary {
    border-color: var(--bk-navy);
}

/* bookmaker logo strip — auto, from the live bookmaker records */
.bk-hub-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.bk-hub-logos__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bk-border);
}

.bk-hub-logos__tile img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    border-radius: 6px;
}

/* trust cards — placeholder links until the Trust Layer pages (Phase 10)
   exist. Figma: plain white card, no border/shadow — it reads against the
   tint-blue band by colour contrast alone. Icon is an outline circle, not a
   filled one (the fill colour is a per-icon placeholder in the mock). */
.bk-hub-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

/* four cards: 2 x 2 between phone and full desktop, never 3 + 1 */
@media (min-width: 601px) and (max-width: 1200px) {
    .bk-hub-trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bk-hub-trust {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    background: #fff;
    border-radius: 40px;
    color: var(--bk-navy);
}

/* "person" variant — a team member instead of a topic (Figma: yellow card,
   2px navy border, circular photo instead of the outline icon) */
.bk-hub-trust--person {
    background: var(--bk-yellow);
}

.bk-hub-trust__avatar {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.bk-hub-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border: 2px solid var(--bk-navy);
    border-radius: 50%;
    background: #fff;
}

.bk-hub-trust__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.bk-hub-trust__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.bk-hub-trust__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-hub-trust__btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 32px;
}

/* "Learn How It Works" excerpt — additive to .bk-tl-guide (the Category Hub's
   own guide teaser doesn't render one) */
.bk-tl-guide__excerpt {
    margin: 8px 24px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    /* backstop alongside the 20-word server-side trim (hub.php) so cards with
       longer words still clamp to the same visual height */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* "Learn How It Works" category badge — visible here; the Category Hub's own
   guide teaser never renders one, so this is purely additive to .bk-tl-guide */
.bk-tl-guide__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bk-navy);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
}

/* --------------------------------------- betting/toplist ACF block ---- */
/* The ranked list + detailed cards dropped into an arbitrary page. No navy
   band behind it (that is the hub's own framing) — just the two listings
   stacked on the host page background, each in the standard wrap. */
.bk-block-toplist {
    --bk-wrap: 1312px;
    margin: 40px 0;
}

.bk-block-toplist .bk-wrap+.bk-wrap {
    margin-top: 50px;
}

.bk-block-toplist .bk-tl-detailed__title {
    margin-top: 0;
}

.bk-block-toplist__title {
    margin: 0 0 40px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    color: var(--bk-navy);
}

/* ========================================= Comparison (bk_comparison) -- */
/* single-bk_comparison.php + compare.php. Figma "Comparisons" (1271:1784). */

/* shared round logo: A/B in the table (48), choose heads + hub grid (64,
   2px yellow ring), claim cards (128, no ring) */
.bk-cmp-logo {
    display: inline-flex;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: #181f1d;
}

.bk-cmp-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-cmp-logo--48 {
    width: 48px;
    height: 48px;
    border: 2px solid var(--bk-yellow);
}

.bk-cmp-logo--64 {
    width: 64px;
    height: 64px;
    border: 2px solid var(--bk-yellow);
}

.bk-cmp-logo--128 {
    width: 128px;
    height: 128px;
}

/* optional intro (not in Figma) — sits above the table in the same band */
.bk-cmp-intro {
    margin-bottom: 50px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--bk-navy);
}

.bk-cmp-intro p {
    margin: 0 0 16px;
}

.bk-cmp-intro p:last-child {
    margin-bottom: 0;
}

/* table — Figma "Frame 8": 271 / 521 / 521 columns, 1px #e3e6ee grid,
   brand heads 96px tall (pad 24/32), body rows pad 20/32 */
.bk-cmp-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.bk-cmp-table__corner {
    width: 20.66%;
    background: #fff;
    border: 1px solid var(--bk-border);
}

.bk-cmp-table__brand {
    padding: 24px 32px;
    background: var(--bk-navy);
    border: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

.bk-cmp-table__brand--b {
    background: #093251;
}

.bk-cmp-table__brand-inner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.bk-cmp-table__label,
.bk-cmp-table__value {
    padding: 20px 32px;
    border: 1px solid var(--bk-border);
    font-size: 18px;
    line-height: 1.4;
    color: var(--bk-navy);
    vertical-align: middle;
}

.bk-cmp-table__label {
    background: #fff;
    font-weight: 700;
    text-align: left;
}

.bk-cmp-table__value {
    background: var(--bk-tint);
    font-weight: 400;
    text-align: center;
}

/* Choose A if / Choose B if — Figma "Frame 10": two 631px columns, gap 50;
   head pad 24/32, r40 top only (A yellow / B navy); white body pad 32, gap
   24, r40 bottom only; rows Regular 20/32 with the green check, 1px 10%
   black rule + 16px under every row but the last */
.bk-cmp-choose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
}

.bk-cmp-choose__col {
    display: flex;
    flex-direction: column;
}

.bk-cmp-choose__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: var(--bk-yellow);
    border-radius: 40px 40px 0 0;
}

.bk-cmp-choose__col--b .bk-cmp-choose__head {
    background: var(--bk-navy);
}

.bk-cmp-choose__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-cmp-choose__col--b .bk-cmp-choose__title {
    color: #fff;
}

.bk-cmp-choose__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 32px;
    list-style: none;
    background: #fff;
    border-radius: 0 0 40px 40px;
}

.bk-cmp-choose__list li {
    position: relative;
    margin: 0;
    padding: 0 0 16px 48px;
    border-bottom: 1px solid rgba(5, 5, 5, .1);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-cmp-choose__list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bk-cmp-choose__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: url(../images/betting/icon-pro.svg) center / contain no-repeat;
}

/* head-to-head topics — Figma "Frame 64": rows pad 32/0 with a 1px navy
   rule under each, Bold 24 title, 48px round toggle (closed yellow + navy
   plus, open navy + white minus), 32px between title row and body text */
.bk-h2h__item {
    border-bottom: 1px solid #00486e;
}

.bk-h2h__q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 32px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    cursor: pointer;
}

.bk-h2h__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-h2h__toggle {
    position: relative;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bk-yellow);
    transition: background-color .2s ease;
}

.bk-h2h__toggle::before,
.bk-h2h__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--bk-navy);
    transform: translate(-50%, -50%);
}

.bk-h2h__toggle::before {
    width: 16px;
    height: 2px;
}

.bk-h2h__toggle::after {
    width: 2px;
    height: 16px;
    transition: opacity .2s ease;
}

.bk-h2h__item.is-open .bk-h2h__toggle {
    background: var(--bk-navy);
}

.bk-h2h__item.is-open .bk-h2h__toggle::before {
    background: #fff;
}

.bk-h2h__item.is-open .bk-h2h__toggle::after {
    opacity: 0;
}

/* grid 0fr → 1fr animates to the real content height (max-height guessed
   2000px, so close stalled then snapped); the 32px bottom gap is a spacer
   inside the clipped wrapper so it animates too instead of jumping */
.bk-h2h__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.bk-h2h__item.is-open .bk-h2h__a {
    grid-template-rows: 1fr;
}

.bk-h2h__a-in {
    min-height: 0;
    overflow: hidden;
}

.bk-h2h__a-in::after {
    content: "";
    display: block;
    height: 32px;
}

.bk-h2h__a p {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-h2h__a p:last-child {
    margin-bottom: 0;
}

/* claim cards — Figma "Frame 5": two 646px cards, gap 20; navy, 2px yellow,
   r40, pad 32, gap 48; 128 logo beside the text column (gap 48); brand Bold
   32, rating 24 (white number, yellow stars, gap 16), offer Bold 20/32,
   terms Regular 18; two equal yellow buttons, gap 32 */
.bk-cmp-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.bk-cmp-card {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
}

.bk-cmp-card__top {
    display: flex;
    align-items: center;
    gap: 48px;
}

.bk-cmp-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.bk-cmp-card__brand {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-cmp-card__rating {
    margin-top: -8px;
}

.bk-cmp-card__rating .bk-stars {
    gap: 16px;
}

.bk-cmp-card__rating .bk-stars__label {
    color: #fff;
}

.bk-cmp-card__rating .bk-stars__outof {
    display: none;
}

.bk-cmp-card__offer {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.bk-cmp-card__terms {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-cmp-card__cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: auto;
}

/* /betting/compare/ hub — auto grid card = .bk-compare__card + two
   overlapping logos above the "A vs B" label */
.bk-cmp-grid__logos {
    display: flex;
}

.bk-cmp-grid__logos .bk-cmp-logo + .bk-cmp-logo {
    margin-left: -16px;
}

/* ============================================== Guide (bk_guide) ------ */
/* single-bk_guide.php + guides.php. Figma "Guides" (1271:4713). */

/* title bar: pad 32 (not the usual 36), H1 centred, strap line LEFT-aligned
   across the full 1312 with a 10px gap — as drawn in the frame */
.bk-titlebar--guide {
    padding: 32px 0;
}

.bk-titlebar--guide .bk-titlebar__meta {
    margin-top: 10px;
    text-align: left;
}

/* Frame 8: 422px tool card | 64 gap | 826px body */
.bk-guide-main {
    display: grid;
    grid-template-columns: 422px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.bk-guide-main--full {
    grid-template-columns: minmax(0, 1fr);
}

/* Related Tool — navy, 2px yellow, r40, pad 32, 32 between copy and button,
   16 between title (Bold 32 / 38.4) and text (Regular 18 / 1.4) */
.bk-guide-tool {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
}

.bk-guide-tool__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-guide-tool__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-guide-tool__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* body — 32 between sections, 16 heading→text; first heading Bold 36 / 1.4,
   the rest Bold 24 / 1.4; text Regular 18 / 1.4 */
.bk-guide-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.bk-guide-body__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-guide-body__heading {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-guide-body__section:first-child .bk-guide-body__heading {
    font-size: 36px;
}

.bk-guide-body__text {
    font-size: 18px;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-guide-body__text p,
.bk-guide-body__text ul,
.bk-guide-body__text ol {
    margin: 0 0 16px;
}

.bk-guide-body__text > :last-child {
    margin-bottom: 0;
}

/* Related Bookmakers — heading Bold 48 / 1.2 white, 50 above the rows;
   rows are .bk-rank with brand line-height 38.4 and 16 brand→text */
.bk-guide-bm__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-guide-bm .bk-rank__body {
    gap: 16px;
}

.bk-guide-bm .bk-rank__brand {
    line-height: 1.6;
}

/* byline — 80px avatar with a 2px navy ring (the review page uses 72),
   name line-height 100%, 16 between name and date */
.bk-guide-byline .bk-byline__avatar {
    width: 80px;
    height: 80px;
}

.bk-guide-byline .bk-byline__who {
    gap: 32px;
}

.bk-guide-byline .bk-byline__name {
    line-height: 1;
}

.bk-guide-byline .bk-byline__date {
    margin-top: 16px;
}

/* compliance has its own band here (Figma: 100px band padding straight to
   the box), so drop the box's 50px "after other content" margin */
.bk-guide-compliance .bk-compliance {
    margin-top: 0;
}

/* ================================== Tools: Each-Way Calculator ------ */
/* page-betting-ew-calculator.php + tools.php + dist/js/betting-calculator.js.
   Figma "Tools" (1271:5181). */

/* calculator card — 862 wide, navy, r40, pad 32; 64 between form and
   results; 32 between groups; 20 between columns */
.bk-calc {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 862px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bk-navy);
    border-radius: 40px;
}

.bk-calc__form,
.bk-calc__output,
.bk-calc__deadheat {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bk-calc__output {
    gap: 24px;
}

.bk-calc__deadheat {
    gap: 16px;
}

.bk-calc__deadheat[hidden] {
    display: none;
}

.bk-calc__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* place terms and the dead-heat option only for an each-way bet */
.bk-calc:not(.is-each-way) .bk-calc__field--ew {
    display: none;
}

.bk-calc__hint {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* field: label Regular 18 / 25.2 yellow, 16 above a 73px input */
.bk-calc__field {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
}

.bk-calc__label {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-yellow);
}

/* input: white, 1px navy, r10, pad 16, Semibold 20 / 38.4 #004a71 */
.bk-calc__input,
.bk-calc__select select {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--bk-navy);
    border-radius: 10px;
    box-shadow: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.92;
    color: #004a71;
}

.bk-calc__input::placeholder {
    color: rgba(0, 74, 113, .45);
    font-weight: 400;
}

.bk-calc__input:focus,
.bk-calc__select select:focus {
    outline: 2px solid var(--bk-yellow);
    outline-offset: 2px;
}

/* select arrow — the Figma dashicons arrow-down, a black 13x10 triangle in a
   32px box at the right */
.bk-calc__select select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 56px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M6.5 10 0 0h13z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 25px center / 13px 10px;
    cursor: pointer;
}

.bk-calc__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
}

/* checkbox 24px (white, 1px #767676, blue mark) + Light 18 / 32 yellow */
.bk-calc__check {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 32px;
    color: var(--bk-yellow);
    cursor: pointer;
}

.bk-calc__check input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #1a73e8;
    cursor: pointer;
}

/* Figma's white Semibold 20 note under the fields — here the win/place
   breakdown under the result cards */
.bk-calc__note {
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.26;
    color: #fff;
}

/* results — three 2px-yellow r40 cards, pad 16/32, value Bold 32 / 38.4,
   caption Regular 18 / 1.4 (16 apart); Total stake is the yellow one */
.bk-calc__results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.bk-calc__result {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
    color: #fff;
}

.bk-calc__result--stake {
    background: var(--bk-yellow);
    color: var(--bk-navy);
}

.bk-calc__value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.bk-calc__caption {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

/* The other calculators (form[data-calc], rc_tool_calc_form()): fields shown
   per option (data-show), the selection rows the script builds, a read-only
   stake column (Dutching) and a results table (Dutching, Implied). */
.bk-calc [hidden] {
    display: none !important;
}

.bk-calc__sels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bk-calc__sels:empty {
    display: none;
}

.bk-page .bk-calc .bk-calc__input--out {
    background: var(--bk-tint-blue);
    cursor: default;
}

.bk-calc__note b {
    color: var(--bk-yellow);
}

.bk-calc__note:empty {
    display: none;
}

.bk-calc__table-wrap {
    overflow-x: auto;
}

.bk-calc__table-wrap:empty {
    display: none;
}

.bk-page .bk-calc__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.bk-page .bk-calc__table th,
.bk-page .bk-calc__table td {
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    text-align: left;
    color: inherit;
}

.bk-page .bk-calc__table th {
    border-top: 0;
    font-weight: 400;
    color: var(--bk-yellow);
}

.bk-page .bk-calc__table th:last-child,
.bk-page .bk-calc__table td:last-child {
    text-align: right;
}

/* explainer (flex) + share box (501) — tint band, 50 gap */
.bk-tool-info {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.bk-tool-explainer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-tool-explainer__title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-tool-explainer__text {
    font-size: 20px;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-tool-explainer__text p {
    margin: 0 0 12px;
}

/* share box — navy, r40, pad 32/64, 32 gap, centred */
.bk-tool-share {
    flex: 0 0 501px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 64px;
    background: var(--bk-navy);
    border-radius: 40px;
}

.bk-tool-share__title {
    margin: 0;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.bk-tool-share__copy {
    width: 100%;
}

.bk-tool-share__icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bk-tool-share__icons a {
    display: block;
    line-height: 0;
}

.bk-tool-share__icons img {
    width: 30px;
    height: 30px;
}

/* related guide — photo | yellow copy, 500 tall; copy pad 64, gap 32;
   title Bold 48 / 1.0, 24 above Regular 18 / 1.5 text */
.bk-tool-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 500px;
}

.bk-tool-guide__media {
    position: relative;
    background: var(--bk-navy);
}

.bk-tool-guide__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-tool-guide__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 64px;
    background: var(--bk-yellow);
}

.bk-tool-guide__text-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 592px;
}

.bk-tool-guide__title {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--bk-navy);
}

.bk-tool-guide__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
}

/* ?embed=1 */
.bk-tool-embed__credit {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--bk-navy);
}

.bk-tool-embed__credit a {
    color: inherit;
}

/* ===================================== Trust Layer (Trust Page) ------ */
/* page-betting-trust.php + trust.php. Figma Trust Layer frames (How We
   Review 1271:5581, Safer Gambling 1271:5893, Disclosure 1271:6198, Editorial
   Policy 1271:6495), built from the acf/bk-* blocks: title bar as on
   Guides, breadcrumb, then content blocks (.bk-tblock) that together read as
   ONE white band — 100 above the first and below the last, 50 between, 32
   between consecutive "points" (How We Review's five criteria). Spacing is
   sibling-based so editors can reorder blocks freely. A block is a Bold 36 /
   1.4 heading, 16 above Regular 18 / 1.4 text (points: Bold 24); the callout
   is a #e2efff box, pad 50 / 64, with Regular 20 / 1.6 text. */
.bk-tblock {
    background: #fff;
}

.bk-tblock:not(.bk-tblock + .bk-tblock) {
    padding-top: 100px;
}

.bk-tblock:not(:has(+ .bk-tblock)) {
    padding-bottom: 100px;
}

.bk-tblock + .bk-tblock {
    margin-top: 50px;
}

.bk-tblock--point + .bk-tblock--point {
    margin-top: 32px;
}

.bk-trust__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-trust__heading {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-trust__item--point .bk-trust__heading {
    font-size: 24px;
}

.bk-trust__text {
    font-size: 18px;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-trust__text p {
    margin: 0 0 16px;
}

.bk-trust__text > :last-child {
    margin-bottom: 0;
}

.bk-trust__text a {
    color: inherit;
    text-decoration: underline;
}

.bk-trust__callout {
    padding: 50px 64px;
    background: var(--bk-tint-blue);
}

.bk-trust__callout .bk-trust__text {
    font-size: 20px;
    line-height: 1.6;
}

/* the 18+ box sits in its own block, so the blocks' 50 gap replaces its
   own "after other content" margin */
.bk-tblock--compliance .bk-compliance {
    margin-top: 0;
}

/* heading-only 18+ box (Safer Gambling): the line sits centred on the badge */
.bk-compliance--lead-only {
    align-items: center;
}

.bk-compliance--lead-only .bk-compliance__lead {
    margin: 0;
}

/* ============================ Bookmakers page (bookmaker archive) ---- */
/* templates/archive-bookmaker.php + archive.php. No Figma frame — built from
   the section's pieces: title bar, breadcrumb, a filter/sort bar, the Category
   Hub ranked rows (.bk-rank) for every bookmaker, category cards, How We Rank.
   Chips follow the section's pill buttons: navy 2px outline, Semibold 18,
   filled navy when active; counts in a small yellow bubble. */
.bk-bm-toolbar-band {
    padding: 50px 0;
}

.bk-bm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
}

.bk-bm-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 640px;
}

.bk-bm-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid var(--bk-navy);
    border-radius: 50px;
    color: var(--bk-navy);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.bk-bm-chip:hover,
.bk-bm-chip:focus-visible {
    background: var(--bk-tint-blue);
}

.bk-bm-chip.is-active {
    background: var(--bk-navy);
    color: #fff;
}

.bk-bm-chip__n {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 50px;
    background: var(--bk-yellow);
    color: var(--bk-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.bk-bm-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.bk-bm-toolbar__sort-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--bk-navy);
    white-space: nowrap;
}

.bk-bm-select select {
    display: block;
    min-width: 200px;
    height: auto;
    margin: 0;
    padding: 10px 48px 10px 16px;
    border: 2px solid var(--bk-navy);
    border-radius: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M6.5 10 0 0h13z' fill='%2316486d'/%3E%3C/svg%3E") no-repeat right 18px center / 13px 10px;
    color: var(--bk-navy);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.bk-bm-select select:focus {
    outline: 2px solid var(--bk-yellow);
    outline-offset: 2px;
}

.bk-bm-toolbar__count {
    flex-basis: 100%;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* rows hidden by a client-side filter (Bookmakers page search, Offers page
   type filter) — .bk-rank__item's display:flex would otherwise beat [hidden] */
.bk-rank__item[hidden] {
    display: none;
}

/* How We Rank and the 18+ box share a --connect band (whose rule zeroes the
   box's top margin) — restore the usual 50 between them */
.bk-bm-archive .bk-hwr + .bk-compliance {
    margin-top: 50px;
}

/* "Betting: How We Rank" block band: hugs a white band above it (same as the
   fixed page's --connect band), and an 18+ box on its own sits at the top */
.bk-band--plain + .bk-band--hwr {
    padding-top: 0;
}

.bk-band--hwr .bk-compliance:first-child {
    margin-top: 0;
}

/* ------------------------------------------------------- responsive ---- */
@media (max-width: 900px) {
    .bk-tool-info {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .bk-tool-share {
        flex-basis: auto;
        padding: 32px;
    }

    .bk-tool-guide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .bk-tool-guide__media {
        aspect-ratio: 16 / 10;
    }

    .bk-tool-guide__copy {
        padding: 40px 20px;
    }

    .bk-guide-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* read the guide first, the tool card follows it */
    .bk-guide-tool {
        order: 2;
    }
    .bk-cmp-choose,
    .bk-cmp-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bk-cmp-card__top {
        gap: 24px;
    }

    .bk-cmp-card__cta {
        gap: 16px;
    }

    .bk-tl-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-tl-intro__media img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .bk-tl-intro__copy {
        align-self: start;
        padding: 40px 20px;
    }

    .bk-event-teasers {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-teaser--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-teaser--single .bk-event-teaser__media img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .bk-event-teaser--single .bk-event-teaser__body {
        align-self: start;
        padding: 32px 20px;
    }

    .bk-tl-intro--reverse .bk-tl-intro__copy {
        order: 0;
        padding: 40px 20px;
    }

    /* On mobile .bk-tl-intro/copy/media stack as separate rows instead of
       sharing one grid row, so there's no sibling text height for the
       absolutely-positioned image to fill — give .bk-tl-intro__media itself
       a real height via aspect-ratio here (the image still just covers it). */
    .bk-tl-intro--reverse .bk-tl-intro__media,
    .bk-tl-intro--event .bk-tl-intro__media {
        aspect-ratio: 16 / 10;
    }

    .bk-event-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-link {
        flex-direction: column;
    }

    .bk-event-link__logo {
        width: 80px;
        height: 80px;
    }

    .bk-rank-table th,
    .bk-rank-table td {
        padding: 16px 20px;
    }

    .bk-rank__item,
    .bk-tl-card {
        flex-wrap: wrap;
        gap: 24px 32px;
        padding-right: 24px;
    }

    .bk-rank__cta,
    .bk-tl-card__cta {
        width: 100%;
    }

    /* the card has no left padding (the rank pill is welded to the edge),
       so once the body / buttons wrap onto their own lines they need their
       own inset; reset at 600px, where the card gets padding on all sides */
    .bk-rank__body,
    .bk-rank__cta,
    .bk-tl-card__body,
    .bk-tl-card__cta {
        padding-left: 24px;
    }

    .bk-rank__cta .bk-btn,
    .bk-tl-card__cta .bk-btn {
        width: 100%;
    }

    .bk-hwr__body {
        padding-left: 0;
        border-left: 0;
    }

    .bk-tl-guides__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bk-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bk-compare__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-hub-races__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-band--flush-y {
        padding: 40px 0;
    }

    .bk-band {
        padding: 56px 0;
    }

    .bk-band--yellow {
        padding: 32px 0;
    }

    .bk-band--flush {
        padding: 0;
    }

    /* the .bk-band padding above would otherwise bring back the top padding
       these drop on desktop (a band joined to the same-coloured one above) */
    .bk-band--connect,
    .bk-band--plain + .bk-band--hwr {
        padding-top: 0;
    }
}

@media (max-width: 780px) {
    .bk-proscons__cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bk-bm-toolbar-band {
        padding: 32px 0;
    }

    .bk-bm-toolbar__filters {
        flex-basis: 100%;
        gap: 8px;
    }

    .bk-bm-chip {
        padding: 8px 14px;
        font-size: 15px;
    }

    .bk-bm-toolbar__sort {
        width: 100%;
    }

    .bk-bm-select {
        flex: 1;
    }

    .bk-bm-select select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .bk-tblock:not(.bk-tblock + .bk-tblock) {
        padding-top: 56px;
    }

    .bk-tblock:not(:has(+ .bk-tblock)) {
        padding-bottom: 56px;
    }

    .bk-tblock + .bk-tblock {
        margin-top: 40px;
    }

    .bk-tblock--point + .bk-tblock--point {
        margin-top: 24px;
    }

    .bk-trust__callout {
        padding: 32px 24px;
    }

    .bk-verdict {
        padding: 24px;
        gap: 20px;
    }

    .bk-verdict__cta {
        align-items: stretch;
        align-self: stretch;
    }

    .bk-verdict__cta .bk-btn {
        width: 100%;
    }

    .bk-byline {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-compliance {
        flex-direction: column;
        gap: 12px;
    }

    .bk-faq__q {
        font-size: 18px;
    }

    .bk-rank__item,
    .bk-tl-card {
        padding: 24px 20px 24px 20px;
        gap: 20px 24px;
    }

    .bk-rank__body,
    .bk-rank__cta,
    .bk-tl-card__body,
    .bk-tl-card__cta {
        padding-left: 0;
    }

    .bk-rank__num,
    .bk-tl-card__num {
        min-width: 52px;
        padding: 12px 20px;
        font-size: 20px;
        border-radius: 30px;
    }

    .bk-rank__logo,
    .bk-tl-card__logo {
        width: 88px;
        height: 88px;
    }

    .bk-hwr {
        padding: 32px 24px;
    }

    /* comparison table: each row becomes the label on its own full-width
       line with the two values side by side under it; the head keeps just
       the two brands */
    .bk-cmp-table,
    .bk-cmp-table thead,
    .bk-cmp-table tbody {
        display: block;
    }

    .bk-cmp-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bk-cmp-table__corner {
        display: none;
    }

    .bk-cmp-table__label {
        grid-column: 1 / -1;
        padding: 14px 16px;
        border-bottom: 0;
        text-align: center;
    }

    .bk-cmp-table__brand,
    .bk-cmp-table__value {
        padding: 14px 12px;
        font-size: 16px;
    }

    .bk-cmp-table__brand-inner {
        flex-direction: column;
        gap: 8px;
    }

    .bk-cmp-choose__head,
    .bk-cmp-choose__list {
        padding: 24px 20px;
    }

    .bk-cmp-choose__list li {
        font-size: 18px;
        padding-left: 44px;
    }

    .bk-h2h__title {
        font-size: 20px;
    }

    .bk-h2h__toggle {
        width: 40px;
        height: 40px;
    }

    .bk-cmp-card {
        padding: 24px 20px;
        gap: 32px;
    }

    .bk-cmp-card__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .bk-cmp-logo--128 {
        width: 88px;
        height: 88px;
    }

    .bk-cmp-card__brand {
        font-size: 26px;
    }

    .bk-cmp-card__cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-guide-tool {
        padding: 24px 20px;
        gap: 24px;
    }

    .bk-guide-tool__title {
        font-size: 26px;
    }

    .bk-guide-body__section:first-child .bk-guide-body__heading {
        font-size: 28px;
    }

    .bk-guide-body__heading {
        font-size: 20px;
    }

    .bk-guide-body__text {
        font-size: 16px;
    }

    .bk-guide-bm__title {
        margin-bottom: 32px;
    }

    .bk-guide-byline .bk-byline__who {
        gap: 20px;
    }

    .bk-calc {
        gap: 40px;
        padding: 24px 20px;
        border-radius: 32px;
    }

    .bk-calc__form {
        gap: 24px;
    }

    .bk-calc__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .bk-calc__field {
        gap: 10px;
    }

    .bk-calc__label,
    .bk-calc__check {
        font-size: 16px;
    }

    .bk-calc__input,
    .bk-calc__select select {
        padding: 12px 14px;
        font-size: 18px;
    }

    .bk-calc__note,
    .bk-calc__hint {
        font-size: 15px;
    }

    .bk-calc__results {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bk-calc__result {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 24px;
        border-radius: 24px;
    }

    .bk-calc__value {
        order: 2;
        font-size: 26px;
    }

    .bk-tool-explainer__title,
    .bk-tool-share__title {
        font-size: 28px;
    }

    .bk-tool-explainer__text {
        font-size: 17px;
    }

    .bk-tool-share {
        padding: 24px 20px;
    }

    /* six 30px icons fit one row at 350px */
    .bk-tool-share__icons {
        gap: 16px;
    }

    .bk-tool-guide__title {
        font-size: 34px;
    }
}

@media (max-width: 480px) {

    .bk-glance__row dt,
    .bk-glance__row dd {
        flex-basis: 100%;
        max-width: 100%;
        text-align: left;
    }
}

/* ===========================================================================
   Specificity guard.

   The theme's global stylesheet sets `body { font-weight: 500 }` and the
   Elementor "kit" (`.elementor-kit-2632 h1..h6 / p / a`, specificity 0-1-1)
   restyles headings, paragraphs and links. Both can win over the plain-class
   rules above depending on stylesheet load order, which is what caused the
   size / weight drift. Every typographic value the design depends on is
   re-stated here under `.bk-page` (specificity 0-2-x) so it always wins.
   Values are the Figma "Bookmaker Reviews" frame, verbatim.
   =========================================================================== */
.bk-page :is(h1, h2, h3, p, ul, li, dl, dt, dd, button, a) {
    font-family: 'Open Sans', sans-serif;
}

/* 48 — page H1 / section H2 */
.bk-page .bk-titlebar__h1,
.bk-page .bk-proscons__title,
.bk-page .bk-faq__title,
.bk-page .bk-compare__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.bk-page .bk-review__section:first-of-type h3 {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 700;
    line-height: 1.2;
}

/* 32 — verdict brand */
.bk-page .bk-verdict__brand {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

/* 24 — sub-heads, glance title, card labels, rating, byline, compliance lead */
.bk-page .bk-review__section h3,
.bk-page .bk-proscons__head,
.bk-page .bk-glance__title,
.bk-page .bk-compare__card-label,
.bk-page .bk-byline__name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.bk-page .bk-byline__name em {
    font-weight: 700;
    font-style: italic;
}

.bk-page .bk-stars__label {
    font-size: 24px;
    font-weight: 700;
}

.bk-page .bk-compliance__lead {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

/* 20 — list items, FAQ question, breadcrumb, buttons */
.bk-page .bk-proscons__col li {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-page .bk-faq__q {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #17486d;
}

.bk-page .bk-btn {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.bk-page .bk-breadcrumb {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

/* 18 — body copy */
.bk-page .bk-verdict__offer,
.bk-page .bk-review__intro,
.bk-page .bk-review__section p {
    font-size: 18px;
    line-height: 1.5;
}

.bk-page .bk-review__section p {
    font-weight: 400;
}

/* 16 — labels, values, meta */
.bk-page .bk-titlebar__meta,
.bk-page .bk-glance__row,
.bk-page .bk-glance__year,
.bk-page .bk-byline__date,
.bk-page .bk-compliance__text,
.bk-page .bk-faq__a p {
    font-size: 16px;
}

/* colours that the kit would otherwise repaint */
.bk-page .bk-titlebar__h1,
.bk-page .bk-faq__title,
.bk-page .bk-compare__title,
.bk-page .bk-review__section h3,
.bk-page .bk-byline__name,
.bk-page .bk-byline__date,
.bk-page .bk-compliance__lead,
.bk-page .bk-compliance__text,
.bk-page .bk-breadcrumb,
.bk-page .bk-breadcrumb a,
.bk-page .bk-glance__row dt,
.bk-page .bk-glance__row dd {
    color: var(--bk-navy);
}

/* The kit's own `p` selector (0-1-1) would otherwise repaint the wysiwyg
   field's <p> inside .bk-compliance__text — same fix as .bk-review__section p
   above, one rule covering every property instead of splitting across the
   shared blocks. */
.bk-page .bk-compliance__text p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

/* Offers page (bk_offer) guards — same reasoning as above: the kit's own
   `select`/`h2`/`p` selectors would otherwise repaint these. */
.bk-page .bk-offer-filter__select {
    font-size: 20px;
    font-weight: 600;
    color: var(--bk-navy);
}

.bk-page .bk-offer-explain__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-offer-explain__text p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-page .bk-event-block__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--card .bk-event-teaser__title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--card .bk-event-teaser__venue {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--single .bk-event-teaser__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--single .bk-event-teaser__venue {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-event-summary__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-page .bk-event-summary__title--navy {
    color: var(--bk-navy);
}

.bk-page .bk-event-summary .bk-event-fact__label {
    font-size: 20px;
    font-weight: 700;
    color: var(--bk-yellow);
}

.bk-page .bk-event-summary .bk-event-fact__value {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-event-summary .bk-event-summary__note {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

.bk-page .bk-rank-table th,
.bk-page .bk-rank-table td {
    font-size: 18px;
}

.bk-page .bk-rank-table__brand a {
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-event-link__title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.bk-page .bk-event-link__text {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-glance__title,
.bk-page .bk-verdict__brand,
.bk-page .bk-proscons__title {
    color: #fff;
}

.bk-page .bk-verdict__offer {
    color: #fff;
}

.bk-page .bk-compare__card,
.bk-page .bk-compare__card-label {
    color: var(--bk-yellow);
}

.bk-page .bk-compare__card-btn,
.bk-page .bk-btn--primary {
    color: var(--bk-navy);
}

.bk-page .bk-btn--navy {
    color: #fff;
}

/* toplist / Category Hub — type scale + colours the kit would repaint */
.bk-page .bk-rank__brand {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bk-yellow);
}

.bk-page .bk-rank__offer {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.bk-page .bk-rank__offer-row .bk-stars__label {
    color: #fff;
}

.bk-page .bk-rank__num {
    color: #000;
}

.bk-page .bk-rank__chip {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-yellow);
}

.bk-page .bk-hwr__title {
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(32px, 5vw, 48px);
    color: var(--bk-yellow);
}

.bk-page .bk-hwr__text {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-tl-intro__copy,
.bk-page .bk-tl-intro__copy p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy-2);
}

.bk-page .bk-tl-detailed__title,
.bk-page .bk-tl-guides__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.bk-page .bk-tl-detailed__title {
    color: var(--bk-navy);
}

.bk-page .bk-tl-guides__title {
    color: var(--bk-navy-2);
}

.bk-page .bk-tl-card__brand {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-tl-card__excerpt {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-tl-card__more {
    font-size: 18px;
    font-weight: 600;
    color: var(--bk-navy);
}

.bk-page .bk-tl-guide__title,
.bk-page .bk-tl-guide__title a {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: #17486d;
}

.bk-page .bk-tl-guide__meta {
    font-size: 12px;
    font-weight: 400;
    color: #adadad;
}

/* Section Hub */
.bk-page .bk-hub-head__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-hub-head__sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--bk-navy);
}

/* on either navy band ("This Week's Offers" / "Learn How It Works"), the
   heading flips to yellow/white — needs the extra class to out-specify the
   navy default just above */
.bk-page .bk-band--navy .bk-hub-head__title {
    color: var(--bk-yellow);
}

.bk-page .bk-band--navy .bk-hub-head__sub {
    color: #fff;
}

.bk-page .bk-rank__terms {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-tl-guide__excerpt {
    font-size: 14px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-compare__card-desc {
    font-size: 16px;
    font-weight: 600;
    color: var(--bk-yellow);
}

.bk-page .bk-hub-race__dates {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.bk-page .bk-hub-race__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-hub-race__venue,
.bk-page .bk-hub-race__summary {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-hub-race__summary {
    font-size: 14px;
}

/* the "View betting" button on a yellow card is navy-bg / yellow-text — the
   opposite of .bk-btn--navy's usual white text, so this needs to out-specify
   the guard's own `.bk-page .bk-btn--navy { color:#fff }` rule below */
.bk-page .bk-hub-race__cta .bk-btn--navy {
    color: var(--bk-yellow);
}

.bk-page .bk-hub-trust__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-hub-trust__text {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-tl-guide__badge {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-titlebar__sub {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-block-toplist__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

/* Comparison (bk_comparison) — the kit's h2/p/th/td/button selectors would
   otherwise repaint these; the theme's button:hover would also paint the
   head-to-head toggle rows grey */
.bk-page .bk-cmp-intro,
.bk-page .bk-cmp-intro p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
}

.bk-page .bk-cmp-table__brand {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.bk-page .bk-cmp-table__label,
.bk-page .bk-cmp-table__value {
    font-size: 18px;
    color: var(--bk-navy);
}

.bk-page .bk-cmp-table__label {
    font-weight: 700;
}

.bk-page .bk-cmp-table__value {
    font-weight: 400;
}

.bk-page .bk-cmp-choose__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-cmp-choose__col--b .bk-cmp-choose__title {
    color: #fff;
}

.bk-page .bk-cmp-choose__list li {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-page .bk-h2h__q,
.bk-page .bk-h2h__q:hover,
.bk-page .bk-h2h__q:focus {
    background: none;
    color: var(--bk-navy);
}

.bk-page .bk-h2h__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-h2h__a p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-cmp-card__brand {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-page .bk-cmp-card__offer {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.bk-page .bk-cmp-card__terms {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-cmp-card__rating .bk-stars__label {
    color: #fff;
}

/* Lists inside editor (wysiwyg) text. The theme resets every list
   (ul { list-style: none inside; margin: 0; padding: 0 }), which left the
   bullets off entirely on the live pages. Figma "Tools" explainer: bullet 10px
   in from the text column, text at 30px, no extra space between items. */
.bk-page :is(.bk-tool-explainer__text, .bk-guide-body__text, .bk-h2h__a, .bk-faq__a, .bk-review__section, .bk-tl-intro__copy, .bk-offer-explain__text, .bk-trust__text) ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.bk-page :is(.bk-tool-explainer__text, .bk-guide-body__text, .bk-h2h__a, .bk-faq__a, .bk-review__section, .bk-tl-intro__copy, .bk-offer-explain__text, .bk-trust__text) ul > li {
    position: relative;
    margin: 0;
    padding-left: 30px;
}

.bk-page :is(.bk-tool-explainer__text, .bk-guide-body__text, .bk-h2h__a, .bk-faq__a, .bk-review__section, .bk-tl-intro__copy, .bk-offer-explain__text, .bk-trust__text) ul > li::before {
    content: "\2022";
    position: absolute;
    left: 10px;
    top: 0;
}

.bk-page :is(.bk-tool-explainer__text, .bk-guide-body__text, .bk-h2h__a, .bk-faq__a, .bk-review__section, .bk-tl-intro__copy, .bk-offer-explain__text, .bk-trust__text) ol {
    margin: 0 0 16px;
    padding-left: 30px;
    list-style: decimal outside;
}

.bk-page :is(.bk-tool-explainer__text, .bk-guide-body__text, .bk-h2h__a, .bk-faq__a, .bk-review__section, .bk-tl-intro__copy, .bk-offer-explain__text, .bk-trust__text) :is(ul, ol):last-child {
    margin-bottom: 0;
}

/* Tools: Each-Way Calculator */
.bk-page .bk-calc__label {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-yellow);
}

.bk-page .bk-calc__check span {
    font-size: 18px;
    font-weight: 300;
    color: var(--bk-yellow);
}

.bk-page .bk-calc__note {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.bk-page .bk-calc__hint {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-calc__input,
.bk-page .bk-calc__select select {
    font-size: 20px;
    font-weight: 600;
    color: #004a71;
    background-color: #fff;
}

.bk-page .bk-calc__value {
    font-size: 32px;
    font-weight: 700;
}

.bk-page .bk-calc__caption {
    font-size: 18px;
    font-weight: 400;
}

.bk-page .bk-tool-explainer__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-tool-explainer__text,
.bk-page .bk-tool-explainer__text p,
.bk-page .bk-tool-explainer__text li {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-page .bk-tool-share__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-tool-guide__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--bk-navy);
}

.bk-page .bk-tool-guide__text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
}

/* Guide (bk_guide) */
.bk-page .bk-titlebar--guide .bk-titlebar__meta {
    text-align: left;
}

.bk-page .bk-guide-tool__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-page .bk-guide-tool__text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-guide-body__heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-guide-body__section:first-child .bk-guide-body__heading {
    font-size: 36px;
}

.bk-page .bk-guide-body__text,
.bk-page .bk-guide-body__text p,
.bk-page .bk-guide-body__text li {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-guide-bm__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-page .bk-guide-bm .bk-rank__brand {
    line-height: 1.6;
}

.bk-page .bk-guide-byline .bk-byline__name {
    line-height: 1;
}

@media (max-width: 600px) {
    .bk-page .bk-cmp-table__brand,
    .bk-page .bk-cmp-table__label,
    .bk-page .bk-cmp-table__value {
        font-size: 16px;
    }

    .bk-page .bk-cmp-choose__list li {
        font-size: 18px;
    }

    .bk-page .bk-h2h__title {
        font-size: 20px;
    }

    .bk-page .bk-cmp-card__brand {
        font-size: 26px;
    }

    .bk-page .bk-guide-tool__title {
        font-size: 26px;
    }

    .bk-page .bk-guide-body__heading {
        font-size: 20px;
    }

    .bk-page .bk-guide-body__section:first-child .bk-guide-body__heading {
        font-size: 28px;
    }

    .bk-page .bk-guide-body__text,
    .bk-page .bk-guide-body__text p,
    .bk-page .bk-guide-body__text li {
        font-size: 16px;
    }

    .bk-page .bk-calc__label,
    .bk-page .bk-calc__check span {
        font-size: 16px;
    }

    .bk-page .bk-calc__note,
    .bk-page .bk-calc__hint {
        font-size: 15px;
    }

    .bk-page .bk-calc__input,
    .bk-page .bk-calc__select select {
        font-size: 18px;
    }

    .bk-page .bk-calc__value {
        font-size: 26px;
    }

    .bk-page .bk-tool-explainer__title,
    .bk-page .bk-tool-share__title {
        font-size: 28px;
    }

    .bk-page .bk-tool-explainer__text,
    .bk-page .bk-tool-explainer__text p,
    .bk-page .bk-tool-explainer__text li {
        font-size: 17px;
    }

    .bk-page .bk-tool-guide__title {
        font-size: 34px;
    }
}

/* Trust Layer (Trust Page) */
.bk-page .bk-trust__heading {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-trust__item--point .bk-trust__heading {
    font-size: 24px;
}

.bk-page .bk-trust__text,
.bk-page .bk-trust__text p,
.bk-page .bk-trust__text li {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* Safer Gambling's support list: Regular 18 / 1.6, then 32 to the next paragraph */
.bk-page .bk-trust__text li {
    line-height: 1.6;
}

.bk-page .bk-trust__text :is(ul, ol):not(:last-child) {
    margin-bottom: 32px;
}

.bk-page .bk-trust__callout .bk-trust__text,
.bk-page .bk-trust__callout .bk-trust__text p,
.bk-page .bk-trust__callout .bk-trust__text li {
    font-size: 20px;
    line-height: 1.6;
}

.bk-page .bk-compliance--lead-only .bk-compliance__lead {
    margin: 0;
}

@media (max-width: 600px) {
    .bk-page .bk-trust__heading {
        font-size: 28px;
    }

    .bk-page .bk-trust__item--point .bk-trust__heading {
        font-size: 20px;
    }

    .bk-page .bk-trust__text,
    .bk-page .bk-trust__text p,
    .bk-page .bk-trust__text li {
        font-size: 16px;
    }

    .bk-page .bk-trust__callout .bk-trust__text,
    .bk-page .bk-trust__callout .bk-trust__text p,
    .bk-page .bk-trust__callout .bk-trust__text li {
        font-size: 18px;
    }
}

/* Bookmakers page */
.bk-page .bk-bm-chip {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bk-navy);
    background-color: #fff;
    text-transform: none;
    letter-spacing: 0;
}

.bk-page .bk-bm-chip:hover,
.bk-page .bk-bm-chip:focus-visible {
    background-color: var(--bk-tint-blue);
    color: var(--bk-navy);
}

.bk-page .bk-bm-chip.is-active {
    background-color: var(--bk-navy);
    color: #fff;
}

.bk-page .bk-bm-toolbar__count {
    font-size: 16px;
    color: var(--bk-navy);
}

@media (max-width: 600px) {
    .bk-page .bk-bm-chip {
        font-size: 15px;
    }
}