/* ================================================================
   VOID LIFE ODYSSEY
   Mobile-first landing page styles
   ================================================================ */


/* ----------------------------------------------------------------
   1. Reset
   ---------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: #171717;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -0.004em;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}


/* ----------------------------------------------------------------
   2. Main text column
   ---------------------------------------------------------------- */

.page {
    width: 100%;
}

.content {
    width: min(calc(100% - 22px), 720px);
    margin: 0 auto;
    padding: 14px 0 54px;
}

.content p {
    margin: 0 0 0.82em;
}

.content ul {
    margin: 0 0 0.95em;
}

.content h2 {
    margin: 1.35em 0 0.55em;

    font-size: clamp(23px, 6.5vw, 37px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.content strong {
    font-weight: 800;
}

.content em {
    font-style: italic;
}


/* ----------------------------------------------------------------
   3. Emphasized reference-style phrases
   ---------------------------------------------------------------- */

.pullquote {
    margin: 22px 0;
    padding: 2px 0 2px 13px;

    border-left: 3px solid #171717;

    font-size: clamp(18px, 5.3vw, 27px);
    font-weight: 800;
    font-style: italic;
    line-height: 1.25;
}

.factor-list {
    padding-left: 1.15em;
}

.factor-list li {
    margin-bottom: 0.82em;
}


/* ----------------------------------------------------------------
   4. Images

   Add these files to /assets:
   1.png ... 20.png

   Images keep their own natural aspect ratio.
   ---------------------------------------------------------------- */

.content-image {
    width: 100%;
    margin: 20px 0 22px;
}

.content-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* ----------------------------------------------------------------
   5. Chapter accordion
   ---------------------------------------------------------------- */

.chapter-intro {
    margin: 22px 0 0;
}

.accordion {
    border-top: 1px solid #d7d7d7;
}

.chapter {
    border-bottom: 1px solid #d7d7d7;
}

.chapter > button {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding: 14px 0;

    border: 0;
    background: transparent;
    color: #171717;

    font: inherit;
    font-size: 14.5px;
    font-weight: 750;
    line-height: 1.35;

    text-align: left;
    cursor: pointer;
}

.chapter > button:hover {
    opacity: 0.74;
}

.chapter > button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.chapter .mark {
    flex: 0 0 auto;

    font-size: 21px;
    line-height: 1;
}

.chapter-body {
    display: none;
    padding: 0 0 13px;
}

.chapter.is-open .chapter-body {
    display: block;
}

.chapter-body p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   6. Standard purchase blocks
   ---------------------------------------------------------------- */

.cta-box {
    margin: 28px 0;
    padding: 20px 15px;

    border: 1px solid #171717;

    text-align: center;
}

.cta-box .small {
    margin-bottom: 5px;
    font-size: 12.5px;
}

.price {
    margin-bottom: 14px;

    font-size: clamp(33px, 9.5vw, 50px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
}

.cta {
    display: inline-flex;

    width: 100%;
    min-height: 48px;

    align-items: center;
    justify-content: center;

    padding: 11px 17px;

    border: 1px solid #171717;

    background: #171717;
    color: #ffffff;

    font-weight: 750;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    transition:
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.cta:hover {
    background: #ffffff;
    color: #171717;
}

.cta:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}


/* ----------------------------------------------------------------
   7. Grey / gold pill choice
   ---------------------------------------------------------------- */

.choice {
    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;

    margin: 22px 0;
}

.choice > div {
    padding: 17px;

    border: 1px solid #cecece;
    border-radius: 5px;

    background: #f1f1f1;
    color: #575757;
}

.choice .gold {
    border: 2px solid #c99500;

    background:
        linear-gradient(
            135deg,
            #fff6c7 0%,
            #ffdc55 44%,
            #ffbd00 100%
        );

    color: #3c2a00;

    box-shadow:
        0 9px 26px rgba(185, 130, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.choice .gold strong {
    color: #765100;
    font-size: 1.08em;
}

.gold-cta {
    border-color: #b98400;

    background:
        linear-gradient(
            135deg,
            #ffe060 0%,
            #ffbc00 100%
        );

    color: #322300;

    box-shadow:
        0 8px 23px rgba(181, 126, 0, 0.27);
}

.gold-cta:hover {
    border-color: #9d7200;
    background: #ffe16a;
    color: #2d2000;

    transform: translateY(-1px);
}


/* ----------------------------------------------------------------
   8. Divider
   ---------------------------------------------------------------- */

.divider {
    width: 100%;
    height: 1px;

    margin: 32px 0;

    background: #d9d9d9;
}


/* ----------------------------------------------------------------
   9. Footer
   ---------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid #d9d9d9;
    background: #ffffff;
}

.footer-inner {
    width: min(calc(100% - 22px), 720px);

    margin: 0 auto;
    padding: 26px 0 34px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 15px;

    margin: 14px 0;
}

.footer-links a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-contact {
    display: grid;

    gap: 4px;

    font-size: 12.5px;
    line-height: 1.46;
}


/* ----------------------------------------------------------------
   10. Secondary pages
   ---------------------------------------------------------------- */

.simple-page {
    width: min(calc(100% - 22px), 720px);

    margin: 0 auto;
    padding: 28px 0 54px;
}

.simple-page h1 {
    margin: 0 0 22px;

    font-size: clamp(31px, 8.5vw, 50px);
    line-height: 1;
}

.simple-page h2 {
    margin-top: 28px;
}

.back-link {
    display: inline-block;

    margin-bottom: 24px;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.review-item {
    padding: 18px 0;

    border-bottom: 1px solid #d9d9d9;
}


/* ================================================================
   11. STONE CTA BUTTONS
   Both buttons always have exactly the same dimensions.
   Only colors are different.
   ================================================================ */


/* ----------------------------------------------------------------
   Stone CTA group
   ---------------------------------------------------------------- */

.stone-cta-group {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;

    margin: 34px auto;
}


/* ----------------------------------------------------------------
   Shared stone button

   IMPORTANT:
   Width, height, padding and font size are defined here only.
   Do not redefine them in the gold or grey button classes.
   ---------------------------------------------------------------- */

.stone-button {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px 20px;

    border: 1px solid #817866;
    border-radius: 7px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;

    text-align: center;
    text-decoration: none;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.24) 0,
            transparent 18%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(45, 39, 30, 0.15) 0,
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #b4aa95 0%,
            #8e8574 45%,
            #aaa08b 100%
        );

    box-shadow:
        inset 0 3px 3px rgba(255, 255, 255, 0.32),
        inset 0 -5px 7px rgba(46, 39, 29, 0.32),
        0 5px 9px rgba(0, 0, 0, 0.24);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}


/* ----------------------------------------------------------------
   Rough stone texture overlay
   ---------------------------------------------------------------- */

.stone-button::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    border-radius: inherit;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.65;

    pointer-events: none;
}


/* ----------------------------------------------------------------
   Gold payment button

   Only visual properties are changed here.
   Size remains identical to the reviews button.
   ---------------------------------------------------------------- */

.stone-button-gold {
    color: #ffd94a;

    border-color: #887451;

    text-shadow:
        0 2px 0 #715200,
        0 3px 3px rgba(0, 0, 0, 0.65),
        0 0 8px rgba(255, 208, 42, 0.22);

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.26) 0,
            transparent 20%
        ),
        radial-gradient(
            circle at 78% 60%,
            rgba(56, 47, 34, 0.18) 0,
            transparent 22%
        ),
        linear-gradient(
            145deg,
            #c0b39a 0%,
            #8d816b 50%,
            #b4a68b 100%
        );
}

.stone-button-gold:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        inset 0 3px 3px rgba(255, 255, 255, 0.36),
        inset 0 -5px 7px rgba(46, 39, 29, 0.30),
        0 8px 15px rgba(0, 0, 0, 0.27);
}


/* ----------------------------------------------------------------
   Grey reviews button

   Only visual properties are changed here.
   Size remains identical to the payment button.
   ---------------------------------------------------------------- */

.stone-button-reviews {
    color: #e2ded5;

    border-color: #77736b;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.65);

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.14) 0,
            transparent 20%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(32, 30, 27, 0.16) 0,
            transparent 22%
        ),
        linear-gradient(
            145deg,
            #89867f 0%,
            #66635d 52%,
            #807c74 100%
        );

    box-shadow:
        inset 0 3px 3px rgba(255, 255, 255, 0.17),
        inset 0 -5px 7px rgba(0, 0, 0, 0.25),
        0 5px 9px rgba(0, 0, 0, 0.20);
}

.stone-button-reviews:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        inset 0 3px 3px rgba(255, 255, 255, 0.20),
        inset 0 -5px 7px rgba(0, 0, 0, 0.25),
        0 8px 15px rgba(0, 0, 0, 0.23);
}


/* ----------------------------------------------------------------
   Keyboard accessibility
   ---------------------------------------------------------------- */

.stone-button:focus-visible {
    outline: 3px solid #e0b72e;
    outline-offset: 4px;
}


/* ================================================================
   12. Tablet / desktop
   ================================================================ */

@media (min-width: 700px) {

    body {
        font-size: 17px;
        line-height: 1.56;
    }


    /* Main content */

    .content {
        padding-top: 28px;
        padding-bottom: 68px;
    }

    .content p {
        margin-bottom: 0.95em;
    }


    /* Images */

    .content-image {
        margin: 30px 0 32px;
    }


    /* Chapter accordion */

    .chapter > button {
        padding: 18px 0;
        font-size: 16.5px;
    }


    /* Standard CTA */

    .cta-box {
        margin: 36px 0;
        padding: 28px 26px;
    }

    .cta {
        width: auto;
        min-width: 280px;
    }


    /* Gold / grey pill choice */

    .choice {
        grid-template-columns: 1fr 1fr;
    }


    /* Footer */

    .footer-inner {
        padding-top: 36px;
        padding-bottom: 44px;
    }


    /* Stone CTA group */

    .stone-cta-group {
        max-width: 680px;

        margin-top: 42px;
        margin-bottom: 42px;
    }


    /* Both stone buttons use exactly the same desktop size */

    .stone-button {
        min-height: 86px;

        padding: 20px 24px;

        font-size: 28px;
    }
}