* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

#content { padding: 0 }

body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
font-family: Georgia, serif;
color: #f5e8cf;
background:
    radial-gradient(circle at 50% 35%, rgba(28,58,75,0.35), transparent 34%),
    radial-gradient(circle at top, rgba(19,27,47,0.95), transparent 45%),
    linear-gradient(to bottom, #03070d 0%, #07111a 52%, #120d0a 100%);
}

.scene {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.scene::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.72) 100%);
pointer-events: none;
z-index: 40;
}

.stars {
position: absolute;
inset: 0;
background-image:
    radial-gradient(1px 1px at 20% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 80% 16%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 62% 10%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 35% 13%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 72% 34%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 12% 45%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 92% 48%, rgba(255,255,255,.45), transparent);
opacity: .55;
transition: opacity .8s ease;
}

.forest {
position: absolute;
bottom: 21%;
width: 100%;
height: 34%;
opacity: .55;
background: linear-gradient(to top, rgba(0,0,0,.9), transparent 70%);
}

.tree {
position: absolute;
bottom: 0;
width: 90px;
height: 260px;
background: linear-gradient(to top, #010306, transparent);
clip-path: polygon(
    50% 0%, 58% 16%, 54% 16%, 65% 31%, 58% 31%,
    74% 52%, 63% 52%, 82% 76%, 58% 76%, 58% 100%,
    42% 100%, 42% 76%, 18% 76%, 37% 52%, 26% 52%,
    42% 31%, 35% 31%, 46% 16%, 42% 16%
);
}

.tree:nth-child(1) { left: 2%; height: 330px; width: 130px; opacity: .9; }
.tree:nth-child(2) { left: 11%; height: 230px; width: 90px; opacity: .65; }
.tree:nth-child(3) { left: 20%; height: 190px; width: 70px; opacity: .5; }
.tree:nth-child(4) { right: 3%; height: 360px; width: 140px; opacity: .9; }
.tree:nth-child(5) { right: 15%; height: 245px; width: 95px; opacity: .65; }
.tree:nth-child(6) { right: 25%; height: 185px; width: 70px; opacity: .48; }

.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 33%;
background:
    radial-gradient(circle at 50% 82%, rgba(95,48,20,.34), transparent 25%),
    linear-gradient(to top, #070504, #120d09 62%, transparent);
}

.ui {
position: absolute;
top: 8vh;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: min(90%, 760px);
z-index: 60;
}

h2 {
color: #f5e8cf;
font-size: clamp(2.4rem, 5vw, 4.8rem);
margin: 0 0 22px;
font-weight: normal;
letter-spacing: .02em;
text-shadow: 0 0 22px rgba(255,190,110,.18);
}

.sub {
opacity: .72;
font-size: clamp(1.05rem, 2vw, 1.45rem);
line-height: 1.55;
margin-bottom: 30px;
}

.signup-form {
width: min(100%, 620px);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.25fr auto;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 18px;
transition:
    box-shadow .35s ease,
    background .35s ease,
    transform .35s ease;
}

.signup-form.joined {
background: rgba(255,145,46,.06);
box-shadow:
    0 0 32px rgba(255,125,35,.28),
    0 0 80px rgba(255,95,20,.12),
    inset 0 0 24px rgba(255,185,90,.08);
animation: formWarmth 1.6s ease-out;
}

@keyframes formWarmth {
0% {
    transform: scale(1);
}

22% {
    transform: scale(1.025);
}

100% {
    transform: scale(1);
}
}

.signup-form input {
width: 100%;
border: 0 solid rgba(255,145,46,.22);
background: rgba(0,0,0,.28);
color: #f5e8cf;
padding: 13px 14px;
border-radius: 12px;
font-family: Georgia, serif;
font-size: .95rem;
outline: none;
box-shadow: inset 0 0 12px rgba(0,0,0,.18);
}

.signup-form input::placeholder {
color: rgba(245,232,207,.52);
}

.signup-form input:focus {
border-color: rgba(255,170,82,.68);
box-shadow:
    0 0 18px rgba(255,120,30,.16),
    inset 0 0 12px rgba(0,0,0,.18);
}

.signup-form button {
    padding: 13px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: .95rem;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(255,100,20,.08);
    transition: .2s ease;

    background:
        linear-gradient(
            to bottom,
            rgba(186,118,62,.42) 0%,
            rgba(128,74,38,.88) 100%
        );

    color: #f5e8cf !important;

    border: 1px solid rgba(255,190,110,.14);

    border-color: rgba(255,210,140,.34) !important;
}

.signup-form button:hover {
    border-color: rgba(255,145,46,.75);
    box-shadow: 0 0 24px rgba(255,100,20,.22);
    transform: translateY(-1px);
}

.signup-form button.is-success {
background:
    linear-gradient(to bottom, rgba(255,174,82,.26), rgba(112,48,13,.54));
color: #fff1d3;
box-shadow:
    0 0 28px rgba(255,135,32,.32),
    inset 0 0 14px rgba(255,220,150,.08);
}

.status {
margin-top: 30px;
opacity: .65;
font-size: 1.15rem;
font-style: italic;
transition:
    opacity .35s ease,
    transform .35s ease,
    text-shadow .35s ease;
}

.status.status-pop {
opacity: .92;
transform: translateY(-2px);
text-shadow: 0 0 18px rgba(255,160,70,.42);
}

.camp {
position: absolute;
left: 50%;
bottom: 7vh;
transform: translateX(-50%);
width: 420px;
height: 480px;
display: grid;
place-items: end center;
z-index: 20;
}

.tent {
position: absolute;
bottom: 22vh;
width: 0;
height: 0;
border-left: 68px solid transparent;
border-right: 68px solid transparent;
border-bottom: 110px solid rgba(90,55,28,.62);
opacity: 0;
filter: brightness(.55);
transition: opacity 1.5s ease, filter 1.5s ease;
z-index: 10;
}

.tent.left { left: 8%; }
.tent.right { right: 8%; }

.tent::after {
content: "";
position: absolute;
left: -10px;
top: 35px;
width: 20px;
height: 70px;
background: rgba(8,5,3,.55);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.fire-glow {
position: absolute;
bottom: 40px;
width: 280px;
height: 130px;
border-radius: 50%;
background:
    radial-gradient(circle,
    rgba(255,130,45,.38),
    rgba(177,48,14,.18) 45%,
    transparent 72%);
filter: blur(32px);
transform: scale(.35);
opacity: .3;
transition: transform .8s ease, opacity .8s ease;
}

.fire-system {
position: absolute;
bottom: 0;
width: 420px;
height: 480px;
}

.fire {
position: absolute;
bottom: 95px;
left: 50%;
width: 180px;
height: 260px;
transform: translateX(-50%) scale(var(--fire-scale, .28));
filter: blur(1.6px) contrast(7) saturate(1.2);
transform-origin: bottom center;
transition: transform .85s ease;
}

.fire::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 115px;
height: 185px;
transform: translateX(-50%);
border-radius: 52% 48% 46% 44%;
background:
    radial-gradient(circle at 50% 86%,
    rgba(255,112,31,.52),
    rgba(202,62,16,.36) 35%,
    rgba(95,18,6,.12) 58%,
    transparent 78%);
animation: bodyWaver 1.15s ease-in-out infinite alternate;
}

@keyframes bodyWaver {
0% { transform: translateX(-51%) scaleX(.88) scaleY(.96); opacity: .54; }
50% { transform: translateX(-48%) scaleX(1.04) scaleY(1.08); opacity: .7; }
100% { transform: translateX(-52%) scaleX(.94) scaleY(1); opacity: .58; }
}

.tongue {
position: absolute;
bottom: 5px;
left: 50%;
width: var(--w);
height: var(--h);
transform-origin: bottom center;
border-radius: 50% 50% 46% 46%;
mix-blend-mode: screen;
filter: blur(var(--blur));
opacity: var(--opacity);
background:
    radial-gradient(circle at 50% 78%,
    rgba(255,210,126,.36),
    rgba(255,126,48,.32) 34%,
    rgba(174,45,16,.16) 64%,
    transparent 78%);
animation: tongueFlicker var(--speed) ease-in-out infinite alternate;
}

.tongue.one {
--w: 54px;
--h: 205px;
--blur: 7px;
--opacity: .42;
--speed: .92s;
margin-left: -25px;
--rot-a: -4deg;
--rot-b: 6deg;
}

.tongue.two {
--w: 42px;
--h: 175px;
--blur: 8px;
--opacity: .34;
--speed: .78s;
margin-left: -58px;
--rot-a: -16deg;
--rot-b: -4deg;
}

.tongue.three {
--w: 45px;
--h: 165px;
--blur: 8px;
--opacity: .32;
--speed: .86s;
margin-left: 18px;
--rot-a: 15deg;
--rot-b: 4deg;
}

.tongue.four {
--w: 32px;
--h: 215px;
--blur: 9px;
--opacity: .24;
--speed: 1.08s;
margin-left: -9px;
--rot-a: 2deg;
--rot-b: -8deg;
}

@keyframes tongueFlicker {
0% {
    clip-path: polygon(50% 0%, 66% 22%, 62% 58%, 50% 100%, 34% 60%, 31% 22%);
    transform: rotate(var(--rot-a)) scaleX(.74) scaleY(.88) translateY(8px);
}

45% {
    clip-path: polygon(42% 0%, 76% 29%, 58% 70%, 50% 100%, 25% 68%, 37% 18%);
    transform: rotate(var(--rot-b)) scaleX(1.08) scaleY(1.12) translateY(-4px);
}

100% {
    clip-path: polygon(54% 0%, 68% 26%, 60% 64%, 50% 100%, 36% 62%, 27% 28%);
    transform: rotate(var(--rot-a)) scaleX(.86) scaleY(.96) translateY(2px);
}
}

.particle {
position: absolute;
bottom: 0;
left: 50%;
width: var(--size);
height: var(--size);
border-radius: 56% 44% 61% 39% / 62% 38% 66% 34%;
mix-blend-mode: screen;
opacity: 0;
transform-origin: center bottom;
animation: particleRise var(--duration) linear infinite;
animation-delay: var(--delay);
}

.particle.orange {
background:
    radial-gradient(circle,
    rgba(255,180,88,.58),
    rgba(255,120,50,.55) 38%,
    rgba(190,62,22,.32) 72%,
    transparent 100%);
}

.particle.deep {
background:
    radial-gradient(circle,
    rgba(255,116,55,.45),
    rgba(184,48,18,.36) 52%,
    rgba(72,11,5,.08) 100%);
}

.particle.gold {
background:
    radial-gradient(circle,
    rgba(255,218,144,.38),
    rgba(255,156,70,.34) 42%,
    rgba(176,66,26,.13) 100%);
}

@keyframes particleRise {
0% {
    transform: translate(var(--x), 20px) scaleX(var(--sx)) scaleY(var(--sy)) rotate(var(--r0));
    opacity: 0;
}

12% { opacity: .72; }

52% {
    transform:
    translate(calc(var(--x) + var(--mid)), calc(var(--rise) * -.48))
    scaleX(calc(var(--sx) * .78))
    scaleY(calc(var(--sy) * 1.12))
    rotate(var(--r1));
    opacity: .56;
}

82% { opacity: .24; }

100% {
    transform:
    translate(calc(var(--x) + var(--drift)), calc(var(--rise) * -1))
    scaleX(calc(var(--sx) * .18))
    scaleY(calc(var(--sy) * .3))
    rotate(var(--r2));
    opacity: 0;
}
}

.ember-bed {
position: absolute;
bottom: 76px;
left: 50%;
width: 160px;
height: 46px;
transform: translateX(-50%);
border-radius: 50%;
background:
    radial-gradient(circle at 22% 50%, rgba(255,143,46,.75), transparent 16%),
    radial-gradient(circle at 42% 42%, rgba(255,80,20,.62), transparent 18%),
    radial-gradient(circle at 64% 52%, rgba(255,151,55,.45), transparent 15%),
    radial-gradient(circle at 78% 48%, rgba(198,51,17,.46), transparent 18%),
    radial-gradient(circle, rgba(255,95,28,.36), rgba(90,16,5,.18), transparent 74%);
filter: blur(10px);
animation: emberPulse 1.9s ease-in-out infinite alternate;
z-index: 4;
}

@keyframes emberPulse {
from { opacity: .48; transform: translateX(-50%) scaleX(.95); }
to { opacity: .82; transform: translateX(-50%) scaleX(1.08); }
}

.spark {
position: absolute;
bottom: 112px;
left: 50%;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: rgba(255,165,70,.9);
box-shadow:
    0 0 8px rgba(255,120,34,.65),
    0 0 18px rgba(255,70,20,.24);
opacity: 0;
animation: sparkRise var(--spark-duration) linear forwards;
}

@keyframes sparkRise {
0% { opacity: 0; transform: translate(0, 0) scale(.8); }
10% { opacity: .9; }
100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.18); }
}

/* RANDOM STONES - no rock on top of logs */

.stone-ring {
position: absolute;
bottom: 45px;
left: 50%;
width: 315px;
height: 105px;
transform: translateX(-50%);
z-index: 2;
}

.stone {
position: absolute;
border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
background:
    linear-gradient(to bottom,
    #89837b 0%,
    #55524f 52%,
    #2d2c2b 100%);
box-shadow:
    inset 0 2px 2px rgba(255,255,255,.12),
    0 4px 8px rgba(0,0,0,.42);
}

.s1 { width: 34px; height: 24px; left: 4px; top: 68px; transform: rotate(-8deg); }
.s2 { width: 22px; height: 17px; left: 48px; top: 43px; transform: rotate(12deg); }
.s3 { width: 30px; height: 22px; left: 92px; top: 25px; transform: rotate(-16deg); }
.s4 { width: 18px; height: 14px; left: 138px; top: 84px; transform: rotate(5deg); }
.s5 { width: 24px; height: 18px; right: 96px; top: 36px; transform: rotate(20deg); }
.s6 { width: 38px; height: 26px; right: 38px; top: 68px; transform: rotate(-12deg); }
.s7 { width: 20px; height: 15px; right: 2px; top: 48px; transform: rotate(8deg); }
.s8 { width: 26px; height: 19px; left: 34px; top: 82px; transform: rotate(22deg); }
.s9 { width: 16px; height: 12px; right: 142px; top: 92px; transform: rotate(-10deg); }

/* NATURAL X LOGS */

.logs {
position: absolute;
bottom: 54px;
left: 50%;
width: 270px;
height: 120px;
transform: translateX(-50%);
z-index: 5;
}

.log {
position: absolute;
height: 26px;
border-radius: 14px 18px 16px 12px;
background:
    linear-gradient(to bottom,
    #a36a3c 0%,
    #7b4526 42%,
    #4b2412 100%);
box-shadow:
    inset 0 3px 3px rgba(255,214,150,.16),
    inset 0 -5px 6px rgba(0,0,0,.34),
    0 7px 12px rgba(0,0,0,.42);
}

.log::before {
content: "";
position: absolute;
left: 18px;
right: 30px;
top: 6px;
height: 14px;
border-radius: 999px;
background:
    repeating-linear-gradient(
    0deg,
    transparent 0 4px,
    rgba(45,18,8,.35) 5px 7px,
    transparent 8px 12px
    ),
    linear-gradient(to right,
    rgba(255,196,120,.1),
    transparent 38%,
    rgba(30,10,4,.18) 70%,
    transparent);
opacity: .85;
}

.log-end {
position: absolute;
right: -7px;
top: 0px;
width: 29px;
height: 26px;
border-radius: 50%;
background:
    radial-gradient(circle at center,
    #c58a52 0 13%,
    #7e4826 14% 27%,
    #b97844 28% 35%,
    #683519 36% 56%,
    #2d1308 57%);
box-shadow:
    inset 0 0 0 2px rgba(255,220,160,.1),
    -2px 1px 4px rgba(0,0,0,.32);
}

.bark {
position: absolute;
background: rgba(45,18,8,.34);
border-radius: 999px;
}

.bark-1 { width: 66px; height: 3px; left: 24px; top: 7px; transform: rotate(-2deg); }
.bark-2 { width: 46px; height: 2px; left: 52px; top: 15px; opacity: .58; }
.bark-3 { width: 34px; height: 2px; left: 92px; top: 10px; opacity: .45; }

.log.back-left {
width: 168px;
left: 20px;
top: 34px;
transform: rotate(27deg);
filter: brightness(.75);
z-index: 1;
}

.log.back-right {
width: 168px;
right: 20px;
top: 34px;
transform: rotate(-27deg) scaleX(-1);
filter: brightness(.75);
z-index: 1;
}

.log.front-left {
width: 178px;
left: 28px;
top: 61px;
transform: rotate(-21deg);
z-index: 3;
}

.log.front-right {
width: 178px;
right: 28px;
top: 61px;
transform: rotate(21deg) scaleX(-1);
z-index: 3;
}

.log.small-center {
width: 112px;
left: 78px;
top: 78px;
height: 22px;
transform: rotate(3deg);
filter: brightness(.72);
z-index: 2;
}

.waitlist-confirmation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.waitlist-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f5d6a1;
}

.waitlist-text {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.5;
}

#wriwoods-waitlisted-count {
    display: none;
}

/** Mobile styles **/
@media (max-width: 700px) {

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.scene {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
}

    .ui {
        top: 5vh;
        width: min(92%, 420px);
    }

    .sub {
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .signup-form {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
        width: 100%;
    }

    .signup-form input,
    .signup-form button {
        width: 100%;
        font-size: 1rem;
        padding: 13px 14px;
    }

    .status {
        margin-top: 18px;
        font-size: 1rem;
    }

    .camp {
        bottom: 2vh;
        width: 320px;
        height: 390px;
        transform: translateX(-50%) scale(.82);
        transform-origin: bottom center;
    }

    .fire-system {
        width: 320px;
        height: 390px;
    }

    .camp,
    .fire-system {
        width: 100vw;
        max-width: 420px;
    }

    .fire {
        bottom: 90px;
    }

    .fire-glow {
        bottom: 48px;
    }

    .tent {
        bottom: 215px;
        border-left-width: 52px;
        border-right-width: 52px;
        border-bottom-width: 85px;
    }

    .tent.left { left: 0; }
    .tent.right { right: 0; }

    .forest {
        bottom: 20%;
        height: 28%;
    }

    .tree:nth-child(1),
    .tree:nth-child(4) {
        width: 95px;
        height: 260px;
    }

    .tree:nth-child(2),
    .tree:nth-child(5) {
        width: 70px;
        height: 190px;
    }

    .tree:nth-child(3),
    .tree:nth-child(6) {
        display: none;
    }
}

@media (max-width: 420px) {
    .ui {
        top: 4vh;
    }

    .camp {
        transform: translateX(-50%) scale(.72);
    }

    .sub {
        margin-bottom: 14px;
    }

    .status {
        margin-top: 14px;
    }
}

/* Scroll */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 70;
    color: rgba(245,232,207,.68);
    text-decoration: none;
    font-size: .92rem;
    font-style: italic;
    letter-spacing: .02em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: .72;
    transition: opacity .25s ease, transform .25s ease;
}

.scroll-cue:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.scroll-cue-arrow {
    font-style: normal;
    font-size: 1.1rem;
    animation: cueFloat 1.8s ease-in-out infinite;
}

@keyframes cueFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: .45;
    }

    50% {
        transform: translateY(4px);
        opacity: .9;
    }
}

.camp-info {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,130,45,.12),
            transparent 28%
        ),

        linear-gradient(
            to bottom,
            #0a0806 0%,
            #1b1612 10%,
            #3a3027 22%,
            #8e7d69 40%,
            #cbbba5 68%,
            #b9ab98 100%
        );

    color: #16351f;

    padding: clamp(80px, 10vw, 140px) 24px;
}

.camp-info-inner {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.camp-levels-preview .camp-kicker,
.camp-openings .camp-kicker,
.camp-info .camp-kicker,
.camp-final-cta .camp-kicker {
    text-align: center;
    color: rgba(245,232,207,.55);
}

.camp-openings {
    padding: 80px 24px 110px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,145,46,.08), transparent 34%),
        #0d0907;
}

.camp-levels-preview,
.camp-final-cta {
    padding: 80px 24px 110px;
}

.camp-levels-preview .camp-section-intro p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(245,232,207,.75);
}

.camp-kicker {
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: rgba(22,53,31,.62);
}

.camp-info h2 {
    color: #0d321d;
    font-size: clamp(2rem, 4vw, 3.4rem);
    margin-bottom: 24px;
    text-shadow: none;
}

.camp-info h2 {
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    line-height: .95;

    margin-bottom: 34px;

    color: #f0d8b2;

    text-shadow:
        0 0 18px rgba(255,180,90,.10),
        0 2px 12px rgba(40,18,8,.12);

    letter-spacing: -.02em;
}

.camp-info p {
    text-align: left;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.85;

    color: rgba(45,58,45,.82);

    margin: 0 auto 24px;
}

.camp-levels-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.camp-section-intro {
    width: min(760px, 100%);
    margin: 0 auto;
}

/* Final button */
.camp-final-cta {
    position: relative;
    padding: 120px 24px 140px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,130,45,.12),
            transparent 30%
        ),
        linear-gradient(
            to bottom,
            #0b0908,
            #120d0a
        );

    text-align: center;
}

.camp-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 18px;
    padding: 16px 30px;

    border-radius: 14px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,145,46,.24),
            rgba(92,42,16,.92)
        );

    border: 1px solid rgba(255,190,110,.18);

    color: #f8e7ca;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: .02em;

    box-shadow:
        0 0 18px rgba(255,120,40,.08),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.camp-final-button:hover {
    transform: translateY(-2px);

    border-color: rgba(255,210,140,.34);

    box-shadow:
        0 0 28px rgba(255,120,40,.16),
        0 10px 30px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.camp-final-button:active {
    transform: translateY(0);
}

.camp-final-button::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 100%;
    left: -120px;
    top: 0;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    animation: campFinalShine 7s infinite;
}

.camp-final-button {
    position: relative;
    overflow: hidden;
}

@keyframes campFinalShine {

    0% {
        left: -120px;
    }

    20% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

.camp-final-button,
.camp-final-button:hover,
.camp-final-button:focus,
.camp-final-button:active {
    background:
        linear-gradient(
            to bottom,
            rgba(186,118,62,.42) 0%,
            rgba(128,74,38,.88) 100%
        );

    color: #f5e8cf !important;

    border: 1px solid rgba(255,190,110,.14);

    border-color: rgba(255,210,140,.34) !important;
}

/* Login */
.camp-waitlist-login {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 90;
}

.camp-waitlist-login a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,145,46,.12),
            rgba(12,14,18,.42)
        );

    border: 1px solid rgba(255,190,110,.14);

    color: rgba(245,232,207,.88);
    text-decoration: none;
    font-size: .92rem;
    letter-spacing: .02em;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 18px rgba(255,120,40,.05),
        inset 0 1px 0 rgba(255,255,255,.04);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.camp-waitlist-login a:hover {
    transform: translateY(-1px);

    border-color: rgba(255,210,140,.28);

    background:
        linear-gradient(
            to bottom,
            rgba(255,145,46,.18),
            rgba(20,18,16,.58)
        );

    box-shadow:
        0 0 24px rgba(255,120,40,.12),
        0 6px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.camp-waitlist-login a:active {
    transform: translateY(0);
}

@media (max-width: 700px) {

    .camp-waitlist-login {
        top: 14px;
        right: 14px;
    }

    .camp-waitlist-login a {
        padding: 9px 14px;
        font-size: .88rem;
    }
}

/* Footer */
.site-footer {
    position: relative;

    padding: 70px 24px 40px;

    background:
        linear-gradient(
            to bottom,
            #120d0a 0%,
            #070605 100%
        );

    text-align: center;

    border-top:
        0px solid rgba(255,190,110,.06);
}

.site-footer-mark {
    margin: 0 0 18px;

    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: rgba(245,232,207,.68);
}

.site-footer {
    padding: 42px 24px 36px;

    background:
        linear-gradient(
            to bottom,
            #120d0a,
            #070605
        );

    text-align: center;

    border-top:
        1px solid rgba(255,190,110,.05);
}

.site-footer p {
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;

    flex-wrap: wrap;

    font-size: .88rem;
    color: rgba(245,232,207,.28);
}

.site-footer span {
    color: rgba(245,232,207,.42);
    letter-spacing: .04em;
}

.site-footer a {
    color: rgba(245,232,207,.32);
    text-decoration: none;

    transition: color .2s ease;
}

.site-footer a:hover {
    color: rgba(245,232,207,.62);
}

/* Actions */
.camp-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    width: min(100%, 420px);
    margin: 0 auto;
}

.camp-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 15px 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,145,46,.22),
            rgba(92,42,16,.92)
        );

    border: 1px solid rgba(255,190,110,.18);

    color: #f8e7ca !important;
    text-decoration: none;

    font-size: 1rem;
    letter-spacing: .02em;

    box-shadow:
        0 0 24px rgba(255,120,40,.10),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.camp-primary-action:hover {
    transform: translateY(-2px);

    border-color: rgba(255,210,140,.34);

    box-shadow:
        0 0 30px rgba(255,120,40,.16),
        0 10px 30px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.camp-primary-action:active {
    transform: translateY(0);
}

.camp-secondary-action {
    color: rgba(245,232,207,.62);
    text-decoration: none;

    font-size: .95rem;
    letter-spacing: .01em;

    transition:
        color .2s ease,
        opacity .2s ease,
        transform .2s ease;
}

.camp-secondary-action:hover {
    color: rgba(245,232,207,.9);
    transform: translateY(-1px);
}

.camp-secondary-action::after {
    content: " →";
    opacity: .7;
}

.camp-primary-action,
.camp-primary-action:hover,
.camp-primary-action:focus,
.camp-primary-action:active {
    background:
        linear-gradient(
            to bottom,
            rgba(186,118,62,.42) 0%,
            rgba(128,74,38,.88) 100%
        );

    color: #f5e8cf !important;

    border: 1px solid rgba(255,190,110,.14);

    border-color: rgba(255,210,140,.34) !important;
}

@media (max-width: 700px) {

    .camp-actions {
        width: 100%;
    }

    .camp-primary-action {
        width: 100%;
    }
}