/*
Theme Name:        Betachip
Theme URI:         https://github.com/ZenithAgency
Author:            ZenithAgency
Description:       The Betachip website: landing page, contact page and an optional 18+ gate, built from the Claude Design direction in claude_assets/. Classic PHP templates, no page builder, no plugins required.
Version:           0.1.0
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       betachip
*/

/* =================================================================
   Contents
   1. Fonts and tokens        7. Toy + censoring
   2. Base                    8. Widgets
   3. Shared pieces           9. Inside the app
   4. Header and menu        10. FAQ, CTA
   5. Hero                   11. Footer
   6. Censor styles,         12. Contact
      Partner control        13. Pages, 404, age gate, motion

   Breakpoints: phone < 760px (design 4a/4b, drawn at 390), tablet
   760–1179px, desktop ≥ 1180px (design 2a/3a, drawn at 1440). Sizes
   that scale between the two drawings use clamp() with the drawn values
   at 390 and 1440 as its ends.
   ================================================================= */


/* 1. Fonts and tokens ============================================ */

/*
 * Self-hosted (assets/fonts, SIL OFL — licences alongside). Both are
 * variable fonts, so one file per script covers every weight in use.
 */
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/quicksand-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/quicksand-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Colour — straight from the design. */
    --bc-bg: #0B0817;
    --bc-ink: #fff;
    --bc-muted: #B9B0D6;
    --bc-faint: rgba(255, 255, 255, .4);
    --bc-pink: #FF8FB3;
    --bc-violet: #6D3AE8;
    --bc-magenta: #C43FA0;
    --bc-blue: #2E6BFF;
    --bc-green: #3DDC84;
    --bc-glass: rgba(255, 255, 255, .05);
    --bc-ring: rgba(255, 255, 255, .1);
    --bc-line: rgba(255, 255, 255, .08);
    --bc-brand: linear-gradient(135deg, #C43FA0, #6D3AE8);

    /* Type. */
    --bc-font: "Quicksand", "SF Pro Rounded", system-ui, -apple-system, sans-serif;
    --bc-display: "Instrument Sans", system-ui, -apple-system, sans-serif;

    /* Layout: 20px gutters at 390 → 96px at 1440; the design's 1248 column. */
    --bc-gutter: clamp(20px, 7.238vw - 8.23px, 96px);
    --bc-header-pad: clamp(20px, 4.19vw + 3.66px, 64px);
    --bc-header-h: 88px;
    --bc-section-y: clamp(72px, 6.476vw + 46.7px, 140px);
    --bc-max: 1248px;
    --bc-measure: 720px;
}

@media (max-width: 759px) {
    :root {
        --bc-header-h: 64px;
    }
}


/* 2. Base ======================================================== */

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

html {
    background: var(--bc-bg);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* The page must not scroll behind the gate or the open menu. */
html.bc-gated,
html.bc-menu-is-open {
    overflow: hidden;
}

body {
    position: relative; /* anchors the absolutely placed header below the admin bar */
    margin: 0;
    background: var(--bc-bg);
    color: var(--bc-ink);
    font: 500 16px/1.5 var(--bc-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bc-main {
    overflow-x: clip;
}

img,
svg {
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--bc-violet);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--bc-pink);
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bc-skip {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--bc-bg);
    font-weight: 700;
    text-decoration: none;
}

.bc-skip:focus {
    top: 16px;
}

@media (max-width: 759px) {
    .bc-hide-sm {
        display: none !important;
    }
}


/* 3. Shared pieces =============================================== */

.bc-section {
    position: relative;
    padding: var(--bc-section-y) var(--bc-gutter);
    overflow: hidden;
}

.bc-wrap {
    position: relative;
    max-width: var(--bc-max);
    margin-inline: auto;
}

/*
 * Glows. The design paints them as blurred ellipses (filter: blur(140px));
 * a radial gradient gives the same soft light for a fraction of the
 * rendering cost, which matters on phones scrolling past eight of them.
 * Each one sets --g (an r,g,b triple) and --a (its strength).
 */
.bc-glow {
    --g: 109, 58, 232;
    --a: .35;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--g), var(--a)), rgba(var(--g), 0));
}

.bc-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bc-head--center {
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.bc-eyebrow {
    margin: 0;
    color: var(--bc-pink);
    font: 700 13px/1 var(--bc-font);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bc-h2 {
    margin: 0;
    font: 600 clamp(38px, 2.476vw + 28.3px, 64px)/1 var(--bc-display);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.bc-lede {
    max-width: 640px;
    margin: 0;
    color: var(--bc-muted);
    font: 500 clamp(16px, .286vw + 14.9px, 19px)/1.55 var(--bc-font);
    text-wrap: pretty;
}

@media (max-width: 759px) {
    .bc-head {
        gap: 18px;
    }

    .bc-head--center {
        align-items: flex-start;
        text-align: left;
    }

    .bc-eyebrow {
        font-size: 12px;
    }

    .bc-h2 {
        line-height: 1.02;
        letter-spacing: -.035em;
    }
}

/* Buttons and pills. */
.bc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font: 700 16px/1 var(--bc-font);
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}

.bc-btn:active {
    transform: scale(.98);
}

.bc-btn--light {
    background: #fff;
    color: var(--bc-bg);
}

.bc-btn--light:hover {
    background: #EFEAFB;
}

.bc-btn--glass {
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    color: #fff;
}

.bc-btn--glass:hover {
    background: rgba(255, 255, 255, .09);
}

.bc-btn:disabled,
.bc-btn.is-busy {
    opacity: .6;
    cursor: default;
}

.bc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font: 700 14px/1 var(--bc-font);
    text-decoration: none;
    white-space: nowrap;
}

.bc-pill--glass {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: background-color .15s ease;
}

.bc-pill--glass:hover {
    background: rgba(255, 255, 255, .1);
}

.bc-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

.bc-round:hover {
    background: rgba(255, 255, 255, .1);
}

.bc-round--lg {
    width: 52px;
    height: 52px;
}

.bc-round:disabled {
    opacity: .35;
    cursor: default;
}

/* Tags laid over pictures ("Without Betachip", "Buzzing · 60%"). */
.bc-tag {
    position: absolute;
    left: 28px;
    top: 28px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(11, 8, 23, .7);
    font: 600 14px/1 var(--bc-font);
    white-space: nowrap;
}

.bc-tag--muted {
    color: var(--bc-muted);
}

.bc-tag--corner {
    left: auto;
    top: auto;
    right: 28px;
    bottom: 28px;
    height: 36px;
    font-size: 13px;
}

.bc-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bc-green);
    box-shadow: 0 0 10px var(--bc-green);
}

.bc-dot--sm {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--bc-green);
}

.bc-dot--lg {
    width: 9px;
    height: 9px;
}

@media (max-width: 759px) {
    .bc-tag {
        left: 14px;
        top: 14px;
        height: 32px;
        padding: 0 12px;
        gap: 7px;
        font-size: 12px;
    }

    .bc-tag--corner {
        left: auto;
        top: auto;
        right: 14px;
        bottom: 14px;
        height: 30px;
        font-size: 11px;
    }

    .bc-dot {
        width: 7px;
        height: 7px;
    }
}

/* Rising dust (site.js, block 7): a canvas filling its section, over the
   glows and under everything else there. */
.bc-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Phone screenshots (assets/img/phones, 2× renders of the design). */
.bc-phone {
    display: block;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}

/*
 * The App Store button: Apple's badge, or "Coming soon" until there is a
 * link. One size everywhere — 54px, 56px on phones (design 4a).
 *
 * The glow is Zenith's "so-button_glow" (localhost:8888/zenith, theme
 * assets/scss/_general.scss) in Betachip's colours and pill shape: a
 * lilac-grey pill with a white-hot light inside that follows the pointer,
 * and a pink-to-violet rim behind the edges, strongest at the side the
 * pointer is on. Zenith drives it with GSAP; here site.js sets --bc-lp and
 * the two rims' opacity, and CSS transitions do the easing.
 */
.bc-appbtn {
    --bc-glow-r: 999px;
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.bc-appbtn--badge {
    --bc-glow-r: 9px;
}

.bc-store {
    position: relative;
    z-index: 2;
    display: block;
    border-radius: 9px;
    cursor: pointer;
}

.bc-store img {
    display: block;
    width: auto;
    height: 54px;
}

.bc-soon {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 24px 0 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #CDC5E3;
    color: var(--bc-bg);
    text-align: left;
    cursor: pointer;
}

/* The light: a blurred radial blob, its centre at --bc-lp of the pill's
   width (0.1 – 0.9; 0.9 at rest). Under the text, over the fill. */
.bc-soon__light {
    position: absolute;
    inset: 0;
    z-index: -1;
    container-type: inline-size;
    pointer-events: none;
}

.bc-soon__light span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 160px;
    height: 125px;
    translate: calc(var(--bc-lp, .9) * 100cqw - 50%) -50%;
    background-image: radial-gradient(43.3% 44.23% at 50% 49.51%, #fffdff 29%, #fdf2ff 48.5%, #f3c4e6 60.71%, rgba(205, 197, 227, 0) 100%);
    filter: blur(5px);
    transition: translate .3s cubic-bezier(.25, .46, .45, .94);
}

/* The rim: two mirrored halves behind the button, each a stack of blurred
   gradients brightest at its outer end. The right half shows at rest.
   Zenith's box reaches 5px above the button but only 2px below, which its
   8px-cornered button hides; on a pill it reads as a top-heavy glow, so
   here it reaches 5px on every side. */
.bc-appbtn__halo {
    position: absolute;
    inset: -5px;
    z-index: 1;
    pointer-events: none;
}

.bc-appbtn__halo > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s cubic-bezier(.25, .46, .45, .94);
}

.bc-appbtn__halo > span:nth-child(1) {
    transform: scaleX(-1);
}

.bc-appbtn__halo > span:nth-child(2) {
    opacity: 1;
}

.bc-appbtn__halo i {
    position: relative;
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: var(--bc-glow-r);
    background: linear-gradient(103.7deg, rgba(185, 176, 214, .1) 38.66%, rgba(196, 63, 160, .1) 68.55%, #F04F9F 85.01%, #fff 92.12%);
}

.bc-appbtn__halo i::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 20;
    border-radius: var(--bc-glow-r);
    background: linear-gradient(91.96deg, rgba(255, 143, 179, 0) 6.11%, rgba(255, 143, 179, .2) 53.57%, #FF4FA8 93.6%);
    filter: blur(7px);
}

.bc-appbtn__halo > span::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: 20px;
    z-index: 10;
    border-radius: var(--bc-glow-r);
    background: linear-gradient(97.68deg, rgba(255, 143, 179, 0) 38.1%, rgba(255, 143, 179, .2) 82.47%, #FF4FA8 93.3%);
    filter: blur(4px);
}

.bc-appbtn__halo > span::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: 20px;
    z-index: 20;
    border-radius: var(--bc-glow-r);
    background: linear-gradient(91.88deg, rgba(196, 63, 160, .2) 46.45%, #9B2FD0 98.59%);
    filter: blur(15px);
}

@media (max-width: 759px) {
    .bc-soon {
        height: 56px;
    }

    .bc-store img {
        height: 56px;
    }
}

.bc-soon__small {
    display: block;
    font: 600 11px/1 var(--bc-font);
    opacity: .7;
}

.bc-soon__big {
    display: block;
    margin-top: 2px;
    font: 700 18px/1.1 var(--bc-font);
}

/* Icon + title + line rows. */
.bc-features {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.bc-features__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bc-features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
}

.bc-features__title {
    display: block;
    font: 600 18px/1.25 var(--bc-font);
}

.bc-features__text {
    display: block;
    margin-top: 4px;
    color: var(--bc-muted);
    font: 500 15px/1.5 var(--bc-font);
}

@media (max-width: 759px) {
    .bc-features {
        gap: 18px;
        margin-top: 4px;
    }

    .bc-features__item {
        gap: 14px;
    }

    .bc-features__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .bc-features__icon .bc-icon {
        width: 20px;
        height: 20px;
    }

    .bc-features__title {
        font-size: 16px;
    }

    .bc-features__text {
        margin-top: 3px;
        font-size: 14px;
    }
}

/* Cards with a gradient icon tile (toy section, sent state). */
.bc-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--bc-brand);
}


/* 4. Header and menu ============================================= */

.bc-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--bc-header-h);
    padding: 0 var(--bc-header-pad);
}

.bc-logo {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

/* The wordmark. 22px tall in the header, 18px on phones and in the footer. */
.bc-logo__img {
    display: block;
    width: auto;
    height: 22px;
}

.bc-logo--small .bc-logo__img {
    height: 18px;
}

/* The app-icon tile (gradient square + shield), kept for the Safe links
   widget, where it stands for the app rather than the site. */
.bc-logo__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--bc-brand);
}

.bc-logo__mark--tiny {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.bc-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bc-nav ul {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-nav a {
    color: var(--bc-muted);
    font: 600 15px/1 var(--bc-font);
    text-decoration: none;
    transition: color .15s ease;
}

.bc-nav a:hover {
    color: #fff;
}

.bc-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bc-menu-open {
    display: none;
}

@media (max-width: 999px) {
    .bc-nav {
        display: none;
    }

    .bc-menu-open {
        display: inline-flex;
    }
}

@media (max-width: 759px) {
    .bc-logo__img {
        height: 18px;
    }

    .bc-header .bc-pill {
        height: 38px;
        padding: 0 14px;
        font-size: 13px;
        background: var(--bc-glass);
        box-shadow: inset 0 0 0 1px var(--bc-ring);
    }

    .bc-header .bc-pill .bc-icon {
        display: none;
    }
}

/* Full-screen mobile menu (a modal <dialog>). */
.bc-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0 20px 32px;
    border: 0;
    background:
        radial-gradient(90% 50% at 10% 100%, rgba(109, 58, 232, .35), rgba(109, 58, 232, 0)),
        radial-gradient(70% 40% at 100% 0%, rgba(196, 63, 160, .25), rgba(196, 63, 160, 0)),
        var(--bc-bg);
    color: #fff;
}

.bc-menu[open] {
    display: flex;
    flex-direction: column;
}

.bc-menu::backdrop {
    background: var(--bc-bg);
}

.bc-menu__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 64px;
}

.bc-menu__links {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.bc-menu__links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--bc-line);
    font: 600 34px/1.1 var(--bc-display);
    letter-spacing: -.03em;
    text-decoration: none;
}

.bc-menu__foot {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 32px;
}


/* 5. Hero ======================================================== */

.bc-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--bc-header-h);
}

.bc-hero__glow-a {
    --a: .8;
    left: 50%;
    bottom: -40%;
    width: 90%;
    height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(109, 58, 232, .8) 0%, rgba(109, 58, 232, 0) 62%);
}

.bc-hero__glow-b {
    --g: 196, 63, 160;
    --a: .32;
    left: calc(24% - 140px);
    bottom: calc(-10% - 140px);
    width: calc(30% + 280px);
    height: calc(50% + 280px);
}

.bc-hero__copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 44px var(--bc-gutter) 0;
    text-align: center;
}

.bc-hero__title {
    margin: 0;
    font: 600 clamp(56px, 5.714vw + 13.7px, 116px)/.96 var(--bc-display);
    letter-spacing: -.045em;
}

.bc-hero__lede {
    max-width: 620px;
    margin: 0;
    color: var(--bc-muted);
    font: 500 clamp(16px, .381vw + 14.5px, 20px)/1.5 var(--bc-font);
    text-wrap: pretty;
}

.bc-hero__copy .bc-appbtn {
    margin-top: 4px;
}

.bc-hero__note {
    display: none;
    margin: 0;
    color: var(--bc-muted);
    font: 500 12px/1 var(--bc-font);
}

.bc-hero__stage {
    position: relative;
    height: 340px;
    margin-top: 42px;
}

.bc-hero__phone {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 362px;
    transform: translateX(-50%);
}

.bc-hero__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 260px;
    background: linear-gradient(180deg, rgba(11, 8, 23, 0), var(--bc-bg));
    pointer-events: none;
}

/* Floating glass chips. */
.bc-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 18px 0 12px;
    border-radius: 20px;
    background: rgba(20, 14, 40, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    white-space: nowrap;
}

.bc-chip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
}

.bc-chip__title {
    display: block;
    font: 600 14px/1.2 var(--bc-font);
}

.bc-chip__text {
    display: block;
    margin-top: 2px;
    color: var(--bc-muted);
    font: 500 12px/1.2 var(--bc-font);
}

/* Desktop places, measured from the design's 1440 frame around its centre. */
.bc-hero__chip--1 { left: calc(50% - 410px); top: 80px; }
.bc-hero__chip--2 { right: calc(50% - 420px); top: 40px; }
.bc-hero__chip--3 { right: calc(50% - 380px); top: 200px; }

/*
 * A float, each chip on its own period and phase so the three never rise
 * together: up 18px with a little sideways sway and tilt, so it reads as
 * drifting rather than bobbing. It animates `translate` and `rotate`, not
 * `transform`, so it adds to whatever placement a breakpoint gives the
 * chip. Stops under prefers-reduced-motion (section 13).
 */
.bc-hero__chip {
    animation: bc-float 5s ease-in-out infinite;
}

.bc-hero__chip--2 {
    animation-duration: 6s;
    animation-delay: -2s;
    animation-direction: reverse;
}

.bc-hero__chip--3 {
    animation-duration: 5.5s;
    animation-delay: -3.5s;
}

@keyframes bc-float {
    0%, 100% { translate: 0 0;      rotate: 0deg; }
    25%      { translate: 5px -9px;  rotate: 1.2deg; }
    50%      { translate: 0 -18px;   rotate: 0deg; }
    75%      { translate: -5px -9px; rotate: -1.2deg; }
}

@media (max-width: 1179px) {
    .bc-hero__stage {
        height: 400px;
        margin-top: 36px;
    }

    .bc-hero__phone {
        width: 320px;
    }

    .bc-hero__chip--1 { left: max(8px, calc(50% - 340px)); top: 100px; }
    .bc-hero__chip--2 { right: max(8px, calc(50% - 350px)); top: 40px; }
    .bc-hero__chip--3 { right: max(8px, calc(50% - 330px)); top: 210px; }
}

@media (max-width: 759px) {
    .bc-hero__glow-a {
        left: 50%;
        top: 40%;
        bottom: auto;
        width: 160%;
        height: 90%;
        background: radial-gradient(closest-side, rgba(109, 58, 232, .6), rgba(109, 58, 232, 0));
    }

    .bc-hero__glow-b {
        left: -40%;
        bottom: -10%;
        width: 110%;
        height: 60%;
    }

    .bc-hero__copy {
        gap: 18px;
        padding-top: 40px;
    }

    .bc-hero__lede {
        line-height: 1.55;
    }

    /* The design stretches the store button across the phone (the pill;
       Apple's badge keeps its own width). */
    .bc-hero__copy .bc-appbtn {
        margin-top: 0;
    }

    .bc-hero__copy .bc-appbtn:not(.bc-appbtn--badge) {
        align-self: stretch;
    }

    .bc-hero__copy .bc-soon {
        justify-content: center;
    }

    .bc-hero__note {
        display: block;
    }

    .bc-hero__stage {
        height: 400px;
        margin-top: 28px;
    }

    .bc-hero__phone {
        width: 289px;
    }

    .bc-hero__fade {
        height: 160px;
    }

    .bc-chip {
        gap: 9px;
        height: 48px;
        padding: 0 14px 0 10px;
        border-radius: 16px;
        background: rgba(20, 14, 40, .78);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 40px rgba(0, 0, 0, .45);
    }

    .bc-chip__icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .bc-chip__icon .bc-icon {
        width: 16px;
        height: 16px;
    }

    .bc-chip__title {
        font-size: 12px;
    }

    .bc-chip__text {
        margin-top: 1px;
        font-size: 10px;
    }

    .bc-hero__chip--1 { left: 8px; top: 120px; }
    .bc-hero__chip--2 { right: 8px; top: 220px; }
}


/* 6. Censor styles =============================================== */

.bc-styles {
    padding-top: clamp(20px, 1.9vw + 12.6px, 40px);
}

.bc-styles__glow {
    left: 50%;
    top: 22%;
    width: 90%;
    height: 78%;
    transform: translateX(-50%);
}

/* The tall preview on the left, the tiles and the switch on the right (the
   design's 2a columns, swapped at the owner's word): 560px + 1fr, 48px apart. */
.bc-styles__grid {
    position: relative;
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    grid-template-areas: "demo pick";
    gap: 48px;
    align-items: start;
    max-width: var(--bc-max);
    margin: 64px auto 0;
}

.bc-styles__pick {
    grid-area: pick;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* The preview: the app's picture of the chosen style, cover-cropped. */
.bc-demo {
    grid-area: demo;
    position: relative;
    height: 760px;
    overflow: hidden;
    border-radius: 44px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
}

.bc-demo__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    transition: opacity .18s ease;
}

.bc-demo__photo.is-swapping {
    opacity: .4;
}

.bc-demo .bc-tag {
    left: 24px;
    top: 24px;
    height: 36px;
    font-size: 13px;
}

.bc-demo__whole {
    display: none;
}

.bc-demo[data-silhouette="on"] .bc-demo__whole {
    display: inline;
}

/* The style tiles: four to a row, the chosen one ringed in white with a check. */
.bc-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bc-muted);
    font: 600 16px/1 var(--bc-font);
    cursor: pointer;
}

.bc-tile__pic {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: box-shadow .15s ease, transform .15s ease;
}

.bc-tile__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-tile:hover .bc-tile__pic {
    transform: translateY(-2px);
}

.bc-tile__check {
    position: absolute;
    right: 12px;
    top: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--bc-bg);
}

.bc-tile[aria-pressed="true"] {
    color: #fff;
}

.bc-tile[aria-pressed="true"] .bc-tile__pic {
    box-shadow: 0 0 0 3px #fff;
}

.bc-tile[aria-pressed="true"] .bc-tile__check {
    display: flex;
}

.bc-tile:focus-visible {
    outline: none;
}

.bc-tile:focus-visible .bc-tile__pic {
    outline: 2px solid var(--bc-pink);
    outline-offset: 5px;
}

/* The Silhouette switch: a glass pill with the figure as a dark
   silhouette, the name, a hint, and an iOS-style switch; under the tiles,
   left-aligned. */
.bc-switch-row {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.bc-switch-row__pic {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
}

/* The design's recipe: the figure crushed to a dark silhouette, then violet
   screened over it. */
.bc-switch-row__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    filter: grayscale(1) contrast(3) brightness(.25);
    transform: scale(1.02);
}

.bc-switch-row__pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bc-violet);
    mix-blend-mode: screen;
    opacity: .6;
}

.bc-switch-row__label {
    font: 600 16px/1 var(--bc-font);
}

.bc-switch-row__hint {
    color: var(--bc-muted);
    font: 500 14px/1 var(--bc-font);
}

.bc-switch {
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    transition: background-color .2s ease;
}

.bc-switch__thumb {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    transition: transform .22s cubic-bezier(.3, .7, .3, 1);
}

.bc-switch-row[aria-checked="true"] .bc-switch {
    background: var(--bc-green);
}

.bc-switch-row[aria-checked="true"] .bc-switch__thumb {
    transform: translateX(20px);
}

/* Tablet: the preview on top at the phone's 3:4, then the tiles, then the
   switch, all centred. */
@media (max-width: 1179px) {
    .bc-styles__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "demo" "pick";
        gap: 28px;
        max-width: 640px;
    }

    .bc-demo {
        width: 100%;
        max-width: 480px;
        height: auto;
        aspect-ratio: 3 / 4;
        justify-self: center;
    }

    .bc-switch-row {
        align-self: center;
    }
}

/* Phone (design 4a): centred heading, the preview, a sideways row of 96px
   tiles, the switch without its hint. */
@media (max-width: 759px) {
    .bc-styles .bc-head--center {
        align-items: center;
        text-align: center;
    }

    .bc-styles__glow {
        left: -20%;
        top: 20%;
        width: 140%;
        height: 60%;
        transform: none;
    }

    .bc-styles__grid {
        gap: 18px;
        margin-top: 24px;
    }

    .bc-styles__pick {
        gap: 18px;
    }

    .bc-demo {
        max-width: none;
        border-radius: 28px;
    }

    .bc-demo .bc-tag {
        left: 16px;
        top: 16px;
    }

    .bc-tiles {
        display: flex;
        gap: 10px;
        margin: 0 calc(-1 * var(--bc-gutter));
        padding: 3px var(--bc-gutter) 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bc-tiles::-webkit-scrollbar {
        display: none;
    }

    .bc-tile {
        flex: none;
        width: 96px;
        gap: 8px;
        font-size: 13px;
    }

    .bc-tile__pic {
        border-radius: 18px;
    }

    .bc-tile[aria-pressed="true"] .bc-tile__pic {
        box-shadow: 0 0 0 2px #fff;
    }

    .bc-tile__check {
        right: 8px;
        top: 8px;
        width: 22px;
        height: 22px;
    }

    .bc-tile__check .bc-icon {
        width: 16px;
        height: 16px;
    }

    .bc-switch-row {
        gap: 10px;
        padding: 6px 8px 6px 6px;
    }

    .bc-switch-row__hint {
        display: none;
    }
}


/* 6b. Partner control ============================================ */

.bc-partners__glow {
    --g: 196, 63, 160;
    --a: .28;
    right: -25%;
    top: 0;
    width: 70%;
    height: 90%;
}

.bc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 80px;
    align-items: center;
}

.bc-split__copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 520px;
}

.bc-partners__phones {
    position: relative;
    height: 720px;
}

.bc-partners__phone {
    position: absolute;
    width: 314px;
}

.bc-partners__phone--a {
    left: 0;
    top: 40px;
    transform: rotate(-4deg);
}

.bc-partners__phone--b {
    right: 0;
    top: 0;
    transform: rotate(3deg);
}

/* Stacked below desktop: heading, phones, then the three points. */
@media (max-width: 1179px) {
    .bc-split {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .bc-split__copy {
        display: contents;
    }

    .bc-split__copy .bc-head {
        order: 1;
        max-width: 640px;
    }

    .bc-partners__phones {
        order: 2;
        height: 560px;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 24px;
    }

    .bc-split__copy .bc-features {
        order: 3;
        max-width: 640px;
    }

    .bc-partners__phones::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        height: 120px;
        background: linear-gradient(180deg, rgba(11, 8, 23, 0), var(--bc-bg));
    }

    .bc-partners__phone {
        width: 300px;
    }

    .bc-partners__phone--a {
        left: max(10px, calc(50% - 290px));
        top: 20px;
    }

    .bc-partners__phone--b {
        right: max(10px, calc(50% - 290px));
    }
}

@media (max-width: 759px) {
    .bc-partners__phones {
        height: 440px;
    }

    .bc-partners__phone {
        width: 241px;
    }

    .bc-partners__phone--a {
        left: 10px;
    }

    .bc-partners__phone--b {
        right: 10px;
    }
}


/* 7. Toy + censoring ============================================= */

.bc-toy__glow {
    --a: .4;
    left: 22%;
    top: 10%;
    width: 60%;
    height: 80%;
}

.bc-toy__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    margin-top: 64px;
}

.bc-toy__phone {
    flex: none;
    width: 289px;
}

.bc-toy__live {
    display: none;
}

.bc-toy__product {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 420px;
    height: 560px;
}

.bc-toy__product-glow {
    --g: 196, 63, 160;
    --a: .55;
    inset: 0 -10%;
}

/*
 * Signal rings behind the toy: three rings, a third of a cycle apart, each
 * growing from the toy outwards and fading, so there is always one on its
 * way out — the toy is connected and live. Sized from the product box, so
 * they follow every breakpoint. Stop under prefers-reduced-motion.
 */
.bc-toy__rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78%;
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
}

.bc-toy__rings i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 143, 179, .55);
    box-shadow: 0 0 18px rgba(196, 63, 160, .35), inset 0 0 18px rgba(196, 63, 160, .25);
    opacity: 0;
    animation: bc-signal 3.6s cubic-bezier(.2, .6, .35, 1) infinite;
}

.bc-toy__rings i:nth-child(2) {
    animation-delay: 1.2s;
}

.bc-toy__rings i:nth-child(3) {
    animation-delay: 2.4s;
}

@keyframes bc-signal {
    0%   { transform: scale(.55); opacity: 0; }
    15%  { opacity: .9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.bc-toy__photo {
    position: relative;
    display: block;
    width: auto;
    max-width: 340px;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
}

/* The three cards underneath. */
.bc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
    padding: 0;
    list-style: none;
}

.bc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: 28px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
}

.bc-card__title {
    display: block;
    font: 600 20px/1.2 var(--bc-font);
}

.bc-card__text {
    display: block;
    margin-top: 14px;
    color: var(--bc-muted);
    font: 500 15px/1.5 var(--bc-font);
}

@media (max-width: 1179px) {
    .bc-toy__stage {
        gap: 20px;
    }

    /* Two phones and the toy have to fit 666px at 760 wide. */
    .bc-toy__phone {
        width: min(230px, 28vw);
    }

    .bc-toy__product {
        width: min(250px, 26vw);
        height: 460px;
    }

    .bc-toy__photo {
        max-width: 100%;
    }

    .bc-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 640px;
    }

    .bc-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
        border-radius: 22px;
    }

    .bc-card .bc-card__icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .bc-card .bc-card__icon .bc-icon {
        width: 20px;
        height: 20px;
    }

    .bc-card__title {
        font-size: 17px;
    }

    .bc-card__text {
        margin-top: 4px;
        font-size: 14px;
    }
}

/* Phone: one card holding both phones, the toy in front. */
@media (max-width: 759px) {
    .bc-toy__glow {
        --g: 196, 63, 160;
        --a: .35;
        left: -10%;
        top: 25%;
        width: 120%;
        height: 50%;
    }

    .bc-toy__stage {
        display: block;
        height: 480px;
        margin-top: 32px;
        overflow: hidden;
        border-radius: 32px;
        background: radial-gradient(120% 90% at 50% 100%, rgba(109, 58, 232, .55), rgba(11, 8, 23, 0) 70%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .bc-toy__live {
        display: inline-flex;
        z-index: 4;
    }

    .bc-toy__phone {
        position: absolute;
        width: 225px;
        filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
    }

    .bc-toy__phone--a {
        left: -30px;
        top: 60px;
        transform: rotate(-8deg);
    }

    .bc-toy__phone--b {
        right: -30px;
        top: 40px;
        transform: rotate(7deg);
    }

    .bc-toy__product {
        position: absolute;
        left: 50%;
        bottom: 10px;
        z-index: 3;
        width: 200px;
        height: 260px;
        transform: translateX(-50%);
    }

    .bc-toy__product-glow {
        inset: -10%;
    }

    .bc-toy__photo {
        max-width: 170px;
        max-height: 250px;
    }

    .bc-cards {
        margin-top: 24px;
    }
}


/* 7b. Text censoring ============================================ */

.bc-text__glow {
    --g: 46, 107, 255;
    --a: .25;
    right: -25%;
    top: 0;
    width: 65%;
    height: 100%;
}

.bc-text__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

/* The feed: a glass card, an address bar, three posts, the blocklist. */
.bc-feed {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 40px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
}

.bc-feed__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 64px;
    color: var(--bc-muted);
    font: 600 14px/1 var(--bc-font);
}

.bc-feed__post {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border-top: 1px solid var(--bc-line);
}

.bc-feed__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bc-brand);
}

.bc-feed__body {
    flex: 1;
    min-width: 0;
}

.bc-feed__who {
    margin: 0;
    font: 600 15px/1 var(--bc-font);
}

.bc-feed__who span {
    margin-left: 4px;
    color: var(--bc-muted);
    font-weight: 500;
}

.bc-feed__text {
    margin: 8px 0 0;
    font: 500 17px/1.5 var(--bc-font);
}

/* A blocked word: its own width, as a violet bar. */
.bc-redact {
    display: inline-block;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--bc-violet);
    color: transparent;
    line-height: 1.25;
    user-select: none;
    -webkit-user-select: none;
}

.bc-feed__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--bc-line);
    background: rgba(255, 255, 255, .03);
}

.bc-feed__count {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 var(--bc-font);
}

@media (max-width: 1179px) {
    .bc-text__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 640px;
    }
}

@media (max-width: 759px) {
    .bc-text__glow {
        right: -40%;
        width: 100%;
        height: 70%;
    }

    .bc-text__grid {
        gap: 24px;
    }

    .bc-feed {
        border-radius: 24px;
    }

    .bc-feed__post {
        gap: 12px;
        padding: 16px;
    }

    .bc-feed__text {
        font-size: 14px;
    }

    .bc-feed__foot {
        padding: 14px 16px;
    }

}


/* 8. Widgets ===================================================== */

.bc-widgets__glow-a {
    --g: 46, 107, 255;
    --a: .25;
    left: -20%;
    top: 0;
    width: 65%;
    height: 100%;
}

.bc-widgets__glow-b {
    --g: 196, 63, 160;
    --a: .25;
    left: 10%;
    bottom: 0;
    width: 60%;
    height: 70%;
}

.bc-widgets__grid {
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
        "cloud ."
        "cloud head"
        "cloud list"
        "cloud .";
    column-gap: 60px;
}

.bc-widgets__head {
    grid-area: head;
    max-width: 480px;
}

.bc-widgets__list {
    grid-area: list;
    max-width: 480px;
}

.bc-widgets__cloud {
    grid-area: cloud;
    position: relative;
    width: 720px;
    height: 720px;
}

/* A widget: iOS's glass tile. */
.bc-w {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 170px;
    height: 170px;
    padding: 16px;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(20, 14, 40, .66);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    transform-origin: 0 0;
}

.bc-w--status  { left: 120px; top: 60px;  transform: rotate(-6deg); }
.bc-w--lock    { left: 330px; top: 20px;  transform: rotate(4deg); }
.bc-w--partner { left: 170px; top: 250px; transform: rotate(-2deg); width: 362px; }
.bc-w--links   { left: 90px;  top: 450px; transform: rotate(3deg) scale(.78); width: 362px; height: 382px; padding: 18px; border-radius: 28px; }
.bc-w--active  { left: 390px; top: 500px; transform: rotate(7deg); background: rgba(20, 14, 40, .5); }
.bc-w--covered { left: 550px; top: 270px; transform: rotate(-4deg) scale(.9); }

/*
 * The widgets float like the hero chips (bc-float, section 5): each on its
 * own period and phase, some reversed, so the cloud drifts rather than
 * moving as one. `translate` and `rotate` add to each widget's own tilt
 * and placement at every breakpoint. Stops under prefers-reduced-motion.
 */
.bc-w {
    animation: bc-float 6s ease-in-out infinite;
}

.bc-w--status  { animation-duration: 5.5s; animation-delay: -1s; }
.bc-w--lock    { animation-duration: 6.5s; animation-delay: -3s;   animation-direction: reverse; }
.bc-w--partner { animation-duration: 7s;   animation-delay: -2s; }
.bc-w--links   { animation-duration: 6s;   animation-delay: -4.5s; animation-direction: reverse; }
.bc-w--active  { animation-duration: 5s;   animation-delay: -2.5s; }
.bc-w--covered { animation-duration: 6s;   animation-delay: -0.5s; animation-direction: reverse; }

.bc-w__spacer {
    flex: 1;
}

.bc-w__label {
    color: var(--bc-muted);
    font: 600 12px/1 var(--bc-font);
}

.bc-w__big {
    margin-top: 10px;
    font: 600 34px/1 var(--bc-font);
}

.bc-w__big--xl {
    font-size: 40px;
}

.bc-w__mid {
    font: 600 24px/1 var(--bc-font);
}

.bc-w__count {
    font: 700 26px/1 var(--bc-font);
    font-variant-numeric: tabular-nums;
}

.bc-w__small {
    display: block;
    margin-top: 6px;
    color: var(--bc-muted);
    font: 500 12px/1.3 var(--bc-font);
}

.bc-w--lock .bc-w__small,
.bc-w--active .bc-w__small {
    margin-top: 5px;
}

.bc-w__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: 999px;
    background: #fff;
    color: var(--bc-bg);
    font: 700 13px/1 var(--bc-font);
}

.bc-w__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.bc-w__row--center {
    align-items: center;
}

.bc-ring {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 62px;
    height: 62px;
}

.bc-ring__track {
    position: absolute;
    inset: 0;
}

.bc-w__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
}

/* Partner widget. */
.bc-w--partner {
    flex-direction: row;
    gap: 14px;
}

.bc-w__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.bc-w__person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bc-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E6BFF, #6D3AE8);
    font: 700 16px/1 var(--bc-font);
}

.bc-avatar__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #1A1133;
    border-radius: 50%;
    background: var(--bc-green);
}

.bc-w__name {
    display: block;
    font: 600 15px/1.2 var(--bc-font);
}

.bc-w__name--sm {
    font-size: 13px;
    line-height: 1;
}

.bc-w--partner .bc-w__small {
    margin-top: 2px;
    line-height: 1.2;
}

.bc-w__bubble {
    align-self: flex-start;
    max-width: 100%;
    padding: 8px 12px;
    overflow: hidden;
    border-radius: 16px 16px 16px 5px;
    background: rgba(255, 255, 255, .1);
    font: 500 13px/1.3 var(--bc-font);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-w__time {
    display: block;
    margin-top: 6px;
    color: var(--bc-muted);
    font: 500 11px/1 var(--bc-font);
}

.bc-w__toy .bc-w__time {
    margin-top: 3px;
}

.bc-w__rule {
    flex: none;
    width: 1px;
    background: rgba(255, 255, 255, .1);
}

.bc-w__side {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
    width: 118px;
}

.bc-w__toy {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
}

/* Safe links widget. */
.bc-w__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 14px/1 var(--bc-font);
}

.bc-w__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font: 600 11px/1 var(--bc-font);
}

.bc-w__apps {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
    align-content: center;
    row-gap: 22px;
    margin-top: 6px;
}

.bc-w__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bc-w__tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    font: 700 25px/1 var(--bc-font);
}

.bc-w__tile--add {
    border: 1.5px dashed rgba(255, 255, 255, .3);
    box-shadow: none;
}

.bc-w__shield {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    color: var(--bc-violet);
}

.bc-w__app-name {
    max-width: 100%;
    overflow: hidden;
    font: 600 11px/1 var(--bc-font);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-w__app-name--muted {
    color: var(--bc-muted);
}

.bc-w__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 6px 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.bc-w__search > span:not(.bc-w__go) {
    flex: 1;
    color: var(--bc-muted);
    font: 500 14px/1 var(--bc-font);
}

.bc-w__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--bc-bg);
}

/* Covered today. */
.bc-w__bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 36px;
}

.bc-w__bars span {
    flex: 1;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22);
}

.bc-w__bars .bc-w__bar-today {
    background: #fff;
}

.bc-w__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--bc-muted);
    font: 500 10px/1 var(--bc-font);
}

/* Narrower desktops: stacked, the full cloud centred. */
@media (max-width: 1319px) {
    .bc-widgets__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "head" "cloud" "list";
    }

    .bc-widgets__head,
    .bc-widgets__list {
        max-width: 640px;
    }

    .bc-widgets__cloud {
        justify-self: center;
        margin-top: 24px;
    }

    .bc-widgets__list {
        margin-top: 8px;
    }
}

/* Phone: five widgets in a tight two-column cloud (design 4a). */
@media (max-width: 899px) {
    .bc-widgets__cloud {
        width: 100%;
        max-width: 390px;
        height: 640px;
        margin-top: 10px;
    }

    .bc-w {
        transform-origin: 50% 50%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px rgba(0, 0, 0, .45);
    }

    .bc-w--status  { left: 0;     top: 0;     transform: rotate(-4deg); }
    .bc-w--lock    { left: auto;  right: 0;   top: 30px;  transform: rotate(3deg); }
    .bc-w--partner { left: -6px;  top: 220px; transform: scale(.97) rotate(-2deg); transform-origin: 0 0; }
    .bc-w--active  { left: 0;     top: 420px; transform: rotate(2deg); }
    .bc-w--covered { left: auto;  right: 0;   top: 400px; transform: rotate(-5deg); }

    .bc-w--links {
        display: none;
    }
}

@media (max-width: 380px) {
    /* Two 170px widgets need 340px; below that the cloud shrinks. */
    .bc-widgets__cloud {
        zoom: .9;
    }
}


/* 9. Inside the app ============================================== */

.bc-gallery {
    padding-inline: 0;
}

.bc-gallery__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: min(var(--bc-max), 100% - 2 * var(--bc-gutter));
}

.bc-gallery__arrows {
    display: flex;
    gap: 10px;
}

.bc-gallery__track {
    --bc-edge: max(var(--bc-gutter), (100% - var(--bc-max)) / 2);
    display: flex;
    gap: 28px;
    margin: 56px 0 0;
    padding: 0 var(--bc-edge) 24px;
    overflow-x: auto;
    list-style: none;
    scroll-padding-inline: var(--bc-edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bc-gallery__track::-webkit-scrollbar {
    display: none;
}

/* Mouse drag (site.js): a grab hand, and no snapping or text selection
   while the row is held. */
@media (hover: hover) and (pointer: fine) {
    .bc-gallery__track {
        cursor: grab;
    }
}

.bc-gallery__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
    -webkit-user-select: none;
}

.bc-gallery__track:focus-visible {
    outline-offset: -2px;
}

.bc-gallery__item {
    flex: none;
    width: 249px;
    scroll-snap-align: start;
}

.bc-gallery__item .bc-phone {
    width: 100%;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .4));
}

@media (max-width: 759px) {
    .bc-gallery__arrows {
        display: none;
    }

    .bc-gallery__track {
        gap: 14px;
        margin-top: 28px;
    }

    .bc-gallery__item {
        width: 241px;
    }
}


/* 10. FAQ, CTA ==================================================== */

/* FAQ */
.bc-faq__grid {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.bc-faq__list {
    border-top: 1px solid var(--bc-line);
}

.bc-faq__item {
    border-bottom: 1px solid var(--bc-line);
}

/*
 * The row's spacing lives on the question (the <summary>), not the row,
 * so the whole band above and below the text is clickable. Open, its
 * bottom space shrinks to the gap before the answer, and the answer
 * carries the row's bottom space instead; the padding eases with the
 * FAQ slide (site.js, 320 ms) so nothing jumps.
 */
.bc-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    font: 600 20px/1.3 var(--bc-font);
    list-style: none;
    cursor: pointer;
    transition: padding-bottom .32s cubic-bezier(.2, .7, .2, 1);
}

.bc-faq__item[open]:not(.is-closing) .bc-faq__q {
    padding-bottom: 12px;
}

.bc-faq__q::-webkit-details-marker {
    display: none;
}

.bc-faq__q:hover {
    color: #EFEAFB;
}

/*
 * The + / − mark: two bars. Open, the upright one turns flat onto the
 * other, so + becomes −. .is-closing (set by site.js for the length of
 * the closing slide) turns it back before [open] is actually removed.
 */
.bc-faq__mark {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
}

.bc-faq__mark::before,
.bc-faq__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}

.bc-faq__mark::after {
    transform: rotate(90deg);
}

.bc-faq__item[open] .bc-faq__mark::after {
    transform: rotate(180deg);
}

.bc-faq__item.is-closing .bc-faq__mark::after {
    transform: rotate(90deg);
}

/* The part site.js slides; overflow hidden so the text is clipped mid-slide. */
.bc-faq__body {
    overflow: hidden;
}

.bc-faq__a {
    max-width: 680px;
    margin: 0;
    padding-bottom: 26px;
    color: var(--bc-muted);
    font: 500 16px/1.6 var(--bc-font);
}

@media (max-width: 1179px) {
    .bc-faq__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 759px) {
    .bc-faq__q {
        gap: 16px;
        padding: 20px 0;
        font-size: 17px;
    }

    .bc-faq__item[open]:not(.is-closing) .bc-faq__q {
        padding-bottom: 10px;
    }

    .bc-faq__mark {
        width: 22px;
        height: 22px;
    }

    .bc-faq__mark::before,
    .bc-faq__mark::after {
        width: 12px;
        margin-left: -6px;
    }

    .bc-faq__a {
        padding-bottom: 20px;
        font-size: 15px;
    }
}

/* Closing call to action. */
.bc-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: clamp(90px, 6.667vw + 64px, 160px) var(--bc-gutter) clamp(70px, 4.762vw + 51.4px, 120px);
    text-align: center;
}

.bc-cta__glow {
    --a: .55;
    left: 50%;
    bottom: -70%;
    width: 100%;
    height: 140%;
    transform: translateX(-50%);
}

.bc-cta > :not(.bc-glow):not(.bc-dust) {
    position: relative;
}

.bc-cta__title {
    margin: 0;
    font: 600 clamp(68px, 4.952vw + 48.7px, 120px)/.95 var(--bc-display);
    letter-spacing: -.045em;
    text-wrap: balance;
}

@media (max-width: 759px) {
    .bc-cta {
        gap: 20px;
    }

    .bc-cta__glow {
        width: 180%;
    }
}


/* 11. Footer ===================================================== */

.bc-footer {
    /* Equal outer columns, so the links sit on the page's true centre
       whatever the logo and the copyright line measure. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 36px var(--bc-gutter) 44px;
    border-top: 1px solid var(--bc-line);
    color: var(--bc-muted);
    font: 500 14px/1 var(--bc-font);
}

.bc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-footer__links a {
    text-decoration: none;
    transition: color .15s ease;
}

.bc-footer__links a:hover {
    color: #fff;
}

.bc-footer > .bc-logo {
    justify-self: start;
}

.bc-footer__legal {
    justify-self: end;
    margin: 0;
}

@media (max-width: 759px) {
    .bc-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 28px 20px 40px;
        font-size: 13px;
        text-align: center;
    }

    .bc-footer .bc-logo__img {
        height: 16px;
    }

    .bc-footer__links {
        justify-content: center;
        gap: 20px;
    }
}


/* 12. Contact ==================================================== */

.bc-contact {
    position: relative;
    overflow: hidden;
    padding: calc(var(--bc-header-h) + 80px) var(--bc-gutter) 140px;
}

.bc-contact__glow-a {
    --g: 196, 63, 160;
    --a: .3;
    right: -25%;
    top: -25%;
    width: 75%;
    height: 90%;
}

.bc-contact__glow-b {
    --a: .35;
    left: -30%;
    top: 20%;
    width: 70%;
    height: 90%;
}

.bc-contact__glow-c {
    --g: 46, 107, 255;
    --a: .25;
    right: 0;
    bottom: -35%;
    width: 60%;
    height: 80%;
}

.bc-contact__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 620px;
    gap: 100px;
    align-items: start;
    max-width: var(--bc-max);
    margin-inline: auto;
}

.bc-contact__intro {
    max-width: 520px;
}

.bc-contact__title {
    margin: 0;
    font: 600 clamp(54px, 2.857vw + 42.86px, 84px)/.98 var(--bc-display);
    letter-spacing: -.045em;
}

.bc-contact__extra {
    margin: 0;
}

.bc-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px;
    border-radius: 36px;
    background: rgba(20, 14, 40, .6);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    scroll-margin-top: 24px;
}

.bc-panel__title {
    margin: 0;
    font: 600 28px/1.15 var(--bc-display);
    letter-spacing: -.03em;
}

.bc-panel__text {
    margin: 6px 0 0;
    color: var(--bc-muted);
    font: 500 15px/1.5 var(--bc-font);
}

.bc-alert {
    margin: 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 143, 179, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 143, 179, .35);
    color: #FFD0DF;
    font: 600 14px/1.4 var(--bc-font);
}

.bc-sent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.bc-sent .bc-panel__text {
    margin: 0;
}

.bc-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bc-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bc-form__label {
    padding: 0;
    color: var(--bc-muted);
    font: 600 13px/1 var(--bc-font);
}

fieldset.bc-form__field > legend {
    margin-bottom: 8px;
}

.bc-form__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bc-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bc-input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    color: #fff;
    font: 500 16px/1.4 var(--bc-font);
    transition: box-shadow .15s ease;
}

.bc-input::placeholder {
    color: var(--bc-faint);
    opacity: 1;
}

.bc-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

.bc-input--area {
    height: 160px;
    min-height: 120px;
    padding: 16px 18px;
    border-radius: 20px;
    resize: vertical;
}

/* Topic chips are radio buttons in pill clothing. */
.bc-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bc-topic {
    position: relative;
}

.bc-topic input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.bc-topic span {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    font: 600 14px/1 var(--bc-font);
    transition: background-color .15s ease, color .15s ease;
}

.bc-topic input:checked + span {
    background: #fff;
    color: var(--bc-bg);
}

.bc-topic input:focus-visible + span {
    outline: 2px solid var(--bc-pink);
    outline-offset: 3px;
}

/* Attachments. */
.bc-attach {
    position: relative;
}

.bc-attach__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bc-attach__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--bc-glass);
    box-shadow: inset 0 0 0 1px var(--bc-ring);
    cursor: pointer;
    transition: background-color .15s ease;
}

.bc-attach__row:hover {
    background: rgba(255, 255, 255, .08);
}

.bc-attach__input:focus-visible + .bc-attach__row {
    outline: 2px solid var(--bc-pink);
    outline-offset: 3px;
}

.bc-attach__label {
    flex: 1;
    color: var(--bc-muted);
    font: 500 15px/1 var(--bc-font);
}

.bc-attach__hint {
    color: var(--bc-faint);
    font: 500 13px/1 var(--bc-font);
}

.bc-attach__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--bc-muted);
    font: 500 13px/1.4 var(--bc-font);
}

.bc-attach__list:not(:empty) {
    margin-top: 10px;
}

.bc-attach__list li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bc-attach__error {
    margin: 8px 0 0;
    color: var(--bc-pink);
    font: 600 13px/1.4 var(--bc-font);
}

.bc-form__send {
    height: 58px;
    margin-top: 6px;
}

.bc-form__legal {
    margin: 0;
    color: var(--bc-muted);
    font: 500 13px/1.4 var(--bc-font);
    text-align: center;
}

.bc-form__legal a,
.bc-form__legal-strong {
    color: #fff;
}

@media (max-width: 1179px) {
    .bc-contact__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 640px;
    }
}

@media (max-width: 759px) {
    .bc-contact {
        padding: calc(var(--bc-header-h) + 40px) var(--bc-gutter) 80px;
    }

    .bc-contact__grid {
        gap: 32px;
    }

    .bc-contact__intro {
        gap: 16px;
    }

    .bc-panel {
        gap: 18px;
        padding: 24px;
        border-radius: 28px;
    }

    .bc-panel__title {
        font-size: 24px;
    }

    .bc-panel__text {
        font-size: 14px;
    }

    .bc-form {
        gap: 18px;
    }

    .bc-form__label {
        font-size: 12px;
    }

    .bc-form__pair {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* 16px, not the design's 15: iOS zooms into any smaller input. */
    .bc-input {
        height: 52px;
        padding: 0 16px;
    }

    .bc-input--area {
        height: 140px;
        padding: 14px 16px;
        border-radius: 18px;
    }

    .bc-topic span {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }

    .bc-attach__row {
        gap: 12px;
        padding: 12px 16px;
        border-radius: 14px;
    }

    .bc-attach__label {
        font-size: 14px;
    }

    /* No room beside the label at this width; the design drops it too,
       and site.js names the limit if a pick goes over it. */
    .bc-attach__hint {
        display: none;
    }

    .bc-form__send {
        height: 54px;
        margin-top: 0;
        font-size: 15px;
    }

    .bc-form__legal {
        font-size: 12px;
    }
}


/* 13. Pages, 404, age gate, motion =============================== */

.bc-page {
    position: relative;
    overflow: hidden;
    padding: calc(var(--bc-header-h) + 72px) var(--bc-gutter) 120px;
}

.bc-page__glow {
    --a: .3;
    left: 50%;
    top: -40%;
    width: 110%;
    height: 80%;
    transform: translateX(-50%);
}

.bc-page__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: var(--bc-measure);
    margin: 0 auto 40px;
}

.bc-page__title {
    margin: 0;
    font: 600 clamp(40px, 2.286vw + 31.1px, 64px)/1 var(--bc-display);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.bc-page__meta {
    color: var(--bc-muted);
    font-size: 14px;
}

.bc-prose {
    position: relative;
    max-width: var(--bc-measure);
    margin-inline: auto;
    color: #DCD6EE;
    font: 500 17px/1.7 var(--bc-font);
}

.bc-prose h2,
.bc-prose h3 {
    margin: 2em 0 .6em;
    color: #fff;
    font-family: var(--bc-display);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.bc-prose h2 {
    font-size: 28px;
}

.bc-prose h3 {
    font-size: 21px;
}

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

.bc-prose ul,
.bc-prose ol {
    padding-left: 1.3em;
}

.bc-prose li + li {
    margin-top: .35em;
}

.bc-posts {
    padding: 0 !important;
    list-style: none;
}

.bc-posts li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bc-line);
}

.bc-404 {
    text-align: center;
}

.bc-404 .bc-page__head {
    align-items: center;
}

.bc-404__home {
    position: relative;
    display: inline-flex;
}

/* The 18+ gate (design 1d). */
.bc-gate {
    width: min(460px, 100% - 32px);
    max-width: none;
    margin: auto;
    padding: 36px;
    border: 0;
    border-radius: 32px;
    background: rgba(20, 14, 40, .82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: #fff;
    text-align: center;
}

.bc-gate:focus {
    outline: none;
}

.bc-gate::backdrop {
    background: rgba(11, 8, 23, .45);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.bc-gate__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 17px;
    background: var(--bc-brand);
}

.bc-gate__title {
    margin: 20px 0 0;
    font: 600 30px/1.15 var(--bc-font);
}

.bc-gate__text {
    margin: 10px 0 0;
    color: var(--bc-muted);
    font: 500 15px/1.5 var(--bc-font);
}

.bc-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}

.bc-gate__actions .bc-btn {
    height: 54px;
}

.bc-gate__actions .bc-btn--glass {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.bc-gate__note {
    margin: 16px 0 0;
    color: var(--bc-muted);
    font: 500 12px/1.4 var(--bc-font);
}

@media (max-width: 759px) {
    .bc-gate {
        padding: 28px 24px;
        border-radius: 28px;
    }

    .bc-gate__title {
        font-size: 26px;
    }
}

/* Motion: the only moving parts are decoration, so they simply stop. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}