/* BOX v2 — S01 HERO. Content is flow-driven; Hazel is decorative/absolute. */
body.cloudbox-self-hosted-page .self-hosted-hero {
    position: relative;
    min-height: 657px;
    isolation: isolate;
    overflow: hidden;
    background: #020706;
    color: var(--self-hosted-white);
}

body.cloudbox-self-hosted-page .self-hosted-hazel {
    --hazel-warm-opacity: .40;
    --self-hosted-hazel-x: 0;
    --self-hosted-hazel-y: 0;
    --self-hosted-hazel-idle: 0;
    --self-hosted-hazel-idle-x: 0;
    --self-hosted-hazel-idle-y: 0;
    --self-hosted-hazel-idle-x2: 0;
    --self-hosted-hazel-idle-y2: 0;
    --self-hosted-hazel-scroll: 0;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    perspective: 1400px;
    transform-origin: 58% 46%;
    transform-style: preserve-3d;
    animation: selfHostedHeroSettle 7200ms cubic-bezier(.16,.86,.18,1) both;
}

body.cloudbox-self-hosted-page .self-hosted-hazel::before,
body.cloudbox-self-hosted-page .self-hosted-hazel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.cloudbox-self-hosted-page .self-hosted-hazel::before {
    background:
        radial-gradient(880px 600px at 77% 50%, rgba(24,111,94,.09), transparent 68%),
        radial-gradient(500px 360px at 10% 30%, rgba(153,79,30,.045), transparent 70%);
    filter: blur(18px);
    opacity: .72;
}

body.cloudbox-self-hosted-page .self-hosted-hazel::after {
    background: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0) 42%, rgba(0,0,0,.24) 76%, rgba(0,0,0,.48) 100%);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape,
body.cloudbox-self-hosted-page .self-hosted-hazel__line {
    position: absolute;
    display: block;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape {
    overflow: visible;
    filter: none;
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape--back {
    left: -210px;
    top: -165px;
    width: 980px;
    height: 650px;
    border-radius: 52% 48% 49% 51% / 44% 49% 51% 56%;
    border: 2px solid rgba(45,120,102,.18);
    background: #020706;
    box-shadow: inset 0 0 50px rgba(5,53,49,.28), inset 140px 60px 120px rgba(196,111,39,.08), 0 0 70px rgba(0,0,0,.55), -120px 40px 120px rgba(164,83,20,.10);
    transform: translate3d(calc(var(--self-hosted-hazel-x) * 7px + var(--self-hosted-hazel-idle-x) * 22px), calc(var(--self-hosted-hazel-y) * 5px + var(--self-hosted-hazel-idle-y) * 14px + var(--self-hosted-hazel-scroll) * -.03px), -180px) rotate(-18deg);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape--warm {
    left: -250px;
    top: 40px;
    width: 760px;
    height: 520px;
    border-radius: 56% 44% 48% 52% / 54% 46% 54% 46%;
    border: 1px solid rgba(103,55,16,.12);
    background: radial-gradient(ellipse at 30% 48%,rgba(199,113,32,.09),transparent 17%), radial-gradient(ellipse at 48% 48%,rgba(20,18,14,.02) 0%,rgba(4,9,8,.10) 42%,rgba(3,6,5,.62) 68%,rgba(1,3,3,0) 73%), linear-gradient(148deg,rgba(130,73,25,.16),rgba(15,48,41,.018) 34%,rgba(7,17,15,0) 68%);
    opacity: var(--hazel-warm-opacity);
    box-shadow: inset -18px -18px 60px rgba(6,14,12,.76), inset 14px 14px 30px rgba(232,146,62,.035), 0 0 42px rgba(183,87,17,.06);
    transform: translate3d(calc(var(--self-hosted-hazel-x) * 11px + var(--self-hosted-hazel-idle-x2) * 18px), calc(var(--self-hosted-hazel-y) * 7px + var(--self-hosted-hazel-idle-y2) * 12px + var(--self-hosted-hazel-scroll) * -.034px), 40px) rotate(-22deg);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape--ribbon {
    left: 560px;
    top: -350px;
    width: 1500px;
    height: 700px;
    border-radius: 48% 52% 58% 42% / 42% 46% 54% 58%;
    border: 1px solid rgba(42,107,99,.18);
    background: radial-gradient(90% 110% at 10% 55%,rgba(196,111,39,.06),transparent 26%), linear-gradient(155deg,#010302 4%,#06110f 42%,#0b352d 61%,#010403 88%);
    box-shadow: 0 30px 90px rgba(0,0,0,.76), inset -14px -18px 38px rgba(16,72,66,.16), inset 40px 6px 80px rgba(196,111,39,.02);
    transform: translate3d(calc(var(--self-hosted-hazel-x) * -11px + var(--self-hosted-hazel-idle-x) * -26px), calc(var(--self-hosted-hazel-y) * -8px + var(--self-hosted-hazel-idle-y) * -18px + var(--self-hosted-hazel-scroll) * -.025px), 50px) rotate(10deg);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape--surface {
    left: 610px;
    top: 405px;
    width: 1450px;
    height: 520px;
    border-radius: 52% 48% 45% 55% / 54% 47% 53% 46%;
    border: 1px solid rgba(35,112,97,.30);
    background: radial-gradient(88% 112% at 12% 46%,rgba(196,111,39,.08),transparent 32%), radial-gradient(100% 160% at 45% 25%,rgba(18,93,78,.52),rgba(5,30,28,.90) 44%,#020807 75%), linear-gradient(115deg,#03110f,#0a3733 45%,#020606);
    box-shadow: inset 0 2px 14px rgba(86,160,150,.08), inset 70px 0 90px rgba(196,111,39,.025), 0 40px 120px rgba(0,0,0,.70);
    transform: translate3d(calc(var(--self-hosted-hazel-x) * 18px + var(--self-hosted-hazel-idle-x2) * 34px), calc(var(--self-hosted-hazel-y) * 10px + var(--self-hosted-hazel-idle-y2) * 20px + var(--self-hosted-hazel-scroll) * -.06px), 20px) rotate(7deg);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__shape--haze {
    left: -50px;
    top: 370px;
    width: 680px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 44% 48%, rgba(111,52,24,.14), rgba(111,52,24,.035) 44%, transparent 76%);
    filter: blur(22px);
    opacity: .10;
    transform: translate3d(calc(var(--self-hosted-hazel-x) * -9px + var(--self-hosted-hazel-idle-x) * -16px), calc(var(--self-hosted-hazel-y) * -5px + var(--self-hosted-hazel-idle-y) * -12px + var(--self-hosted-hazel-scroll) * -.02px), -30px) rotate(-14deg);
}

body.cloudbox-self-hosted-page .self-hosted-hazel__line {
    width: 1150px;
    height: 1px;
    background: rgba(23,107,91,.28);
    transform-origin: center;
}
body.cloudbox-self-hosted-page .self-hosted-hazel__line--1 { left: 720px; top: 130px; transform: translate3d(calc(var(--self-hosted-hazel-x) * -20px + var(--self-hosted-hazel-idle-x2) * -26px), calc(var(--self-hosted-hazel-y) * -12px + var(--self-hosted-hazel-idle-y2) * -18px + var(--self-hosted-hazel-scroll) * -.028px), 105px) rotate(61deg); }
body.cloudbox-self-hosted-page .self-hosted-hazel__line--2 { left: 698px; top: 248px; transform: translate3d(calc(var(--self-hosted-hazel-x) * -16px + var(--self-hosted-hazel-idle-x) * -22px), calc(var(--self-hosted-hazel-y) * -10px + var(--self-hosted-hazel-idle-y) * -15px + var(--self-hosted-hazel-scroll) * -.024px), 112px) rotate(64deg); }
body.cloudbox-self-hosted-page .self-hosted-hazel__line--3 { left: 676px; top: 366px; transform: translate3d(calc(var(--self-hosted-hazel-x) * -14px + var(--self-hosted-hazel-idle-x2) * -18px), calc(var(--self-hosted-hazel-y) * -8px + var(--self-hosted-hazel-idle-y2) * -12px + var(--self-hosted-hazel-scroll) * -.020px), 98px) rotate(42deg); }
body.cloudbox-self-hosted-page .self-hosted-hazel__line--4 { left: 654px; top: 484px; transform: translate3d(calc(var(--self-hosted-hazel-x) * -10px + var(--self-hosted-hazel-idle-x) * -14px), calc(var(--self-hosted-hazel-y) * -6px + var(--self-hosted-hazel-idle-y) * -9px + var(--self-hosted-hazel-scroll) * -.016px), 86px) rotate(30deg); }

body.cloudbox-self-hosted-page .self-hosted-hero__content {
    position: relative;
    z-index: 3;
    padding-top: clamp(150px, 8.75vw, 168px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow {
    width: min(100%, 1010px);
    color: #8bbfae;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0;
}

body.cloudbox-self-hosted-page .self-hosted-hero__title {
    width: min(100%, 1026px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    color: #f6faf8;
    letter-spacing: 0;
}

body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-line2 {
    display: block;
    width: 100%;
    color: #f6faf8;
    font-size: clamp(64px, 4.9479167vw, 95px);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
body.cloudbox-self-hosted-page .self-hosted-hero__title-line1 {
    line-height: clamp(84px, 6.875vw, 132px);
    margin-bottom: -10px;
}
body.cloudbox-self-hosted-page .self-hosted-hero__title-line2 {
    line-height: clamp(82px, 6.6666667vw, 128px);
}

body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3 {
    display: none;
}

body.cloudbox-self-hosted-page .self-hosted-hero__lead {
    width: min(100%, 980px);
    color: #c4d0cb;
    font-size: 17px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
}

body.cloudbox-self-hosted-page .self-hosted-hero__content > * {
    will-change: transform, opacity;
}

body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__eyebrow,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__lead,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-tablet-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-tablet-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-mobile-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-mobile-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-pending .self-hosted-hero__title-mobile-line3 {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
}

body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__eyebrow,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__lead,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-tablet-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-tablet-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-mobile-line1,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-mobile-line2,
body.cloudbox-self-hosted-page .self-hosted-hero.self-hosted-hero--intro-in .self-hosted-hero__title-mobile-line3 {
    opacity: 1;
    transform: none;
}

/* RC21: restore the approved RC19 CSS-native first-render text rise. */
body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow,
body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3,
body.cloudbox-self-hosted-page .self-hosted-hero__lead {
    animation: selfHostedHeroTextRise 1312.5ms cubic-bezier(.18,.78,.16,1) both;
    will-change: transform, opacity;
}
body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow { animation-delay: 125ms; }
body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1 { animation-delay: 225ms; }
body.cloudbox-self-hosted-page .self-hosted-hero__title-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2,
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2 { animation-delay: 375ms; }
body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3 { animation-delay: 487.5ms; }
body.cloudbox-self-hosted-page .self-hosted-hero__lead { animation-delay: 575ms; }

@keyframes selfHostedHeroTextRise {
    0% { opacity: 0; transform: translate3d(0, 46px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes selfHostedHeroSettle {
    0% { transform: translate3d(0, 14px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    body.cloudbox-self-hosted-page .self-hosted-hero { min-height: 665px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel { --hazel-warm-opacity: .36; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--back { left: -260px; top: -110px; width: 700px; height: 440px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--warm { left: -210px; top: 170px; width: 520px; height: 360px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--ribbon { left: 210px; top: -180px; width: 820px; height: 390px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--surface { left: 170px; top: 470px; width: 850px; height: 340px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--haze { display: none; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line { width: 700px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--1 { left: 240px; top: 180px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--2 { left: 222px; top: 305px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--3 { left: 204px; top: 430px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--4 { display: none; }

    body.cloudbox-self-hosted-page .self-hosted-hero__content {
        padding-top: 150px;
        gap: 22px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow {
        width: auto;
        font-size: 12px;
        line-height: 17px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title {
        width: min(100%, 666px);
        gap: 0;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3 { display: none; }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2 {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f6faf8;
        font-size: clamp(48px, 8.152866vw, 64px);
        font-weight: 600;
        line-height: 70px;
        white-space: nowrap;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1 {
        gap: 12px;
        margin-bottom: -4px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-sans,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-rest {
        font: inherit;
        color: inherit;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__lead {
        width: min(100%, 660px);
        font-size: 16px;
        line-height: 25px;
    }
}

@media (max-width: 767.98px) {
    body.cloudbox-self-hosted-page .self-hosted-hero { min-height: 689px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel { --hazel-warm-opacity: .32; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--back { left: -150px; top: -30px; width: 390px; height: 260px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--warm { left: -115px; top: 160px; width: 310px; height: 230px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--ribbon { left: 110px; top: -100px; width: 430px; height: 220px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--surface { left: 65px; top: 440px; width: 470px; height: 220px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__shape--haze { display: none; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line { width: 390px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--1 { left: 80px; top: 170px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--2 { left: 62px; top: 270px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--3 { left: 44px; top: 370px; }
    body.cloudbox-self-hosted-page .self-hosted-hazel__line--4 { display: none; }

    body.cloudbox-self-hosted-page .self-hosted-hero__content {
        padding-top: 122px;
        gap: 12px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow {
        width: 100%;
        font-size: 10.5px;
        line-height: 15px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title {
        width: 100%;
        gap: 12px;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2 { display: none; }
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3 {
        display: block;
        width: 100%;
        color: #f6faf8;
        font-size: clamp(36px, 10.6666667vw, 40px);
        font-weight: 600;
        line-height: 44px;
        white-space: nowrap;
        text-align: center;
    }
    body.cloudbox-self-hosted-page .self-hosted-hero__lead {
        width: 100%;
        font-size: 14px;
        line-height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cloudbox-self-hosted-page .self-hosted-hazel { animation: none; }
    body.cloudbox-self-hosted-page .self-hosted-hero__eyebrow,
    body.cloudbox-self-hosted-page .self-hosted-hero__lead,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-tablet-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line1,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line2,
    body.cloudbox-self-hosted-page .self-hosted-hero__title-mobile-line3 {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}