/* beteum.cl — Beteum lobby, Chile.
   Palette sampled straight off the operator's own logo.svg: the BETEUM wordmark
   is a white -> #EBE9FF -> white face standing on a #0079FF -> #96CFFF extruded
   shadow. That mark carries one hue, so the site does too — blue is the only
   signal, white is the only emphasis. Gold survives for money and red for the
   live badge because those are functional roles, not brand claims.
   Generated by build_css_beteum.py from gobetapuestas.cl/styles.css. */

:root {
    --void: #000000;
    --panel: #0a0c10;
    --raised: #14181f;
    --hover: #202631;
    --line: #283040;
    --text: #ffffff;
    --muted: #a7adb8;
    --blue: #0079ff;
    --blue-bright: #7fc4ff;
    --blue-dim: #0b5bb5;
    --amber: #ffb020;
    --lav: #ebe9ff;
    --ink: #000000;
    --gold: #fcd402;
    --live: #f62b00;
    --live-dim: #a81d00;
    --header-h: 64px;
    --sidebar-w: 240px;
    --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
    --display: "Saira", "Inter", -apple-system, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--blue);
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--void);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 700;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Icon sprite ── */
.icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.icon-lg {
    width: 1.35em;
    height: 1.35em;
}

/* ── Top bar ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.logo {
    display: flex;
    align-items: center;
    height: 40px;
}

.logo img {
    height: 36px;
    width: auto;
}

.search {
    flex: 1;
    max-width: 420px;
    position: relative;
    margin: 0 auto;
}

.search.is-mobile {
    display: none;
}

.search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
}

.search input::placeholder {
    color: var(--muted);
}

.search input:focus {
    border-color: var(--blue-dim);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}

.btn-ghost:hover {
    background: var(--hover);
}

/* The wordmark's blue IS the action colour, so the primary CTA is a blue
   gradient with near-black ink: #000 on the #0079FF bottom stop is 5.18:1 and
   on the #7FC4FF top stop 11.2:1. White ink here would be 4.06:1 and fail. */
.btn-primary {
    background: linear-gradient(180deg, var(--blue-bright), var(--blue));
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(0, 121, 255, 0.28);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #b3dcff, #3aa0ff);
}

.btn-blue {
    background: var(--blue);
    color: var(--ink);
}

.btn-blue:hover {
    background: var(--blue-bright);
}

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

.lang {
    height: 40px;
    padding: 0 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ── Shell ── */
.shell {
    display: flex;
    min-height: calc(100vh - var(--header-h));
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 16px 12px 32px;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
}

.nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 12px 6px;
}

.nav-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
}

.nav-list a:hover {
    background: var(--hover);
}

.nav-list a.is-active {
    background: var(--raised);
    box-shadow: inset 3px 0 0 var(--blue);
    border-radius: 0;
}

.nav-list .dot-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 0 rgba(246, 43, 0, 0.7);
    animation: pulse-live 1.8s ease-out infinite;
    margin-left: auto;
}

@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(246, 43, 0, 0.55); }
    100% { box-shadow: 0 0 0 8px rgba(246, 43, 0, 0); }
}

.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 8px 0 0;
    text-align: center;
}

/* ── Main ── */
.main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 64px;
}

/* ── Promo track ── */
.promo-track {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.promo-banner {
    position: relative;
    min-height: 168px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: var(--raised);
    box-shadow: var(--shadow);
}

.promo-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.promo-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Scrim strengths are measured, not eyeballed. Re-swept for this site:
       gobet's 0.64/0.88/0.97 + 0.66 were tuned against bright floodlit shots
       and crushed these three already-dark photographs to a mean luminance of
       4.4/255. At these values the worst-case pixel under a headline is 7.01:1
       and under a paragraph 5.14:1, both clear of AA, and the photograph is
       actually visible. Measurement lives in build_css_beteum.py. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 62%);
}

.promo-banner h2,
.promo-banner .promo-kicker-off {
    font-size: 22px;
}

.promo-banner p {
    /* Not --muted: over a scrim light enough to show the photograph, #a7adb8
       tops out at 4.7:1. #d8dde6 is 15.4:1 on black and 5.14:1 worst-case here. */
    color: #d8dde6;
    font-size: 13px;
    max-width: 36ch;
    margin: 6px 0 12px;
}

.promo-banner .btn {
    width: fit-content;
}

.promo-a { background: #0a1420; }
.promo-b { background: #120a20; }
.promo-c { background: #0d1016; }

/* ── Chips ── */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 22px;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.chip:hover {
    background: var(--hover);
}

.chip.is-active {
    background: var(--blue);
    color: var(--ink);
    border-color: var(--blue);
}

/* ── Game rails ── */
.rail {
    margin-bottom: 28px;
}

.rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rail-head h2 {
    font-size: 20px;
}

.rail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rail-actions a {
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}

.rail-actions a:hover {
    color: var(--blue);
}

.rail-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rail-btn:hover {
    background: var(--hover);
}

.rail-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.game-card {
    flex: 0 0 188px;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--raised);
    cursor: pointer;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
}

.game-card img,
.game-card .orig-art {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: #090c13;
}

.game-card h3 {
    font-size: 15px;
    padding: 8px 10px 2px;
}

.game-card .meta {
    font-size: 12px;
    color: var(--muted);
    padding: 0 10px 10px;
}

.game-card .play {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.game-card:hover .play,
.game-card:focus-visible .play {
    opacity: 1;
}

.play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.play-btn .icon {
    margin-left: 2px;
}

.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ink);
    color: var(--blue);
}

.badge-live {
    background: var(--live);
    color: #fff;
}

.badge-jackpot {
    background: var(--gold);
    color: var(--ink);
}

/* ── Fact strip (replaces the template's invented win ticker: every line here
      is a verifiable fact about the operator, not a fabricated player win) ── */
.ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 28px;
    overflow: hidden;
}

.ticker-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.ticker-mask {
    overflow: hidden;
    flex: 1;
    /* Without a fade the marquee hard-clips mid-word at the mask edge, which
       reads as a rendering bug rather than a moving strip. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.ticker-move {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: ticker 32s linear infinite;
}

.win {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
}

.win b {
    color: var(--gold);
}

@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Providers / payments ── */
.strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 28px;
}

.pill {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--raised);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

/* ── Prose ── */
.prose {
    max-width: 75ch;
}

.prose h2 {
    font-size: 24px;
    margin: 2.2em 0 0.55em;
}

.prose h3 {
    font-size: 18px;
    margin: 1.6em 0 0.45em;
}

.prose p,
.prose li {
    color: var(--muted);
}

.prose strong {
    color: var(--text);
}

.prose ul {
    padding-left: 1.2em;
    margin: 0 0 1em;
}

.prose a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Buttons inside prose are buttons, not links: `.prose a` (0-1-1) would paint
   them blue-on-blue, so `.prose .btn` (0-2-0) has to restate a colour. It must
   NOT hard-code white — the primary button is bright blue with near-black ink, and
   white on it lands at 1.1:1. Each variant restates its own ink at 0-2-0. */
.prose .btn {
    text-decoration: none;
    color: var(--text);
}

.prose .btn-primary {
    color: var(--ink);
}

.prose .btn-ghost {
    color: var(--text);
}

/* ── In-article photo with caption ── */
.shot {
    margin: 22px 0 26px;
}

.shot img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.shot figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

.facts {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 28px;
    font-size: 14px;
}

.facts caption {
    text-align: left;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: var(--display);
}

.facts th,
.facts td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
}

.facts th {
    width: 38%;
    background: var(--raised);
    color: var(--text);
}

.facts td {
    color: var(--muted);
}

.faq details {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.faq summary {
    font-weight: 700;
    cursor: pointer;
    font-family: var(--display);
}

.faq details p {
    color: var(--muted);
    margin: 10px 0 0;
    font-size: 14px;
}

/* ── Footer ── */
.site-footer {
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 40px 24px 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto 28px;
}

.footer-grid h2 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid li {
    margin-bottom: 8px;
}

.footer-grid a:hover {
    color: var(--blue);
}

.footer-note {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

.footer-note p {
    margin-bottom: 8px;
}

.search-empty {
    display: none;
    padding: 32px;
    text-align: center;
    color: var(--muted);
}

.search-empty.is-on {
    display: block;
}

body.nav-open {
    overflow: hidden;
}

.sidebar-backdrop {
    display: none;
}

.mobile-tabbar {
    display: none;
}

/* ── Live / bonus page extras ── */
.page-hero {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    margin-bottom: 22px;
}

.page-hero h1 {
    font-size: 32px;
    margin-bottom: 8px;
}

.page-hero p {
    color: var(--muted);
    max-width: 62ch;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.promo-card {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promo-card h2 {
    font-size: 20px;
}

.promo-card p {
    color: var(--muted);
    font-size: 14px;
    flex: 1;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.live-grid .game-card {
    flex: none;
    width: 100%;
}

/* ── Breadcrumb ── */
.crumbs {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}

.crumbs a:hover {
    color: var(--blue);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .promo-track {
        grid-template-columns: 1fr 1fr;
    }
    .promo-track .promo-banner:first-child {
        grid-column: 1 / -1;
        min-height: 200px;
    }
    .footer-grid,
    .promo-grid,
    .live-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .burger {
        display: inline-flex;
    }

    .search {
        display: none;
    }

    .search.is-mobile {
        display: block;
        max-width: none;
        margin: 12px 0 16px;
    }

    .sidebar {
        position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow);
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 45;
    }

    body.nav-open .sidebar-backdrop {
        display: block;
    }

    .topbar-right .lang {
        display: none;
    }

    .main {
        padding: 16px 12px 96px;
    }

    .promo-track,
    .promo-grid,
    .live-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        flex-basis: 156px;
    }

    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 35;
        background: var(--panel);
        border-top: 1px solid var(--line);
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    }

    .mobile-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        padding: 6px;
        border-radius: 8px;
    }

    .mobile-tabbar a.is-active,
    .mobile-tabbar a:hover {
        color: var(--blue);
    }

    .page-hero h1 {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ── Guide-page components ── */
.notice {
    background: var(--raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin: 20px 0 26px;
    color: var(--muted);
    font-size: 14px;
}

.notice strong {
    color: var(--text);
}

.notice.is-warn {
    border-left-color: var(--amber);
}

.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.kpi {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.kpi b {
    display: block;
    font-family: var(--display);
    font-size: 20px;
    line-height: 1.15;
    color: var(--text);
}

.kpi span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0 26px;
}

.col-box {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.col-box h3 {
    font-size: 16px;
    margin: 0 0 10px;
}

.col-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.col-box li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-size: 14px;
    color: var(--muted);
}

.col-box li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.col-pro li::before {
    content: "+";
    color: var(--blue);
    font-size: 17px;
    line-height: 1.35;
}

.col-con li::before {
    content: "\2013";
    color: var(--amber);
    font-size: 17px;
    line-height: 1.35;
}

.steps {
    counter-reset: step;
    list-style: none;
    margin: 18px 0 26px;
    padding: 0;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 0 46px;
    margin-bottom: 16px;
    color: var(--muted);
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--raised);
    border: 1px solid var(--line);
    color: var(--blue);
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    display: grid;
    place-items: center;
}

.steps li strong {
    display: block;
    color: var(--text);
    margin-bottom: 2px;
}

.tablewrap {
    overflow-x: auto;
    margin: 16px 0 28px;
}

.tablewrap .facts {
    margin: 0;
    min-width: 460px;
}

.scores {
    list-style: none;
    margin: 18px 0 26px;
    padding: 0;
}

.scores li {
    display: grid;
    grid-template-columns: 190px 1fr 46px;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--muted);
}

.scores .bar {
    height: 8px;
    border-radius: 999px;
    background: var(--raised);
    border: 1px solid var(--line);
    overflow: hidden;
}

.scores .bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue-dim), var(--blue-bright));
}

.scores .num {
    text-align: right;
    font-family: var(--display);
    font-weight: 700;
    color: var(--text);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 8px;
}

@media (max-width: 1100px) {
    .kpis {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .cols {
        grid-template-columns: 1fr;
    }
    .scores li {
        grid-template-columns: 120px 1fr 40px;
        font-size: 13px;
    }
}


/* ── Narrow phones: the wordmark is 5.95:1, so the topbar has to give ──
   At <=560px the logo drops to a 26px cap height (155px wide) and the CTA
   loses its preposition, which brings the row back inside 375px with room to
   spare. The sidebar CTA and the bottom tab bar still carry the action, so
   nothing is lost by shrinking this one. */
@media (max-width: 560px) {
    .logo img {
        height: 26px;
    }

    .topbar {
        gap: 8px;
    }

    .topbar-right .btn {
        padding: 0 12px;
        font-size: 13px;
    }
}