@charset "UTF-8";

/* Marlide Display font faces */
@font-face {
    font-family: 'Marlide Display';
    src: url('../fonts/MarlideDisplay_Regular.woff2') format('woff2'),
         url('../fonts/MarlideDisplay_Regular.woff') format('woff'),
         url('../fonts/MarlideDisplay_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marlide Display';
    src: url('../fonts/MarlideDisplay_Bold.woff2') format('woff2'),
         url('../fonts/MarlideDisplay_Bold.woff') format('woff'),
         url('../fonts/MarlideDisplay_Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marlide Display';
    src: url('../fonts/MarlideDisplay_Medium.woff2') format('woff2'),
         url('../fonts/MarlideDisplay_Medium.woff') format('woff'),
         url('../fonts/MarlideDisplay_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ─── Animated Background ─── */
@keyframes orbFloat1 {
    0%   { top: -10%; left: -10%; }
    25%  { top: 20%;  left: 60%;  }
    50%  { top: 60%;  left: 30%;  }
    75%  { top: 30%;  left: -5%;  }
    100% { top: -10%; left: -10%; }
}
@keyframes orbFloat2 {
    0%   { top: 70%;  right: -10%; }
    25%  { top: 10%;  right: 20%;  }
    50%  { top: 30%;  right: 60%;  }
    75%  { top: 80%;  right: 30%;  }
    100% { top: 70%;  right: -10%; }
}
@keyframes orbFloat3 {
    0%   { top: 40%;  left: 50%;  }
    25%  { top: 70%;  left: 70%;  }
    50%  { top: 10%;  left: 40%;  }
    75%  { top: 50%;  left: 20%;  }
    100% { top: 40%;  left: 50%;  }
}

/* ─── Page Layout ─── */
.joinPage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 40px;
    background: #fafaf7;
    position: relative;
}

/* ─── Background Orbs ─── */
.bgOrb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.bgOrb1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(232,37,53,0.12), transparent 70%);
    top: -10%;
    left: -10%;
    animation: orbFloat1 30s ease-in-out infinite;
}
.bgOrb2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(245,185,100,0.12), transparent 70%);
    top: 70%;
    right: -10%;
    animation: orbFloat2 35s ease-in-out infinite;
}
.bgOrb3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(232,37,53,0.06), transparent 70%);
    top: 40%;
    left: 50%;
    animation: orbFloat3 40s ease-in-out infinite;
}
.joinPage > *:not(.bgOrb) {
    position: relative;
    z-index: 1;
}

footer { display: block !important; padding-left: 0; margin-top: 40px; }

/* ─── Custom Header ─── */
.joinHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    padding: 20px 0;
    margin-bottom: 24px;
}
.joinHeader .logo svg {
    height: 22px;
    width: auto;
}
.joinHeader .ctas a {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 100px;
    transition: all 0.15s ease;
    background: #fff;
}
.joinHeader .ctas a:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ─── Headline ─── */
.joinHeadline {
    text-align: center;
    margin-bottom: 24px;
}
.joinHeadline h1 {
    font-family: 'Marlide Display', Georgia, serif;
    font-size: 52px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
    line-height: 1;
}
.joinHeadline p {
    font-size: 15px;
    color: #888;
    margin: 0;
    font-weight: 400;
}

/* ─── Billing Toggle ─── */
.billingToggle {
    display: inline-flex;
    background: #ededea;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 24px;
    gap: 2px;
}
.billingToggle .toggle {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}
.billingToggle .toggle.active {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.billingToggle .toggle .saveBadge {
    background: #E82535;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}
.billingToggle .toggle .saveBadge.bf {
    background: #E82535;
}

/* ─── Pricing Cards ─── */
.pricingCards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 740px;
    width: 100%;
    margin-bottom: 32px;
    align-items: stretch;
}
.pricingCard {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.pricingCard.featured {
    border-color: #E82535;
    box-shadow: 0 0 0 1px #E82535;
}

/* Popular badge */
.popularBadge {
    display: inline-block;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    width: fit-content;
    letter-spacing: 0.02em;
}
.popularBadge.bf {
    background: #E82535;
}

/* Card header — fixed height so titles align */
.pricingCard .cardTitle {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin: 0 0 12px;
}

/* Price display — fixed min-height so features align */
.priceDisplay {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0ed;
    min-height: 62px;
}
.priceDisplay .price {
    font-size: 42px;
    font-weight: 300;
    color: #000;
    line-height: 1;
    letter-spacing: -0.03em;
}
.priceDisplay .price .period {
    font-size: 14px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0;
}
.priceDisplay .priceSub {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px;
    font-weight: 400;
}
.priceDisplay .priceStrike {
    text-decoration: line-through;
    opacity: 0.35;
    font-size: 24px;
    font-weight: 300;
    margin-right: 6px;
}

/* Feature list */
.featureList {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}
.featureList li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.3;
    font-weight: 400;
}
.featureList li .featureIcon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.featureList li .featureIcon.included {
    color: #1a1a1a;
}
.featureList li .featureIcon.excluded {
    color: #ddd;
}
.featureList li.excluded {
    color: #ccc;
}
.featureList .sectionLabel {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #bbb;
    padding: 2px 0 4px;
    border: none;
    display: block;
}

/* CTA Buttons */
.ctaBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
    gap: 8px;
}
.ctaBtn.ctaFree {
    background: #fafaf7;
    color: #000;
    border: 1px solid #e5e5e0;
}
.ctaBtn.ctaFree:hover {
    background: #f0f0eb;
}
.ctaBtn.ctaCitizen {
    background: #E82535;
    color: #fff;
}
.ctaBtn.ctaCitizen:hover {
    background: #d0202e;
}
.ctaBtn .arrow {
    font-size: 15px;
    transition: transform 0.15s ease;
}
.ctaBtn:hover .arrow {
    transform: translateX(2px);
}
.ctaBtn.ctaCitizen.bf {
    background: #E82535;
}
.ctaBtn.ctaCitizen.bf:hover {
    background: #d0202e;
}

/* Stripe form button styling */
.pricingCard form button.ctaBtn {
    font-family: inherit;
}
.pricingCard .noButton {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    padding: 12px 0;
    margin: 0;
}

/* Crypto link — sits at bottom of card without affecting height comparison */
.cryptoLink {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin-top: 8px;
    line-height: 1.3;
}
.cryptoLink a {
    color: #E82535;
    text-decoration: none;
    font-weight: 500;
}
.cryptoLink a:hover {
    text-decoration: underline;
}

/* ─── Social Proof ─── */
.socialProof {
    text-align: center;
    max-width: 740px;
    width: 100%;
}
.socialProof .proofHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.socialProof .stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 1px;
}
.socialProof .proofText {
    font-size: 12px;
    color: #aaa;
    font-weight: 400;
}
.reviewCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.reviewCard {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    text-align: left;
}
.reviewCard .reviewHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.reviewCard .reviewAvatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.reviewCard .reviewName {
    font-size: 12px;
    font-weight: 600;
    color: #000;
}
.reviewCard .reviewSince {
    font-size: 10px;
    color: #bbb;
}
.reviewCard .reviewText {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Black Friday Banner ─── */
.bfBanner {
    background: #E82535;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    margin-bottom: 20px;
    max-width: 740px;
    width: 100%;
}
.bfBanner s {
    opacity: 0.7;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .joinPage {
        padding: 0 0 24px;
    }
    .bgOrb1 { width: 280px; height: 280px; }
    .bgOrb2 { width: 240px; height: 240px; }
    .bgOrb3 { width: 200px; height: 200px; }
    .joinHeader {
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .joinHeader .logo svg { height: 18px; }
    .joinHeader .ctas a { font-size: 12px; padding: 6px 16px; }
    .joinHeadline {
        margin-bottom: 14px;
        padding: 0 16px;
    }
    .joinHeadline h1 {
        font-size: 34px;
    }
    .joinHeadline p {
        font-size: 13px;
    }
    .billingToggle {
        margin-bottom: 14px;
    }
    .billingToggle .toggle {
        padding: 6px 14px;
        font-size: 12px;
    }
    .billingToggle .toggle .saveBadge {
        font-size: 9px;
        padding: 1px 5px;
    }

    /* Horizontal scroll cards */
    .pricingCards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 16px;
        margin-bottom: 20px;
        scrollbar-width: none;
    }
    .pricingCards::-webkit-scrollbar { display: none; }
    .pricingCard {
        flex: 0 0 78%;
        scroll-snap-align: start;
        padding: 20px;
        border-radius: 14px;
        min-width: 0;
    }
    .pricingCard .cardTitle {
        font-size: 11px;
        margin-bottom: 8px;
    }
    .priceDisplay {
        min-height: auto;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }
    .priceDisplay .price {
        font-size: 32px;
    }
    .priceDisplay .price .period {
        font-size: 12px;
    }
    .priceDisplay .priceSub {
        font-size: 11px;
        margin-top: 4px;
    }
    .priceDisplay .priceStrike {
        font-size: 18px;
    }
    .featureList {
        margin-bottom: 14px;
    }
    .featureList li {
        padding: 4px 0;
        font-size: 12px;
        gap: 8px;
    }
    .featureList li .featureIcon {
        width: 14px;
        height: 14px;
        font-size: 10px;
    }
    .featureList .sectionLabel {
        font-size: 9px;
        padding: 2px 0 3px;
    }
    .ctaBtn {
        padding: 11px 14px;
        font-size: 12px;
        border-radius: 8px;
    }
    .ctaBtn .arrow {
        font-size: 13px;
    }
    .popularBadge {
        font-size: 10px;
        padding: 3px 10px;
        margin-bottom: 12px;
    }

    /* Reviews: horizontal scroll too */
    .socialProof {
        padding: 0 16px;
    }
    .socialProof .proofHeader {
        margin-bottom: 8px;
    }
    .socialProof .stars { font-size: 12px; }
    .socialProof .proofText { font-size: 11px; }
    .reviewCards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        scrollbar-width: none;
    }
    .reviewCards::-webkit-scrollbar { display: none; }
    .reviewCard {
        flex: 0 0 70%;
        scroll-snap-align: start;
        padding: 12px;
        border-radius: 10px;
    }
    .reviewCard .reviewAvatar { width: 24px; height: 24px; }
    .reviewCard .reviewName { font-size: 11px; }
    .reviewCard .reviewSince { font-size: 9px; }
    .reviewCard .reviewHeader { gap: 6px; margin-bottom: 6px; }
    .reviewCard .reviewText {
        font-size: 11px;
        -webkit-line-clamp: 2;
        line-height: 1.4;
    }
    .cryptoLink { font-size: 10px; margin-top: 8px; }
    .bfBanner { margin-left: 16px; margin-right: 16px; width: auto; }
}

/* ─── Dark Mode ─── */
#dark .joinPage {
    background: #0c0c0c;
}
#dark .bgOrb1 { background: radial-gradient(circle, rgba(232,37,53,0.10), transparent 70%); }
#dark .bgOrb2 { background: radial-gradient(circle, rgba(245,185,100,0.08), transparent 70%); }
#dark .bgOrb3 { background: radial-gradient(circle, rgba(232,37,53,0.05), transparent 70%); }
#dark .joinHeadline h1 { color: #fff; }
#dark .joinHeadline p { color: #666; }
#dark .billingToggle { background: #1a1a1a; }
#dark .billingToggle .toggle { color: #666; }
#dark .billingToggle .toggle.active { background: #2a2a2a; color: #fff; box-shadow: none; }
#dark .pricingCard { background: #141414; border-color: transparent; }
#dark .pricingCard.featured { border-color: #E82535; box-shadow: 0 0 0 1px #E82535; }
#dark .pricingCard .cardTitle { color: #666; }
#dark .priceDisplay { border-bottom-color: #222; }
#dark .priceDisplay .price { color: #fff; }
#dark .featureList li { color: #999; }
#dark .featureList li.excluded { color: #444; }
#dark .featureList li .featureIcon.included { color: #fff; }
#dark .featureList li .featureIcon.excluded { color: #333; }
#dark .ctaBtn.ctaFree { background: #1a1a1a; color: #fff; border-color: #2a2a2a; }
#dark .ctaBtn.ctaFree:hover { background: #222; }
#dark .ctaBtn.ctaCitizen { background: #E82535; color: #fff; }
#dark .ctaBtn.ctaCitizen:hover { background: #d0202e; }
#dark .popularBadge { background: #fff; color: #000; }
#dark .reviewCard { background: #141414; }
#dark .reviewCard .reviewName { color: #fff; }
#dark .reviewCard .reviewText { color: #777; }
#dark .socialProof .proofText { color: #555; }
#dark .joinHeader .logo svg path { fill: #fff; }
#dark .joinHeader .logo svg path:last-child { fill: #E82535; }
#dark .joinHeader .ctas a { color: #fff; border-color: #333; background: #141414; }
#dark .joinHeader .ctas a:hover { background: #fff; color: #000; border-color: #fff; }