/* TiviGlass "brand poster" look — marketing pages.

   Loaded LAST by the shared layout (after design-system.css), and every rule
   is scoped to body[data-page-category='marketing'], so the account portal,
   admin, partner portal, legal and utility pages are untouched until they move
   over deliberately.

   The idea: big colour, big type, one tilted object where it counts. Violet is
   the logo's colour, ink does the work (main actions, text), amber is reserved
   for Premium and never used as a warning. Funnel Display for headlines and
   prices, Funnel Sans for everything you read. Both are self-hosted
   (fonts.css, generated by backend/tools/website-build/fetch-fonts.js).

   Tokens are re-declared on <body> rather than :root because tokens.css
   computes several of them (the -soft / ring / gradient ones) at :root from
   the base accent; they have to be redeclared here or they keep the old blue. */

/* ===== Tokens ======================================================== */

/* The portals (account, partner, admin) opt in with data-brand="poster" and add
   their own layer, brand-poster-portal.css, on top of these tokens. */
body[data-page-category='marketing'],
body[data-brand='poster'] {
    --font-sans: 'Funnel Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --font-display: 'Funnel Display', 'Funnel Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;

    --bp-violet: #5b3cf0;
    --bp-violet-deep: #4528d6;
    --bp-on-violet: #ffffff;
    --bp-on-violet-soft: #eeeaff;
    --bp-on-violet-faint: #dcd5ff;
    --bp-lilac: #d9d2ff;
    --bp-lilac-ink: #12101f;
    --bp-lilac-soft: #3b3560;
    --bp-ink: #12101f;
    --bp-ink-panel: #12101f;
    --bp-ink-text: #ffffff;
    --bp-ink-soft: #cfcbe8;
    --bp-ink-raised: #1e1b33;
    --bp-amber: #f4b740;
    --bp-amber-ink: #231800;
    --bp-amber-soft: #3d2c00;
    --bp-cta-bg: #12101f;
    --bp-cta-fg: #ffffff;
    --bp-cta-hover: #2a2740;
    --bp-card: #ffffff;
    --bp-chip: #f3f2f7;
    --bp-tv-bezel: #15131f;
    --bp-tv-screen: #0b0a14;
    --bp-tv-cell: #191726;
    --bp-tv-focus: #9c8bff;

    --bg: #f3f2f7;
    --bg-deep: #ebe9f2;
    --surface: #ffffff;
    --surface-soft: #f7f6fb;
    --surface-strong: #ffffff;
    --surface-raised: #ffffff;
    --text: #12101f;
    --text-strong: #12101f;
    --text-soft: #4a4762;
    --text-faint: #66627f;
    --line: #e6e3ef;
    --line-strong: #d5d1e3;
    --accent: #5b3cf0;
    --accent-bright: #4528d6;
    --accent-ink: #ffffff;
    --accent-link: #5b3cf0;
    --accent-soft: #efebff;
    --accent-strong: #e2dcff;
    --ring: rgb(91 60 240 / 30%);
    --focus-ring: 0 0 0 3px var(--ring);
    --brand-1: var(--accent);
    --brand-2: var(--accent-bright);
    --brand-3: var(--accent-link);
    --brand-gradient: linear-gradient(110deg, var(--accent), var(--accent-bright));
    --pro-from: #f4b740;
    --pro-to: #f0a92a;
    --pro-ink: #231800;
    --pro-gradient: linear-gradient(180deg, #ffd27a, #f0a92a);
    --shadow-card: none;
    --shadow-button: none;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

html[data-theme='dark'] body[data-page-category='marketing'],
html[data-theme='dark'] body[data-brand='poster'] {
    --bp-lilac: #2e2858;
    --bp-lilac-ink: #f3f2fa;
    --bp-lilac-soft: #cfcbe8;
    --bp-ink-panel: #211d3b;
    --bp-ink-raised: #2b2650;
    --bp-cta-bg: #f3f2fa;
    --bp-cta-fg: #12101f;
    --bp-cta-hover: #ffffff;
    --bp-card: #1a172e;
    --bp-chip: #231f3d;

    --bg: #0e0c1a;
    --bg-deep: #0a0913;
    --surface: #1a172e;
    --surface-soft: #211d38;
    --surface-strong: #231f3d;
    --surface-raised: #2b2650;
    --text: #f3f2fa;
    --text-strong: #ffffff;
    --text-soft: #c3bfd9;
    --text-faint: #a29ec0;
    --line: #2c2944;
    --line-strong: #3d3960;
    --accent: #a596ff;
    --accent-bright: #c2b8ff;
    --accent-ink: #12101f;
    --accent-link: #b9adff;
    --accent-soft: #2a2552;
    --accent-strong: #352e66;
    --ring: rgb(165 150 255 / 38%);
}

/* ===== Type ========================================================== */

body[data-page-category='marketing'] {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
}

body[data-page-category='marketing'] :is(h1, h2) {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
}

body[data-page-category='marketing'] h3 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

body[data-page-category='marketing'] .kicker,
body[data-page-category='marketing'] .document-index {
    font-family: var(--font-sans);
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* ===== Buttons ======================================================= */

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn {
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-primary {
    border-color: var(--bp-cta-bg);
    background: var(--bp-cta-bg);
    color: var(--bp-cta-fg);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-primary:hover {
    border-color: var(--bp-cta-hover);
    background: var(--bp-cta-hover);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-secondary {
    border-color: currentColor;
    background: transparent;
    color: var(--text);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-secondary:hover {
    background: var(--accent-soft);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-light {
    border-color: #ffffff;
    background: #ffffff;
    color: #12101f;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-premium {
    border-color: var(--bp-amber);
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn-lg {
    min-height: 58px;
    padding-inline: 28px;
    font-size: 1.125rem;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .btn:focus-visible,
:is(body[data-page-category='marketing'], body[data-brand='poster']) a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ===== Header (injected by js/components.js) ========================= */

body[data-page-category='marketing'] .site-nav,
body[data-page-category='marketing'] .site-nav.is-scrolled {
    border-bottom: 0;
    background: var(--bp-violet);
    color: var(--bp-on-violet);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-page-category='marketing'] .site-nav .brand {
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .site-nav .brand-mark {
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 40%);
}

body[data-page-category='marketing'] .site-nav .brand-wordmark {
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

body[data-page-category='marketing'] .nav-row {
    min-height: 80px;
}

body[data-page-category='marketing'] .nav-links a {
    min-height: 80px;
    color: var(--bp-on-violet);
    font-size: 1rem;
    font-weight: 500;
}

body[data-page-category='marketing'] .nav-links a:hover,
body[data-page-category='marketing'] .nav-links a.active {
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .nav-links a.active {
    font-weight: 700;
}

body[data-page-category='marketing'] .nav-links a::after {
    bottom: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--bp-on-violet);
}

body[data-page-category='marketing'] .site-nav .beta-tag {
    border-color: transparent;
    background: rgb(255 255 255 / 18%);
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .nav-actions .btn-ghost {
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .nav-actions .btn-ghost:hover {
    background: rgb(255 255 255 / 12%);
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .site-nav .theme-toggle,
body[data-page-category='marketing'] .site-nav .nav-toggle {
    border-color: rgb(255 255 255 / 35%);
    border-radius: 999px;
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .site-nav .theme-toggle:hover {
    border-color: rgb(255 255 255 / 60%);
    background: rgb(255 255 255 / 12%);
    color: var(--bp-on-violet);
}

body[data-page-category='marketing'] .nav-toggle span {
    height: 2px;
    border-radius: 2px;
}

/* design-system.css paints the scrolled bar's link strip with --surface; on the
   violet bar that read as a white slab across the middle of the header. */
@media (min-width: 921px) {
    body[data-page-category='marketing'] .site-nav .nav-links,
    body[data-page-category='marketing'] .site-nav.is-scrolled .nav-links {
        border: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 920px) {
    body[data-page-category='marketing'] .nav-links {
        border: 0;
        border-radius: 28px;
        background: var(--surface);
        box-shadow: 0 30px 70px -30px rgb(18 8 90 / 60%);
    }

    body[data-page-category='marketing'] .nav-links a,
    body[data-page-category='marketing'] .nav-links a:hover,
    body[data-page-category='marketing'] .nav-links a.active {
        min-height: 52px;
        color: var(--text);
        border-bottom-color: var(--line);
    }

    body[data-page-category='marketing'] .nav-links .beta-tag {
        background: var(--accent-soft);
        color: var(--accent);
    }

    body[data-page-category='marketing'] .nav-toggle {
        background: var(--bp-violet);
    }
}

/* ===== Trial banner ================================================== */

body[data-page-category='marketing'] .trial-banner {
    border-bottom: 0;
    background: var(--bp-ink);
}

body[data-page-category='marketing'] .trial-banner-badge {
    color: var(--bp-amber);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

body[data-page-category='marketing'] .trial-banner-copy,
body[data-page-category='marketing'] .trial-banner-copy strong {
    color: #ffffff;
    font-size: 0.9375rem;
}

body[data-page-category='marketing'] .trial-banner-copy span {
    color: #cfcbe8;
}

body[data-page-category='marketing'] .trial-banner-cta {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== Footer ======================================================== */

/* Also under the portals' sign-in screens (data-brand="poster"). */

:is(body[data-page-category='marketing'], body[data-brand='poster']) .site-footer {
    border-top: 0;
    background: var(--bp-ink);
    color: #ffffff;
}

html[data-theme='dark'] :is(body[data-page-category='marketing'], body[data-brand='poster']) .site-footer {
    background: #08070f;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .site-footer .brand,
:is(body[data-page-category='marketing'], body[data-brand='poster']) .site-footer .brand-wordmark {
    color: #ffffff;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-tagline {
    color: #bdb8d9;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-compliance,
:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-copy {
    color: #a9a5c8;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-col h3 {
    color: #a9a5c8;
    font-family: var(--font-sans);
    font-weight: 600;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-col a {
    color: #ffffff;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-col a:hover {
    color: var(--bp-lilac);
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-col .beta-tag {
    border-color: transparent;
    background: rgb(255 255 255 / 14%);
    color: #ffffff;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-social {
    width: auto;
    align-self: flex-start;
    justify-self: start;
    border-color: #ffffff;
    background: #ffffff;
    color: #12101f;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .footer-bottom {
    border-top-color: #2a2740;
}

:is(body[data-page-category='marketing'], body[data-brand='poster']) .site-footer .theme-toggle {
    border-color: #3a3657;
    border-radius: 999px;
    color: #ffffff;
}

/* ===== Shared marketing pieces used by the pages not yet rebuilt ===== */

body[data-page-category='marketing'] .manifest {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
}

body[data-page-category='marketing'] .manifest-row {
    border: 0;
    border-radius: 20px;
    background: var(--bp-card);
    padding-inline: 22px;
}

body[data-page-category='marketing'] .manifest-index {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 800;
}

body[data-page-category='marketing'] .manifest-tier {
    border-radius: 999px;
}

body[data-page-category='marketing'] .legal-note {
    color: var(--text-faint);
}

/* ===== Layout helpers ================================================ */

.bp-section {
    padding-block: clamp(96px, 11vw, 160px) 0;
}

.bp-section--tight {
    padding-top: clamp(64px, 8vw, 110px);
}

.bp-h2 {
    margin: 0;
    font-size: clamp(3rem, 6.4vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.bp-h2--md {
    font-size: clamp(2.5rem, 4.8vw, 4.25rem);
    line-height: 0.92;
}

.bp-h3 {
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.bp-lede {
    margin: 0;
    max-width: 560px;
    color: var(--text-soft);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.45;
}

.bp-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 40px;
    margin-bottom: 36px;
}

.bp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== Violet hero =================================================== */

.bp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 110px);
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

.bp-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr));
    gap: 48px 40px;
    align-items: center;
}

.bp-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.bp-display {
    margin: 0;
    color: var(--bp-on-violet);
    font-size: clamp(3.75rem, 9.4vw, 9rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.bp-display--md {
    font-size: clamp(3.25rem, 7.6vw, 7.25rem);
}

/* For a hero heading of more than a few words. */
.bp-display--sm {
    font-size: clamp(3rem, 5.8vw, 5.5rem);
    line-height: 0.92;
    text-wrap: balance;
}

.bp-hero .bp-lede {
    color: var(--bp-on-violet-soft);
}

.bp-hero-note {
    margin: 0;
    color: var(--bp-on-violet-faint);
    font-size: 1rem;
}

.bp-hero-note a {
    color: #ffffff;
    font-weight: 700;
}

body .bp-hero .btn-secondary {
    border-color: #ffffff;
    background: #ffffff;
    color: #12101f;
}

body .bp-hero .btn-secondary:hover {
    border-color: var(--bp-on-violet-soft);
    background: var(--bp-on-violet-soft);
}

body .bp-hero .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

body .bp-hero .btn-primary:hover {
    border-color: #2a2740;
    background: #2a2740;
}

.bp-hero-art {
    position: relative;
    min-height: 380px;
}

/* ===== Stickers ====================================================== */

.bp-sticker {
    position: absolute;
    z-index: 3;
    display: flex;
    width: 176px;
    height: 176px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
    text-align: center;
    text-decoration: none;
    transform: rotate(10deg);
    box-shadow: 0 16px 30px -12px rgb(18 8 90 / 55%);
}

.bp-sticker:hover {
    color: var(--bp-amber-ink);
}

.bp-sticker-small {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.bp-sticker-big {
    font-family: var(--font-display);
    font-size: 2.875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bp-sticker--ink {
    width: 128px;
    height: 128px;
    background: #12101f;
    color: #ffffff;
    transform: rotate(-12deg);
}

.bp-sticker--lilac {
    width: 150px;
    height: 150px;
    background: #d9d2ff;
    color: #12101f;
    transform: rotate(-12deg);
}

/* ===== TV mockup ===================================================== */

.bp-tv {
    position: relative;
    z-index: 1;
    margin: 70px 0 0;
    width: 128%;
    container-type: inline-size;
    transform: rotate(-6deg);
    transform-origin: 0 0;
}

.bp-tv-frame {
    display: grid;
    grid-template-rows: auto auto 1fr;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1.4em solid var(--bp-tv-bezel);
    border-radius: 2em;
    background: var(--bp-tv-screen);
    color: #ffffff;
    font-size: 1.1cqw;
    box-shadow: 0 60px 100px -40px rgb(18 8 90 / 80%);
}

.bp-tv-tabs {
    display: flex;
    gap: 2.4em;
    padding: 1.5em 2.4em;
    border-bottom: 1px solid #23212f;
    color: #b9b6d6;
    font-size: 1.25em;
}

.bp-tv-tabs b {
    color: #ffffff;
}

.bp-tv-tabs .is-on {
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 -0.2em 0 var(--bp-tv-focus);
}

.bp-tv-now {
    display: grid;
    grid-template-columns: 1fr 22em;
    gap: 2em;
    padding: 1.8em 2.4em 1.2em;
}

.bp-tv-now-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.bp-tv-channel {
    color: #b9b6d6;
    font-size: 1.15em;
}

.bp-tv-title {
    font-family: var(--font-display);
    font-size: 3em;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.bp-tv-time {
    color: #d9d5f2;
    font-size: 1.15em;
}

.bp-tv-live {
    margin-right: 0.6em;
    padding: 0.1em 0.5em;
    border-radius: 0.3em;
    background: #e63950;
    color: #ffffff;
    font-weight: 700;
}

.bp-tv-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.6em;
    background: #23573c;
}

.bp-tv-preview span {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 50%);
}

.bp-tv-preview .pitch {
    inset: 12% 6%;
}

.bp-tv-preview .halfway {
    top: 12%;
    bottom: 12%;
    left: 50%;
    width: 0;
    border-width: 0 0 0 1px;
}

.bp-tv-preview .circle {
    top: 50%;
    left: 50%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.bp-tv-guide {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    padding: 0 2.4em 1.8em;
    font-size: 1.15em;
}

.bp-tv-row {
    display: grid;
    grid-template-columns: 15em 1fr;
    gap: 0.45em;
}

.bp-tv-row > span {
    overflow: hidden;
    padding: 0.85em 1em;
    border-radius: 0.5em;
    background: var(--bp-tv-cell);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bp-tv-row .is-channel-focus {
    background: var(--bp-tv-focus);
    color: #12101f;
    font-weight: 700;
}

.bp-tv-row .is-programme-focus {
    background: #2c2560;
    box-shadow: inset 0 0 0 0.2em var(--bp-tv-focus);
    font-weight: 600;
}

.bp-tv-stand {
    width: 15%;
    height: 2.4cqw;
    margin: 0 auto;
    background: linear-gradient(180deg, #1c1b33, #0e0d20);
    clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}

/* ===== Cards and panels ============================================== */

.bp-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.bp-panel {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    background: var(--bp-card);
    color: var(--text);
}

.bp-panel--pad {
    padding: clamp(32px, 5vw, 56px);
}

.bp-panel--ink {
    background: var(--bp-ink-panel);
    color: var(--bp-ink-text);
}

.bp-panel--lilac {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

.bp-panel--violet {
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

.bp-panel--amber {
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

.bp-panel h3 {
    margin: 0;
    font-size: clamp(2.125rem, 3.6vw, 3.375rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.bp-panel p {
    margin: 0;
    font-size: 1.1875rem;
}

.bp-panel--ink p {
    color: var(--bp-ink-soft);
}

.bp-panel--lilac p {
    color: var(--bp-lilac-soft);
}

.bp-panel--violet p {
    color: var(--bp-on-violet-soft);
}

.bp-panel:not(.bp-panel--ink, .bp-panel--lilac, .bp-panel--violet, .bp-panel--amber) p {
    color: var(--text-soft);
}

.bp-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bp-split > * {
    flex: 1 1 420px;
    min-width: 0;
}

.bp-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(32px, 5vw, 64px);
}

.bp-panel-art {
    display: flex;
    justify-content: center;
    padding: 40px clamp(24px, 4vw, 56px);
}

.bp-tilt-left {
    transform: rotate(-3deg);
}

/* Groups vignette (Live TV panel). */
.bp-groups {
    display: flex;
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 22px;
    background: var(--bp-ink-raised);
    color: #ffffff;
}

.bp-groups div {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 12px;
}

.bp-groups .is-focus {
    background: var(--bp-tv-focus);
    color: #12101f;
    font-weight: 700;
}

.bp-groups span + span {
    color: #a9a5c8;
}

.bp-groups .is-focus span + span {
    color: #12101f;
}

.bp-groups .is-hidden-group {
    color: #8682a8;
}

/* Poster fan (Movies and shows panel). */
.bp-posters {
    position: relative;
    height: 300px;
    margin-top: auto;
}

.bp-poster {
    position: absolute;
    bottom: 16px;
    left: 50%;
    display: flex;
    width: 170px;
    aspect-ratio: 2 / 3;
    box-sizing: border-box;
    align-items: flex-end;
    padding: 16px;
    border-radius: 16px;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 0.95;
}

.bp-poster--a {
    margin-left: -230px;
    background: #e8743b;
    color: #2a1206;
    transform: rotate(-10deg);
    transform-origin: 50% 100%;
}

/* Its left edge sits under the front poster, so the title goes right. */
.bp-poster--b {
    justify-content: flex-end;
    margin-left: 60px;
    text-align: right;
    background: #1f7a6b;
    color: #effff9;
    transform: rotate(9deg);
    transform-origin: 50% 100%;
}

.bp-poster--c {
    bottom: 36px;
    width: 190px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
    margin-left: -95px;
    background: #12101f;
    color: #ffffff;
    font-size: 1.625rem;
    box-shadow: 0 30px 50px -24px rgb(18 16 31 / 70%);
}

.bp-poster-progress {
    height: 4px;
    border-radius: 4px;
    background: #3a3654;
}

.bp-poster-progress span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: 4px;
    background: var(--bp-tv-focus);
}

/* Recovery log (Playback panel). */
.bp-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.bp-log li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--bp-chip);
}

.bp-log time {
    width: 76px;
    color: var(--text-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bp-log .dot {
    width: 12px;
    height: 12px;
    margin-left: auto;
    border-radius: 99px;
}

.bp-log .is-done {
    background: var(--bp-violet);
    color: #ffffff;
    font-weight: 700;
}

.bp-log .is-done time {
    color: var(--bp-on-violet-faint);
}

/* Profiles vignette. */
.bp-avatars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.bp-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.bp-avatar span {
    display: flex;
    width: 120px;
    height: 120px;
    align-items: center;
    justify-content: center;
    border-radius: 36px;
    font-family: var(--font-display);
    font-size: 3.375rem;
    font-weight: 800;
}

/* ===== Premium band ================================================== */

.bp-premium {
    margin-top: clamp(96px, 11vw, 160px);
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

.bp-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 48px 64px;
    align-items: center;
    padding-block: clamp(56px, 8vw, 110px);
}

.bp-premium h2 {
    margin: 0;
    color: var(--bp-amber-ink);
    font-size: clamp(3.25rem, 7.2vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.bp-premium p {
    max-width: 520px;
    margin: 0;
    color: var(--bp-amber-soft);
    font-size: 1.3125rem;
}

body .bp-premium .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

body .bp-premium .btn-secondary {
    border-color: #231800;
    color: #231800;
}

body .bp-premium .btn-secondary:hover {
    background: rgb(35 24 0 / 8%);
}

.bp-premium-card {
    position: relative;
}

.bp-premium-list {
    counter-reset: bp-premium;
    margin: 0;
    padding: 34px;
    border-radius: 32px;
    background: #ffffff;
    color: #12101f;
    list-style: none;
    transform: rotate(2deg);
    box-shadow: 0 30px 60px -30px rgb(80 50 0 / 50%);
}

.bp-premium-list li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #ece9f4;
    font-size: 1.1875rem;
    font-weight: 500;
}

.bp-premium-list li:last-child {
    border-bottom: 0;
}

.bp-premium-list li {
    counter-increment: bp-premium;
}

/* The items are flex rows, which do not bump the built-in list-item counter. */
.bp-premium-list li::before {
    content: counter(bp-premium, decimal-leading-zero);
    color: #5b3cf0;
    font-weight: 800;
}

.bp-premium-card .bp-sticker--ink {
    top: -46px;
    right: -10px;
}

/* ===== Steps ========================================================= */

.bp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-steps li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 34px;
    border-radius: 32px;
    background: var(--bp-card);
}

.bp-step-num {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.8;
}

.bp-steps h3 {
    margin: 12px 0 0;
    font-size: 1.875rem;
    letter-spacing: -0.03em;
}

.bp-steps p {
    margin: 0;
    color: var(--text-soft);
}

/* ===== Link list ===================================================== */

.bp-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    border-radius: 20px;
    background: var(--bp-card);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.bp-link:hover {
    color: var(--text);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.bp-link small {
    color: var(--text-faint);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
}

.bp-link svg {
    flex: none;
    color: var(--accent);
}

/* ===== Closing call to action ======================================== */

.bp-cta {
    margin-top: clamp(96px, 11vw, 160px);
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

.bp-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-block: clamp(56px, 8vw, 110px);
}

.bp-cta h2 {
    margin: 0;
    color: var(--bp-on-violet);
    font-size: clamp(3.25rem, 8vw, 7.5rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
}

.bp-cta p {
    margin: 16px 0 0;
    color: var(--bp-on-violet-soft);
    font-size: 1.3125rem;
}

.bp-cta .bp-steps li {
    color: var(--text);
}

.bp-cta .bp-steps p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
}

body .bp-cta .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

.bp-legal {
    padding-block: 40px 64px;
}

/* ===== Pricing ======================================================= */

.bp-pricing-hero {
    padding-bottom: 220px;
}

.bp-term {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--bp-violet-deep);
}

.bp-term .pricing-term-option {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
}

.bp-term .pricing-term-option.is-selected {
    background: #ffffff;
    color: #12101f;
    font-weight: 700;
}

.bp-plan--premium .bp-term {
    background: rgb(35 24 0 / 12%);
}

.bp-plan--premium .bp-term .pricing-term-option {
    color: #231800;
}

.bp-plan--premium .bp-term .pricing-term-option.is-selected {
    background: #12101f;
    color: #ffffff;
}

.bp-plan--premium .bp-term .pricing-term-option:focus-visible {
    outline: 3px solid #12101f;
    outline-offset: 2px;
}

.bp-plans {
    position: relative;
    z-index: 2;
    margin-top: -170px;
}

.bp-plans-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}

.bp-plan {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 340px;
    flex-direction: column;
    gap: 20px;
    padding: 34px;
    border-radius: 32px;
    background: var(--bp-card);
    color: var(--text);
    box-shadow: 0 30px 60px -40px rgb(18 8 90 / 45%);
}

.bp-plan--premium {
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

.bp-plan h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.875rem;
    letter-spacing: -0.03em;
}

.bp-plan-tag {
    padding: 3px 10px;
    border-radius: 99px;
    background: #dcdee8;
    color: #1c1e2a;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
}

.bp-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}

.bp-plan-price span {
    font-family: var(--font-display);
    font-size: 5.25rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.85;
}

.bp-plan-price small {
    color: var(--text-soft);
    font-size: 1rem;
    font-weight: 600;
}

.bp-plan--premium .bp-plan-price small,
.bp-plan--premium .bp-plan-blurb,
.bp-plan--premium .bp-plan-note,
.bp-plan--premium .bp-plan-equivalent {
    color: var(--bp-amber-soft);
}

.bp-plan-blurb {
    margin: 0;
    color: var(--text-soft);
}

.bp-plan-equivalent {
    margin: -8px 0 0;
    font-weight: 700;
}

.bp-plan .btn {
    width: 100%;
}

body .bp-plan--premium .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

.bp-plan-features {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-plan-features li {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.bp-plan--premium .bp-plan-features li {
    border-top-color: rgb(35 24 0 / 20%);
}

.bp-plan-features .is-lead {
    color: var(--text-faint);
}

.bp-plan--premium .bp-plan-features .is-lead {
    color: var(--bp-amber-soft);
}

.bp-plan-note {
    margin: 0;
    color: var(--text-faint);
    font-size: 0.9375rem;
}

.bp-plan .bp-sticker--ink {
    top: -28px;
    right: 22px;
    width: 104px;
    height: 104px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.15;
}

.bp-layers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 20px;
}

.bp-layer {
    padding: 32px;
    border-radius: 32px;
    background: var(--bp-card);
}

.bp-layer--premium {
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

.bp-layer-num {
    margin: 0 0 6px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.85;
}

.bp-layer--premium .bp-layer-num {
    color: #12101f;
}

.bp-layer h3 {
    margin: 0 0 12px;
    font-size: 1.75rem;
}

.bp-layer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-layer li {
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.bp-layer--premium li {
    border-top-color: rgb(35 24 0 / 20%);
}

.bp-trial {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 40px;
}

.bp-trial h2 {
    margin: 0;
    color: var(--bp-on-violet);
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.bp-trial p {
    margin: 14px 0 0;
}

body .bp-trial .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

body .bp-trial .btn-secondary {
    border-color: #ffffff;
    background: #ffffff;
    color: #12101f;
}

/* ===== Download ====================================================== */

.bp-dl-screen {
    position: relative;
    container-type: inline-size;
    transform: rotate(4deg);
}

.bp-dl-tv {
    display: flex;
    aspect-ratio: 16 / 10;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    gap: 4cqw;
    padding: 0 8cqw;
    border: 2cqw solid var(--bp-tv-bezel);
    border-radius: 3cqw;
    background: var(--bp-tv-screen);
    color: #ffffff;
    box-shadow: 0 50px 90px -30px rgb(18 8 90 / 75%);
}

.bp-dl-label {
    color: #b9b6d6;
    font-size: max(13px, 3cqw);
}

.bp-dl-code {
    display: block;
    padding: 3.2cqw 4cqw;
    border-radius: 2cqw;
    background: #ffffff;
    color: #12101f;
    font-family: var(--font-display);
    font-size: max(22px, 7.4cqw);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset 0 0 0 0.8cqw var(--bp-tv-focus);
}

.bp-dl-tv .btn {
    align-self: flex-start;
}

.bp-dl-screen .bp-sticker--lilac {
    top: -30px;
    left: -10px;
}

.bp-facts {
    position: relative;
    margin-top: -50px;
}

.bp-facts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bp-fact {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 2px;
    padding: 26px 28px;
    border-radius: 26px;
    background: var(--bp-card);
    box-shadow: 0 24px 50px -34px rgb(18 8 90 / 45%);
}

.bp-fact strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bp-fact span {
    color: var(--text-soft);
}

.bp-install {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Six or five cards read best three to a row, not four then two. */
.bp-install--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.bp-install > article,
.bp-install > li {
    display: flex;
    min-height: 260px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border-radius: 32px;
    background: var(--bp-card);
}

.bp-install h3 {
    margin: 12px 0 0;
    line-height: 1.05;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

.bp-install p {
    margin: 0;
    color: var(--text-soft);
}

.bp-install code,
.bp-hero code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 700;
}

.bp-devices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}

.bp-device {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: 24px;
    background: var(--bp-card);
}

.bp-device strong {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bp-device span {
    color: var(--text-soft);
}

.bp-releases .setup-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.bp-releases .setup-row {
    display: flex;
    gap: 18px;
    padding: 24px 26px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
}

.bp-releases .row-number,
.bp-releases .setup-num {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 800;
}

.bp-releases .changelog-entry {
    margin-bottom: 16px;
    padding: 28px;
    border-radius: 28px;
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

/* ===== Help ========================================================== */

.bp-search {
    display: flex;
    max-width: 860px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 30px 60px -30px rgb(18 8 90 / 70%);
}

.bp-search svg {
    flex: none;
    margin-left: 18px;
    color: #5b3cf0;
}

.bp-search input {
    min-width: 0;
    min-height: 56px;
    flex: 1 1 240px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #12101f;
    font: inherit;
    font-size: 1.25rem;
}

.bp-search input::placeholder {
    color: #66627f;
}

.bp-search .btn {
    min-height: 56px;
}

.bp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bp-chips a {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--bp-violet-deep);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.bp-chip-pill {
    display: inline-flex;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
    font-weight: 700;
}

.bp-chips a:hover {
    background: #3a20b8;
    color: #ffffff;
}

.bp-kb .help-grid {
    display: grid;
    border: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 14px;
}

.bp-kb .help-card-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 26px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
    color: var(--text);
    text-decoration: none;
}

.bp-kb .help-card-link:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.bp-kb .help-card-cat {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.bp-kb .help-card-title {
    font-family: var(--font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bp-kb .help-card-excerpt {
    margin: 0;
    color: var(--text-soft);
}

.bp-kb .help-article {
    padding: clamp(28px, 4vw, 48px);
    border-radius: 32px;
    background: var(--bp-card);
}

.bp-kb .help-article h2 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 0.95;
}

.bp-kb .help-article-body {
    white-space: pre-line;
}

.bp-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 12px;
}

.bp-chapters .manifest-row {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 2px 14px;
    align-items: start;
    padding: 22px 24px;
    border-radius: 24px;
    background: var(--bp-card);
    color: var(--text);
    text-decoration: none;
}

.bp-chapters .manifest-row:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.bp-chapters .manifest-index {
    grid-row: span 3;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 0.9;
}

.bp-chapters .manifest-row h3 {
    margin: 0;
    font-size: 1.3125rem;
    letter-spacing: -0.02em;
}

.bp-chapters .manifest-row p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
}

.bp-chapters .manifest-tier {
    justify-self: start;
    margin-top: 6px;
    padding: 2px 10px;
    border: 0;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ===== Shared by the rest of the marketing pages ===================== */

/* A line above a hero heading that carries a tag, such as "Beta". */
.bp-hero-tag {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--bp-on-violet);
    font-size: 1.0625rem;
    font-weight: 700;
}

body .bp-hero .beta-tag,
body .bp-cta .beta-tag {
    padding: 6px 10px;
    border-color: transparent;
    background: #ffffff;
    color: #5b3cf0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}

.bp-cta .bp-hero-tag {
    margin: 0 0 18px;
}

/* A sticker on the lower right corner of a hero TV (setup, support). */
.bp-sticker--corner {
    right: -10px;
    bottom: -40px;
}

/* Decoration for a hero with no artwork column (FAQ, changelog). */
.bp-hero > .wrap-wide {
    position: relative;
    z-index: 1;
}

.bp-hero-glyph {
    position: absolute;
    top: 50%;
    right: max(4vw, calc((100vw - 1320px) / 2));
    z-index: 0;
    color: #d9d2ff;
    font-family: var(--font-display);
    font-size: clamp(16rem, 30vw, 30rem);
    font-weight: 800;
    line-height: 0.8;
    pointer-events: none;
    transform: translateY(-50%) rotate(12deg);
    user-select: none;
}

.bp-hero-sticker {
    top: 50%;
    right: max(6vw, calc((100vw - 1240px) / 2));
    width: 200px;
    height: 200px;
    margin-top: -100px;
}

.bp-hero-sticker .bp-sticker-small {
    font-size: 1.125rem;
}

@media (max-width: 900px) {
    .bp-hero-glyph,
    .bp-hero-sticker {
        display: none;
    }
}

/* A page that ends on the violet band runs it straight into the footer. */
body[data-page-category='marketing'] main:has(> .bp-cta:last-child) ~ footer {
    margin-top: 0;
}

.bp-cta .inline-link,
.bp-panel--violet .inline-link,
.bp-statement .inline-link {
    color: #ffffff;
    text-decoration-color: currentColor;
}

/* A white card tilted on the violet hero: label and value rows, or numbered
   steps. Stays white in dark mode because it always sits on violet. */
.bp-model {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 30px 32px;
    border-radius: 32px;
    background: #ffffff;
    color: #12101f;
    transform: rotate(3deg);
    box-shadow: 0 50px 90px -40px rgb(18 8 90 / 75%);
}

.bp-model-head {
    margin: 0 0 6px;
    color: #5b3cf0;
    font-weight: 700;
}

.bp-model dl {
    margin: 0;
}

.bp-model dl > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 18px 0;
    border-bottom: 1px solid #ece9f4;
}

.bp-model dl > div:last-child,
.bp-model-steps li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bp-model dt {
    color: #4a4762;
    font-weight: 600;
}

.bp-model dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: right;
}

.bp-model-steps {
    counter-reset: bp-model;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-model-steps li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 18px 0;
    border-bottom: 1px solid #ece9f4;
    counter-increment: bp-model;
}

.bp-model-steps li::before {
    grid-row: span 2;
    color: #5b3cf0;
    content: counter(bp-model, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bp-model-steps strong {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bp-model-steps span {
    color: #4a4762;
}

/* Feature and option cards: a number, a title, a line and a plan pill. */
.bp-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: 14px;
}

.bp-features--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.bp-features--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.bp-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: 28px;
    background: var(--bp-card);
}

.bp-feature-num {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.9;
}

.bp-feature h3 {
    margin: 6px 0 0;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.bp-feature p {
    margin: 0;
    color: var(--text-soft);
}

.bp-tier {
    align-self: flex-start;
    margin-top: auto;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
}

.bp-tier--free {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

/* Essentials is silver on the pricing page too (.bp-plan-tag). */
.bp-tier--essentials {
    background: #dcdee8;
    color: #1c1e2a;
}

.bp-tier--premium {
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

/* Ink panel: a heading beside a list of large rows. */
.bp-proto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 32px 56px;
    align-items: center;
}

.bp-proto-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-proto-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.bp-proto-list li:last-child {
    border-bottom: 0;
}

.bp-proto-list strong {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.bp-proto-list span {
    flex: none;
    color: var(--bp-tv-focus);
    font-weight: 700;
}

.bp-proto-list--checks li {
    align-items: center;
    justify-content: flex-start;
}

/* A drawn tick: no image, so nothing for the CSP to refuse. */
.bp-proto-list--checks li::before {
    flex: none;
    width: 10px;
    height: 20px;
    margin: 0 10px 6px 6px;
    border: solid var(--bp-tv-focus);
    border-width: 0 4px 4px 0;
    content: '';
    transform: rotate(45deg);
}

/* Big ink statement band. */
.bp-statement {
    padding: clamp(40px, 7vw, 96px) clamp(28px, 6vw, 80px);
    border-radius: 40px;
    background: var(--bp-ink-panel);
    color: var(--bp-ink-text);
}

.bp-statement blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 6.4vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.92;
    text-wrap: balance;
}

.bp-statement blockquote span {
    color: var(--bp-tv-focus);
}

.bp-statement p {
    max-width: 720px;
    margin: 28px 0 0;
    color: var(--bp-ink-soft);
    font-size: 1.1875rem;
}

/* Step cards that stand out: the optional last step, the first route. */
.bp-install > .is-optional {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

.bp-install > .is-optional p {
    color: var(--bp-lilac-soft);
}

.bp-routes > * > .btn {
    align-self: flex-start;
    margin-top: auto;
}

.bp-routes > .is-primary {
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

.bp-routes > .is-primary .bp-step-num {
    color: var(--bp-on-violet);
}

.bp-routes > .is-primary p {
    color: var(--bp-on-violet-soft);
}

/* Lilac closing panel with buttons beside the copy. */
.bp-more-help {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

/* ===== Questions (FAQ, setup, partners, playlist editor) ============== */

.bp-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px 64px;
    align-items: start;
}

.bp-faq-layout > :first-child {
    position: sticky;
    top: 120px;
}

.bp-faq-layout [id] {
    scroll-margin-top: 120px;
}

.bp-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
}

.bp-faq details {
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
}

body .bp-faq summary {
    position: relative;
    display: block;
    padding: 24px 76px 24px 28px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    list-style: none;
    cursor: pointer;
}

.bp-faq summary::-webkit-details-marker {
    display: none;
}

.bp-faq summary::marker {
    content: '';
}

body .bp-faq summary::after {
    position: absolute;
    top: 50%;
    right: 22px;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    content: '+';
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

body .bp-faq details[open] summary::after {
    background: var(--accent);
    color: var(--accent-ink);
    content: '−';
}

.bp-faq summary:hover::after {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.bp-faq summary:focus-visible {
    border-radius: 24px;
    outline: none;
    box-shadow: var(--focus-ring);
}

body .bp-faq .faq-answer,
body .bp-faq details > p {
    max-width: none;
    margin: 0;
    padding: 0 28px 14px;
    color: var(--text-soft);
    font-size: 1.0625rem;
    line-height: 1.6;
}

body .bp-faq .faq-answer,
body .bp-faq details > p:last-child {
    padding-bottom: 26px;
}

.bp-faq .faq-answer p {
    margin: 0;
}

/* ===== Features ====================================================== */

/* Sticker pile in the hero. */
.bp-collage {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 14px 12px;
    padding: 20px 0;
}

.bp-collage-item {
    display: inline-flex;
    padding: 16px 26px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(var(--r, 0deg));
    box-shadow: 0 18px 30px -18px rgb(18 8 90 / 60%);
}

.bp-collage-item--white {
    background: #ffffff;
    color: #12101f;
}

.bp-collage-item--lilac {
    background: #d9d2ff;
    color: #12101f;
}

.bp-collage-item--ink {
    background: #12101f;
    color: #ffffff;
}

.bp-collage-item--silver {
    background: #dcdee8;
    color: #1c1e2a;
}

.bp-collage-item--amber {
    background: #f4b740;
    color: #231800;
}

/* Product tour. js/site.js toggles .is-active, aria-selected and hidden. */
.bp-tour {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.bp-tour-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-tour-tab {
    display: grid;
    width: 100%;
    flex: 1 1 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: 4px 14px;
    padding: 20px 22px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.bp-tour-tab:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.bp-tour-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bp-tour-num {
    grid-row: span 2;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bp-tour-tab strong {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.bp-tour-tab strong + span {
    color: var(--text-soft);
    font-size: 0.9375rem;
}

.bp-tour-tab.is-active {
    background: var(--bp-ink-panel);
    color: var(--bp-ink-text);
}

.bp-tour-tab.is-active:hover {
    box-shadow: none;
}

.bp-tour-tab.is-active .bp-tour-num {
    color: var(--bp-tv-focus);
}

.bp-tour-tab.is-active strong + span {
    color: var(--bp-ink-soft);
}

/* In dark mode the ink tab sits too close to the dark cards, so invert it. */
html[data-theme='dark'] .bp-tour-tab.is-active {
    background: #f3f2fa;
    color: #12101f;
}

html[data-theme='dark'] .bp-tour-tab.is-active .bp-tour-num {
    color: #5b3cf0;
}

html[data-theme='dark'] .bp-tour-tab.is-active strong + span {
    color: #4a4762;
}

.bp-tour-stage {
    display: grid;
    min-width: 0;
}

.bp-tour-panel {
    display: grid;
    min-height: 460px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
    overflow: hidden;
    padding: clamp(32px, 4.5vw, 56px);
    border-radius: 36px;
    background: var(--bp-card);
    color: var(--text);
}

/* The grid display above must not undo the hidden attribute. */
.bp-tour-panel[hidden] {
    display: none;
}

.bp-tour-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bp-tour-panel h3 {
    margin: 0;
    color: inherit;
    font-size: clamp(2.125rem, 3.4vw, 3.25rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
}

.bp-tour-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.1875rem;
}

.bp-tour-panel--violet {
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

.bp-tour-panel--violet .bp-tour-copy p {
    color: var(--bp-on-violet-soft);
}

.bp-tour-panel--lilac {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

.bp-tour-panel--lilac .bp-tour-copy p {
    color: var(--bp-lilac-soft);
}

.bp-tour-panel--ink {
    background: var(--bp-ink-panel);
    color: var(--bp-ink-text);
}

.bp-tour-panel--ink .bp-tour-copy p {
    color: var(--bp-ink-soft);
}

.bp-tour-art {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.bp-tour-art--posters {
    align-self: stretch;
    align-items: flex-end;
}

/* The fan is 460px across; scaled to fit half of the panel. */
.bp-tour-art--posters .bp-posters {
    width: 100%;
    height: 340px;
    margin: 0;
    transform: scale(0.76);
    transform-origin: 50% 100%;
}

/* Mini schedule (Live guide panel). */
.bp-sched {
    display: flex;
    width: 100%;
    max-width: 440px;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 22px;
    background: var(--bp-tv-screen);
    color: #ffffff;
    transform: rotate(-3deg);
    box-shadow: 0 40px 70px -30px rgb(18 8 90 / 75%);
}

.bp-sched-times {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    padding: 0 4px 4px;
    color: #8f8bb0;
    font-size: 0.8125rem;
    font-weight: 700;
}

.bp-sched-row {
    display: flex;
    gap: 6px;
}

.bp-sched-ch {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bp-tv-cell);
    color: #b9b6d6;
    font-size: 0.875rem;
    font-weight: 700;
}

.bp-sched-prog {
    min-width: 0;
    flex: var(--w, 1) 1 0;
    overflow: hidden;
    padding: 14px 12px;
    border-radius: 10px;
    background: var(--bp-tv-cell);
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-sched-prog.is-past {
    color: #8f8bb0;
}

.bp-sched-row.is-focus .bp-sched-ch {
    background: #2a2740;
    color: #ffffff;
}

.bp-sched-prog.is-now {
    background: var(--bp-tv-focus);
    color: #12101f;
    font-weight: 800;
}

/* Player controls (Playback panel). */
.bp-osd {
    display: flex;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 10px;
    padding: 120px 24px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #3a2fa0 0%, #1b1640 55%, #0b0a14 100%);
    color: #ffffff;
    transform: rotate(3deg);
    box-shadow: 0 40px 70px -30px rgb(0 0 0 / 70%);
}

.bp-osd-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.bp-osd-meta {
    color: #b9b6d6;
    font-size: 0.9375rem;
}

.bp-osd-bar {
    height: 6px;
    border-radius: 6px;
    background: #3a3654;
}

.bp-osd-bar span {
    display: block;
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: var(--bp-tv-focus);
}

.bp-osd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.bp-osd-chips span {
    padding: 8px 12px;
    border-radius: 99px;
    background: rgb(255 255 255 / 12%);
    font-size: 0.8125rem;
    font-weight: 700;
}

.bp-osd-chips .is-focus {
    background: #ffffff;
    color: #12101f;
}

/* ===== Setup and support TV screens ================================== */

.bp-choice {
    gap: 2.2cqw;
}

.bp-choice-opt {
    display: flex;
    flex-direction: column;
    gap: 0.6cqw;
    padding: 2.4cqw 3.2cqw;
    border-radius: 1.8cqw;
    background: var(--bp-tv-cell);
}

.bp-choice-opt strong {
    font-family: var(--font-display);
    font-size: max(15px, 4.2cqw);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.bp-choice-opt small {
    color: #b9b6d6;
    font-size: max(11px, 2.4cqw);
}

.bp-choice-opt.is-focus {
    background: #ffffff;
    color: #12101f;
    box-shadow: inset 0 0 0 0.6cqw var(--bp-tv-focus);
}

.bp-choice-opt.is-focus small {
    color: #4a4762;
}

/* The TV spaces the support code out so it can be read aloud. */
.bp-dl-code--spaced {
    font-size: max(20px, 6.4cqw);
    letter-spacing: 0.16em;
}

.bp-kb-results:not(:empty) {
    margin-top: 20px;
}

.bp-kb .help-empty {
    margin: 20px 0 0;
    padding: 22px 26px;
    border-radius: 22px;
    background: var(--bp-card);
    color: var(--text-soft);
}

/* ===== Changelog ===================================================== */

.bp-changelog {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bp-changelog-note {
    margin: 0;
    color: var(--text-faint);
}

body .bp-changelog .changelog-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

/* Rows come from the build (changelog-static.js) and from js/changelog.js:
   meta, an optional title, then the body. */
body .bp-changelog .changelog-entry {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 12px 40px;
    padding: clamp(24px, 3.4vw, 40px);
    border: 0;
    border-radius: 32px;
    background: var(--bp-card);
}

body .bp-changelog .changelog-entry > .changelog-meta {
    display: flex;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
}

body .bp-changelog .changelog-version {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
}

body .bp-changelog .changelog-date {
    color: var(--text-soft);
    font-size: 0.9375rem;
    font-weight: 600;
}

body .bp-changelog .changelog-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

body .bp-changelog .changelog-body {
    color: var(--text-soft);
    font-size: 1.0625rem;
}

body .bp-changelog .changelog-body p {
    margin: 0 0 12px;
}

body .bp-changelog .changelog-body > :last-child {
    margin-bottom: 0;
}

body .bp-changelog .changelog-bullets {
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}

body .bp-changelog .changelog-bullets li {
    position: relative;
    padding-left: 22px;
    list-style: none;
}

body .bp-changelog .changelog-bullets li::before {
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    content: '';
}

/* The newest release, but only a real one (not a loading or error row). */
body .bp-changelog .changelog-entry:first-child:has(.changelog-version) {
    background: var(--bp-violet);
    color: var(--bp-on-violet);
}

body .bp-changelog .changelog-entry:first-child:has(.changelog-version) .changelog-meta::before {
    padding: 5px 12px;
    border-radius: 99px;
    background: #ffffff;
    color: #5b3cf0;
    content: 'Latest';
    font-size: 0.8125rem;
    font-weight: 800;
}

body .bp-changelog .changelog-entry:first-child:has(.changelog-version) :is(.changelog-version, .changelog-title) {
    color: #ffffff;
}

body .bp-changelog .changelog-entry:first-child:has(.changelog-version) :is(.changelog-date, .changelog-body, .changelog-body p) {
    color: var(--bp-on-violet-soft);
}

body .bp-changelog .changelog-entry:first-child:has(.changelog-version) .changelog-bullets li::before {
    background: #ffffff;
}

/* ===== Partner programme ============================================= */

.bp-beta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 28px 48px;
}

.bp-beta-mark {
    display: flex;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #12101f;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    transform: rotate(-10deg);
}

.bp-beta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-beta-list li {
    padding: 16px 20px;
    border-radius: 18px;
    background: rgb(255 255 255 / 55%);
    color: var(--bp-lilac-soft);
    font-size: 1.0625rem;
}

html[data-theme='dark'] .bp-beta-list li {
    background: rgb(255 255 255 / 6%);
}

.bp-beta-list strong {
    color: var(--bp-lilac-ink);
}

/* ===== Playlist editor =============================================== */

/* The workspace keeps its own markup and stylesheet (playlist-editor.css,
   which js/playlist-editor.js depends on); this only brings its frame into
   the brand-poster look. Border colours are left to that file, because they
   carry the dragging and loaded states. */
body[data-page='playlist-editor'] .checker-workspace {
    padding-top: clamp(64px, 8vw, 110px);
}

body[data-page='playlist-editor'] .checker-workspace-heading h2 {
    font-size: clamp(2.5rem, 4.8vw, 4.25rem);
    letter-spacing: -0.045em;
    line-height: 0.92;
}

body[data-page='playlist-editor'] .checker-privacy {
    border: 0;
    border-radius: 24px;
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

body[data-page='playlist-editor'] .checker-privacy p {
    color: var(--bp-lilac-soft);
}

body[data-page='playlist-editor'] .checker-privacy strong {
    color: var(--bp-lilac-ink);
}

body[data-page='playlist-editor'] .checker-drop {
    padding: 28px;
    border-width: 2px;
    border-radius: 28px;
    background: var(--bp-card);
}

body[data-page='playlist-editor'] .checker-drop h3 {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

body[data-page='playlist-editor'] .checker-drop-kicker {
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body[data-page='playlist-editor'] .checker-xtream {
    border-width: 2px;
    border-radius: 28px;
    background: var(--bp-card);
}

body[data-page='playlist-editor'] :is(.checker-exports, .checker-cta) {
    padding: clamp(24px, 3.4vw, 36px);
    border: 0;
    border-radius: 28px;
}

body[data-page='playlist-editor'] .checker-exports {
    background: var(--bp-card);
}

body[data-page='playlist-editor'] .checker-cta {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

body[data-page='playlist-editor'] .checker-cta p {
    color: var(--bp-lilac-soft);
}

/* ===== The pages above on smaller screens ============================ */

@media (max-width: 1024px) {
    .bp-tour {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-tour-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-tour-panel {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-faq-layout > :first-child {
        position: static;
    }
}

@media (max-width: 700px) {
    .bp-beta {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-beta-mark {
        width: 110px;
        height: 110px;
        font-size: 1.875rem;
    }

    body .bp-changelog .changelog-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bp-changelog .changelog-entry > * {
        grid-row: auto;
        grid-column: 1;
    }

    body .bp-changelog .changelog-entry > .changelog-meta {
        flex-flow: row wrap;
        align-items: baseline;
        gap: 6px 14px;
    }
}

@media (max-width: 600px) {
    .bp-tour-tab strong + span {
        display: none;
    }

    .bp-sticker--corner {
        right: -6px;
        bottom: -70px;
        width: 112px;
        height: 112px;
    }

    /* The pill would wrap into a lopsided shape: stack it instead. */
    .bp-search {
        border-radius: 26px;
    }

    .bp-search svg {
        display: none;
    }

    .bp-search input {
        flex-basis: 100%;
        padding-inline: 14px;
    }

    .bp-search .btn {
        flex: 1 1 100%;
    }

    .bp-collage-item {
        padding: 12px 18px;
    }

    .bp-model {
        padding: 24px;
        transform: rotate(1.5deg);
    }

    .bp-model dl > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 14px 0;
    }

    .bp-model dd {
        text-align: left;
    }

    .bp-tour-art--posters .bp-posters {
        height: 300px;
        transform: scale(0.62);
    }

    body .bp-faq summary {
        padding: 20px 64px 20px 22px;
        font-size: 1.1875rem;
    }

    body .bp-faq summary::after {
        right: 16px;
    }

    body .bp-faq .faq-answer,
    body .bp-faq details > p {
        padding-inline: 22px;
    }
}

/* ===== Small screens ================================================= */

@media (max-width: 1024px) {
    .bp-tv {
        width: 100%;
        margin-top: 40px;
        transform: rotate(-3deg);
    }
}

@media (max-width: 600px) {
    .bp-hero-art {
        min-height: 0;
    }

    .bp-sticker {
        width: 132px;
        height: 132px;
    }

    .bp-sticker-big {
        font-size: 2.125rem;
    }

    .bp-posters {
        transform: scale(0.8);
        transform-origin: 50% 100%;
    }

    .bp-premium-list {
        transform: none;
    }

    .bp-pricing-hero {
        padding-bottom: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-link,
    .bp-chips a {
        transition: none;
    }
}

/* Both Android interfaces keep their own download and always-visible HTTPS address. */
body[data-page='download'] .bp-app-downloads { display: grid; gap: 20px; min-width: 0; scroll-margin-top: 110px; }
body[data-page='download'] .bp-app-download { gap: 14px; min-width: 0; }
body[data-page='download'] .bp-app-download h2 { font: 600 clamp(27px, 3vw, 38px)/1.15 var(--font-display); margin: 0; }
body[data-page='download'] .bp-app-id { font: 500 14px var(--font-sans); opacity: .75; white-space: nowrap; }
body[data-page='download'] .bp-download-code { gap: 6px; }
body[data-page='download'] .bp-download-code strong { font-size: 28px; overflow-wrap: anywhere; }
body[data-page='download'] .bp-download-code.no-code strong { font-size: 17px; }
body[data-page='download'] .bp-download-address { font-size: 15px; overflow-wrap: anywhere; }
body[data-page='download'] .bp-download-address a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

body[data-page='download'] .bp-hero-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    align-items: start;
}
body[data-page='download'] .bp-display { font-size: clamp(48px, 5.8vw, 80px); }
body[data-page='download'] .bp-app-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page='download'] .bp-app-download { padding: 28px; }
body[data-page='download'] .bp-app-download h2 { font-size: 28px; }
body[data-page='download'] .bp-app-download > p { font-size: 16px; }
@media (max-width: 1000px) {
    body[data-page='download'] .bp-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    body[data-page='download'] .bp-app-downloads { grid-template-columns: minmax(0, 1fr); }
}