.bcc-stage-grid {
    --bcc-photo-pos: 54% 50%
}

@media(min-width:768px)and (orientation:landscape) {
    .bcc-stage-grid {
        --bcc-photo-pos: 50% 55%
    }
}

.bcc-grid-final {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.bcc-grid-final img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--bcc-photo-pos)
}

.bcc-grid-tiles {
    display: none
}

.bcc-grid-plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 24px 6svh
}

.bcc-grid-scrim {
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(to top, #000000a8, #2a2a2a00);
    pointer-events: none
}

.bcc-grid-title,
.bcc-grid-sub {
    position: relative
}

.bcc-grid-title {
    margin-left: -.06em;
    font-size: var(--text-headline-xl);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--color-white, #fff)
}

.bcc-grid-meet {
    display: block;
    margin: 0 0 .22em .06em;
    font-family: Dahlia Blues, cursive;
    font-size: .34em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    transform: rotate(-2deg);
    transform-origin: left bottom;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35)
}

.bcc-grid-tm {
    --bcc-tm: calc(5.6px + .283em);
    display: inline-block;
    width: var(--bcc-tm);
    height: var(--bcc-tm);
    margin-left: .105em;
    vertical-align: .305em
}

.bcc-grid-sub {
    font-size: var(--text-heading-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-grey-5, #f0eeeb)
}

@media(min-width:768px) {
    .bcc-grid-plate {
        padding: 0 clamp(24px, 4.375vw, 63px) 10svh
    }
}

.bcc-x .bcc-grid-tiles {
    --bcc-lt: clamp(0, calc((var(--bcc-p, 0) - var(--bcc-lock-a)) / var(--bcc-lock-d)), 1);
    --bcc-un: calc(1 - var(--bcc-lt));
    --bcc-grad: calc(var(--bcc-un) * 16px);
    --bcc-gw: calc(100cqw - 2 * var(--bcc-mx));
    --bcc-gh: calc(100cqh - 2 * var(--bcc-my));
    --bcc-tw: calc((var(--bcc-gw) - (var(--bcc-cols) - 1) * var(--bcc-ggx)) / var(--bcc-cols));
    --bcc-th: calc((var(--bcc-gh) - (var(--bcc-rows) - 1) * var(--bcc-ggy)) / var(--bcc-rows));
    display: block;
    position: absolute;
    inset: 0
}

.bcc-x .bcc-grid-tiles-desktop {
    --bcc-cols: 5;
    --bcc-rows: 3;
    --bcc-mx: calc(var(--bcc-un) * 1.6cqw);
    --bcc-my: calc(var(--bcc-un) * 4.22cqh);
    --bcc-ggx: calc(var(--bcc-un) * 1.39cqw);
    --bcc-ggy: calc(var(--bcc-un) * 2cqh)
}

.bcc-x .bcc-grid-tiles-mobile {
    --bcc-cols: 2;
    --bcc-rows: 4;
    --bcc-mx: calc(var(--bcc-un) * 7.63cqw);
    --bcc-my: calc(var(--bcc-un) * 4.23cqh);
    --bcc-ggx: calc(var(--bcc-un) * 3.16cqw);
    --bcc-ggy: calc(var(--bcc-un) * 1.44cqh)
}

@media(max-width:767.9px),
(orientation:portrait) {
    .bcc-x .bcc-grid-tiles-desktop {
        display: none
    }
}

@media(min-width:768px)and (orientation:landscape) {
    .bcc-x .bcc-grid-tiles-mobile {
        display: none
    }
}

.bcc-x .bcc-grid-tile {
    --w: clamp(0, calc((var(--bcc-p, 0) - var(--ws, 0)) / var(--bcc-tile-wd)), 1);
    position: absolute;
    top: calc(var(--bcc-my) + var(--r) * (var(--bcc-th) + var(--bcc-ggy)));
    left: calc(var(--bcc-mx) + var(--c) * (var(--bcc-tw) + var(--bcc-ggx)));
    width: var(--bcc-tw);
    height: var(--bcc-th);
    overflow: hidden;
    opacity: var(--w);
    transform: translateY(calc((1 - var(--w)) * 18px))
}

.bcc-x .bcc-grid-tile img {
    display: block;
    position: absolute;
    top: calc(-1 * var(--r) * (var(--bcc-th) + var(--bcc-ggy)));
    left: calc(-1 * var(--c) * (var(--bcc-tw) + var(--bcc-ggx)));
    width: var(--bcc-gw);
    height: var(--bcc-gh);
    max-width: none;
    object-fit: cover;
    object-position: var(--bcc-photo-pos)
}

.bcc-x .bcc-grid-tile-tl {
    border-top-left-radius: var(--bcc-grad)
}

.bcc-x .bcc-grid-tile-tr {
    border-top-right-radius: var(--bcc-grad)
}

.bcc-x .bcc-grid-tile-bl {
    border-bottom-left-radius: var(--bcc-grad)
}

.bcc-x .bcc-grid-tile-br {
    border-bottom-right-radius: var(--bcc-grad)
}

.bcc-x .bcc-grid-final {
    opacity: clamp(0, calc((var(--bcc-p, 0) - var(--bcc-final-a)) / var(--bcc-final-d)), 1)
}

.bcc-x .bcc-grid-scrim {
    opacity: clamp(0, calc((var(--bcc-p, 0) - var(--bcc-title-a)) / var(--bcc-title-d)), 1)
}

.bcc-x .bcc-grid-title,
.bcc-x .bcc-grid-sub {
    --w: clamp(0, calc((var(--bcc-p, 0) - var(--ws, 0)) / var(--bcc-title-d)), 1);
    opacity: var(--w);
    transform: translateY(calc((1 - var(--w)) * 28px))
}

.bcc-nf {
    --spx: var(--sp, 0);
    --nf-w: 176vw;
    --nf-h: calc(var(--nf-w) * 9 / 16);
    --nf-gutter: 24px;
    position: relative
}

.bcc-nf-screen {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    overflow: hidden;
    contain: layout paint;
    background: #0d1420
}

.bcc-nf-stage {
    position: absolute;
    inset: 0
}

.bcc-nf-layer {
    position: absolute;
    inset: 0;
    background: var(--sky)
}

.bcc-nf-fit {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: block;
    width: max(100vw, calc(100svh * 16 / 9));
    height: max(100svh, 56.25vw);
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover
}

@media(max-width:767px)and (orientation:portrait) {
    .bcc-nf-layer {
        background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 88%, #000) 0%, var(--sky) calc(100% - var(--nf-h)))
    }
    .bcc-nf-fit {
        top: auto;
        bottom: 0;
        translate: -50% 0;
        width: var(--nf-w);
        height: var(--nf-h);
        min-width: 0;
        min-height: 0
    }
}

.bcc-nf-glow {
    pointer-events: none
}

.bcc-nf-glow-dot {
    position: absolute;
    top: 82%;
    left: 58%;
    translate: -50% -50%;
    width: 17%;
    aspect-ratio: 3 / 2;
    background: radial-gradient(closest-side, rgb(255 198 116 / 30%), rgb(255 176 92 / 9%) 45%, transparent 72%);
    mix-blend-mode: screen
}

.bcc-nf-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(6 11 20 / 58%) 0%, rgb(6 11 20 / 30%) 42%, transparent 72%);
    pointer-events: none
}

.bcc-nf-dim {
    position: absolute;
    inset: 0;
    background: #05080e;
    opacity: 0;
    pointer-events: none
}

.bcc-nf-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
    max-width: calc(1200px + 2 * var(--nf-gutter));
    padding: 0 var(--nf-gutter);
    margin-bottom: 18svh;
    color: var(--color-white);
    text-align: center
}

.bcc-nf-head,
.bcc-nf-payoff-head {
    margin: 0;
    font-size: var(--text-headline-md);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-wrap: balance
}

.bcc-nf-line {
    display: block
}

.bcc-nf-word {
    display: inline-block
}

.bcc-nf-payoff {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%
}

.bcc-nf-payoff-sub {
    max-width: 46ch;
    margin: 0;
    font-size: var(--text-body-lg);
    font-weight: 500;
    line-height: 1.4;
    opacity: .85;
    text-wrap: balance
}

.bcc-nf-btn {
    width: 100%
}

.bcc-nf .bcc-nf-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px
}

@media(min-width:768px) {
    .bcc-nf-copy {
        --nf-gutter: clamp(28px, 4.86vw, 70px);
        gap: 56px;
        margin-bottom: 12svh
    }
    .bcc-nf-payoff {
        gap: 32px
    }
    .bcc-nf-head,
    .bcc-nf-payoff-head {
        font-size: var(--text-headline-lg)
    }
    .bcc-nf-payoff-sub {
        max-width: 615px;
        font-size: var(--text-heading-sm)
    }
    .bcc-nf-btn {
        width: 324px
    }
}

.bcc-x .bcc-nf {
    height: 340svh
}

.bcc-x .bcc-nf-screen {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0
}

@media(min-width:768px) {
    .bcc-x .bcc-nf {
        height: 320svh
    }
}

.bcc-x .bcc-nf :is(.bcc-nf-layer, .bcc-nf-word, .bcc-nf-payoff-head, .bcc-nf-payoff-sub) {
    --w: clamp(0, calc((var(--spx) - var(--ws, 0)) / var(--wd, .1)), 1);
    --wo: calc(var(--w) * (2 - var(--w)))
}

.bcc-x .bcc-nf-layer[data-nf-fade] {
    opacity: var(--w)
}

.bcc-x .bcc-nf-word {
    opacity: var(--w);
    filter: blur(calc((1 - var(--w)) * 6px));
    transform: translateY(calc((1 - var(--wo)) * 14px))
}

.bcc-x .bcc-nf-head {
    --out: clamp(0, calc((var(--spx) - .63) / .07), 1);
    opacity: calc(1 - var(--out));
    filter: blur(calc(var(--out) * 5px))
}

.bcc-x .bcc-nf-payoff-head {
    --ws: .65;
    --wd: .075;
    opacity: var(--w);
    filter: blur(calc((1 - var(--w)) * 6px));
    transform: translateY(calc((1 - var(--wo)) * 16px))
}

.bcc-x .bcc-nf-payoff-sub {
    --ws: .74;
    --wd: .1;
    opacity: calc(var(--w) * .85);
    transform: translateY(calc((1 - var(--wo)) * 12px))
}

.bcc-x .bcc-nf-btn {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--bcc-ease-settle), transform .5s var(--bcc-ease-settle), background-color .15s ease
}

.bcc-x .bcc-nf[data-bcc-cued] .bcc-nf-btn {
    opacity: 1;
    transform: none
}

.bcc-x .bcc-nf:not([data-bcc-cued]) .bcc-nf-btn {
    visibility: hidden;
    pointer-events: none
}

.bcc-x .bcc-nf-copy {
    display: grid;
    place-items: center;
    gap: 0
}

.bcc-x .bcc-nf-copy>* {
    grid-area: 1 / 1
}

.bcc-x .bcc-nf-dim {
    --dim-in: clamp(0, calc((var(--spx) - .32) / .12), 1);
    --dim-out: clamp(0, calc((var(--spx) - .5) / .16), 1);
    opacity: calc(var(--dim-in) * .3 - var(--dim-out) * .23)
}

.bcc-x .bcc-nf-glow {
    --g: clamp(0, calc((var(--spx) - .4) / .28), 1);
    opacity: var(--g)
}

.bcc-pricing {
    position: relative;
    min-height: 100svh;
    min-height: 100dvh
}

.bcc-say {
    --say-hfs: min(52px, 13.2vw);
    --say-head-h: calc(1.76 * var(--say-hfs) + 29px);
    --say-step: 18px;
    position: relative;
    overflow-x: clip;
    background-color: var(--color-green-90);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--color-green-100) 15%, var(--color-green-90)) 0 1.5px, transparent 1.6px);
    background-size: var(--bcc-pitch) var(--bcc-pitch)
}

@media(min-height:820px) {
    .bcc-say {
        --say-step: clamp(46px, calc((100svh - 470px)/8), 52px)
    }
}

@media(max-width:1023.9px)and (max-height:600px)and (orientation:landscape) {
    .bcc-say {
        --say-hfs: 42px
    }
}

.bcc-say-screen {
    display: flex;
    align-items: center;
    padding: 53px var(--bcc-gutter) 40px
}

.bcc-say-inner {
    width: 100%;
    max-width: 420px;
    margin-inline: auto
}

.bcc-say-head {
    margin: 0 0 29px;
    font-size: var(--say-hfs);
    font-weight: 600;
    line-height: .88;
    letter-spacing: -.03em;
    color: var(--color-white)
}

.bcc-say-h1,
.bcc-say-h2 {
    display: inline-block
}

.bcc-say-deck {
    position: relative;
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none
}

.bcc-say-runway {
    height: 0
}

.bcc-say-card {
    position: relative;
    z-index: calc(var(--i) + 1);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 12px 24px #00000040
}

.bcc-say-photo {
    aspect-ratio: 9 / 5;
    overflow: hidden;
    background: var(--color-green-100)
}

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

.bcc-say-quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 20px 24px
}

.bcc-say-stars {
    display: block;
    width: 113px;
    height: 21px;
    color: var(--color-yellow-20)
}

.bcc-say-stars svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor
}

.bcc-say-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    margin: 0;
    font-size: var(--text-body-md);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-grey-100)
}

.bcc-say-by {
    display: flex;
    align-items: center;
    gap: 7px
}

.bcc-say-g {
    display: block;
    flex: none;
    width: 18px;
    height: 18px
}

.bcc-say-name {
    font-size: var(--text-body-lg);
    font-style: normal;
    font-weight: 600;
    color: var(--color-grey-100)
}

@media(min-width:1024px) {
    .bcc-say-screen {
        --pad: clamp(24px, 4svh, 64px);
        justify-content: center;
        min-height: 100svh;
        padding-block: var(--pad);
        overflow: hidden
    }
    .bcc-say-inner {
        container-type: inline-size;
        position: relative;
        max-width: min(var(--bcc-column), calc((100svh - 2 * var(--pad)) * 1.6157));
        aspect-ratio: 1320 / 817
    }
    .bcc-say-head {
        margin: 0;
        font-size: var(--text-headline-lg);
        line-height: .95
    }
    .bcc-say-h1,
    .bcc-say-h2 {
        position: absolute;
        top: 0;
        left: 0
    }
    .bcc-say-h2 {
        top: calc(8.32cqw * 817 / 1320);
        width: 100%;
        text-align: right
    }
    .bcc-say-deck {
        container-type: inline-size;
        position: absolute;
        top: 19.71%;
        left: 2.73%;
        display: block;
        width: 98.48%;
        height: 80.78%
    }
    .bcc-say-card {
        position: absolute;
        top: calc(var(--cy) * 1%);
        left: calc(var(--cx) * 1%);
        z-index: calc(20 - var(--i));
        width: calc(var(--cw) * 1%)
    }
    .bcc-say-quote {
        padding: 20px 22px
    }
}

.bcc-x .bcc-say-card {
    --wo: calc(var(--w) * (2 - var(--w)));
    --xo: calc(var(--x, 0) * var(--x, 0) * (3 - 2 * var(--x, 0)));
    --fe: calc(var(--f, 0) * var(--f, 0));
    translate: calc((1 - var(--wo)) * var(--dx) * 1cqw + var(--xo) * var(--gx, 0) * 1px + var(--fe) * (var(--dx) - 62) * .35 * 1cqw) calc((1 - var(--wo)) * var(--dy) * 1cqw + var(--xo) * var(--gy, 0) * 1px + var(--drift, 0px) - var(--fe) * 100svh);
    rotate: calc((1 - var(--wo)) * var(--r0) * 1deg + var(--xo) * var(--r1) * 1deg + var(--fe) * var(--jx) * .25deg);
    scale: calc(.82 + .18 * var(--wo) - .14 * var(--xo) - .05 * var(--fe));
    opacity: clamp(0, calc(var(--w) / .3), 1);
    box-shadow: 0 calc((12 - 8 * var(--xo)) * 1px) calc((24 - 14 * var(--xo)) * 1px) rgba(0, 0, 0, calc(.25 + .25 * var(--xo)))
}

.bcc-x .bcc-say-photo {
    filter: blur(calc((1 - var(--w)) * 7px))
}

.bcc-x .bcc-say[data-bcc-live] .bcc-say-card {
    will-change: translate, rotate, scale
}

@media(max-width:1023.9px) {
    .bcc-x .bcc-say-card {
        position: sticky;
        top: calc(var(--say-head-h) + 28px + var(--i) * var(--say-step))
    }
    .bcc-x .bcc-say-deck:after {
        content: "";
        display: block;
        height: 55svh
    }
    .bcc-x .bcc-say-runway {
        height: 0
    }
    .bcc-x .bcc-say-head {
        --say-head-away: clamp(0, calc((var(--sp, 0) - .78) / .1), 1);
        position: sticky;
        top: 0;
        z-index: 20;
        margin-bottom: 44px;
        padding-block: 20px 9px;
        translate: 0 calc(var(--say-head-away) * -120%)
    }
    .bcc-x .bcc-say-head:before,
    .bcc-x .bcc-say-head:after {
        content: "";
        position: absolute;
        left: 50%;
        z-index: -1;
        width: 100vw;
        transform: translate(-50%);
        pointer-events: none
    }
    .bcc-x .bcc-say-head:before {
        top: 0;
        bottom: 0;
        background: var(--color-green-90)
    }
    .bcc-x .bcc-say-head:after {
        top: 100%;
        height: 40px;
        background: linear-gradient(var(--color-green-90), transparent)
    }
    .bcc-x .bcc-say-card {
        --w: clamp(0, calc((var(--sp, 0) - .05 - .056 * var(--i)) / .06), 1);
        translate: calc(var(--jx) * .33px) calc((1 - var(--wo)) * 28px);
        rotate: calc(var(--r1) * 1deg);
        scale: calc(.96 + .04 * var(--wo))
    }
}

@media(min-width:1024px) {
    .bcc-x .bcc-say {
        height: 300svh
    }
    .bcc-x .bcc-say-screen {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 0;
        border-top: var(--bcc-nav-h) solid transparent
    }
    .bcc-x .bcc-say-card {
        --w: clamp(0, calc((var(--sp, 0) - var(--ws)) / var(--wd)), 1);
        --x: clamp(0, calc((var(--sp, 0) - var(--xs)) / var(--xd)), 1);
        --f: clamp(0, calc((var(--sp, 0) - .9) / .1), 1)
    }
    .bcc-x :is(.bcc-say-h1, .bcc-say-h2) {
        --x: clamp(0, calc((var(--sp, 0) - .92) / .08), 1);
        --xe: calc(var(--x) * var(--x));
        z-index: 24;
        translate: calc(var(--xe) * 62 * var(--hd) * 1vw) 0
    }
    .bcc-x .bcc-say-photo {
        --drift: calc(clamp(0, calc((var(--sp, 0) - .44) / .3), 1)*-7px)
    }
}

.bcc-x .bcc-say-head .bcc-say-h1 {
    transform: translate(-12vw);
    transition: transform .8s var(--bcc-ease-settle)
}

.bcc-x .bcc-say-head .bcc-say-h2 {
    transform: translate(9vw);
    transition: transform .8s var(--bcc-ease-settle) .12s
}

.bcc-x .bcc-say-head.bcc-in :is(.bcc-say-h1, .bcc-say-h2) {
    transform: none
}

.bcc-say-h1 {
    --hd: -1
}

.bcc-say-h2 {
    --hd: 1
}

.bcc-word {
    display: inline-block
}

.bcc-uphrase {
    position: relative
}

.bcc-useg {
    position: relative;
    display: inline-block
}

.bcc-stroke {
    position: absolute;
    left: 0;
    bottom: -.05em;
    z-index: -1;
    width: 100%;
    height: .13em
}

.bcc-stroke-whole {
    display: none
}

@media(min-width:768px) {
    .bcc-uphrase {
        display: inline-block
    }
    .bcc-br-m,
    .bcc-stroke-seg1,
    .bcc-stroke-seg2 {
        display: none
    }
    .bcc-stroke-whole {
        display: block
    }
}

.bcc-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 36px;
    padding: 0;
    list-style: none
}

@media(min-width:768px) {
    .bcc-chips {
        flex-direction: row;
        align-items: center;
        margin-top: 30px
    }
}

.bcc-chip {
    position: relative;
    padding: 15px 0 0 15px
}

.bcc-chip-pill {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--color-white, #fff);
    font-size: var(--text-body-lg);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--chip-ink)
}

.bcc-chip-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 31px
}

.bcc-chip-icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.bcc-chip-disc {
    fill: var(--chip-tint);
    transform-origin: 50% 50%
}

.bcc-chip-zig,
.bcc-chip-tip {
    stroke: var(--chip-ink)
}

.bcc-witness {
    --night: 0;
    --bcc-night-dot: color-mix(in srgb, var(--color-white) 6%, var(--color-green-90));
    position: relative
}

.bcc-witness-stop {
    display: none
}

.bcc-x .bcc-witness-stop {
    position: absolute;
    top: calc((var(--wit-cue) + .01) * (var(--wit-h) - 100svh));
    left: 0;
    display: block;
    width: 1px;
    height: 1px;
    scroll-snap-align: start
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) {
    --night: 1
}

.bcc-witness-scene {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    min-height: 100dvh;
    background-color: transparent
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) .bcc-witness-scene {
    background-color: var(--color-green-90)
}

.bcc-witness-scene:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: var(--night);
    background-image: radial-gradient(circle at center, var(--bcc-night-dot) 0 1.5px, transparent 1.6px);
    background-size: var(--bcc-pitch, 11px) var(--bcc-pitch, 11px)
}

.bcc-x .bcc-witness {
    --wit-h: 260svh
}

@media(min-width:768px) {
    .bcc-x .bcc-witness {
        --wit-h: 220svh
    }
}

.bcc-x .bcc-witness-catch {
    height: var(--wit-h)
}

.bcc-x .bcc-witness-scene {
    position: sticky;
    top: 0;
    height: 100svh;
    height: 100dvh;
    min-height: 0
}

.bcc-witness-frame {
    width: 100%;
    margin-block: auto;
    padding-inline: 28px
}

.bcc-x .bcc-witness-clear {
    flex: 0 1 var(--bcc-nav-h);
    min-height: 0;
    transition: flex-basis .35s var(--bcc-ease-settle)
}

.bcc-x :is(.bcc-witness-frame, .bcc-witness-press) {
    flex-shrink: 0
}

@media(min-width:768px) {
    .bcc-x .bcc-witness-frame {
        flex: 1 1 0;
        min-height: 0
    }
    .bcc-x .bcc-witness-card {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 920 / 558;
        justify-self: center
    }
    .bcc-x .bcc-witness-img img {
        height: 100%;
        object-fit: cover
    }
}

.bcc-witness-card {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: 16px
}

@media(max-width:767.9px) {
    .bcc-witness-frame {
        margin-block: clamp(18px, 3svh, 28px) 0
    }
    .bcc-witness-card {
        width: min(100%, 43svh);
        margin-inline: auto
    }
    .bcc-witness-copy {
        margin-top: 24px
    }
    .bcc-witness-press {
        margin-top: auto;
        padding: clamp(14px, 2svh, 24px) 0 max(28px, calc(env(safe-area-inset-bottom, 0px) + 24px))
    }
}

.bcc-witness-img {
    grid-area: 1 / 1
}

.bcc-witness-img img {
    display: block;
    width: 100%;
    height: auto
}

.bcc-witness-img-day,
.bcc-witness-copy-day {
    opacity: calc(1 - var(--night))
}

.bcc-witness-img-night,
.bcc-witness-copy-night {
    opacity: var(--night);
    visibility: hidden
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) :is(.bcc-witness-img-day, .bcc-witness-copy-day) {
    visibility: hidden
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) :is(.bcc-witness-img-night, .bcc-witness-copy-night) {
    visibility: visible
}

.bcc-witness-copy {
    display: grid;
    margin-top: 33px
}

.bcc-witness-copy>div {
    display: flex;
    flex-direction: column;
    gap: 13px;
    grid-area: 1 / 1
}

.bcc-witness-head {
    font-size: var(--text-heading-md);
    font-weight: 600;
    line-height: 1.2
}

.bcc-witness-head-day {
    color: var(--color-green-90)
}

.bcc-witness-body {
    font-size: var(--text-body-lg);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .2px
}

.bcc-witness-body-day {
    color: var(--color-grey-80)
}

.bcc-witness-head-night,
.bcc-witness-body-night {
    color: var(--color-white)
}

.bcc-witness-press {
    padding: clamp(20px, 3svh, 36px) 10px clamp(18px, 3svh, 40px);
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    text-align: center;
    overflow-x: clip
}

.bcc-witness-press-label {
    font-weight: 500;
    color: var(--color-grey-60)
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) .bcc-witness-press-label {
    color: var(--color-grey-20)
}

.bcc-witness-press-row {
    --ph: clamp(44px, 8vw, 84px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none
}

.bcc-witness-press-row li {
    flex: none
}

.bcc-witness-press-track>.bcc-witness-press-dupe {
    display: none
}

.bcc-witness-press-row img {
    display: block;
    width: calc(2 * var(--ph));
    max-width: none;
    height: var(--ph);
    margin-inline: calc(var(--il, 0) * -2 * var(--ph)) calc(var(--ir, 0) * -2 * var(--ph));
    object-fit: contain;
    opacity: .72;
    filter: invert(var(--night))
}

@media(max-width:767.9px) {
    .bcc-witness-press-row {
        --ph: clamp(56px, 18vw, 74px);
        --pg: clamp(30px, 10vw, 52px)
    }
    .bcc-witness-press {
        contain: layout
    }
    .bcc-x .bcc-witness-press-window {
        -webkit-mask: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent) center / 100% 100% no-repeat;
        mask: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent) center / 100% 100% no-repeat
    }
    .bcc-x .bcc-witness-press-track {
        display: flex;
        width: max-content;
        animation: bcc-press-drift 26s linear infinite;
        animation-play-state: paused
    }
    .bcc-x [data-bcc-live][data-bcc-cued] .bcc-witness-press-track {
        animation-play-state: running
    }
    .bcc-x .bcc-witness-press-row {
        flex: none;
        gap: var(--pg);
        padding-right: var(--pg)
    }
    .bcc-x .bcc-witness-press-track>.bcc-witness-press-dupe {
        display: flex
    }
    .bcc:not(.bcc-x) .bcc-witness-press-row {
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100% - min(62vw, 240px))/2);
        padding-inline: calc((100% - min(62vw, 240px))/2);
        scrollbar-width: none
    }
    .bcc:not(.bcc-x) .bcc-witness-press-row::-webkit-scrollbar {
        display: none
    }
    .bcc:not(.bcc-x) .bcc-witness-press-row li {
        display: flex;
        flex: 0 0 min(62vw, 240px);
        justify-content: center;
        scroll-snap-align: center
    }
}

@keyframes bcc-press-drift {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(calc(-100% / 3))
    }
}

@media(min-width:768px) {
    .bcc-witness-frame {
        max-width: 1440px;
        margin-inline: auto;
        padding-inline: clamp(28px, 3.47vw, 50px)
    }
    .bcc-witness-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
        gap: clamp(22px, 2.85vw, 41px);
        align-items: center
    }
    .bcc-witness-copy {
        margin-top: 0
    }
    .bcc-witness-head {
        font-size: var(--text-heading-lg)
    }
    .bcc-witness-body-day {
        max-width: 374px
    }
    .bcc-witness-body-night {
        max-width: 350px
    }
    .bcc-witness-press {
        padding-inline: clamp(28px, 3.47vw, 50px)
    }
}

.bcc-witness-toggle {
    position: absolute;
    top: 20px;
    right: 17px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-grey-5);
    cursor: pointer
}

.bcc-witness-switch {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.bcc-witness-toggle:has(.bcc-witness-switch:focus-visible) {
    outline: 2px solid var(--color-green-90);
    outline-offset: 3px
}

.bcc-witness-toggle-label {
    font-size: var(--text-body-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-grey-100);
    text-transform: uppercase
}

.bcc-witness-track {
    position: relative;
    width: 80px;
    height: 34px;
    border-radius: 17px;
    background: var(--color-green-60)
}

.bcc-witness:has(.bcc-witness-switch:not(:checked)) .bcc-witness-track {
    background: var(--color-orange-90)
}

.bcc-witness-word {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-body-lg);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase
}

.bcc-witness-word-on {
    left: 14px;
    color: var(--color-green-90);
    opacity: calc(1 - var(--night))
}

.bcc-witness-word-off {
    left: 37px;
    color: var(--color-orange-5);
    opacity: var(--night)
}

.bcc-witness-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-white);
    transform: translate(calc((1 - var(--night)) * 46px))
}

.bcc-x .bcc-witness :is(.bcc-witness-toggle, .bcc-witness-head, .bcc-witness-body, .bcc-witness-press) {
    opacity: 0;
    transition: opacity .55s var(--bcc-ease-settle), transform .55s var(--bcc-ease-settle);
    transition-delay: var(--cd, 0s)
}

.bcc-x .bcc-witness :is(.bcc-witness-head, .bcc-witness-body, .bcc-witness-press) {
    transform: translateY(16px)
}

.bcc-x .bcc-witness .bcc-witness-toggle {
    transform: scale(.85)
}

.bcc-x .bcc-witness-head {
    --cd: .1s
}

.bcc-x .bcc-witness-body {
    --cd: .22s
}

.bcc-x .bcc-witness-press {
    --cd: .34s
}

.bcc-x [data-bcc-cued] :is(.bcc-witness-toggle, .bcc-witness-head, .bcc-witness-body, .bcc-witness-press) {
    opacity: 1;
    transform: none
}

.bcc-x :is(.bcc-witness-img-day, .bcc-witness-copy-day) {
    transition: opacity .5s var(--bcc-ease-settle), visibility 0s linear calc(var(--night) * .5s)
}

.bcc-x :is(.bcc-witness-img-night, .bcc-witness-copy-night) {
    transition: opacity .5s var(--bcc-ease-settle), visibility 0s linear calc((1 - var(--night)) * .5s)
}

.bcc-x .bcc-witness-scene:before {
    transition: opacity .5s var(--bcc-ease-settle)
}

.bcc-x .bcc-witness-scene {
    transition: background-color .5s var(--bcc-ease-settle)
}

.bcc-x .bcc-witness-track {
    transition: background-color .4s var(--bcc-ease-settle)
}

.bcc-x .bcc-witness-knob {
    transition: transform .45s var(--bcc-ease-settle)
}

.bcc-x .bcc-witness-word {
    transition: opacity .3s ease
}

.bcc-x .bcc-witness-press-row img {
    transition: filter .5s var(--bcc-ease-settle)
}

.bcc-x .bcc-witness-press-label {
    transition: color .5s var(--bcc-ease-settle)
}