/* Bardsen storefront */
:root {
    scroll-behavior: smooth;
    --bds-ink: #14201d;
    --bds-forest: #1c3932;
    --bds-green: #69e68a;
    --bds-green-dark: #2fa75d;
    --bds-pink: #ef9acb;
    --bds-gold: #f2ca77;
}

/* Product detail layout */
.product-show {
    width: min(100% - 2rem, 1180px);
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
    color: hsl(var(--color-base));
}

.product-show__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    color: hsl(var(--color-muted));
    font-size: 0.88rem;
}

.product-show__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    overflow: hidden;
    border: 1px solid hsl(var(--color-neutral) / 0.7);
    border-radius: 1.8rem;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 24px 70px rgb(7 23 17 / 0.12);
}

.product-show__art {
    position: relative;
    display: flex;
    min-height: 510px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background:
        radial-gradient(ellipse at 50% 35%, hsl(var(--color-primary) / 0.20), transparent 55%),
        linear-gradient(145deg, hsl(var(--color-background-secondary)), hsl(var(--color-background)));
}

.product-show__art::before,
.product-show__art::after {
    position: absolute;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: hsl(var(--color-primary) / 0.12);
    filter: blur(60px);
    content: "";
}

.product-show__art::before {
    top: -8rem;
    left: -6rem;
}

.product-show__art::after {
    right: -8rem;
    bottom: -8rem;
    background: hsl(var(--color-secondary) / 0.12);
}

.product-show__art > img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 420px;
    border-radius: 1.2rem;
    object-fit: contain;
}

.product-show__voxel-art {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    filter: drop-shadow(0 28px 28px rgb(11 35 23 / 0.2));
}

.product-show__voxel-art svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.product-show__voxel-float {
    transform-origin: center;
    animation: product-voxel-float 5s ease-in-out infinite;
}

@keyframes product-voxel-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.product-show__details {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.product-show__purchase {
    margin-block: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid hsl(var(--color-neutral) / 0.75);
}

@media (max-width: 820px) {
    .product-show {
        width: min(100% - 1.25rem, 680px);
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .product-show__hero {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 1.35rem;
    }

    .product-show__art {
        min-height: 340px;
    }
}

/* Minimal product detail page */
.product-detail {
    width: min(100% - 2rem, 1120px);
    margin: 0 auto;
    padding: clamp(2rem, 7vw, 5rem) 0;
    color: hsl(var(--color-base));
}

.product-detail__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: clamp(3rem, 8vw, 6rem);
    color: hsl(var(--color-muted));
    font-size: 0.88rem;
}

.product-detail__breadcrumbs a {
    transition: color 160ms ease;
}

.product-detail__breadcrumbs a:hover {
    color: hsl(var(--color-primary));
}

.product-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
    align-items: center;
    gap: clamp(2.5rem, 8vw, 7rem);
}

.product-detail__copy {
    max-width: 670px;
}

.product-detail__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    color: var(--bds-green-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.product-detail__eyebrow::before {
    width: 1.8rem;
    height: 2px;
    background: var(--bds-green-dark);
    content: "";
}

.product-detail__title {
    margin: 0;
    font-size: clamp(3.3rem, 8vw, 6.5rem);
    font-weight: 850;
    letter-spacing: -0.028em;
    line-height: 0.98;
}

.product-detail__description {
    max-width: 540px;
    margin-top: 1.5rem;
    color: hsl(var(--color-base) / 0.72);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.8;
}

.product-detail__description p {
    margin: 0;
}

.product-detail__image {
    display: block;
    width: min(100%, 420px);
    max-height: 260px;
    margin-bottom: 2rem;
    object-fit: contain;
    object-position: left center;
}

.product-detail__purchase {
    padding: 1.2rem 0 1.2rem clamp(1.5rem, 4vw, 3rem);
    border-left: 1px solid hsl(var(--color-neutral) / 0.8);
}

.product-detail__animation {
    width: min(100%, 300px);
    margin: 0 auto 1.5rem;
}

.product-detail__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}

.product-detail__price span {
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1;
}

.product-detail__price small {
    color: hsl(var(--color-muted));
    font-size: 0.95rem;
}

.product-detail__cta {
    display: block;
    width: 100%;
}

.product-detail__unavailable {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    background: hsl(var(--color-neutral) / 0.4);
    color: hsl(var(--color-muted));
    cursor: not-allowed;
    font-weight: 700;
}

.bds-checkout-success {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.bds-checkout-success__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgb(105 230 138 / 0.25);
    border-radius: 1rem;
    background: linear-gradient(110deg, rgb(105 230 138 / 0.10), hsl(var(--color-background-secondary)) 72%);
}

.bds-checkout-success__check {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(105 230 138 / 0.16);
    color: var(--bds-green-dark);
    font-size: 1.2rem;
    font-weight: 800;
}

.bds-checkout-success__copy {
    flex: 1;
    min-width: 0;
}

.bds-checkout-success__eyebrow {
    margin: 0 0 0.2rem;
    color: var(--bds-green-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bds-checkout-success__copy h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.bds-checkout-success__copy > p:last-child {
    margin: 0.18rem 0 0;
    color: hsl(var(--color-muted));
    font-size: 0.86rem;
}

.bds-checkout-success__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.7rem;
    background: var(--bds-green);
    color: var(--bds-ink);
    font-size: 0.9rem;
    font-weight: 800;
    transition: transform 150ms ease, background 150ms ease;
}

.bds-checkout-success__button:hover {
    transform: translateY(-1px);
    background: #82efa0;
}

@media (max-width: 760px) {
    .product-detail {
        width: min(100% - 1.5rem, 620px);
        padding: 1.5rem 0 3rem;
    }

    .product-detail__breadcrumbs {
        margin-bottom: 3rem;
    }

    .product-detail__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .product-detail__purchase {
        padding: 1.5rem 0 0;
        border-top: 1px solid hsl(var(--color-neutral) / 0.8);
        border-left: 0;
    }

    .bds-checkout-success__item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bds-checkout-success__copy {
        flex-basis: calc(100% - 3.6rem);
    }

    .bds-checkout-success__button {
        width: 100%;
        margin-left: 3.6rem;
    }
}

/* Minecraft plan browsing */
.mc-shop {
    width: min(100% - 2rem, 1180px);
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3.75rem) 0 5rem;
}

.mc-shop__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 2rem;
    background: radial-gradient(ellipse at 76% 45%, #315b46 0, transparent 38%), linear-gradient(125deg, #14201d 0%, #1b3931 58%, #264c3b 100%);
    color: #f4fff5;
    box-shadow: 0 28px 75px rgb(11 32 22 / .2);
}

.mc-shop__hero-copy {
    z-index: 1;
    align-self: center;
    padding: clamp(2rem, 6vw, 4.75rem);
}

.mc-shop__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--bds-green);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.mc-shop__eyebrow::before {
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    content: "";
}

.mc-shop__hero h1 {
    margin: 1rem 0 1.1rem;
    color: #f5fff6;
    font-size: clamp(2.8rem, 6vw, 5.3rem);
    font-weight: 850;
    letter-spacing: -0.028em;
    line-height: .98;
}

.mc-shop__hero h1 span { color: var(--bds-green); }
.mc-shop__hero-copy > p { max-width: 29rem; margin: 0; color: rgb(240 255 244 / .74); font-size: 1.05rem; line-height: 1.7; }
.mc-shop__hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.8rem; }
.mc-shop__primary, .mc-plan__button, .mc-product__button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; border-radius: .8rem; background: var(--bds-green); color: #13231b; font-weight: 850; transition: transform 160ms ease, background 160ms ease; }
.mc-shop__primary { padding: .9rem 1.15rem; }
.mc-shop__primary:hover, .mc-plan__button:hover, .mc-product__button:hover { transform: translateY(-2px); background: #8bf3a2; }
.mc-shop__text-link { display: inline-flex; align-items: center; gap: .45rem; color: inherit; font-size: .9rem; font-weight: 750; text-decoration: none; }
.mc-shop__text-link:hover { color: var(--bds-green); }
.mc-shop__promise { display: flex; align-items: center; gap: .5rem; margin-top: 2.2rem; color: rgb(240 255 244 / .58); font-size: .8rem; }
.mc-shop__promise span { color: var(--bds-gold); }

.mc-shop__scene { position: relative; display: grid; min-height: 360px; place-items: center; overflow: hidden; }
.mc-shop__scene-glow { position: absolute; width: 19rem; height: 19rem; border-radius: 50%; background: rgb(105 230 138 / .15); filter: blur(60px); }
.mc-shop__island { position: relative; z-index: 1; width: min(100%, 410px); filter: drop-shadow(0 25px 25px rgb(2 20 13 / .22)); }
.mc-shop__float { transform-origin: center; animation: mc-island-float 5.4s ease-in-out infinite; }
.mc-shop__spark { position: absolute; z-index: 2; width: .55rem; height: .55rem; border-radius: 2px; background: var(--bds-gold); transform: rotate(45deg); animation: mc-spark 3.3s ease-in-out infinite; }
.mc-shop__spark--one { top: 23%; left: 20%; }
.mc-shop__spark--two { top: 32%; right: 14%; width: .4rem; height: .4rem; background: var(--bds-green); animation-delay: .7s; }
.mc-shop__spark--three { right: 22%; bottom: 23%; width: .35rem; height: .35rem; background: var(--bds-pink); animation-delay: 1.3s; }
.mc-shop__scene-caption { position: absolute; right: 2rem; bottom: 1.5rem; color: rgb(240 255 244 / .53); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }

@keyframes mc-island-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes mc-spark { 0%, 100% { opacity: .45; transform: translateY(0) rotate(45deg) scale(.8); } 50% { opacity: 1; transform: translateY(-7px) rotate(45deg) scale(1.1); } }

.mc-shop__plans { padding-top: clamp(3.25rem, 7vw, 5.5rem); scroll-margin-top: 6rem; }
.mc-shop__section-head, .mc-product__other-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.mc-shop__section-head h2, .mc-product__other-heading h2 { margin: .5rem 0 .35rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 850; letter-spacing: -0.022em; }
.mc-shop__section-head p { margin: 0; color: hsl(var(--color-base) / .62); }
.mc-shop__section-head > a { margin-bottom: .45rem; color: hsl(var(--color-base)); }
.mc-shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.mc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.35rem; border: 1px solid hsl(var(--color-neutral) / .72); border-radius: 1.2rem; background: hsl(var(--color-background-secondary)); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mc-plan:hover { transform: translateY(-4px); border-color: rgb(105 230 138 / .58); box-shadow: 0 18px 38px rgb(18 40 29 / .09); }
.mc-plan--featured { border-color: rgb(105 230 138 / .75); box-shadow: 0 12px 34px rgb(18 40 29 / .08); }
.mc-plan__badge { position: absolute; top: -.7rem; right: 1rem; padding: .28rem .6rem; border-radius: 999px; background: var(--bds-green); color: #13231b; font-size: .65rem; font-weight: 850; letter-spacing: .03em; }
.mc-plan__topline { display: flex; align-items: center; gap: .45rem; color: hsl(var(--color-base) / .58); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.mc-plan__dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--bds-green-dark); box-shadow: 0 0 0 3px rgb(105 230 138 / .14); }
.mc-plan h3 { margin: 1.1rem 0 .35rem; font-size: 1.6rem; font-weight: 850; letter-spacing: -0.018em; }
.mc-plan__description { min-height: 3.1em; margin: 0; color: hsl(var(--color-base) / .62); font-size: .86rem; line-height: 1.55; }
.mc-plan__resources { display: flex; gap: 1.35rem; margin: 1.2rem 0; padding: .9rem 0; border-top: 1px solid hsl(var(--color-neutral) / .62); border-bottom: 1px solid hsl(var(--color-neutral) / .62); }
.mc-plan__resources div { display: flex; flex-direction: column; gap: .16rem; }
.mc-plan__resources strong { font-size: 1.25rem; font-weight: 850; letter-spacing: -0.016em; }
.mc-plan__resources strong small { font-size: .7rem; }
.mc-plan__resources span { color: hsl(var(--color-base) / .58); font-size: .72rem; }
.mc-plan__price { margin-top: auto; padding: .2rem 0 1rem; }
.mc-plan__price strong { font-size: 1.65rem; font-weight: 850; letter-spacing: -0.025em; }
.mc-plan__price span { color: hsl(var(--color-base) / .56); font-size: .78rem; }
.mc-plan__button { width: 100%; min-height: 2.8rem; padding: .7rem .85rem; font-size: .83rem; }
.mc-plan__details { align-self: center; margin-top: .75rem; color: hsl(var(--color-base) / .58); font-size: .76rem; text-decoration: none; }
.mc-plan__details:hover { color: var(--bds-green-dark); text-decoration: underline; }

/* Individual Minecraft plan */
.mc-product { width: min(100% - 2rem, 1160px); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.75rem) 0 5rem; }
.mc-product__hero { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; min-height: 490px; overflow: hidden; border-radius: 2rem; background: radial-gradient(ellipse at 82% 38%, #315b46 0, transparent 39%), linear-gradient(125deg, #14201d 0%, #1b3931 62%, #264c3b 100%); color: #f4fff5; box-shadow: 0 28px 75px rgb(11 32 22 / .19); }
.mc-product__copy { position: relative; z-index: 1; align-self: center; padding: clamp(2rem, 5vw, 4.4rem); }
.mc-product__back { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 2.5rem; color: rgb(240 255 244 / .65); font-size: .82rem; text-decoration: none; }
.mc-product__back:hover { color: var(--bds-green); }
.mc-product__eyebrow { display: block; color: var(--bds-green); font-size: .7rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-product__copy h1 { margin: .5rem 0 .6rem; color: #f5fff6; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 850; letter-spacing: -0.028em; line-height: .98; }
.mc-product__description { max-width: 31rem; margin: 0; color: rgb(240 255 244 / .74); font-size: 1.03rem; line-height: 1.7; }
.mc-product__specs { display: flex; gap: .65rem; margin-top: 1.7rem; }
.mc-product__spec { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .55rem; min-width: 8rem; padding: .7rem .85rem; border: 1px solid rgb(255 255 255 / .13); border-radius: .9rem; background: rgb(255 255 255 / .06); }
.mc-product__spec-icon { grid-row: span 2; color: var(--bds-green); font-size: 1rem; }
.mc-product__spec-icon--gold { color: var(--bds-gold); }
.mc-product__spec strong { color: #fff; font-size: 1rem; }
.mc-product__spec > span:last-child { color: rgb(240 255 244 / .56); font-size: .7rem; }
.mc-product__note { margin: 1rem 0 0; color: rgb(240 255 244 / .52); font-size: .77rem; }
.mc-product__buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
.mc-product__price { display: flex; flex-direction: column; gap: .08rem; }
.mc-product__price strong { color: #fff; font-size: 1.8rem; font-weight: 850; letter-spacing: -0.025em; }
.mc-product__price span { color: rgb(240 255 244 / .55); font-size: .73rem; }
.mc-product__button { min-height: 3rem; padding: .85rem 1.15rem; text-decoration: none; }
.mc-product__soldout { display: inline-flex; align-items: center; min-height: 2.8rem; padding: .7rem 1.1rem; border-radius: .6rem; color: hsl(var(--color-base) / .7); background: hsl(var(--color-neutral) / .45); font-size: .9rem; font-weight: 600; cursor: default; }
.mc-product__art { position: relative; display: grid; min-height: 370px; place-items: center; overflow: hidden; }
.mc-product__art-glow { position: absolute; width: 21rem; height: 21rem; border-radius: 50%; background: rgb(105 230 138 / .16); filter: blur(68px); }
.mc-product__cube { position: relative; z-index: 1; width: min(100%, 390px); filter: drop-shadow(0 26px 28px rgb(4 21 13 / .23)); }
.mc-product__cube-float { transform-origin: center; animation: mc-island-float 5.4s ease-in-out infinite; }
.mc-product__art-caption { position: absolute; right: 2rem; bottom: 1.5rem; color: rgb(240 255 244 / .5); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.mc-product__other-plans { padding-top: 3.5rem; }
.mc-product__other-heading { align-items: end; }
.mc-product__other-heading h2 { margin-bottom: 0; }
.mc-product__other-heading > a { display: inline-flex; gap: .45rem; color: hsl(var(--color-base)); font-size: .86rem; font-weight: 750; text-decoration: none; }
.mc-product__other-heading > a:hover { color: var(--bds-green-dark); }
.mc-product__plan-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.mc-product__plan-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid hsl(var(--color-neutral) / .7); border-radius: .95rem; background: hsl(var(--color-background-secondary)); color: hsl(var(--color-base)); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.mc-product__plan-link:hover { transform: translateY(-2px); border-color: rgb(105 230 138 / .7); }
.mc-product__plan-link > span:first-child { display: flex; flex-direction: column; gap: .18rem; }
.mc-product__plan-link strong { font-size: .94rem; }
.mc-product__plan-link small { color: hsl(var(--color-base) / .55); font-size: .73rem; }
.mc-product__plan-arrow { color: var(--bds-green-dark); }

@media (max-width: 900px) {
    .mc-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mc-shop__hero { grid-template-columns: 1fr .8fr; }
    .mc-shop__scene { min-height: 320px; }
    .mc-product__hero { grid-template-columns: 1fr .78fr; }
    .mc-product__art { min-height: 330px; }
}

@media (max-width: 640px) {
    .mc-shop, .mc-product { width: min(100% - 1.25rem, 560px); padding-top: 1rem; padding-bottom: 3rem; }
    .mc-shop__hero, .mc-product__hero { grid-template-columns: 1fr; border-radius: 1.35rem; }
    .mc-shop__hero-copy, .mc-product__copy { padding: 1.6rem; }
    .mc-shop__hero h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
    .mc-shop__scene { min-height: 250px; margin-top: -1rem; }
    .mc-shop__island { width: min(88%, 320px); }
    .mc-shop__scene-caption { right: 1.2rem; bottom: 1rem; }
    .mc-shop__section-head, .mc-product__other-heading { align-items: flex-start; flex-direction: column; }
    .mc-shop__section-head > a { margin: 0; }
    .mc-shop__grid { grid-template-columns: 1fr; gap: .8rem; }
    .mc-plan { padding: 1.2rem; }
    .mc-plan__description { min-height: auto; }
    .mc-plan__resources { margin: .85rem 0; }
    .mc-product__copy h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
    .mc-product__back { margin-bottom: 1.8rem; }
    .mc-product__art { min-height: 250px; margin-top: -1.2rem; }
    .mc-product__cube { width: min(86%, 300px); }
    .mc-product__art-caption { right: 1.2rem; bottom: .8rem; }
    .mc-product__buy-row { gap: .9rem; }
    .mc-product__button { flex: 1; }
    .mc-product__plan-links { grid-template-columns: 1fr; }
}

/* Minimal Minecraft shop pages */
.mc-shop { width: min(100% - 2rem, 1080px); padding-top: 2.4rem; }
.mc-shop__intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0 0 1.4rem; border-bottom: 1px solid hsl(var(--color-neutral) / .68); }
.mc-shop__intro h1 { margin: 0 0 .25rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -0.036em; line-height: 1.05; }
.mc-shop__intro p { margin: 0; color: hsl(var(--color-base) / .62); font-size: .95rem; }
.mc-shop__calculator, .mc-product__calculator { display: inline-flex; align-items: center; gap: .4rem; color: var(--bds-green-dark); font-size: .84rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.mc-shop__calculator:hover, .mc-product__calculator:hover { text-decoration: underline; }
.mc-shop__plans { padding-top: 1.55rem; }
.mc-shop__section-head { margin-bottom: .8rem; }
.mc-shop__section-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.035em; }
.mc-shop__grid { gap: .8rem; }
.mc-plan { padding: 1.1rem; border-radius: .9rem; box-shadow: none; }
.mc-plan:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(18 40 29 / .07); }
.mc-plan--featured { box-shadow: none; }
.mc-plan h3 { margin: 0 0 .35rem; font-size: 1.35rem; }
.mc-plan h3 a { color: inherit; text-decoration: none; }
.mc-plan h3 a:hover { color: var(--bds-green-dark); }
.mc-plan__description { min-height: 2.9em; font-size: .82rem; }
.mc-plan__resources { margin: .85rem 0; padding: .7rem 0; }
.mc-plan__resources strong { font-size: 1.08rem; }
.mc-plan__price strong { font-size: 1.45rem; }
.mc-plan__button { min-height: 2.55rem; }

.mc-product--minimal { width: min(100% - 2rem, 760px); padding-top: 2rem; }
.mc-product--minimal .mc-product__back { margin-bottom: 2.2rem; color: hsl(var(--color-base) / .6); }
.mc-product__simple { padding: 0 0 1.8rem; border-bottom: 1px solid hsl(var(--color-neutral) / .68); }
.mc-product__simple .mc-product__eyebrow { color: var(--bds-green-dark); }
.mc-product__simple h1 { margin: .45rem 0 .3rem; font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 850; letter-spacing: -0.028em; line-height: 1; }
.mc-product__simple .mc-product__description { max-width: 38rem; color: hsl(var(--color-base) / .65); font-size: 1rem; }
.mc-product__simple .mc-product__specs { gap: 1.8rem; margin-top: 1.35rem; }
.mc-product__simple .mc-product__specs div { display: flex; flex-direction: column; gap: .12rem; }
.mc-product__simple .mc-product__specs strong { font-size: 1.1rem; }
.mc-product__simple .mc-product__specs span { color: hsl(var(--color-base) / .56); font-size: .75rem; }
.mc-product__simple .mc-product__buy-row { justify-content: space-between; margin-top: 1.4rem; }
.mc-product__simple .mc-product__price strong { color: hsl(var(--color-base)); font-size: 1.6rem; }
.mc-product__simple .mc-product__price span { color: hsl(var(--color-base) / .55); }
.mc-product__simple .mc-product__button { min-height: 2.8rem; padding: .75rem 1rem; }
.mc-product__simple .mc-product__note { margin-top: .85rem; color: hsl(var(--color-base) / .55); }
.mc-product__calculator { margin-top: 1.2rem; }

@media (max-width: 760px) {
    .mc-shop { width: min(100% - 1.5rem, 560px); padding-top: 1.5rem; }
    .mc-shop__intro { align-items: flex-start; flex-direction: column; }
    .mc-shop__plans { padding-top: 1.25rem; }
    .mc-shop__grid { grid-template-columns: 1fr; }
    .mc-plan__description { min-height: 0; }
    .mc-product--minimal { width: min(100% - 1.5rem, 560px); padding-top: 1.5rem; }
    .mc-product--minimal .mc-product__back { margin-bottom: 1.6rem; }
    .mc-product__simple .mc-product__buy-row { align-items: flex-start; flex-direction: column; }
    .mc-product__simple .mc-product__button { width: 100%; }
}

body {
    background-image:
        radial-gradient(ellipse at 12% 8%, hsl(var(--color-primary) / 0.045), transparent 38rem),
        radial-gradient(ellipse at 88% 38%, hsl(var(--color-secondary) / 0.035), transparent 42rem);
}

.bds-nav {
    border-color: hsl(var(--color-neutral) / 0.72);
    background: color-mix(in srgb, hsl(var(--color-background)) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgb(16 36 28 / 0.035);
}

.bds-nav > div > div:first-child > a:first-child {
    gap: 0.65rem;
}

.bds-nav > div > div:first-child > a:first-child img {
    object-fit: contain;
    image-rendering: auto;
    box-shadow: none;
}

#login img, #register img, #reset img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.bds-nav > div > div:first-child > a:first-child span {
    letter-spacing: -0.035em;
}

.bds-home {
    padding: 2rem 0 4.5rem;
    overflow: hidden;
}

.bds-container {
    width: min(1180px, calc(100% - 2.5rem));
    margin-inline: auto;
}

.bds-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.96fr);
    align-items: center;
    min-height: 490px;
    overflow: hidden;
    border: 1px solid rgb(151 255 186 / 0.16);
    border-radius: 30px;
    color: #f5fff7;
    background:
        radial-gradient(ellipse at 80% 50%, rgb(58 135 93 / 0.23), transparent 42%),
        linear-gradient(118deg, #121e1b 0%, #172622 52%, #18332d 100%);
    box-shadow: 0 28px 80px rgb(20 45 32 / 0.13);
}

.bds-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: 0.19;
    background-image: linear-gradient(rgb(177 255 199 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(177 255 199 / 0.08) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, transparent 4%, #000 78%);
}

.bds-hero__copy {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.bds-kicker,
.bds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--bds-green-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.bds-kicker {
    color: #b9f9c9;
}

.bds-kicker__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--bds-green);
    box-shadow: 0 0 16px rgb(105 230 138 / 0.8);
}

.bds-hero h1 {
    max-width: 650px;
    margin: 1.1rem 0 1rem;
    color: #f5fff7;
    font-size: clamp(3rem, 6.5vw, 5.2rem);
    font-weight: 850;
    letter-spacing: -0.036em;
    line-height: 1.02;
}

.bds-hero h1 span {
    color: var(--bds-green);
}

.bds-hero__lead {
    max-width: 480px;
    margin: 0;
    color: rgb(230 243 234 / 0.76);
    font-size: 1.08rem;
    line-height: 1.75;
}

.bds-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.8rem;
}

.bds-button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.bds-button:hover {
    transform: translateY(-2px);
}

.bds-button--primary {
    color: #102017;
    background: var(--bds-green);
    box-shadow: 0 8px 24px rgb(74 209 111 / 0.21);
}

.bds-button--primary:hover {
    color: #102017;
    background: #8af2a4;
    box-shadow: 0 12px 28px rgb(74 209 111 / 0.28);
}

.bds-button--quiet {
    color: #effbf1;
    border-color: rgb(237 255 242 / 0.2);
    background: rgb(255 255 255 / 0.035);
}

.bds-button--quiet:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.1);
}

.bds-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.3rem;
    margin-top: 2rem;
    color: rgb(236 248 239 / 0.7);
    font-size: 0.76rem;
    font-weight: 650;
}

.bds-hero__proof span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.bds-hero__proof i {
    color: var(--bds-green);
    font-size: 0.67rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.bds-hero__art {
    position: relative;
    display: grid;
    min-height: 420px;
    place-items: center;
    margin: 1.1rem 1.1rem 1.1rem 0;
    overflow: hidden;
    border: 1px solid rgb(189 255 207 / 0.1);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 45%, rgb(111 236 145 / 0.22), transparent 42%),
        linear-gradient(145deg, rgb(7 19 16 / 0.35), rgb(12 31 26 / 0.8));
}

.bds-hero__art::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.2;
    background-image: radial-gradient(rgb(213 255 222 / 0.55) 1px, transparent 1px);
    background-size: 19px 19px;
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 78%);
}

.bds-art__orbit {
    position: absolute;
    width: min(74%, 330px);
    aspect-ratio: 1;
    border: 1px solid rgb(151 255 186 / 0.14);
    border-radius: 50%;
}

.bds-art__orbit--two {
    width: min(94%, 420px);
    border-color: rgb(239 154 203 / 0.12);
    transform: rotate(-18deg) scaleY(0.38);
}

.bds-art__mascot {
    position: relative;
    z-index: 1;
    width: min(80%, 330px);
    max-height: 330px;
    object-fit: contain;
    image-rendering: pixelated;
    animation: bds-float 6s ease-in-out infinite;
}

.bds-art__pixel {
    position: absolute;
    z-index: 2;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--bds-pink);
    box-shadow: 0 0 22px rgb(239 154 203 / 0.5);
    transform: rotate(45deg);
}

.bds-art__pixel--one {
    top: 21%;
    right: 16%;
}

.bds-art__pixel--two {
    bottom: 23%;
    left: 15%;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--bds-gold);
}

.bds-art-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgb(226 255 233 / 0.16);
    border-radius: 0.9rem;
    color: #f4fff6;
    background: rgb(12 27 22 / 0.84);
    box-shadow: 0 14px 35px rgb(0 0 0 / 0.24);
    backdrop-filter: blur(12px);
}

.bds-art-card--top {
    top: 13%;
    left: 4%;
}

.bds-art-card--bottom {
    right: 4%;
    bottom: 15%;
}

.bds-art-card small,
.bds-art-card strong {
    display: block;
}

.bds-art-card small {
    margin-bottom: 0.2rem;
    color: rgb(223 245 229 / 0.56);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.bds-art-card strong {
    font-size: 0.77rem;
    font-weight: 750;
}

.bds-art-card__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.65rem;
    color: #183022;
    background: var(--bds-green);
}

.bds-art-card__signal {
    display: flex;
    height: 2rem;
    align-items: end;
    gap: 0.2rem;
    padding: 0.45rem;
    border-radius: 0.65rem;
    background: rgb(105 230 138 / 0.12);
}

.bds-art-card__signal i {
    width: 0.25rem;
    border-radius: 2px;
    background: var(--bds-green);
}

.bds-art-card__signal i:nth-child(1) { height: 0.45rem; opacity: 0.55; }
.bds-art-card__signal i:nth-child(2) { height: 0.75rem; opacity: 0.75; }
.bds-art-card__signal i:nth-child(3) { height: 1.05rem; }

.bds-art__caption {
    position: absolute;
    right: 1.3rem;
    bottom: 0.95rem;
    color: rgb(222 247 229 / 0.4);
    font-size: 0.53rem;
    font-weight: 800;
}

.bds-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 2.8rem;
    padding: 1.35rem 0 0.6rem;
    color: hsl(var(--color-muted));
    font-size: 0.77rem;
    font-weight: 700;
}

.bds-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.bds-strip b {
    color: var(--bds-green-dark);
    font-size: 1rem;
}

.bds-section {
    padding-top: 5.7rem;
    scroll-margin-top: 5.5rem;
}

.bds-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.45rem;
}

.bds-section__heading h2,
.bds-closing h2 {
    margin: 0.55rem 0 0;
    color: hsl(var(--color-base));
    font-size: clamp(1.8rem, 3.3vw, 2.55rem);
    font-weight: 820;
    letter-spacing: -0.022em;
    line-height: 1.1;
}

.bds-section__heading > p {
    max-width: 390px;
    margin: 0 0 0.12rem;
    color: hsl(var(--color-muted));
    font-size: 0.96rem;
    line-height: 1.65;
}

.bds-community-link { color: var(--bds-green-dark); font-weight: 750; text-decoration: none; white-space: nowrap; }
.bds-community-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bds-community-link:focus-visible { outline: 2px solid var(--bds-green-dark); outline-offset: 3px; border-radius: .2rem; }

.bds-community-promo { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid hsl(var(--color-neutral) / .65); border-radius: 1.15rem; background: linear-gradient(100deg, hsl(var(--color-background-secondary)), rgb(105 230 138 / .07)); }
.bds-community-promo__mark { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: .8rem; color: #fff; background: #5865f2; font-size: 1.35rem; font-weight: 900; }
.bds-community-promo__copy { min-width: 0; }
.bds-community-promo__copy h2 { margin: 0; color: hsl(var(--color-base)); font-size: .98rem; font-weight: 850; letter-spacing: -.02em; }
.bds-community-promo__copy p { margin: .15rem 0 0; color: hsl(var(--color-muted)); font-size: .82rem; line-height: 1.45; }
.bds-community-promo__button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; color: #fff; background: #5865f2; font-weight: 800; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.bds-community-promo__button { flex: 0 0 auto; padding: .68rem .9rem; border-radius: .72rem; font-size: .8rem; }
.bds-community-promo__button:hover { transform: translateY(-1px); background: #4752c4; color: #fff; }
@media (max-width: 640px) { .bds-community-promo { align-items: flex-start; flex-wrap: wrap; padding: .9rem; } .bds-community-promo__copy { flex: 1; } .bds-community-promo__button { width: 100%; } }

.bds-plan-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    overflow: hidden;
    border: 1px solid hsl(var(--color-neutral) / 0.72);
    border-radius: 1.5rem;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 18px 55px rgb(24 48 33 / 0.06);
}

.bds-plan-card__main {
    padding: clamp(1.5rem, 4vw, 2.8rem);
}

.bds-plan-card__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: hsl(var(--color-muted));
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.bds-plan-card__spark {
    color: var(--bds-green-dark);
    font-size: 0.95rem;
}

.bds-plan-card h3 {
    margin: 0.9rem 0 0.4rem;
    color: hsl(var(--color-base));
    font-size: 1.8rem;
    font-weight: 820;
    letter-spacing: -0.018em;
}

.bds-plan-card__description {
    margin: 0;
    color: hsl(var(--color-muted));
    font-size: 0.92rem;
    line-height: 1.65;
}

.bds-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin: 1.7rem 0 0;
    padding: 0;
    list-style: none;
}

.bds-specs li {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    color: hsl(var(--color-base));
    font-size: 0.82rem;
}

.bds-specs strong {
    font-weight: 800;
}

.bds-specs__mark {
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #1d6337;
    background: rgb(105 230 138 / 0.2);
    font-size: 0.75rem;
    font-weight: 900;
}

.bds-plan-card__purchase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2.8rem);
    border-left: 1px solid hsl(var(--color-neutral) / 0.58);
    background:
        radial-gradient(ellipse at 80% 0%, rgb(105 230 138 / 0.12), transparent 50%),
        hsl(var(--color-background) / 0.52);
}

.bds-plan-card__overline {
    margin: 0;
    color: hsl(var(--color-muted));
    font-size: 0.75rem;
    font-weight: 700;
}

.bds-price {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-top: 0.2rem;
    color: hsl(var(--color-base));
}

.bds-price strong {
    font-size: clamp(2.9rem, 5vw, 4rem);
    font-weight: 850;
    letter-spacing: -0.028em;
    line-height: 1.1;
}

.bds-price span {
    color: hsl(var(--color-muted));
    font-size: 0.83rem;
}

.bds-plan-card__fineprint {
    margin: 0.35rem 0 1.35rem;
    color: hsl(var(--color-muted));
    font-size: 0.78rem;
    line-height: 1.5;
}

.bds-button--full {
    width: 100%;
    text-align: center;
}

.bds-button--pending {
    color: #d7e8dc;
    border-color: rgb(39 74 54 / 0.25);
    background: #294737;
    cursor: default;
}

.bds-button--pending:hover {
    transform: none;
}

.bds-plan-card__status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    color: hsl(var(--color-muted));
    font-size: 0.68rem;
}

.bds-plan-card__status span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--bds-gold);
}

.bds-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
}

.bds-tier-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 385px;
    flex-direction: column;
    padding: 1.45rem;
    border: 1px solid hsl(var(--color-neutral) / 0.72);
    border-radius: 1.25rem;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 16px 42px rgb(24 48 33 / 0.045);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bds-tier-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--color-primary) / 0.38);
    box-shadow: 0 20px 48px rgb(24 48 33 / 0.1);
}

.bds-tier-card--starter {
    border-color: hsl(var(--color-primary) / 0.4);
    background:
        radial-gradient(ellipse at 100% 0%, rgb(105 230 138 / 0.11), transparent 44%),
        hsl(var(--color-background-secondary));
}

.bds-tier-card__head {
    min-height: 8.3rem;
}

.bds-tier-card__eyebrow {
    margin: 0;
    color: var(--bds-green-dark);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bds-tier-card h3 {
    margin: 0.65rem 0 0.35rem;
    color: hsl(var(--color-base));
    font-size: 1.45rem;
    font-weight: 830;
    letter-spacing: -0.018em;
}

.bds-tier-card__description {
    margin: 0;
    color: hsl(var(--color-muted));
    font-size: 0.78rem;
    line-height: 1.55;
}

.bds-tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: hsl(var(--color-base));
}

.bds-tier-price strong {
    font-size: 2.65rem;
    font-weight: 850;
    letter-spacing: -0.028em;
    line-height: 1.1;
}

.bds-tier-price span {
    color: hsl(var(--color-muted));
    font-size: 0.78rem;
}

.bds-tier-specs {
    display: grid;
    gap: 0;
    margin: 1rem 0 1.25rem;
    padding: 0;
    border-top: 1px solid hsl(var(--color-neutral) / 0.55);
    list-style: none;
}

.bds-tier-specs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid hsl(var(--color-neutral) / 0.45);
    color: hsl(var(--color-muted));
    font-size: 0.72rem;
}

.bds-tier-specs strong {
    color: hsl(var(--color-base));
    font-size: 0.74rem;
    font-weight: 760;
    text-align: right;
}

.bds-tier-card .bds-button {
    margin-top: auto;
    font-size: 0.78rem;
}

.bds-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.bds-feature-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    padding: 1.55rem;
    border: 1px solid hsl(var(--color-neutral) / 0.72);
    border-radius: 1.25rem;
    background: hsl(var(--color-background-secondary) / 0.82);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bds-feature-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--color-primary) / 0.35);
    box-shadow: 0 16px 38px rgb(20 45 32 / 0.08);
}

.bds-feature-card__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 0.85rem;
    font-size: 0.72rem;
    font-weight: 850;
}

.bds-feature-card__icon--green { color: #1b6036; background: rgb(105 230 138 / 0.28); }
.bds-feature-card__icon--pink { color: #7d3563; background: rgb(239 154 203 / 0.27); }
.bds-feature-card__icon--gold { color: #77571e; background: rgb(242 202 119 / 0.3); }

.bds-feature-card h3 {
    margin: 1.2rem 0 0.5rem;
    color: hsl(var(--color-base));
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.bds-feature-card p {
    max-width: 330px;
    margin: 0;
    color: hsl(var(--color-muted));
    font-size: 0.83rem;
    line-height: 1.7;
}

.bds-feature-card__accent {
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid hsl(var(--color-primary) / 0.13);
    border-radius: 50%;
}

.bds-closing {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 5.8rem;
    padding: clamp(1.6rem, 4vw, 2.7rem);
    border: 1px solid rgb(151 255 186 / 0.14);
    border-radius: 1.5rem;
    color: #f5fff7;
    background:
        radial-gradient(ellipse at 92% 0%, rgb(105 230 138 / 0.17), transparent 38%),
        linear-gradient(115deg, #15231e, #1c3932);
}

.bds-closing__mark {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1rem;
    color: #14331f;
    background: var(--bds-green);
    font-size: 1.4rem;
}

.bds-closing .bds-eyebrow {
    color: #b9f9c9;
}

.bds-closing h2 {
    margin-top: 0.3rem;
    color: #f5fff7;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.bds-closing p:last-child {
    margin: 0.4rem 0 0;
    color: rgb(230 243 234 / 0.7);
    font-size: 0.85rem;
}

.bds-button--light {
    flex: 0 0 auto;
    margin-left: auto;
    color: #16301f;
    background: #f4fff6;
}

.bds-button--light:hover {
    color: #102017;
    background: #dfffe6;
}

@keyframes bds-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 900px) {
    .bds-hero {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.8fr);
    }

    .bds-hero__copy {
        padding: 2.5rem 1.7rem;
    }

    .bds-hero__art {
        min-height: 360px;
    }

    .bds-art-card--top { left: 2%; }
    .bds-art-card--bottom { right: 2%; }
}

@media (max-width: 700px) {
    .bds-home { padding-top: 1.1rem; }
    .bds-container { width: min(100% - 1.25rem, 560px); }

    .bds-hero {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .bds-hero__copy {
        padding: 2.25rem 1.3rem 1.2rem;
    }

    .bds-hero h1 {
        font-size: clamp(2.9rem, 13vw, 4.1rem);
    }

    .bds-hero__lead { font-size: 0.97rem; }
    .bds-hero__actions { gap: 0.55rem; }
    .bds-button { min-height: 2.85rem; padding: 0.72rem 0.9rem; font-size: 0.83rem; }
    .bds-hero__proof { gap: 0.7rem 0.95rem; font-size: 0.69rem; }

    .bds-hero__art {
        min-height: 320px;
        margin: 0 0.75rem 0.75rem;
        border-radius: 18px;
    }

    .bds-art__mascot { width: min(76%, 270px); max-height: 270px; }
    .bds-art-card--top { top: 10%; left: 3%; }
    .bds-art-card--bottom { right: 3%; bottom: 12%; }
    .bds-art-card { padding: 0.55rem 0.65rem; }
    .bds-art-card strong { font-size: 0.68rem; }
    .bds-art-card small { font-size: 0.5rem; }

    .bds-strip {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 1.35rem;
        overflow-x: auto;
        padding: 1.2rem 0.25rem 0.6rem;
        white-space: nowrap;
    }

    .bds-section { padding-top: 4rem; }
    .bds-section__heading { display: block; margin-bottom: 1.15rem; }
    .bds-section__heading > p { margin-top: 0.7rem; }
    .bds-plan-card { grid-template-columns: 1fr; border-radius: 1.2rem; }
    .bds-plan-card__purchase { border-top: 1px solid hsl(var(--color-neutral) / 0.58); border-left: 0; }
    .bds-specs { gap: 0.85rem 0.55rem; }
    .bds-specs li { align-items: flex-start; font-size: 0.75rem; }
    .bds-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bds-feature-grid { grid-template-columns: 1fr; }
    .bds-feature-card { min-height: 0; }
    .bds-closing { align-items: flex-start; flex-wrap: wrap; margin-top: 4rem; }
    .bds-closing__mark { width: 2.8rem; height: 2.8rem; }
    .bds-closing > div:nth-child(2) { flex: 1 1 calc(100% - 4rem); }
    .bds-button--light { width: 100%; margin: 0; }
    .bds-tier-grid { grid-template-columns: 1fr; }
    .bds-tier-card { min-height: 0; }
    .bds-tier-card__head { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    .bds-art__mascot { animation: none; }
    .bds-button,
    .bds-feature-card { transition: none; }
}


/* Bardsen plan comparison layout */
.bds-home {
    padding: 1.5rem 0 3.5rem;
}

.bds-hero {
    min-height: 370px;
    border-radius: 28px;
}

.bds-hero__copy {
    padding: clamp(2rem, 4.5vw, 3.8rem);
}

.bds-hero h1 {
    margin: 0.9rem 0 0.8rem;
    font-size: clamp(3rem, 5.8vw, 4.6rem);
}

.bds-hero__lead {
    max-width: 450px;
}

.bds-hero__actions {
    margin-top: 1.35rem;
}

.bds-hero__proof {
    margin-top: 1.45rem;
}

.bds-hero__art {
    min-height: 320px;
    margin: 0.9rem 0.9rem 0.9rem 0;
    border-radius: 22px;
}

.bds-art__mascot {
    width: min(78%, 300px);
    max-height: 300px;
}

.bds-section {
    padding-top: 3.2rem;
}

.bds-section__heading {
    align-items: end;
    margin-bottom: 1.25rem;
}

.bds-section__heading h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.55rem);
}

.bds-comparison-scroll {
    overflow-x: auto;
    border: 1px solid hsl(var(--color-neutral) / 0.8);
    border-radius: 1.3rem;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 20px 55px rgb(24 48 33 / 0.065);
}

.bds-comparison {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: hsl(var(--color-base));
    text-align: left;
}

.bds-comparison thead th {
    padding: 1.35rem 1.3rem 1.25rem;
    border-bottom: 1px solid hsl(var(--color-neutral) / 0.7);
    background: hsl(var(--color-background-secondary));
    vertical-align: top;
}

.bds-comparison thead .bds-comparison__intro {
    width: 17%;
    color: #effff2;
    background:
        radial-gradient(ellipse at 100% 0%, rgb(105 230 138 / 0.2), transparent 52%),
        #172622;
}

.bds-comparison__intro span,
.bds-comparison__eyebrow {
    display: block;
    color: var(--bds-green-dark);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.bds-comparison__intro span {
    color: #b9f9c9;
}

.bds-comparison__intro strong {
    display: block;
    margin-top: 1rem;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.bds-comparison__plan--starter {
    background:
        radial-gradient(ellipse at 100% 0%, rgb(105 230 138 / 0.12), transparent 52%),
        hsl(var(--color-background-secondary)) !important;
}

.bds-comparison__name {
    display: block;
    margin-top: 0.55rem;
    color: hsl(var(--color-base));
    font-size: 1.45rem;
    font-weight: 830;
    letter-spacing: -0.018em;
}

.bds-comparison__description {
    display: block;
    min-height: 2.65rem;
    margin-top: 0.35rem;
    color: hsl(var(--color-muted));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.5;
}

.bds-comparison__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.75rem 0 0.8rem;
    color: hsl(var(--color-base));
    font-size: 1.9rem;
    font-weight: 850;
    letter-spacing: -0.028em;
    white-space: nowrap;
}

.bds-comparison__price small {
    color: hsl(var(--color-muted));
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: 0;
}

.bds-comparison .bds-button {
    min-height: 2.65rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.76rem;
}

.bds-comparison tbody th,
.bds-comparison tbody td {
    padding: 0.87rem 1.3rem;
    border-bottom: 1px solid hsl(var(--color-neutral) / 0.5);
    font-size: 0.79rem;
}

.bds-comparison tbody tr:last-child th,
.bds-comparison tbody tr:last-child td {
    border-bottom: 0;
}

.bds-comparison tbody th {
    color: hsl(var(--color-muted));
    background: hsl(var(--color-background) / 0.45);
    font-weight: 680;
}

.bds-comparison tbody td {
    color: hsl(var(--color-base));
    font-weight: 730;
}

.bds-comparison tbody td + td,
.bds-comparison thead th + th {
    border-left: 1px solid hsl(var(--color-neutral) / 0.45);
}

.bds-plan-cards {
    display: none;
}

.bds-plan-empty {
    padding: 1.5rem;
    border: 1px solid hsl(var(--color-neutral) / 0.72);
    border-radius: 1rem;
    color: hsl(var(--color-muted));
    background: hsl(var(--color-background-secondary));
}

@media (max-width: 900px) {
    .bds-hero {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.82fr);
        min-height: 320px;
    }

    .bds-hero__copy {
        padding: 1.8rem 1.6rem;
    }

    .bds-hero__art {
        min-height: 270px;
    }

    .bds-hero h1 {
        font-size: clamp(2.65rem, 5.8vw, 3.7rem);
    }

    .bds-section__heading > p {
        max-width: 330px;
    }
}

@media (max-width: 760px) {
    .bds-home {
        padding: 0.7rem 0 1.8rem;
    }

    .bds-container {
        width: min(100% - 1.25rem, 560px);
    }

    .bds-hero {
        position: relative;
        display: block;
        min-height: 0;
        border-radius: 20px;
    }

    .bds-hero__copy {
        min-height: 260px;
        padding: 1.4rem 1rem 1.25rem;
        padding-right: 5.9rem;
    }

    .bds-kicker {
        gap: 0.4rem;
        font-size: 0.59rem;
        letter-spacing: 0.06em;
    }

    .bds-hero h1 {
        max-width: 270px;
        margin: 0.7rem 0 0.65rem;
        font-size: clamp(2.25rem, 9vw, 2.85rem);
        line-height: 0.98;
    }

    .bds-hero__lead {
        max-width: 300px;
        font-size: 0.8rem;
        line-height: 1.55;
    }

    .bds-hero__actions {
        margin-top: 0.9rem;
    }

    .bds-hero__actions .bds-button {
        min-height: 2.5rem;
        padding: 0.6rem 0.8rem;
        font-size: 0.76rem;
    }

    .bds-hero__art {
        position: absolute;
        top: 1.2rem;
        right: 0.25rem;
        display: grid;
        width: 5.5rem;
        min-height: 6rem;
        height: 6rem;
        place-items: center;
        margin: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .bds-hero__art::before,
    .bds-art-card,
    .bds-art__caption {
        display: none;
    }

    .bds-art__orbit--one {
        width: 5.5rem;
        border-color: rgb(151 255 186 / 0.2);
    }

    .bds-art__orbit--two {
        width: 6.3rem;
    }

    .bds-art__pixel--one {
        top: 0.5rem;
        right: 0.2rem;
        width: 0.42rem;
        height: 0.42rem;
    }

    .bds-art__pixel--two {
        bottom: 0.5rem;
        left: 0.1rem;
        width: 0.35rem;
        height: 0.35rem;
    }

    .bds-art__mascot {
        width: 5.9rem;
        max-height: 5.9rem;
    }

    .bds-section {
        padding-top: 2rem;
    }

    .bds-section__heading {
        display: block;
        margin-bottom: 0.9rem;
    }

    .bds-section__heading h2 {
        margin-top: 0.35rem;
        font-size: 1.75rem;
    }

    .bds-section__heading > p {
        margin-top: 0.55rem;
        font-size: 0.82rem;
    }

    .bds-comparison-scroll {
        display: none;
    }

    .bds-plan-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .bds-tier-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding: 1rem;
        border: 1px solid hsl(var(--color-neutral) / 0.75);
        border-radius: 1rem;
        background: hsl(var(--color-background-secondary));
    }

    .bds-tier-card__head {
        min-height: 0;
    }

    .bds-tier-card--starter {
        border-color: hsl(var(--color-primary) / 0.4);
        background:
            radial-gradient(ellipse at 100% 0%, rgb(105 230 138 / 0.11), transparent 44%),
            hsl(var(--color-background-secondary));
    }

    .bds-tier-card__eyebrow {
        margin: 0;
        color: var(--bds-green-dark);
        font-size: 0.58rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .bds-tier-card h3 {
        margin: 0.45rem 0 0.3rem;
        color: hsl(var(--color-base));
        font-size: 1.2rem;
        font-weight: 830;
        letter-spacing: -0.016em;
    }

    .bds-tier-card__description {
        margin: 0;
        color: hsl(var(--color-muted));
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .bds-tier-price {
        display: flex;
        align-items: baseline;
        gap: 0.35rem;
        margin-top: 0.65rem;
        color: hsl(var(--color-base));
    }

    .bds-tier-price strong {
        font-size: 1.9rem;
        font-weight: 850;
        letter-spacing: -0.028em;
    }

    .bds-tier-price span {
        color: hsl(var(--color-muted));
        font-size: 0.68rem;
    }

    .bds-tier-specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 0.7rem;
        margin: 0.55rem 0 0.8rem;
        padding: 0;
        list-style: none;
    }

    .bds-tier-specs li {
        display: flex;
        flex-direction: column;
        gap: 0.16rem;
        padding: 0.45rem 0;
        border-top: 1px solid hsl(var(--color-neutral) / 0.5);
        color: hsl(var(--color-muted));
        font-size: 0.61rem;
    }

    .bds-tier-specs strong {
        color: hsl(var(--color-base));
        font-size: 0.65rem;
        font-weight: 760;
        text-align: left;
    }

    .bds-tier-card .bds-button {
        min-height: 2.45rem;
        margin-top: auto;
        padding: 0.55rem 0.5rem;
        font-size: 0.67rem;
    }
}

@media (max-width: 540px) {
    .bds-plan-cards {
        grid-template-columns: 1fr;
    }

    .bds-tier-card {
        padding: 1rem 1.1rem;
    }

    .bds-tier-card__description {
        max-width: 32rem;
    }
}

.bds-calculator-page {
    padding: 1.8rem 0 4rem;
}

.bds-calculator-hero {
    position: relative;
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    margin-bottom: 1.4rem;
    padding: 2.2rem clamp(1.5rem, 5vw, 4rem);
    border: 1px solid rgb(151 255 186 / 0.16);
    border-radius: 26px;
    color: #f5fff7;
    background:
        radial-gradient(ellipse at 78% 45%, rgb(58 135 93 / 0.3), transparent 42%),
        linear-gradient(118deg, #121e1b 0%, #172622 55%, #18332d 100%);
    box-shadow: 0 24px 65px rgb(20 45 32 / 0.11);
}

.bds-calculator-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.16;
    background-image: linear-gradient(rgb(177 255 199 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(177 255 199 / 0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent 8%, #000 100%);
    pointer-events: none;
}

.bds-calculator-hero > div {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.bds-calculator-hero .bds-eyebrow {
    color: #b9f9c9;
}

.bds-calculator-hero h1 {
    margin: 0.75rem 0 0.65rem;
    color: #f5fff7;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 850;
    letter-spacing: -0.028em;
    line-height: 1.02;
}

.bds-calculator-hero h1 span {
    color: var(--bds-green);
}

.bds-calculator-hero p:last-child {
    max-width: 490px;
    margin: 0;
    color: rgb(230 243 234 / 0.76);
    font-size: 0.98rem;
    line-height: 1.65;
}

.bds-calculator-hero img {
    position: relative;
    z-index: 1;
    width: clamp(110px, 17vw, 190px);
    max-height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.22));
}

.bds-calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.78fr);
    align-items: start;
    gap: 1.25rem;
}

.bds-calculator-form {
    min-width: 0;
    padding: clamp(1.15rem, 3vw, 1.8rem);
    border: 1px solid hsl(var(--color-neutral) / 0.76);
    border-radius: 1.25rem;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 18px 50px rgb(24 48 33 / 0.055);
}

.bds-calculator-form__heading {
    margin-bottom: 0.4rem;
}

.bds-calculator-form__heading h2 {
    margin: 0.45rem 0 0;
    color: hsl(var(--color-base));
    font-size: 1.55rem;
    font-weight: 820;
    letter-spacing: -0.018em;
}

.bds-calculator-question {
    min-width: 0;
    margin: 1.15rem 0 0;
    padding: 1.15rem 0 0;
    border: 0;
    border-top: 1px solid hsl(var(--color-neutral) / 0.58);
}

.bds-calculator-question__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: hsl(var(--color-base));
    font-size: 0.92rem;
    font-weight: 760;
}

.bds-calculator-question__heading output {
    color: var(--bds-green-dark);
    font-size: 1rem;
    font-weight: 850;
}

.bds-player-slider {
    display: block;
    width: 100%;
    height: 1.5rem;
    margin: 0.65rem 0 0;
    accent-color: var(--bds-green-dark);
    cursor: pointer;
}

.bds-player-slider__labels {
    display: flex;
    justify-content: space-between;
    margin-top: -0.1rem;
    color: hsl(var(--color-muted));
    font-size: 0.68rem;
}

.bds-calculator-question legend {
    width: 100%;
    margin-bottom: 0.7rem;
    color: hsl(var(--color-base));
    font-size: 0.92rem;
    font-weight: 760;
}

.bds-calculator-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.bds-calculator-choice,
.bds-calculator-activity label {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid hsl(var(--color-neutral) / 0.75);
    border-radius: 0.85rem;
    background: hsl(var(--color-background) / 0.55);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.bds-calculator-choice:hover,
.bds-calculator-activity label:hover {
    transform: translateY(-1px);
    border-color: hsl(var(--color-primary) / 0.4);
}

.bds-calculator-choice.is-selected,
.bds-calculator-activity label.is-selected {
    border-color: hsl(var(--color-primary) / 0.58);
    background: rgb(105 230 138 / 0.1);
}

.bds-calculator-choice:focus-within,
.bds-calculator-activity label:focus-within {
    outline: 2px solid hsl(var(--color-primary) / 0.65);
    outline-offset: 2px;
}

.bds-calculator-choice__mark {
    display: grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    place-items: center;
    margin-top: 0.1rem;
    border: 1.5px solid hsl(var(--color-muted) / 0.62);
    border-radius: 50%;
}

.bds-calculator-choice.is-selected .bds-calculator-choice__mark {
    border-color: var(--bds-green-dark);
}

.bds-calculator-choice.is-selected .bds-calculator-choice__mark::after {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    background: var(--bds-green-dark);
    content: "";
}

.bds-calculator-choice strong,
.bds-calculator-activity strong {
    display: block;
    color: hsl(var(--color-base));
    font-size: 0.78rem;
    font-weight: 780;
}

.bds-calculator-choice small,
.bds-calculator-activity small {
    display: block;
    margin-top: 0.16rem;
    color: hsl(var(--color-muted));
    font-size: 0.67rem;
    line-height: 1.4;
}

.bds-calculator-activity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.bds-calculator-result {
    position: sticky;
    top: 5.5rem;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 1.9rem);
    border: 1px solid rgb(151 255 186 / 0.18);
    border-radius: 1.25rem;
    color: #f5fff7;
    background:
        radial-gradient(ellipse at 90% 0%, rgb(105 230 138 / 0.18), transparent 42%),
        linear-gradient(145deg, #15231f, #1b382f);
    box-shadow: 0 20px 55px rgb(20 45 32 / 0.14);
}

.bds-calculator-result__topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #b9f9c9;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bds-calculator-result__spark {
    color: var(--bds-pink);
    font-size: 1rem;
}

.bds-calculator-result__context {
    margin: 1.45rem 0 0.2rem;
    color: rgb(230 243 234 / 0.68);
    font-size: 0.76rem;
}

.bds-calculator-result__name {
    margin: 0;
    color: #f5fff7;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 850;
    letter-spacing: -0.025em;
}

.bds-calculator-result__price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.bds-calculator-result__price strong {
    color: #fff;
    font-size: 2rem;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.bds-calculator-result__price span {
    color: rgb(230 243 234 / 0.7);
    font-size: 0.75rem;
}

.bds-calculator-result__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1.15rem;
}

.bds-calculator-result__specs div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid rgb(213 255 222 / 0.12);
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 0.045);
}

.bds-calculator-result__specs span {
    color: rgb(230 243 234 / 0.64);
    font-size: 0.65rem;
}

.bds-calculator-result__specs strong {
    color: #f5fff7;
    font-size: 0.88rem;
    font-weight: 780;
}

.bds-calculator-result__estimate {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 1rem 0 0.85rem;
    color: rgb(230 243 234 / 0.72);
    font-size: 0.72rem;
}

.bds-calculator-result__estimate strong {
    color: #b9f9c9;
}

.bds-calculator-result__range-note {
    margin: 0.75rem 0;
    padding: 0.7rem;
    border: 1px solid rgb(242 202 119 / 0.28);
    border-radius: 0.7rem;
    color: #f9df9f;
    background: rgb(242 202 119 / 0.08);
    font-size: 0.72rem;
    line-height: 1.5;
}

.bds-calculator-result .bds-button {
    min-height: 2.8rem;
    font-size: 0.8rem;
}

.bds-calculator-result__fineprint {
    margin: 0.95rem 0 0;
    color: rgb(230 243 234 / 0.58);
    font-size: 0.66rem;
    line-height: 1.5;
}

.bds-calculator-result__empty {
    margin: 1.5rem 0 0;
    color: rgb(230 243 234 / 0.8);
    font-size: 0.9rem;
}

@media (max-width: 850px) {
    .bds-calculator-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bds-calculator-result {
        position: static;
    }
}

@media (max-width: 560px) {
    .bds-calculator-page {
        padding: 0.8rem 0 2rem;
    }

    .bds-calculator-hero {
        min-height: 0;
        gap: 0.4rem;
        margin-bottom: 0.8rem;
        padding: 1.4rem 1rem;
        border-radius: 1.15rem;
    }

    .bds-calculator-hero h1 {
        margin-top: 0.6rem;
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .bds-calculator-hero p:last-child {
        max-width: 270px;
        font-size: 0.76rem;
    }

    .bds-calculator-hero img {
        width: 5.4rem;
        max-height: 6rem;
    }

    .bds-calculator-layout {
        gap: 0.75rem;
    }

    .bds-calculator-form,
    .bds-calculator-result {
        padding: 1rem;
        border-radius: 1rem;
    }

    .bds-calculator-form__heading h2 {
        font-size: 1.35rem;
    }

    .bds-calculator-choices {
        gap: 0.45rem;
    }

    .bds-calculator-choice,
    .bds-calculator-activity label {
        gap: 0.45rem;
        padding: 0.62rem 0.55rem;
        border-radius: 0.7rem;
    }

    .bds-calculator-choice small,
    .bds-calculator-activity small {
        font-size: 0.61rem;
    }
}

/* Homepage hero card refinement */
.bds-hero {
    border-color: rgb(185 255 203 / 0.24);
    background:
        radial-gradient(ellipse at 78% 45%, rgb(105 230 138 / 0.19), transparent 41%),
        radial-gradient(ellipse at 8% 0%, rgb(105 230 138 / 0.08), transparent 34%),
        linear-gradient(115deg, #101a18 0%, #172622 53%, #1b382f 100%);
    box-shadow: 0 30px 86px rgb(12 37 23 / 0.2), inset 0 1px 0 rgb(239 255 242 / 0.08);
}

.bds-hero__art {
    border-color: rgb(189 255 207 / 0.17);
    background:
        radial-gradient(circle at 52% 42%, rgb(111 236 145 / 0.28), transparent 43%),
        linear-gradient(145deg, rgb(7 19 16 / 0.28), rgb(12 31 26 / 0.78));
}

.bds-art-card--featured {
    inset: auto auto 1.15rem 1.15rem;
    max-width: calc(100% - 2.3rem);
    gap: 0.75rem;
    padding: 0.78rem 0.95rem;
    border-color: rgb(196 255 208 / 0.26);
    border-radius: 1.1rem;
    color: #f4fff6;
    background: linear-gradient(130deg, rgb(13 31 24 / 0.95), rgb(18 48 35 / 0.88));
    box-shadow: 0 18px 42px rgb(0 0 0 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.08);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.bds-art-card--featured:hover {
    transform: translateY(-3px);
    border-color: rgb(196 255 208 / 0.5);
    color: #fff;
    background: linear-gradient(130deg, rgb(17 42 30 / 0.98), rgb(23 59 41 / 0.95));
    box-shadow: 0 22px 48px rgb(0 0 0 / 0.34), 0 0 30px rgb(105 230 138 / 0.12);
}

.bds-art-card--featured:focus-visible {
    outline: 3px solid var(--bds-green);
    outline-offset: 4px;
}

.bds-art-card--featured .bds-art-card__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(145deg, #8af2a4, #58d47a);
    box-shadow: 0 0 24px rgb(105 230 138 / 0.2);
}

.bds-art-card__details {
    min-width: 0;
}

.bds-art-card__details small {
    margin-bottom: 0.18rem;
    color: rgb(218 246 225 / 0.68);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
}

.bds-art-card__details strong {
    font-size: 0.8rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.bds-art-card__price {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 0.2rem;
    margin-left: auto;
    padding-left: 0.7rem;
    border-left: 1px solid rgb(229 255 235 / 0.16);
    white-space: nowrap;
}

.bds-art-card__price strong {
    font-size: 0.9rem;
}

.bds-art-card__price small {
    margin: 0;
    color: rgb(218 246 225 / 0.64);
    font-size: 0.58rem;
    letter-spacing: 0.02em;
}

.bds-art-card__arrow {
    color: var(--bds-green);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 900px) {
    .bds-art-card--featured {
        bottom: 0.85rem;
        left: 0.85rem;
        gap: 0.55rem;
        padding: 0.68rem 0.75rem;
    }

    .bds-art-card__details strong {
        font-size: 0.72rem;
    }
}

@media (max-width: 760px) {
    .bds-art-card--featured {
        display: none;
    }
}

/* Seasonal offer bar and Minecraft page header cards */
.bds-promo-bar {
    position: fixed;
    z-index: 40;
    inset: 0 0 auto;
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .35rem 1rem;
    overflow: hidden;
    color: #f5fff6;
    background: linear-gradient(100deg, #13251e, #214633 58%, #193629);
    box-shadow: 0 6px 22px rgb(8 24 15 / .16);
    font-size: .73rem;
    line-height: 1.2;
    white-space: nowrap;
}

.bds-promo__season {
    color: #ffd88b;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bds-promo__offer { color: rgb(245 255 246 / .88); font-weight: 650; }

.bds-promo__code {
    padding: .22rem .48rem;
    border: 1px solid rgb(255 224 158 / .38);
    border-radius: .42rem;
    color: #ffe3a7;
    background: rgb(255 255 255 / .07);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.bds-promo__ending { color: rgb(245 255 246 / .58); }

.bds-nav--promo { top: 2.5rem; }
.bds-main--promo { margin-top: 6.5rem; }

.mc-calculator-card {
    display: inline-flex;
    min-width: 17rem;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    border: 1px solid hsl(var(--color-neutral) / .72);
    border-radius: 1rem;
    color: hsl(var(--color-base));
    background:
        radial-gradient(ellipse at 0 0, rgb(105 230 138 / .11), transparent 70%),
        hsl(var(--color-background-secondary));
    box-shadow: 0 10px 30px rgb(18 40 29 / .06), inset 0 1px 0 rgb(255 255 255 / .3);
    text-decoration: none;
    transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.mc-calculator-card:hover {
    transform: translateY(-2px);
    border-color: rgb(105 230 138 / .62);
    box-shadow: 0 15px 34px rgb(18 40 29 / .11), 0 0 0 3px rgb(105 230 138 / .07);
}

.mc-calculator-card:focus-visible { outline: 3px solid var(--bds-green-dark); outline-offset: 3px; }

.mc-calculator-card__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .72rem;
    color: #153522;
    background: linear-gradient(145deg, #a4f4b3, #69e68a);
    font-size: 1.1rem;
    box-shadow: 0 5px 16px rgb(50 180 89 / .18);
}

.mc-calculator-card__copy { display: flex; min-width: 0; flex-direction: column; gap: .13rem; }
.mc-calculator-card__copy small { color: hsl(var(--color-base) / .57); font-size: .68rem; line-height: 1.2; }
.mc-calculator-card__copy strong { font-size: .84rem; font-weight: 850; letter-spacing: -.015em; }
.mc-calculator-card__arrow { margin-left: auto; color: var(--bds-green-dark); font-size: 1rem; font-weight: 900; }
.mc-product__calculator-card { margin: -1.1rem 0 1.8rem; }
.mc-plan__button--disabled { color: hsl(var(--color-base) / .55); background: hsl(var(--color-neutral) / .35); cursor: default; }

@media (max-width: 760px) {
    .mc-calculator-card { width: 100%; min-width: 0; }
    .mc-product__calculator-card { margin: -0.7rem 0 1.5rem; }
}

@media (max-width: 560px) {
    .bds-promo-bar { justify-content: space-between; gap: .45rem; padding-inline: .7rem; font-size: .68rem; }
    .bds-promo__season, .bds-promo__ending { display: none; }
    .bds-promo__code { padding: .2rem .38rem; font-size: .62rem; }
}


/* Homepage cleanup (2026-10-28): plan cards at every width, tighter spacing */
.bds-plan-section .bds-section__heading { margin-bottom: 1rem; }
.bds-plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}
.bds-plan-cards .bds-tier-card { min-height: 0; }
.bds-plan-cards .bds-tier-card__head { min-height: 0; }
.bds-home .bds-community-promo { margin-top: 2.5rem; }
.bds-home .bds-community-promo__button { margin-left: auto; }
.bds-footer { margin-top: 6rem; }

@media (max-width: 760px) {
    .bds-home .bds-community-promo { margin-top: 1.75rem; }
    .bds-footer { margin-top: 4rem; }
}

@media (max-width: 540px) {
    .bds-plan-cards { grid-template-columns: 1fr; }
}

/* One visible plan (2026-10-28): lay the card out as one wide row on desktop instead of a lone narrow card */
@media (min-width: 900px) {
    .bds-plan-cards:has(> .bds-tier-card:only-child) { grid-template-columns: 1fr; }
    .bds-plan-cards > .bds-tier-card:only-child {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) auto minmax(13rem, 1fr) minmax(12rem, auto);
        align-items: center;
        column-gap: 2.25rem;
        padding: 1.6rem 1.9rem;
    }
    .bds-plan-cards > .bds-tier-card:only-child > * { margin-block: 0; }
}

/* Phone: keep plan specs (Memory, Storage, Backups) on one row, no orphan cell */
@media (max-width: 760px) {
    .bds-tier-specs { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}


/* UI polish (2026-10-28): customer area, checkout, auth, contrast, alignment */
:root { --bds-green-text: #1a8048; } /* green that passes WCAG AA as text / behind white text */

/* Sidebar started under the header (8px) and the promo bar (40px), hiding "Dashboard" */
@media (min-width: 768px) {
    #main-aside { margin-top: 4rem; height: calc(100vh - 4rem); }
    body:has(.bds-nav--promo) #main-aside { margin-top: 6.5rem; height: calc(100vh - 6.5rem); }
}

/* Customer page titles (replaces the "Home" breadcrumb) */
.bds-page-title { margin: 0; padding-bottom: .5rem; font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: 850; letter-spacing: -0.018em; line-height: 1.1; }
.bds-icon-link { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .6rem; }
.bds-icon-link:hover { background: hsl(var(--color-neutral) / .5); }

/* Empty states */
.bds-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.4rem 1.5rem; border: 1px solid hsl(var(--color-neutral)); border-radius: 1rem; background: hsl(var(--color-background-secondary)); }
.bds-empty__title { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.bds-empty__text { color: hsl(var(--color-base) / .68); font-size: .9rem; line-height: 1.5; }
.bds-empty__button { min-height: 2.75rem; margin-top: .7rem; padding: .65rem 1.1rem; font-size: .88rem; text-decoration: none; }
.space-y-4 > .bds-empty + * { margin-top: 1rem; }

/* Buttons: white on the green primary was 3.6:1; match the theme's taller, rounder buttons inside pages */
.bg-primary.text-white { background-color: var(--bds-green-text); }
.bg-primary.text-white:hover { background-color: #156b3c; }
main button.bg-primary.text-white { min-height: 2.75rem; border-radius: .75rem; }
main button:focus-visible, main a:focus-visible, .bds-nav a:focus-visible, .bds-nav button:focus-visible, footer a:focus-visible { outline: 2px solid var(--bds-green-text); outline-offset: 2px; }

/* Checkout */
.bds-checkout h1 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 850; letter-spacing: -0.025em; line-height: 1.05; }
.bds-summary { gap: .75rem; padding: 1.25rem; border: 1px solid hsl(var(--color-neutral)); border-radius: 1rem; }
.bds-summary h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.bds-summary h4 { font-weight: 600; }
@media (min-width: 768px) { .bds-summary { position: sticky; top: 8rem; } }
.bds-field-hint { color: hsl(var(--color-base) / .68); line-height: 1.5; }
.bds-field-hint--link { color: var(--bds-green-text); text-decoration: underline; text-underline-offset: 2px; }
.bds-field-hint--link:hover { color: #156b3c; }

/* Auth pages: heading weight matches the rest of the theme */
form#login h1, form#register h1, form#reset h1 { font-weight: 850; letter-spacing: -0.016em; }

/* Plan page: back link sat on the same line as the calculator card */
.mc-product--minimal .mc-product__back { display: flex; width: fit-content; }

/* Java plans: three visible plans fill the row instead of leaving an empty fourth column */
@media (min-width: 901px) {
    .mc-shop__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small grey labels were ~3.8-4:1; lift to AA */
.mc-plan__resources span, .mc-plan__price span,
.mc-product__simple .mc-product__specs span, .mc-product__simple .mc-product__price span,
.mc-product__simple .mc-product__note { color: hsl(var(--color-base) / .68); }
.bds-community-link, .bds-player-count output, output[for="bds-player-count"] { color: var(--bds-green-text); }

/* Footer: line up with the page content, left-aligned on phones */
.bds-footer { padding-inline: 0; }
.bds-footer > .container { padding-inline: 2rem; }
.bds-footer > .container > div { align-items: flex-start; }
@media (max-width: 640px) { .bds-footer > .container { padding-inline: 1rem; } }
/* Account pages: forms sat 8px inside the title; Account submenu was faded to ~3:1 */
.bds-page-title + .px-2 { margin-top: 1rem; padding-inline: 0; }
#main-aside .opacity-70 { opacity: 1; }
#main-aside .opacity-70 a { color: hsl(var(--color-base) / .72); }
#main-aside .opacity-70 a.text-primary, #main-aside .text-primary { color: var(--bds-green-text); }

/* Journey fixes (2026-10-28): service page, setup states, red-outline danger buttons */
.bds-service__eyebrow { margin: 0 0 .3rem; color: hsl(var(--color-base) / .68); font-size: .82rem; font-weight: 700; }
.bds-service__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 850; letter-spacing: -0.016em; line-height: 1.1; overflow-wrap: anywhere; }
.bds-service__rename { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .55rem; color: hsl(var(--color-base) / .55); cursor: pointer; }
.bds-service__rename:hover { color: var(--bds-green-text); background: hsl(var(--color-neutral) / .45); }
.bds-join { margin-top: 1.25rem; padding: 1rem 1.15rem; border: 1px solid hsl(var(--color-neutral)); border-radius: .9rem; background: hsl(var(--color-background)); }
.bds-join__label { display: block; color: hsl(var(--color-base) / .68); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bds-join__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .3rem; }
.bds-join__address { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.15rem, 3.6vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; user-select: all; }
.bds-join__copy { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .5rem .95rem; border: 1px solid hsl(var(--color-neutral)); border-radius: .7rem; background: hsl(var(--color-background-secondary)); font-size: .86rem; font-weight: 700; cursor: pointer; }
.bds-join__copy:hover { border-color: var(--bds-green-text); color: var(--bds-green-text); }
.bds-join__hint { margin: .5rem 0 0; color: hsl(var(--color-base) / .68); font-size: .86rem; }
.bds-service__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.bds-service__actions button { width: auto; }
.bds-service__details { display: grid; gap: .45rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid hsl(var(--color-neutral)); }
.bds-service__details > div { display: flex; gap: .5rem; }
.bds-service__details dt { min-width: 7.5rem; color: hsl(var(--color-base) / .68); }
.bds-service-row__meta { color: hsl(var(--color-base) / .68); font-size: .82rem; }
@media (max-width: 640px) {
    .bds-service { padding: 1.25rem; }
    .bds-service__actions > a, .bds-service__actions > button { flex: 1 1 100%; }
    .bds-service__actions button { width: 100%; }
}
.bds-btn-danger.bg-primary.text-white { background: transparent; color: #b42318; border: 1.5px solid currentColor; }
.bds-btn-danger.bg-primary.text-white:hover { background: #fdecea; color: #912018; }
.bds-checkout-success__item--pending { border-color: hsl(var(--color-neutral)); background: hsl(var(--color-background-secondary)); }
.bds-checkout-success__item--pending .bds-checkout-success__check { background: hsl(var(--color-neutral) / .5); color: var(--bds-green-text); }
.bds-checkout-success__item--failed { border-color: rgb(180 35 24 / .35); background: linear-gradient(110deg, rgb(180 35 24 / .07), hsl(var(--color-background-secondary)) 72%); }
.bds-checkout-success__item--failed .bds-checkout-success__check { background: rgb(180 35 24 / .12); color: #b42318; }
.bds-checkout-success__button--pending, .bds-checkout-success__button--pending:hover { transform: none; background: hsl(var(--color-neutral) / .6); color: hsl(var(--color-base) / .6); cursor: default; }
main button.bg-background-secondary.border-neutral { min-height: 2.75rem; border-radius: .75rem; } /* same height as the primary/danger buttons next to them */
@media (max-width: 767px) { .bds-upgrade > .col-span-2 { grid-column: auto; } } /* upgrade page stacks on phones */

/* Legal pages (/terms, /privacy, /refunds) from the BardsenPages extension */
.bds-legal { width: min(100% - 2rem, 46rem); margin: 2.5rem auto 4rem; color: hsl(var(--color-base) / .85); font-size: .98rem; line-height: 1.7; }
.bds-legal h1 { margin: .3rem 0 .8rem; color: hsl(var(--color-base)); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.bds-legal h2 { margin: 2.2rem 0 .6rem; color: hsl(var(--color-base)); font-size: 1.2rem; font-weight: 700; scroll-margin-top: 5.5rem; }
.bds-legal p, .bds-legal ul, .bds-legal blockquote { margin: 0 0 .9rem; }
.bds-legal ul { padding-left: 1.2rem; list-style: disc; }
.bds-legal li { margin: .35rem 0; }
.bds-legal a { color: hsl(var(--color-secondary)); text-decoration: underline; text-underline-offset: 2px; }
.bds-legal strong { color: hsl(var(--color-base)); }
.bds-legal__eyebrow { color: hsl(var(--color-base) / .6); font-size: .8rem; }
.bds-legal__lead { font-size: 1.08rem; color: hsl(var(--color-base) / .75); }
.bds-legal__seller { display: flex; flex-direction: column; gap: .15rem; margin: 1.4rem 0; padding: 1rem 1.2rem; border: 1px solid hsl(var(--color-neutral)); border-radius: .8rem; background: hsl(var(--color-background-secondary)); font-size: .92rem; }
.bds-legal blockquote { padding: .9rem 1.1rem; border-left: 3px solid var(--bds-green-dark); border-radius: .4rem; background: hsl(var(--color-background-secondary)); font-size: .92rem; }
.bds-legal__more { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid hsl(var(--color-neutral)); font-size: .9rem; }

/* Footer legal links + invite-only cart note */
.bds-footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; }
.bds-footer-legal a { color: hsl(var(--color-base) / .75); text-decoration: none; }
.bds-footer-legal a:hover { color: var(--bds-green-dark); text-decoration: underline; }
.bds-invite-note { margin: .25rem 0 0; padding: .75rem .9rem; border-radius: .6rem; background: hsl(var(--color-primary) / .1); color: hsl(var(--color-base) / .85); font-size: .9rem; }
.bds-invite-note a { color: hsl(var(--color-secondary)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Real prices while invite-only (2026-10-28) */
.bds-price-note { display: block; width: 100%; margin: .35rem 0 0; font-size: .85rem; line-height: 1.35; color: hsl(var(--color-base) / .72); }


/* Alive pass (2026-10-29): scroll fade-in, CTA shine, button lift, anchor offset. All motion is off under prefers-reduced-motion. */
/* Scroll reveal: the layout script adds .bds-reveal, then .is-in when the element is in view. Uses `translate` so card hover `transform` still works. */
.bds-reveal:not(.is-in) { opacity: 0; }
.bds-reveal.is-in { animation: bds-rise 420ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bds-rise { from { opacity: 0; translate: 0 14px; } }

/* Hero CTA: a light shine sweeps across a few times after load (~420 ms each), then stops */
.bds-button--cta { position: relative; overflow: hidden; isolation: isolate; }
.bds-button--cta::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .5) 50%, transparent 70%);
    translate: -100% 0;
    animation: bds-shine 6s ease-in-out 1.2s 3;
}
@keyframes bds-shine { 0% { translate: -100% 0; } 7%, 100% { translate: 100% 0; } }

/* Soft lift on the shop's standard buttons too (theme cards/buttons already lift) */
@media (hover: hover) {
    button.bg-primary.text-white:not(:disabled):hover { transform: translateY(-1px); }
}

/* In-page links land below the fixed header (and the promo bar when it shows) */
#bds-plan, #minecraft-plans { scroll-margin-top: 5.5rem; }
body:has(.bds-nav--promo) :is(#bds-plan, #minecraft-plans) { scroll-margin-top: 8rem; }

/* One visible Java plan: a little wider than a quarter-width card */
.mc-shop__grid:has(> .mc-plan:only-child) { grid-template-columns: minmax(0, 24rem); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .bds-reveal { opacity: 1 !important; }
    .bds-button:hover, .bds-tier-card:hover, .bds-feature-card:hover, .bds-art-card--featured:hover,
    .bds-calculator-choice:hover, .bds-calculator-activity label:hover, .bds-checkout-success__button:hover,
    .mc-plan:hover, .mc-plan__button:hover, .mc-product__button:hover, .mc-shop__primary:hover,
    .mc-calculator-card:hover, .mc-product__plan-link:hover, button.bg-primary.text-white:hover { transform: none; }
}

/* Less empty space above the footer now that the Discord banner is gone (2026-10-29) */
.bds-footer { margin-top: 3rem; }
@media (max-width: 760px) { .bds-footer { margin-top: 2rem; } }


/* Brand pass (2026-10-29, v=36): Bardsen Hosting. One plan card for home + category, clearer product page,
   calmer hero (no grid lines, no box-in-box, no button glow), moving + twinkling diamonds round the mascot.
   Reduced motion: no movement, but fades and the diamonds' glow/twinkle stay. */

/* Hero surface */
.bds-hero {
    background:
        radial-gradient(ellipse at 76% 52%, rgb(58 135 93 / .3), transparent 46%),
        linear-gradient(118deg, #121e1b 0%, #172622 55%, #18332d 100%);
    box-shadow: 0 18px 48px rgb(20 45 32 / .12);
}
.bds-hero::before, .bds-hero__art::before { content: none; }
.bds-hero__art { border: 0; background: radial-gradient(circle at 50% 50%, rgb(111 236 145 / .14), transparent 58%); overflow: visible; }
.bds-hero__lead { max-width: 30rem; }
.bds-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.bds-hero__link { color: #d6f5df; font-size: .95rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(214 245 223 / .45); text-underline-offset: 4px; }
.bds-hero__link:hover { color: #fff; text-decoration-color: currentColor; }
.bds-button--primary, .bds-button--primary:hover { box-shadow: none; }

/* Entrance on load: heading, then text, then button */
.bds-enter { animation: bds-rise-in 700ms cubic-bezier(.2, .7, .2, 1) both; }
.bds-hero__lead.bds-enter { animation-delay: 120ms; }
.bds-hero__actions.bds-enter { animation-delay: 240ms; }
.bds-hero__art .bds-art__mascot { animation: bds-pop 800ms cubic-bezier(.2, .7, .2, 1) both, bds-float 5.5s ease-in-out 800ms infinite; }
@keyframes bds-rise-in { from { opacity: 0; translate: 0 22px; } }
@keyframes bds-pop { from { opacity: 0; scale: .94; } }
@keyframes bds-fade-in { from { opacity: 0; } }

/* Diamonds: calm, soothing ambient starlight (2026-11-10) */
.bds-spark {
    --c: var(--bds-pink);
    --g: rgb(239 154 203 / .5);
    position: absolute;
    z-index: 2;
    width: .65rem;
    height: .65rem;
    border-radius: 2px;
    background: var(--c);
    transform: rotate(45deg);
    pointer-events: none;
    will-change: opacity, transform, box-shadow;
}
.bds-spark--small { width: .4rem; height: .4rem; }
.bds-spark--gold { --c: var(--bds-gold); --g: rgb(242 202 119 / .5); }
.bds-spark--green { --c: var(--bds-green); --g: rgb(105 230 138 / .5); }

/* Gentle, organic breathing twinkle (never flashing or strobe-like) */
@keyframes bds-twinkle {
    0%, 100% {
        opacity: 0.28;
        scale: 0.88;
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        opacity: 0.85;
        scale: 1.08;
        box-shadow: 0 0 8px 1px var(--g);
    }
}

/* Two celestial orbits: slow, peaceful, majestic arcs around the mascot */
.bds-orbit {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(86%, 380px);
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
    animation: bds-orbit 54s linear infinite;
}
.bds-orbit--near {
    z-index: 2;
    width: min(66%, 290px);
    animation-duration: 44s;
    animation-direction: reverse;
}
.bds-orbit .bds-spark {
    top: 0;
    left: 50%;
    margin: -.325rem 0 0 -.325rem;
    animation: bds-twinkle 5.4s ease-in-out infinite, bds-orbit 54s linear infinite reverse;
}
.bds-orbit .bds-spark--small {
    margin: -.2rem 0 0 -.2rem;
    animation: bds-twinkle 4.6s ease-in-out -2.3s infinite, bds-orbit 44s linear infinite;
}
@keyframes bds-orbit { to { rotate: 360deg; } }

/* Four serene floating motes: slow, fluid, sinusoidal undulation */
.bds-spark--a {
    top: 15%;
    left: 17%;
    animation: bds-twinkle 5.2s ease-in-out -0.8s infinite, bds-drift-a 16s ease-in-out infinite;
}
.bds-spark--b {
    top: 22%;
    right: 14%;
    animation: bds-twinkle 4.8s ease-in-out -2.6s infinite, bds-drift-b 19s ease-in-out -4s infinite;
}
.bds-spark--c {
    bottom: 17%;
    right: 19%;
    animation: bds-twinkle 5.8s ease-in-out -1.5s infinite, bds-drift-a 22s ease-in-out -9s infinite reverse;
}
.bds-spark--d {
    bottom: 23%;
    left: 13%;
    animation: bds-twinkle 4.9s ease-in-out -3.7s infinite, bds-drift-b 17s ease-in-out -11s infinite;
}
@keyframes bds-drift-a {
    0%, 100% { translate: 0 0; }
    50% { translate: 5px -12px; }
}
@keyframes bds-drift-b {
    0%, 100% { translate: 0 0; }
    50% { translate: -7px 10px; }
}

/* Plans: one card design for home and category */
.bds-plans-head { margin-bottom: 1.2rem; }
.bds-plans-head h2 { margin: 0; color: hsl(var(--color-base)); font-size: clamp(1.9rem, 3.5vw, 2.55rem); font-weight: 830; letter-spacing: -0.03em; line-height: 1.1; }
.bds-plans-head p { margin: .45rem 0 0; color: hsl(var(--color-base) / .78); font-size: .98rem; line-height: 1.45; }
.bds-plans-head .bds-price-note { margin-top: .2rem; font-size: .92rem; }
.bds-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.bds-plans:has(> .bds-plan:only-child) { grid-template-columns: minmax(0, 26rem); }
@media (max-width: 1100px) { .bds-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bds-plans { grid-template-columns: 1fr; gap: .75rem; } }
.bds-plan {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1.35rem 1.3rem 1.3rem;
    border: 2px solid hsl(var(--color-neutral) / .8);
    border-radius: 14px;
    background: transparent;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.bds-plan--open { border-color: var(--bds-green-text, #1a8048); background: hsl(var(--color-background-secondary)); box-shadow: 0 10px 28px rgb(24 48 33 / .08); }
.bds-plan__name { margin: 0; color: hsl(var(--color-base)); font-size: 1.4rem; font-weight: 820; letter-spacing: -0.022em; }
.bds-plan__about { margin: .2rem 0 0; color: hsl(var(--color-base) / .7); font-size: .9rem; line-height: 1.45; }
.bds-plan__price { margin: 1rem 0 .1rem; color: hsl(var(--color-base) / .72); font-size: .92rem; }
.bds-plan__price strong { margin-right: .15rem; color: hsl(var(--color-base)); font-size: 2rem; font-weight: 820; letter-spacing: -0.025em; }
.bds-plan--soon .bds-plan__name, .bds-plan--soon .bds-plan__price strong { color: hsl(var(--color-base) / .72); }
.bds-plan__specs { margin: .7rem 0 1.25rem; padding: 0; list-style: none; border-top: 1px solid hsl(var(--color-neutral) / .8); }
.bds-plan__specs li { padding: .55rem 0; border-bottom: 1px solid hsl(var(--color-neutral) / .6); color: hsl(var(--color-base) / .78); font-size: .9rem; line-height: 1.35; }
.bds-plan__specs strong { color: hsl(var(--color-base)); font-weight: 700; }
.bds-plan__button, .bds-product__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.9rem;
    margin-top: auto;
    padding: .7rem 1rem;
    border-radius: 10px;
    color: #fff;
    background: var(--bds-green-text, #1a8048);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}
.bds-plan__button:hover, .bds-product__button:hover { color: #fff; background: #136a3a; }
.bds-plan__button--soon, .bds-product__button--soon, .bds-plan__button--soon:hover, .bds-product__button--soon:hover { color: hsl(var(--color-base) / .66); background: hsl(var(--color-neutral) / .5); cursor: default; }
@media (hover: hover) { .bds-plan--open:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(24 48 33 / .12); } }
.bds-plans-foot { max-width: 46rem; margin: 1.1rem 0 0; color: hsl(var(--color-base) / .75); font-size: .92rem; line-height: 1.55; }
.bds-plans-foot a, .bds-product__soon-note a { color: var(--bds-green-text, #1a8048); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.mc-shop__intro p { max-width: 36rem; }

/* Product page */
.bds-product { width: min(1080px, calc(100% - 2.5rem)); margin: 2rem auto 0; }
.bds-product .mc-product__back, .bds-setup-head .mc-product__back { margin-bottom: 0; color: hsl(var(--color-base) / .7); font-size: .88rem; }
.bds-product .mc-product__back:hover, .bds-setup-head .mc-product__back:hover { color: var(--bds-green-text, #1a8048); }
.bds-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 3rem; margin-top: 1.5rem; }
.bds-product__main h1 { margin: 0; color: hsl(var(--color-base)); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 830; letter-spacing: -0.036em; line-height: 1; }
.bds-product__lead { margin: .6rem 0 0; color: hsl(var(--color-base) / .75); font-size: 1.1rem; }
.bds-product__main h2 { margin: 2.2rem 0 .5rem; color: hsl(var(--color-base)); font-size: 1.1rem; font-weight: 750; }
.bds-product__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--color-neutral)); }
.bds-product__list li { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: .2rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid hsl(var(--color-neutral) / .8); line-height: 1.45; }
.bds-product__list strong { color: hsl(var(--color-base)); font-weight: 700; }
.bds-product__list span { color: hsl(var(--color-base) / .75); }
.bds-product__buy { position: sticky; top: 5.5rem; padding: 1.5rem; border: 2px solid var(--bds-green-text, #1a8048); border-radius: 14px; background: hsl(var(--color-background-secondary)); box-shadow: 0 10px 28px rgb(24 48 33 / .08); }
.bds-product__price { margin: 0; color: hsl(var(--color-base) / .72); font-size: 1rem; }
.bds-product__price strong { margin-right: .2rem; color: hsl(var(--color-base)); font-size: 2.4rem; font-weight: 830; letter-spacing: -0.025em; }
.bds-product__buy .bds-price-note { margin-top: .35rem; font-size: .92rem; }
.bds-product__button { min-height: 3.1rem; margin-top: 1.25rem; font-size: 1rem; }
.bds-product__steps { margin: 1.1rem 0 0; padding-left: 1.2rem; list-style: decimal; color: hsl(var(--color-base) / .78); font-size: .92rem; line-height: 1.5; }
.bds-product__steps li + li { margin-top: .3rem; }
.bds-product__soon-note { margin: .8rem 0 0; color: hsl(var(--color-base) / .78); font-size: .92rem; }
@media (max-width: 900px) {
    .bds-product__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .bds-product__buy { position: static; }
}
@media (max-width: 600px) {
    .bds-product { width: calc(100% - 2rem); margin-top: 1.25rem; }
    .bds-product__list li { grid-template-columns: 1fr; }
}

/* Setup (checkout) page */
.bds-setup-head h1 { margin-top: .6rem; }
.bds-setup-head p { margin: .35rem 0 0; max-width: 38rem; color: hsl(var(--color-base) / .75); }
.bds-summary__specs { margin: -.2rem 0 .4rem; color: hsl(var(--color-base) / .7); font-size: .88rem; }

/* Plan finder */
.bds-calculator-result__topline { margin: 0; color: rgb(236 248 239 / .8); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.bds-calculator-result__name { margin-top: .2rem; }
.bds-calculator-result__context { margin: .1rem 0 .7rem; }
.bds-calculator-result .bds-price-note { color: rgb(236 248 239 / .8); }
.bds-calculator-result__soon { margin: .75rem 0 0; color: rgb(236 248 239 / .85); font-size: .9rem; }
.bds-calculator-result__soon a { margin-left: .2rem; color: var(--bds-green); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: 16px side gutters, diamonds sized for the small mascot */
@media (max-width: 760px) {
    .bds-container { width: min(100% - 2rem, 560px); }
    .mc-shop { width: min(100% - 2rem, 560px); }
    .bds-orbit--wide { width: 9rem; }
    .bds-orbit--near { width: 7.2rem; }
    .bds-spark { width: .42rem; height: .42rem; }
    .bds-spark--small { width: .32rem; height: .32rem; }
    .bds-orbit .bds-spark { margin: -.21rem 0 0 -.21rem; }
    .bds-spark--c, .bds-spark--d { display: none; }
    .bds-spark--a { top: -8%; left: -14%; }
    .bds-spark--b { top: 4%; right: -12%; }
}

/* Reduced motion: keep fades and the diamonds' twinkle (no movement); everything else stays still */
@media (prefers-reduced-motion: reduce) {
    .bds-reveal:not(.is-in) { opacity: 0 !important; }
    .bds-reveal.is-in, .bds-enter, .bds-hero__art .bds-art__mascot { animation: bds-fade-in 650ms ease both !important; }
    .bds-hero__lead.bds-enter { animation-delay: 120ms !important; }
    .bds-hero__actions.bds-enter { animation-delay: 240ms !important; }
    .bds-spark { animation: bds-twinkle 3.4s ease-in-out infinite !important; }
    .bds-spark--b { animation-delay: -1.2s !important; }
    .bds-spark--c { animation-delay: -2s !important; }
    .bds-spark--d { animation-delay: -.6s !important; }
    .bds-orbit .bds-spark--small { animation-delay: -1.7s !important; }
    .bds-plan--open:hover { transform: none; }
}

/* Brand pass fixes (v=37) */
.bds-plan__about { min-height: calc(2 * 1.45em); }
.bds-orbit .bds-spark { animation: bds-twinkle 3.4s ease-in-out infinite, bds-orbit 30s linear infinite reverse; } /* counter-spin: stays a diamond */
.bds-orbit--near .bds-spark { animation: bds-twinkle 2.9s ease-in-out -1.7s infinite, bds-orbit 21s linear infinite; }
.bds-calculator-result__estimate { display: block; }
.mc-shop .bds-plans-head h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.mc-shop__intro p { max-width: 44rem; }
@media (max-width: 600px) {
    /* Coming-soon cards are shorter on phones so Starter isn't buried */
    .bds-plan--soon { padding: 1rem 1.1rem; }
    .bds-plan--soon .bds-plan__about { min-height: 0; }
    .bds-plan--soon .bds-plan__price { margin-top: .5rem; }
    .bds-plan--soon .bds-plan__specs { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .4rem 0 .8rem; border: 0; }
    .bds-plan--soon .bds-plan__specs li { padding: 0; border: 0; }
    .bds-plan--soon .bds-plan__button { min-height: 2.4rem; padding: .45rem 1rem; font-size: .88rem; }
    .bds-plan__about { min-height: 0; }
}

/* Tweaks (2026-10-29): fade the mascot's bottom edge instead of a hard cut (image is cropped at the bottom). */
.bds-art__mascot {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}

/* Invite-only section + gentler mascot fade (2026-10-29) */
.bds-invite { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding: 1.6rem 1.8rem; border: 1px solid hsl(var(--color-primary) / .25); border-radius: 1rem; background: hsl(var(--color-primary) / .06); }
.bds-invite__copy h2 { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.bds-invite__copy p { margin: 0; max-width: 40rem; color: hsl(var(--color-base) / .75); line-height: 1.5; }
.bds-invite__button { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.25rem; border-radius: .7rem; background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.bds-invite__button:hover { background: #4752c4; transform: translateY(-1px); }
@media (max-width: 640px) { .bds-invite { flex-direction: column; align-items: flex-start; margin-top: 2rem; padding: 1.25rem; } .bds-invite__button { width: 100%; justify-content: center; } }
.bds-art__mascot { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
/* AA-contrast status colours (Tailwind 700s; the prebuilt app CSS doesn't include them) */
.text-green-700 { color: oklch(52.7% .154 150.069); }
.text-orange-700 { color: oklch(55.3% .195 38.402); }
.text-red-700 { color: oklch(50.5% .213 27.518); }

/* Hero stars ease away from the cursor (script in layouts/app.blade.php). */


/* SEO pass 2026-11-08: small heading above the 3 setup steps on the product page */
.bds-product__steps-title { margin: 1.2rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--color-base) / .6); }
.bds-product__steps-title + .bds-product__steps { margin-top: .5rem; }

/* 2026-11-08 homepage offers: 3 cards share the plan grid */
.bds-plans--offers { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* 2026-11-08 owner: hero title wrapped into 4 narrow lines on a 1760 px Windows screen. Give the copy more width,
   scale the title with the viewport instead of a fixed top size, and keep the two intended lines. */
@media (min-width: 901px) {
    .bds-hero { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); }
    .bds-hero__copy { padding: clamp(2rem, 4vw, 3.6rem) clamp(1.8rem, 3.5vw, 3.2rem); }
    .bds-hero h1 { max-width: none; font-size: clamp(2.6rem, 4.3vw, 4.4rem); letter-spacing: -0.036em; line-height: 1.04; text-wrap: balance; }
    .bds-hero__lead { max-width: 520px; }
}

/* 2026-11-08 owner: no pill buttons. Same 10px radius as the plan buttons; the hero card is 28px with 18px+ padding so 10px keeps inner = outer - padding. */
.bds-button, .bds-invite__button, .bds-community-promo__button, .mc-plan__badge { border-radius: 10px; }

/* 2026-11-09 polish pass: skip link, tabular numbers, contrast, no inline specs on soon cards */
.bds-skip { position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: .55rem .9rem; border-radius: 10px; background: #1a8048; color: #fff; font-weight: 600; transition: top .15s; }
.bds-skip:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }
.bds-plan__price, .bds-product__price, .bds-summary, .bds-join__address, .bds-service-row__meta, table td, .bds-calculator-result { font-variant-numeric: tabular-nums; }
.bds-plan__button--soon, .bds-product__button--soon, .bds-plan__button--soon:hover, .bds-product__button--soon:hover { color: hsl(var(--color-base) / .8); background: hsl(var(--color-neutral) / .45); }
@media (max-width: 900px) { .bds-plan--soon .bds-plan__specs { display: block; gap: 0; margin: .7rem 0 1.25rem; border-top: 1px solid hsl(var(--color-neutral) / .8); } .bds-plan--soon .bds-plan__specs li { padding: .55rem 0; border-bottom: 1px solid hsl(var(--color-neutral) / .6); } }
.bds-hero__lead, .mc-product__back { color: rgb(240 255 244 / .82); }

/* 2026-11-09 websites: DNS hint + WordPress login on the service page */
.bds-site-dns { margin: .8rem 0 0; font-size: .9rem; line-height: 1.5; color: hsl(var(--color-base) / .78); }
.bds-site-dns code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.bds-site-login { display: grid; gap: .5rem; margin: .9rem 0 0; }
.bds-site-login div { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem; align-items: center; font-size: .92rem; }
.bds-site-login dt { color: hsl(var(--color-base) / .62); }
.bds-site-login dd { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bds-site-login code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* 2026-11-10 Byte logo mark: smooth vector rendering and no bottom fade mask */
.bds-art__mascot {
    image-rendering: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

/* 2026-11-10 One accent colour: invite button uses brand green instead of Discord blurple */
.bds-invite__button {
    background: #1a8048;
    color: #fff;
}
.bds-invite__button:hover {
    background: #14693a;
}

/* Hero Byte (written by /root/byte-outline/final/hero.py: change it there). Inline SVG that reacts to the visitor,
   driven by the script at the end of layouts/app.blade.php.
   - face follows the cursor: the script eases .bds-byte__gaze and .bds-byte__smile (subtle 2.5D parallax) every frame with responsive 0.28 easing and smooth wide-screen tracking
   - passive idle blink: friendly natural blink loop (7s) when sitting idle or on mobile
   - .is-rebooting (status light clicked, 3.6s, every part on one clock: change the percentages together):
     the face switches off behind a classic CRT scanline that pinches to a dot (no uneasy fades or shutter lids),
     he rests and gently dims while the status light breathes and a sleek boot bar fills (turning mint at 100%),
     the scanline opens to reveal his face, then a celebratory gold burst, joyful wake-up hop, and friendly blink
   - .is-reloading + data-skin (drive slot clicked, 2.4s): floppy disk in current color slides down and drops away;
     new disk in incoming color slides in from below and locks into the drive slot;
     Byte then transforms into the new color with an LED burst and happy blink (0 green, 1 pink, 2 gold) */
.bds-byte {
    overflow: visible;
    height: auto;
    --b-body: #2fa75d;
    --b-wall: #1a8048;
    --b-line: #0e4f2c;
    --b-acc: #f2ca77;
    --next-body: #ef9acb;
    --next-wall: #cf6fa6;
    --next-line: #7a2e5c;
    --next-acc: #69e68a;
}
.bds-byte[data-skin="1"] {
    --b-body: #ef9acb;
    --b-wall: #cf6fa6;
    --b-line: #7a2e5c;
    --b-acc: #69e68a;
    --next-body: #f2ca77;
    --next-wall: #d09c3a;
    --next-line: #7a5310;
    --next-acc: #ef9acb;
}
.bds-byte[data-skin="2"] {
    --b-body: #f2ca77;
    --b-wall: #d09c3a;
    --b-line: #7a5310;
    --b-acc: #ef9acb;
    --next-body: #2fa75d;
    --next-wall: #1a8048;
    --next-line: #0e4f2c;
    --next-acc: #f2ca77;
}
.bds-byte__wall, .bds-byte__shell, .bds-byte__slot, .bds-byte__led, .bds-byte__glow,
.bds-byte__disk-wall, .bds-byte__disk-face, .bds-byte__disk-ink,
.bds-byte__disk-in-wall, .bds-byte__disk-in-face, .bds-byte__disk-in-ink,
.bds-byte__boot-wall, .bds-byte__boot-shell, .bds-byte__boot-slot, .bds-byte__boot-led {
    transition: fill .35s ease, stroke .35s ease;
}
.bds-byte__wall, .bds-byte__disk-wall { fill: var(--b-wall); stroke: var(--b-line); }
.bds-byte__shell, .bds-byte__disk-face { fill: var(--b-body); stroke: var(--b-line); }
.bds-byte__slot, .bds-byte__disk-ink { fill: var(--b-wall); }
.bds-byte__led { fill: var(--b-acc); }
.bds-byte__glow { stroke: var(--b-acc); opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .22s ease, scale .22s ease, stroke .35s ease; }
.bds-byte__disk-in-wall { fill: var(--next-wall); stroke: var(--next-line); }
.bds-byte__disk-in-face { fill: var(--next-body); stroke: var(--next-line); }
.bds-byte__disk-in-ink { fill: var(--next-wall); }
.bds-byte__boot, .bds-byte__crt { opacity: 0; }
.bds-byte__crt, .bds-byte__eye, .bds-byte__glow, .bds-byte__disk, .bds-byte__disk--out, .bds-byte__disk--in { transform-box: fill-box; transform-origin: center; }
.bds-byte__boot-fill { transform-box: fill-box; transform-origin: left center; }
.bds-byte__led, .bds-byte__glow, .bds-byte__disk, .bds-byte__disk--out, .bds-byte__disk--in { pointer-events: none; }
.bds-byte__btn, .bds-byte__slot-btn { pointer-events: all; cursor: pointer; }
.bds-byte__body:has(.bds-byte__btn:hover) .bds-byte__led, .bds-byte__body:has(.bds-byte__slot-btn:hover) .bds-byte__slot { filter: brightness(1.16); }
.bds-byte:not(.is-rebooting) .bds-byte__body:has(.bds-byte__btn:hover) .bds-byte__glow { opacity: .42; scale: 1.25; }
.bds-byte__disk, .bds-byte__disk--out, .bds-byte__disk--in { opacity: 0; }
.bds-byte.is-reloading .bds-byte__disk--out, .bds-byte.is-ejecting .bds-byte__disk--out { animation: bds-disk-out 2.4s both; }
.bds-byte.is-reloading .bds-byte__disk--in, .bds-byte.is-ejecting .bds-byte__disk--in { animation: bds-disk-in 2.4s both; }
.bds-byte.is-reloading .bds-byte__body, .bds-byte.is-ejecting .bds-byte__body { animation: bds-reload-body 2.4s both; }
.bds-byte.is-reloading .bds-byte__eye, .bds-byte.is-ejecting .bds-byte__eye { animation: bds-reload-eye 2.4s both; }
.bds-byte.is-reloading .bds-byte__glow, .bds-byte.is-ejecting .bds-byte__glow { animation: bds-reload-glow 2.4s both; }
.bds-byte.is-reloading .bds-byte__slot, .bds-byte.is-ejecting .bds-byte__slot { fill: var(--b-line); }
.bds-byte.is-rebooting .bds-byte__btn, .bds-byte.is-rebooting .bds-byte__slot-btn,
.bds-byte.is-reloading .bds-byte__btn, .bds-byte.is-reloading .bds-byte__slot-btn,
.bds-byte.is-ejecting .bds-byte__btn, .bds-byte.is-ejecting .bds-byte__slot-btn { pointer-events: none; }
.bds-byte.is-blinking:not(.is-rebooting):not(.is-reloading):not(.is-ejecting) .bds-byte__eye { animation: bds-byte-blink 150ms cubic-bezier(.4, 0, .2, 1); }
.bds-byte.is-rebooting .bds-byte__face { animation: bds-byte-rb-face 3.5s both; }
.bds-byte.is-rebooting .bds-byte__crt { animation: bds-byte-rb-crt 3.5s both; }
.bds-byte.is-rebooting .bds-byte__eye { animation: bds-byte-rb-eye 3.5s both; }
.bds-byte.is-rebooting .bds-byte__boot { animation: bds-byte-rb-boot 3.5s both; }
.bds-byte.is-rebooting .bds-byte__boot-fill { animation: bds-byte-rb-fill 3.5s both; }
.bds-byte.is-rebooting .bds-byte__led { animation: bds-byte-rb-led 3.5s both; }
.bds-byte.is-rebooting .bds-byte__glow { animation: bds-byte-rb-glow 3.5s both; }
.bds-byte.is-rebooting .bds-byte__body { animation: bds-byte-rb-body 3.5s both; }
/* shutdown 0-16%, sleep & loading 17-53%, screen power-on 54-62%, wake-up hop & burst 62-76%, friendly blink 78-86% */
@keyframes bds-byte-rb-face {
    0%, 7.9% { opacity: 1; }
    8%, 61.9% { opacity: 0; }
    62%, 100% { opacity: 1; }
}
@keyframes bds-byte-rb-crt {
    0%, 6% { opacity: 0; scale: 1 1; }
    8% { opacity: 1; scale: 1 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    16% { opacity: 1; scale: .04 1; animation-timing-function: ease-out; }
    19% { opacity: 0; scale: .04 1; }
    54% { opacity: 0; scale: .04 1; }
    56% { opacity: 1; scale: .04 1; animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
    61.5% { opacity: 1; scale: 1 1; animation-timing-function: ease-out; }
    63%, 100% { opacity: 0; scale: 1 1; }
}
@keyframes bds-byte-rb-eye {
    0%, 75% { scale: 1 1; }
    79%, 83% { scale: 1.14 .2; animation-timing-function: ease-in-out; }
    87%, 100% { scale: 1 1; }
}
@keyframes bds-byte-rb-boot {
    0%, 19% { opacity: 0; animation-timing-function: ease-in; }
    22%, 50% { opacity: 1; animation-timing-function: ease-out; }
    54%, 100% { opacity: 0; }
}
@keyframes bds-byte-rb-fill {
    0%, 21% { scale: 0 1; fill: #f5f1e6; }
    22% { animation-timing-function: cubic-bezier(.35, .7, .25, 1); }
    46% { scale: 1 1; fill: #f5f1e6; animation-timing-function: ease-in-out; }
    49%, 100% { scale: 1 1; fill: #69e68a; }
}
@keyframes bds-byte-rb-led {
    0% { fill: var(--b-acc); }
    5% { fill: #fffbe9; animation-timing-function: ease-out; }
    16%, 50% { fill: #354b42; animation-timing-function: ease-in-out; }
    33% { fill: #c79a40; animation-timing-function: ease-in-out; }
    58% { fill: #ffffff; animation-timing-function: ease-out; }
    66% { fill: #fffbe9; animation-timing-function: ease-out; }
    76%, 100% { fill: var(--b-acc); }
}
@keyframes bds-byte-rb-glow {
    0%, 57% { scale: .9; opacity: 0; }
    59% { scale: .95; opacity: .9; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
    74% { scale: 3.2; opacity: 0; }
    75%, 100% { opacity: 0; }
}
@keyframes bds-byte-rb-body {
    0% { translate: 0 0; animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
    16% { translate: 0 1.6px; animation-timing-function: ease-in-out; }
    34% { translate: 0 2.0px; animation-timing-function: ease-in-out; }
    52% { translate: 0 1.6px; animation-timing-function: cubic-bezier(.22, 1.28, .36, 1); }
    64% { translate: 0 -3.2px; animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
    76%, 100% { translate: 0 0; }
}
/* Organic blink: natural 150ms pill-squash blink */
@keyframes bds-byte-blink {
    0%, 100% { scale: 1 1; }
    45%, 55% { scale: 1.14 .18; }
}
@keyframes bds-disk-out {
    0% { translate: 0 0; rotate: 0deg; opacity: 1; animation-timing-function: cubic-bezier(.22, 1.18, .36, 1); }
    22%, 35% { translate: 0 14.5px; rotate: 0deg; opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .85, .35); }
    46% { translate: 4px 34px; rotate: 14deg; opacity: 0; }
    47%, 100% { opacity: 0; translate: 4px 34px; }
}
@keyframes bds-disk-in {
    0%, 42% { opacity: 0; translate: -2px 28px; rotate: -8deg; }
    48% { opacity: 1; translate: -1px 20px; rotate: -4deg; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    58%, 64% { opacity: 1; translate: 0 14.5px; rotate: 0deg; animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
    78% { opacity: 1; translate: 0 0; rotate: 0deg; }
    82%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes bds-reload-body {
    0% { translate: 0 0; }
    8% { translate: 0 -1.2px; }
    22%, 68% { translate: 0 0; }
    72% { translate: 0 1.2px; animation-timing-function: cubic-bezier(.22, 1.28, .36, 1); }
    80% { translate: 0 -2.4px; animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
    92%, 100% { translate: 0 0; }
}
@keyframes bds-reload-eye {
    0%, 78% { scale: 1 1; }
    82%, 87% { scale: 1.14 .2; animation-timing-function: ease-in-out; }
    92%, 100% { scale: 1 1; }
}
@keyframes bds-reload-glow {
    0%, 76% { opacity: 0; scale: .9; }
    79% { opacity: .85; scale: 1.1; animation-timing-function: ease-out; }
    90% { opacity: 0; scale: 2.4; }
    91%, 100% { opacity: 0; }
}
@keyframes bds-byte-calm-eject { 0%, 100% { translate: 0 14.2px; opacity: 0; } 15%, 80% { translate: 0 14.2px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .bds-byte.is-blinking .bds-byte__eye,
    .bds-byte.is-rebooting .bds-byte__eye, .bds-byte.is-rebooting .bds-byte__glow, .bds-byte.is-rebooting .bds-byte__body, .bds-byte.is-rebooting .bds-byte__crt,
    .bds-byte.is-reloading .bds-byte__body, .bds-byte.is-reloading .bds-byte__eye, .bds-byte.is-reloading .bds-byte__glow,
    .bds-byte.is-ejecting .bds-byte__body, .bds-byte.is-ejecting .bds-byte__eye { animation: none; }
    .bds-byte.is-reloading .bds-byte__disk--out, .bds-byte.is-ejecting .bds-byte__disk--out { animation: bds-byte-calm-eject 2.1s both; }
}

/* Footer redesign (2026-11-10) */
:root {
    --bds-footer-link-hover: #1a8048;
}
.dark {
    --bds-footer-link-hover: #69e68a;
}
.bds-footer {
    margin-top: 5rem;
    padding-top: 3.5rem;
    padding-bottom: 2.25rem;
    padding-inline: 0;
    background: hsl(var(--color-background-secondary));
    border-top: 1px solid hsl(var(--color-neutral));
}
@media (max-width: 768px) {
    .bds-footer {
        margin-top: 3.5rem;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
}
.bds-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
}
@media (max-width: 640px) {
    .bds-footer__inner {
        padding-inline: 1.25rem;
    }
}
.bds-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem 2.5rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .bds-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }
    .bds-footer__col--brand {
        grid-column: 1 / -1;
        margin-bottom: 0.75rem;
    }
}
@media (max-width: 640px) {
    .bds-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .bds-footer__col--brand {
        margin-bottom: 0;
    }
}
.bds-footer__col {
    display: flex;
    flex-direction: column;
}
.bds-footer__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 0.85rem;
    align-self: flex-start;
    transition: opacity 0.15s ease;
}
.bds-footer__logo-link:hover {
    opacity: 0.88;
}
.bds-footer__tagline {
    color: hsl(var(--color-base) / 0.72);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 380px;
    margin: 0 0 1.25rem 0;
}
.bds-footer__status {
    display: flex;
    align-items: center;
}
.bds-footer__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--color-base) / 0.82);
    background: hsl(var(--color-background));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.bds-footer__status-badge:hover {
    border-color: var(--bds-footer-link-hover);
    color: hsl(var(--color-base));
    box-shadow: 0 2px 8px rgba(47, 167, 93, 0.15);
    transform: translateY(-1px);
}
.bds-footer__status-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #22c55e;
}
.bds-footer__status-ping {
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background-color: #4ade80;
    opacity: 0.7;
    animation: bds-status-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bds-status-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bds-footer__status-ping { animation: none; }
}
.bds-footer__heading {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--color-base) / 0.95);
    margin: 0 0 1rem 0;
}
.bds-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.bds-footer__nav-list li {
    margin: 0;
    padding: 0;
}
.bds-footer__nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9125rem;
    color: hsl(var(--color-base) / 0.72);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.bds-footer__nav-list a:hover {
    color: var(--bds-footer-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bds-footer__invite-link {
    color: var(--bds-footer-link-hover) !important;
    font-weight: 500;
}
.bds-footer__ext-icon {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.bds-footer__nav-list a:hover .bds-footer__ext-icon,
.bds-footer__status-badge:hover .bds-footer__ext-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}
.bds-footer__bottom {
    margin-top: 3.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--color-neutral));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: hsl(var(--color-base) / 0.62);
}
.bds-footer__copyright,
.bds-footer__note {
    margin: 0;
    line-height: 1.4;
}
.bds-footer__note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
@media (max-width: 640px) {
    .bds-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 2.25rem;
        padding-top: 1.25rem;
    }
}
.bds-footer a:focus-visible {
    outline: 2px solid var(--bds-footer-link-hover);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Hero Title Optical Period Alignment & Dot Accents (2026-11-10) */
.bds-hero__phrase-site {
    white-space: nowrap;
}
.bds-hero h1 span.bds-hero__phrase-site {
    color: var(--bds-green);
}
.bds-hero__dot {
    display: inline-block;
    letter-spacing: 0 !important;
    line-height: 1;
}
.bds-hero__dot--server {
    margin-left: 0.02em;
}
.bds-hero__dot--bot {
    margin-left: 0.055em;
    margin-right: 0.04em;
}
.bds-hero__dot--site {
    margin-left: 0.04em;
}
.bds-hero h1 .bds-hero__dot--green {
    color: var(--bds-green) !important;
}
.bds-hero h1 .bds-hero__dot--white,
.bds-hero h1 span .bds-hero__dot--white {
    color: #ffffff !important;
}

/* Site-wide CTA Improvements (2026-11-10) */
.bds-button--primary,
.bds-plan__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 10px;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bds-button--primary {
    color: #0b1e14 !important;
    background: linear-gradient(180deg, #5df094 0%, #3cd876 100%) !important;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.45) inset,
                0 3px 14px rgb(50 205 105 / 0.38),
                0 1px 3px rgb(0 0 0 / 0.12) !important;
    border: 1px solid rgb(30 160 80 / 0.3) !important;
}

.bds-button--primary:hover {
    color: #06150e !important;
    background: linear-gradient(180deg, #70f7a3 0%, #4ae083 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset,
                0 6px 22px rgb(50 205 105 / 0.5),
                0 2px 5px rgb(0 0 0 / 0.15) !important;
}

.bds-button--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset,
                0 2px 8px rgb(50 205 105 / 0.3) !important;
}

/* Secondary Hero Glass CTA */
.bds-button--glass {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 10px;
    color: #f5fff7;
    background: rgb(255 255 255 / 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.bds-button--glass:hover {
    color: #ffffff;
    background: rgb(255 255 255 / 0.14);
    border-color: rgb(255 255 255 / 0.45);
    transform: translateY(-2px);
}

.bds-button--glass:active {
    transform: translateY(0);
}

/* Plan card CTA and headers - perfectly aligned and even layout */
.bds-plan__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-height: 4.6rem;
    margin-bottom: 0.35rem;
}

.bds-plan__name {
    margin: 0;
    line-height: 1.15;
}

.bds-plan__about {
    margin: 0.2rem 0 0;
    min-height: 4.2rem;
    color: hsl(var(--color-base) / .7);
    font-size: .9rem;
    line-height: 1.45;
}

.bds-plan__pill-soon {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgb(105 230 138 / 0.14);
    border: 1px solid rgb(105 230 138 / 0.28);
    color: var(--bds-green-text, #1a8048);
}

.dark .bds-plan__pill-soon {
    background: rgb(105 230 138 / 0.12);
    border-color: rgb(105 230 138 / 0.35);
    color: #69e68a;
}

.bds-plan__button {
    min-height: 2.85rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.92rem;
    color: #ffffff !important;
    background: #1a8048 !important;
    border: 1px solid rgb(14 79 44 / 0.3);
    box-shadow: 0 2px 8px rgb(26 128 72 / 0.22);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .bds-plan__header {
        min-height: 0;
    }
}

.bds-plan__button:hover {
    background: #136a3a !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgb(26 128 72 / 0.32);
}

.bds-plan__button:active {
    transform: translateY(0);
}

.dark .bds-plan__button {
    background: #238b50 !important;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}

.dark .bds-plan__button:hover {
    background: #2ba05e !important;
    box-shadow: 0 4px 18px rgb(43 160 94 / 0.35);
}

/* Sharp high-contrast logo rendering */
.bds-nav img, .bds-footer img, img[src*="bardsen-logo"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    transform: translateZ(0);
}



/* Nav Logo Sizing & Clarity (2026-11-10) */
.bds-nav__logo-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.bds-nav__logo {
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

@media (min-width: 640px) {
    .bds-nav__logo {
        height: 46px !important;
        max-height: 46px !important;
    }
}

/* Six offers on the homepage and three-plan categories (game servers, storage, VPS; 2026-11-10): three columns
   on a desktop, so no row ends with one or two orphans. */
@media (min-width: 1101px) {
    .bds-plans--offers, .bds-plans:has(> .bds-plan:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* What we host cards (written by /root/shop-newproducts/offers.py: change it there). Three big focus cards (storage, websites,
   VPS) and three small ones; each card is one link with its own small picture, a title, one line and a price. */
.bds-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bds-offer {
    display: flex; min-width: 0; flex-direction: column; padding: 1rem 1.1rem 1.05rem;
    border: 1px solid hsl(var(--color-neutral) / .9); border-radius: 14px; background: hsl(var(--color-background-secondary));
    color: hsl(var(--color-base)); text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bds-offer:hover, .bds-offer:focus-visible { border-color: var(--bds-green-text, #1a8048); box-shadow: 0 12px 28px rgb(24 48 33 / .1); transform: translateY(-2px); }
.bds-offer:focus-visible { outline: 2px solid var(--bds-green-text, #1a8048); outline-offset: 2px; }
.bds-offer h3 { margin: .9rem 0 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.bds-offer > p { margin: .2rem 0 0; color: hsl(var(--color-base) / .72); font-size: .9rem; line-height: 1.4; }
.bds-offer .bds-offer__price { display: flex; align-items: baseline; gap: .3rem; margin-top: auto; padding-top: .8rem; color: hsl(var(--color-base) / .72); font-size: .88rem; font-variant-numeric: tabular-nums; }
.bds-offer__price strong { color: hsl(var(--color-base)); font-size: 1.3rem; font-weight: 820; letter-spacing: -.02em; }
.bds-offer__price svg { align-self: center; margin-left: auto; color: var(--bds-green-text, #1a8048); transition: translate 180ms ease; }
.bds-offer:hover .bds-offer__price svg { translate: 3px 0; }
.bds-offer--big { padding: 1.15rem 1.25rem 1.2rem; border-width: 2px; }
.bds-offer--big h3 { margin-top: 1.1rem; font-size: 1.5rem; }
.bds-offer--big > p { font-size: .96rem; }
.bds-offer--big .bds-offer__price strong { font-size: 1.9rem; }
.bds-offer__art { display: flex; height: 3.4rem; border-radius: 10px; background: hsl(var(--color-neutral) / .38); overflow: hidden; }
.bds-offer--big .bds-offer__art { height: 8.5rem; }
/* websites: a small browser window */
.bds-art-browser { flex-direction: column; padding: .8rem .9rem 0; }
.bds-art-browser__bar { display: flex; align-items: center; gap: .3rem; padding: .4rem .55rem; border-radius: 8px 8px 0 0; background: hsl(var(--color-background-secondary)); border: 1px solid hsl(var(--color-neutral) / .9); border-bottom: 0; }
.bds-art-browser__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--color-neutral)); }
.bds-art-browser__bar span { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: .12rem .6rem; border-radius: 999px; background: hsl(var(--color-neutral) / .45); color: hsl(var(--color-base) / .8); font-size: .78rem; font-weight: 600; }
.bds-art-browser__bar svg { color: var(--bds-green-text, #1a8048); }
.bds-art-browser__page { display: grid; flex: 1; grid-template-columns: 1fr 34%; gap: .4rem .7rem; align-content: start; padding: .7rem .7rem 0; background: hsl(var(--color-background-secondary)); border: 1px solid hsl(var(--color-neutral) / .9); border-top: 0; }
.bds-art-browser__page b { grid-column: 1; height: .7rem; width: 70%; border-radius: 4px; background: hsl(var(--color-base) / .75); }
.bds-art-browser__page u { grid-column: 1; height: .42rem; border-radius: 4px; background: hsl(var(--color-neutral)); }
.bds-art-browser__page em { grid-column: 2; grid-row: 1 / span 3; border-radius: 6px 6px 0 0; background: var(--bds-green-dark, #2fa75d); }
/* VPS: a terminal */
.bds-offer__art.bds-art-term { flex-direction: column; justify-content: center; gap: .35rem; padding: 0 1.1rem; background: #14201d; color: #f5f1e6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.bds-art-term span { white-space: nowrap; }
.bds-art-term b { color: #69e68a; font-weight: 600; }
.bds-art-term i { display: inline-block; width: .5rem; height: 1rem; vertical-align: -.15rem; background: #f5f1e6; animation: bds-caret 1.1s steps(1) infinite; }
@keyframes bds-caret { 50% { opacity: 0; } }
/* Minecraft: the two editions */
.bds-art-seg { align-items: center; gap: .3rem; padding: .35rem; }
.bds-art-seg span { display: flex; flex: 1; height: 100%; align-items: center; justify-content: center; border-radius: 7px; color: hsl(var(--color-base) / .8); font-size: .88rem; font-weight: 700; }
.bds-art-seg span:first-child { background: hsl(var(--color-background-secondary)); color: hsl(var(--color-base)); box-shadow: 0 1px 3px rgb(20 32 29 / .14); }
/* storage, game servers, bots: dark panels in the same style as the VPS terminal (owner loved that one) */
.bds-offer__art.bds-art-files, .bds-offer__art.bds-art-servers, .bds-offer__art.bds-art-chat { flex-direction: column; justify-content: center; background: #14201d; color: #f5f1e6; }
.bds-art-files { gap: .2rem; padding: 0 .9rem; }
.bds-art-files span, .bds-art-servers span { display: flex; align-items: center; gap: .55rem; padding: .32rem .45rem; border-radius: 6px; font-size: .84rem; white-space: nowrap; }
.bds-art-files span:nth-child(odd) { background: rgb(245 241 230 / .05); }
.bds-art-files span > svg { color: #69e68a; flex: none; }
.bds-art-files b, .bds-art-servers b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.bds-art-files em { margin-left: auto; color: rgb(245 241 230 / .55); font-style: normal; font-size: .76rem; }
.bds-art-files i { display: inline-flex; align-items: center; gap: .2rem; min-width: 4.2rem; justify-content: flex-end; color: #69e68a; font-style: normal; font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bds-art-files__bar { width: 4.5rem; height: .35rem; border-radius: 99px; background: rgb(245 241 230 / .14); overflow: hidden; }
.bds-art-files__bar u { display: block; width: 72%; height: 100%; border-radius: inherit; background: #69e68a; }
.bds-art-servers { gap: .15rem; padding: 0 .55rem; }
.bds-art-servers span:first-child { background: rgb(105 230 138 / .12); }
.bds-art-servers em, .bds-art-servers i { display: inline-flex; align-items: center; gap: .2rem; color: rgb(245 241 230 / .6); font-style: normal; font-size: .74rem; font-variant-numeric: tabular-nums; }
.bds-art-servers em { margin-left: auto; }
.bds-art-servers i { min-width: 3.4rem; justify-content: flex-end; color: #69e68a; }
.bds-art-chat { align-items: flex-start; gap: .3rem; padding: 0 .75rem; font-size: .8rem; }
.bds-art-chat span { padding: .18rem .5rem; border-radius: 6px; background: rgb(245 241 230 / .07); white-space: nowrap; }
.bds-art-chat span b { display: inline-flex; align-items: center; gap: .2rem; margin-right: .3rem; color: #69e68a; font-weight: 700; }
.bds-art-chat .bds-art-chat__you b { color: #f2ca77; }
.bds-offer:not(.bds-offer--big) .bds-offer__art { height: 4.2rem; }
@media (max-width: 900px) {
    .bds-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bds-offer--big .bds-offer__art { height: 7rem; }
}
@media (max-width: 600px) {
    .bds-offers { grid-template-columns: 1fr; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bds-offer, .bds-offer__price svg { transition: none; }
    .bds-offer:hover { transform: none; }
    .bds-art-term i { animation: none; }
}

/* ==========================================================================
   Branded Error Pages (404, 500, 403)
   ========================================================================== */
.bds-error {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 5rem;
  margin: 0 auto;
}
.bds-error__mascot {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.5rem;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12));
}
.bds-error__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a8048;
  background: rgba(47, 167, 93, 0.12);
  border: 1px solid rgba(47, 167, 93, 0.25);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}
.bds-error__badge--500 {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
}
.bds-error__badge--403 {
  color: #d97706;
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
}
.bds-error__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #14201d;
}
.dark .bds-error__title {
  color: #eef7f1;
}
.bds-error__desc {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 2rem;
  color: #4e635b;
}
.dark .bds-error__desc {
  color: #9cb3a8;
}
.bds-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 380px;
}
.bds-error__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.25rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1 160px;
  white-space: nowrap;
}
.bds-error__btn--primary {
  background: #1a8048;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(26, 128, 72, 0.25);
}
.bds-error__btn--primary:hover {
  background: #14693a;
  transform: translateY(-1px);
}
.bds-error__btn--secondary {
  background: #ffffff;
  color: #14201d !important;
  border: 1px solid #dce8e0;
}
.dark .bds-error__btn--secondary {
  background: #16241f;
  color: #eef7f1 !important;
  border-color: #263c33;
}
.bds-error__btn--secondary:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: #1a8048;
}
.dark .bds-error__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bds-error__foot {
  font-size: 0.875rem;
  color: #5d6f68;
  border-top: 1px solid #e5e7eb;
  padding-top: 1.5rem;
  max-width: 400px;
  width: 100%;
}
.dark .bds-error__foot {
  border-color: #263c33;
  color: #9cb3a8;
}
.bds-error__foot a {
  color: #1a8048;
  font-weight: 600;
  text-decoration: none;
}
.bds-error__foot a:hover {
  text-decoration: underline;
}

/* Interactive Game Tiles / Visual Covers & Revealed Details (2026-11-10) */
[x-cloak] { display: none !important; }

.bds-game-tiles-section {
    padding-top: clamp(2rem, 5vw, 3.5rem);
}

.bds-game-tiles-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.bds-game-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 2px solid hsl(var(--color-neutral) / 0.8);
    border-radius: 12px;
    background: hsl(var(--color-background-secondary));
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bds-game-tile:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--color-primary) / 0.6);
    box-shadow: 0 10px 24px rgb(20 32 29 / 0.08);
}

.bds-game-tile:focus-visible {
    outline: 2px solid var(--bds-green-text, #1a8048);
    outline-offset: 3px;
}

.bds-game-tile.is-selected {
    border-color: var(--bds-green-text, #1a8048);
    box-shadow: 0 0 0 1px var(--bds-green-text, #1a8048), 0 12px 30px rgb(26 128 72 / 0.16);
}

.dark .bds-game-tile.is-selected {
    border-color: #69e68a;
    box-shadow: 0 0 0 1px #69e68a, 0 12px 30px rgb(105 230 138 / 0.18);
}

.bds-game-tile::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--bds-green-text, #1a8048);
    opacity: 0;
    transition: opacity 180ms ease, bottom 180ms ease;
    z-index: 5;
}

.dark .bds-game-tile::after {
    background: #69e68a;
}

.bds-game-tile.is-selected::after {
    opacity: 1;
    bottom: -7px;
}

.bds-game-tile__cover {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 72px;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
}

.bds-game-tile__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgb(15 23 20 / 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1;
}

.bds-game-tile__badge em {
    font-style: normal;
    color: #f4fff5;
    letter-spacing: 0.02em;
}

.bds-game-tile__indicator {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--bds-green-text, #1a8048);
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
}

.dark .bds-game-tile__indicator {
    background: #69e68a;
    color: #0b1c13;
}

.bds-game-tile.is-selected .bds-game-tile__indicator {
    opacity: 1;
    transform: scale(1);
}

.bds-game-tile__body {
    padding: 0.75rem 0.85rem 0.85rem;
    background: hsl(var(--color-background-secondary));
}

.bds-game-tile__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: hsl(var(--color-base));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bds-game-tile.is-selected .bds-game-tile__name {
    color: var(--bds-green-text, #1a8048);
}

.dark .bds-game-tile.is-selected .bds-game-tile__name {
    color: #69e68a;
}

.bds-game-tile__price {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: hsl(var(--color-base) / 0.65);
    font-variant-numeric: tabular-nums;
}

.bds-game-tile__price strong {
    font-weight: 750;
    color: hsl(var(--color-base) / 0.9);
}

/* Revealed Details Card Below */
.bds-game-reveal {
    scroll-margin-top: 5.5rem;
    margin-top: 2rem;
}

.bds-game-details__card {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: clamp(1.5rem, 3.5vw, 2.4rem);
    border: 2px solid hsl(var(--color-neutral) / 0.8);
    border-radius: 16px;
    background: hsl(var(--color-background-secondary));
    box-shadow: 0 16px 48px rgb(20 32 29 / 0.08);
    animation: bds-fade-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dark .bds-game-details__card {
    box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
}

.bds-game-details__header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid hsl(var(--color-neutral) / 0.8);
}

.bds-game-details__title-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bds-game-details__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bds-game-details__title-group h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: hsl(var(--color-base));
}

.bds-game-details__title-group p {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: hsl(var(--color-base) / 0.75);
    max-width: 36rem;
}

.bds-game-details__price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.bds-game-details__price {
    margin: 0;
    font-size: 0.95rem;
    color: hsl(var(--color-base) / 0.7);
    text-align: right;
}

.bds-game-details__price strong {
    font-size: clamp(2rem, 3.8vw, 2.7rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: hsl(var(--color-base));
    margin-right: 0.2rem;
}

.bds-game-details__price-box .bds-plan__button {
    min-width: 14rem;
}

.bds-game-details__features {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.bds-game-feature-item {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: hsl(var(--color-background) / 0.6);
    border: 1px solid hsl(var(--color-neutral) / 0.7);
    transition: border-color 150ms ease;
}

.bds-game-feature-item:hover {
    border-color: hsl(var(--color-primary) / 0.5);
}

.bds-game-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: rgb(105 230 138 / 0.12);
    color: var(--bds-green-text, #1a8048);
}

.dark .bds-game-feature-icon {
    background: rgb(105 230 138 / 0.14);
    color: #69e68a;
}

.bds-game-feature-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 750;
    color: hsl(var(--color-base));
    line-height: 1.25;
}

.bds-game-feature-item span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: hsl(var(--color-base) / 0.65);
    line-height: 1.35;
}

/* Responsiveness */
@media (max-width: 1100px) {
    .bds-game-tiles-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .bds-game-details__features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .bds-game-tiles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bds-game-details__header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .bds-game-details__price-box {
        align-items: flex-start;
    }
    .bds-game-details__price-box .bds-plan__button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .bds-game-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    .bds-game-details__features {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .bds-game-details__card {
        padding: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bds-game-tile:hover {
        transform: none;
    }
    .bds-game-details__card {
        animation: none;
    }
}