/* paysafecardcasino.cl — Chile guide to the paysafecard voucher, on the lobby
   template. The palette is taken from the official artwork itself: every opaque
   pixel of paysafecard-logo.png is #3200ff, kept here as --brand-deep.

   That exact blue is a FILL colour only. On the site void (#0a0c16) it reads at
   2.1:1 and must never carry text or be used as text. White on #3200ff is
   8.1:1, so it is the button/badge ground. Everything that needs to *read* as
   the brand on dark uses --brand (#8f7bff): 6.0:1 on the void as text, and
   6.0:1 against --ink when it is itself the fill. Gold stays for money figures,
   magenta for the warnings this particular site has a lot of. */

:root {
    --void: #0a0c16;
    --panel: #10131f;
    --raised: #171b2b;
    --hover: #1f2438;
    --line: #2a3048;
    --text: #f2f4fa;
    --muted: #b3b9cc;
    --brand: #8f7bff;
    --brand-deep: #3200ff;
    --brand-dim: #5b45c4;
    --ink: #0a0c16;
    --gold: #f0c14b;
    --live: #ff4d6d;
    --live-dim: #c73852;
    --header-h: 64px;
    --sidebar-w: 228px;
    --sans: "Inter", system-ui, sans-serif;
    --display: "Montserrat", system-ui, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--brand);
}

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

html {
    scroll-behavior: smooth;
}

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(--brand-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-primary {
    background: var(--brand-deep);
    color: #fff;
}

.btn-primary:hover {
    background: #4a1fff;
}

/* No `.lang` rule: this site is Spanish only. A language selector belongs in
   the header ONLY when there are two or more languages to switch between — a
   lone "ES" chip is decoration that implies a choice the site cannot offer. */

/* ── 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(--brand);
    border-radius: 0;
}

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

/* ── 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;
    /* Re-swept for THIS site's photos with check_scrim_paysafecardcasino.py.
       The stops inherited from coinsgame (0.42 / 0.72 / 0.93) were tuned against
       a casino floor and a dark phone shot; the "Chile no está en la lista"
       banner is a row of white roller shutters and its H2 measured 4.29:1 under
       them — a fail. 0.52 / 0.76 / 0.94 puts the worst text pixel on all three
       banners at 5.36:1 while the photographs still read. */
    background: linear-gradient(180deg, rgba(7, 8, 11, 0.52) 0%, rgba(7, 8, 11, 0.76) 45%, rgba(7, 8, 11, 0.94) 100%);
}

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

.promo-banner p {
    /* --muted (#b7bfc9) cannot clear 4.5:1 over a photo under any scrim light
       enough to show the image — same finding as the beteum build. */
    color: #e6eaf0;
    font-size: 13px;
    max-width: 36ch;
    margin: 6px 0 12px;
}

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

/* Fallback grounds while each photo decodes — tinted to this palette. */
.promo-a { background: #14102a; }
.promo-b { background: #101a18; }
.promo-c { background: #10141f; }

/* ── 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(--brand);
}

.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 148px;
    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 {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #0a0c12;
}

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

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

/* ── Ticker ── */

/* ── 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(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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(--brand);
}

.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;
}

/* ── Breadcrumb ── */

/* ── 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 {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .search {
        display: none;
    }

    /* The template's topbar-left/right are both flex-shrink: 0, which is fine
       at 1280px and overflows at 375: the logo lockup is 161px wide and the CTA
       cannot give any width back, so the document gained 71px of horizontal
       scroll. Letting the left side shrink and capping the CTA fixes it without
       hiding either. */
    .topbar {
        gap: 10px;
        padding: 0 12px;
    }

    .topbar-left {
        min-width: 0;
        flex-shrink: 1;
    }

    .topbar-right .btn {
        padding: 0 12px;
        white-space: nowrap;
    }

    .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(7, 8, 11, 0.6);
        z-index: 45;
    }

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

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

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

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

    .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(--brand);
    }

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

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

/* ── Network additions ─────────────────────────────────────────────────────
   Components the Kairon template did not have and that this build inherits
   from the fleet: the sub-page hero, the third-party-claim notice, the
   numbered step box, and the small print under the pill strips. */

.nav-foot {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 14px 4px 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.rail-note {
    color: var(--muted);
    font-size: 13px;
    margin: -6px 0 12px;
    max-width: 78ch;
}

.strip-note {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 10px;
    max-width: 78ch;
}

.strip-note + .strip { margin-top: 0; }

.pill-muted {
    color: var(--muted);
    border-style: dashed;
}

/* ── Sub-page hero ── */
.page-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    min-height: 210px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    margin-bottom: 24px;
    background: var(--raised);
    box-shadow: var(--shadow);
}

.page-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    z-index: -1;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(6, 9, 15, 0.94) 30%, rgba(6, 9, 15, 0.35) 100%);
}

.page-hero-body { max-width: 60ch; }

.page-hero h1 {
    font-size: clamp(26px, 4vw, 38px);
    /* No text-transform here, unlike the template: the subject of every one of
       these headings is a wordmark that is lowercase by design, and
       "PAYSAFECARD" in caps reads as a different brand. */
}

.page-hero p {
    /* Same finding as .promo-banner p, which the template already fixed but
       never carried across to the sub-page hero: --muted (#b3b9cc) measured
       4.02:1 over foto-nuevos and 4.22:1 over foto-bonos under this scrim.
       #e6eaf0 puts the worst pixel across all three heroes at 6.52:1. */
    color: #e6eaf0;
    margin: 8px 0 0;
    font-size: 15px;
}

/* ── Notice ── */
.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--live);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 18px 20px;
    margin: 26px 0;
}

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

.notice h3 {
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--text);
}

.notice-warn h3 { color: var(--brand); }

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

.notice em {
    color: var(--text);
    font-style: normal;
    background: var(--raised);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ── Offer grid (/bonus/) ── */

/* ── Registration step box (/promo-kod/) ── */
.steps-boxed {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 20px 22px;
    margin: 22px 0 26px;
}

.steps-title {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
}

/* `.steps-title` is usually a <p>, so inside .prose the `.prose p` rule
   (specificity 0,1,1) beat it and painted the step box's title in --muted —
   the same ink as the body it heads, which flattens the hierarchy. */
.prose .steps-title {
    color: var(--text);
    font-weight: 700;
}

.pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Without this the implicit `auto` column sizes to max-content, so a row
       holding a real sentence pushes past the parent instead of wrapping. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.pick-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--raised);
    padding: 10px 12px;
    font-size: 15px;
}

.pick-tag {
    flex: none;
    min-width: 74px;
    text-align: center;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--brand);
    border-radius: 3px;
    padding: 3px 6px;
}

.pick-tag-alt { background: var(--live); }
.pick-tag-neutral { background: var(--muted); }

.steps-note {
    color: var(--muted);
    font-size: 12px;
    margin: 12px 0 0;
}

/* ── Footer blurb + 404 ── */
.footer-blurb {
    color: var(--muted);
    margin-top: 12px;
    font-size: 14px;
    max-width: 42ch;
}

.prose-404 { padding-top: 40px; }

/* ── Facts table gets a header row here ── */
.facts thead th {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
}

@media (max-width: 620px) {

    .page-hero {
        min-height: 168px;
        padding: 18px;
    }

    .pick-list li {
        flex-wrap: wrap;
        font-size: 14px;
    }
}

/* `manifest.json`, `display: standalone` and friends on /aplikace/ — the
   template had no code style, so they rendered as bare monospace runs. */
.prose code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.88em;
    color: var(--text);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* Nine sidebar links sit between the top of the document and the lobby, so a
   keyboard user needs a way past them. Visible only when focused. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 80;
    background: var(--brand);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
}

main:focus {
    outline: none;
    box-shadow: none;
}

/* `.pick-list li` is a flex container, so every inline element and every run of
   bare text inside it becomes its own flex item. An item written as
   `<span class="pick-tag">X</span> texto <b>énfasis</b> más texto` therefore
   fragments into four columns — and under 620px, where `flex-wrap: wrap` is on,
   it breaks into stacked lines with orphaned punctuation. Found on /aplicacion/
   during the build. The markup fix is to wrap everything after the tag in a
   single `<span>`; this rule makes that wrapper behave as the row's text column
   and keeps a stray inline element from ever becoming a sibling flex item. */
.pick-list li > span:not([class]) {
    flex: 1 1 auto;
    min-width: 0;
}

.pick-list li > b,
.pick-list li > strong,
.pick-list li > em {
    flex: 1 1 auto;
    min-width: 0;
}

/* `.facts` is `width: 100%` but its cell content sets a minimum: with three
   columns of Spanish prose it stops fitting somewhere under ~400px and pushes
   the BODY's scrollWidth past the viewport. That overflow is invisible to a
   `document.documentElement.scrollWidth` check — measure `document.body` — and
   it makes the whole page pan sideways on a phone. Give the table its own
   scroll box instead, so wide content scrolls and the page never does.
   Wrapper-less fallback: a `display: block` table can scroll its own rows. */
@media (max-width: 620px) {
    .facts {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .facts thead,
    .facts tbody,
    .facts tr {
        /* keep table layout semantics inside the now-block scroll box */
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .facts caption {
        display: block;
    }
}

/* ── Nominative brand artwork ────────────────────────────────────────────
   The real paysafecard wordmark. It is never the site's own mark, so it is
   only ever rendered by these two classes, and both of them sit inside copy
   that names the payment method. .psc-card keeps the official blue-on-white
   lockup the brand's own guidelines show; .brandmark is the white-inked
   version for placement on the deep brand fill. */
.psc-card {
    display: block;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 14px 18px;
    max-width: 260px;
    margin: 4px 0 10px;
}

.psc-card img {
    width: 100%;
    height: auto;
}

.psc-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    /* Last element of its section, so it carries the gap to the next h2. */
    margin: 0 0 28px;
}

.brandmark {
    height: 20px;
    width: auto;
    vertical-align: -3px;
}

.deep .brandmark {
    display: block;
    margin-bottom: 12px;
}

/* Deep-fill panel: the one place the official #3200ff becomes a surface. */
.deep {
    background: linear-gradient(135deg, var(--brand-deep), #6a3cff);
    border: 0;
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 26px 0;
    color: #fff;
}

.deep h3 {
    color: #fff;
    font-size: 17px;
    margin: 0 0 8px;
}

.deep p {
    color: rgba(255, 255, 255, 0.92);
}

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

.deep a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Multi-column comparison tables: the 38% first-column width that suits the
   two-column fact sheets would squash a four-column header. */
.facts thead th,
.facts.facts-wide th {
    width: auto;
}

.facts .yes { color: var(--brand); font-weight: 700; }
.facts .no { color: var(--live); font-weight: 700; }