/* =========================================================
   HAPPY MAIL CLUB
   MaryJo Buzzanco Fine Art
========================================================= */


/* =========================================================
   ROOT / PAGE
========================================================= */

:root {

    --happy-bg: #f8f7f4;
    --happy-card: #ffffff;
    --happy-border: #e8e4dc;
    --happy-accent: #7a6046;
    --happy-accent-dark: #5f4631;
    --happy-text: #333333;
    --happy-light: #777777;

    --happy-shadow:
        0 12px 30px rgba(0, 0, 0, .08);

    --happy-radius: 18px;

}


body {

    background: var(--happy-bg);

    color: var(--happy-text);

}


main {

    max-width: 1500px;

    margin: 0 auto;

}


/* =========================================================
   SHARED SECTION STRUCTURE
========================================================= */

.about-section {

    padding:
        0 8% 80px;

}


.section-header {

    width: 100%;

    margin:
        0 auto 50px;

    text-align: center;

}


.section-header span {

    display: block;

    margin-bottom: 12px;

    color: var(--happy-accent);

    font-size: .9rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.section-header h2 {

    margin: 0;

    color: var(--happy-accent-dark);

    font-size: 2.3rem;

}


.section-header p {

    max-width: 700px;

    margin:
        20px auto 0;

    color: var(--happy-light);

    line-height: 1.8;

}


/* =========================================================
   HERO
========================================================= */

.happymail-hero {

    display: grid;

    grid-template-columns:
        320px 1fr;

    gap: 70px;

    align-items: center;

    padding:
        80px 8%;

    background:
        linear-gradient(
            135deg,
            #f8f3eb,
            #f2e8da
        );

}


.happymail-hero .hero-image {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.happymail-hero .hero-content {

    max-width: 700px;

}


.happymail-hero .section-tag {

    display: inline-block;

    padding:
        8px 18px;

    margin-bottom: 20px;

    border-radius: 999px;

    background: #efe8df;

    color: var(--happy-accent-dark);

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.happymail-hero h1 {

    margin: 0;

    color: var(--happy-accent-dark);

    font-size: 3.2rem;

    line-height: 1.1;

}


.happymail-hero h2 {

    margin:
        15px 0 30px;

    color: var(--happy-accent);

    font-size: 1.4rem;

    font-weight: 500;

}


.happymail-hero p {

    margin-bottom: 22px;

    color: #555;

    font-size: 1.08rem;

    line-height: 1.9;

}


.hero-button {

    display: inline-block;

    margin-top: 20px;

    padding:
        15px 30px;

    border-radius: 999px;

    background: var(--happy-accent);

    color: white;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}


.hero-button:hover {

    background: var(--happy-accent-dark);

    transform:
        translateY(-3px);

}


/* =========================================================
   ENVELOPE
========================================================= */

.mail-illustration {

    position: relative;

    width: 360px;
    height: 300px;

    display: flex;

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

}


.envelope {

    position: relative;

    width: 280px;
    height: 190px;

    background: #f8f3ea;

    border:
        2px solid rgba(70, 70, 70, .15);

    border-radius: 8px;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, .12),
        0 4px 10px rgba(0, 0, 0, .08);

    transform:
        rotate(-3deg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.envelope:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 25px 45px rgba(0, 0, 0, .16);

}


.envelope-flap {

    position: absolute;

    top: -1px;
    left: 0;

    width: 0;
    height: 0;

    border-left:
        138px solid transparent;

    border-right:
        138px solid transparent;

    border-top:
        105px solid #e9dfcf;

    z-index: 3;

}


.envelope::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-top:
        94px solid transparent;

    border-left:
        138px solid #eee5d7;

    z-index: 2;

}


.envelope::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-top:
        94px solid transparent;

    border-right:
        138px solid #e6dccd;

    z-index: 2;

}


.envelope-paper {

    position: absolute;

    top: -45px;
    left: 50%;

    width: 175px;
    height: 105px;

    transform:
        translateX(-50%)
        rotate(3deg);

    display: flex;

    flex-direction: column;

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

    background: white;

    border:
        1px solid rgba(0, 0, 0, .08);

    box-shadow:
        0 8px 15px rgba(0, 0, 0, .10);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height: 1;

    z-index: 1;

}


.envelope-paper span {

    margin-bottom: 7px;

    color: var(--happy-accent);

    font-size: 14px;

    letter-spacing: 4px;

}


.envelope-paper strong {

    color: var(--happy-accent-dark);

    font-size: 28px;

    letter-spacing: 3px;

}


/* =========================================================
   SPARKLES
========================================================= */

.mail-sparkle {

    position: absolute;

    color: var(--happy-accent);

    font-size: 28px;

    opacity: .75;

    animation:
        happySparkle 3s ease-in-out infinite;

}


.sparkle-one {

    top: 25px;
    left: 20px;

}


.sparkle-two {

    top: 85px;
    right: 18px;

    animation-delay: .8s;

}


.sparkle-three {

    left: 48px;
    bottom: 25px;

    font-size: 22px;

    animation-delay: 1.5s;

}


@keyframes happySparkle {

    0%,
    100% {

        transform:
            scale(1)
            rotate(0deg);

        opacity: .45;

    }

    50% {

        transform:
            scale(1.25)
            rotate(15deg);

        opacity: 1;

    }

}


/* =========================================================
   INTRODUCTION
========================================================= */

.happy-intro {

    max-width: 1000px;

    margin:
        0 auto;

}


.intro-content {

    max-width: 760px;

    margin:
        0 auto;

    text-align: center;

    font-size: 1.05rem;

    line-height: 1.8;

}


.intro-content p {

    margin:
        0 0 22px;

}


.intro-highlight {

    color: var(--happy-accent-dark);

    font-size: 1.2rem;

}


/* =========================================================
   INSIDE YOUR ENVELOPE
========================================================= */

.happy-mail-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    width: 100%;

    max-width: 1100px;

    margin:
        0 auto;

}


.happy-mail-card {

    padding:
        35px 28px;

    background: var(--happy-card);

    border:
        1px solid var(--happy-border);

    border-radius:
        var(--happy-radius);

    box-shadow:
        var(--happy-shadow);

    text-align: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.happy-mail-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .10);

}


.happy-mail-icon {

    width: 68px;
    height: 68px;

    margin:
        0 auto 20px;

    display: flex;

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

    background: #efe8df;

    border-radius: 50%;

    font-size: 30px;

}


.happy-mail-card h3 {

    margin:
        0 0 12px;

    color: var(--happy-accent-dark);

}


.happy-mail-card p {

    margin: 0;

    color: #666;

    line-height: 1.8;

}


/* =========================================================
   HOW IT WORKS
========================================================= */

.quote-section {

    margin:
        0 0 80px;

    padding:
        80px 8%;

    background:
        linear-gradient(
            135deg,
            var(--happy-accent),
            var(--happy-accent-dark)
        );

    color: white;

    text-align: center;

}


.quote-section .section-header span,
.quote-section .section-header h2 {

    color: white;

}


.steps-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 45px;

    max-width: 1000px;

    margin:
        0 auto;

}


.step-card {

    text-align: center;

}


.step-number {

    margin-bottom: 15px;

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 3px;

    opacity: .75;

}


.step-card h3 {

    margin-bottom: 12px;

}


.step-card p {

    margin: 0;

    line-height: 1.8;

}


/* =========================================================
   MEMBERSHIP
========================================================= */

.membership-section {

    background: transparent;

}


.membership-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 24px;

    width: 100%;

    max-width: 1250px;

    margin:
        0 auto;

    align-items: stretch;

}


.membership-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding:
        38px 24px 32px;

    background: white;

    border:
        1px solid var(--happy-border);

    border-radius:
        var(--happy-radius);

    box-shadow:
        var(--happy-shadow);

    text-align: center;

}


.membership-card:hover {

    transform:
        translateY(-5px);

}


.membership-label {

    display: block;

    margin-bottom: 10px;

    color: var(--happy-accent);

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.membership-card h3 {

    margin:
        0 0 15px;

    color: var(--happy-accent-dark);

}


.membership-price {

    margin-bottom: 20px;

    color: var(--happy-accent-dark);

    font-size: 2.5rem;

    font-weight: 700;

}


.membership-price span {

    font-size: .9rem;

    font-weight: 400;

    color: #777;

}


.membership-description {

    margin-bottom: 25px;

    color: #666;

    line-height: 1.8;

}


.membership-card ul {

    flex: 1;

    margin:
        0 0 30px;

    padding: 0;

    list-style: none;

    text-align: left;

}


.membership-card li {

    position: relative;

    padding:
        10px 0 10px 25px;

    border-bottom:
        1px solid #eee;

    color: #666;

    line-height: 1.5;

}


.membership-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--happy-accent);

    font-weight: bold;

}


.membership-card .hero-button {

    align-self: center;

    margin-top: auto;

}


.featured-membership {

    border:
        2px solid var(--happy-accent);

    transform:
        translateY(-10px);

}


.popular-badge {

    position: absolute;

    top: -14px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        6px 18px;

    background:
        var(--happy-accent);

    color: white;

    border-radius:
        999px;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    white-space: nowrap;

}


/* =========================================================
   COLLECTION
========================================================= */

.collection-content {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    max-width: 1050px;

    margin:
        0 auto;

    align-items: center;

}


.collection-text {

    color: #555;

    font-size: 1.05rem;

    line-height: 1.9;

}


.collection-text p {

    margin:
        0 0 20px;

}


.collection-themes {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

}


.theme-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        16px;

    background: white;

    border:
        1px solid var(--happy-border);

    border-radius:
        10px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .05);

}


.theme-item span {

    font-size: 23px;

}


.theme-item strong {

    color: var(--happy-accent-dark);

    font-size: .92rem;

}


/* =========================================================
   JOIN / WAITLIST
========================================================= */

.contact-banner {

    margin:
        0 8% 80px;

    padding:
        70px;

    background: white;

    border-radius:
        25px;

    box-shadow:
        var(--happy-shadow);

    text-align: center;

}


.contact-banner h2 {

    margin-bottom: 25px;

    color: var(--happy-accent-dark);

    font-size: 2.4rem;

}


.contact-banner p {

    max-width: 700px;

    margin:
        0 auto 25px;

    color: #666;

    line-height: 1.9;

}


.contact-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}


.contact-buttons .hero-button {

    margin-top: 0;

}


/* =========================================================
   FAQ
========================================================= */

.faq {

    display: grid;

    gap: 25px;

    max-width: 1000px;

    margin:
        0 auto;

}


.faq-item {

    padding:
        30px;

    background: white;

    border-radius:
        var(--happy-radius);

    box-shadow:
        var(--happy-shadow);

}


.faq-item h3 {

    margin-bottom: 15px;

    color: var(--happy-accent-dark);

}


.faq-item p {

    margin: 0;

    color: #666;

    line-height: 1.8;

}


/* =========================================================
   FINAL CTA
========================================================= */

.happy-final-cta {

    margin:
        0 8% 80px;

    padding:
        70px 35px;

    background:
        linear-gradient(
            135deg,
            #efe8df,
            #f8f7f4
        );

    border-radius:
        25px;

    text-align: center;

}


.happy-final-cta > div {

    max-width: 800px;

    margin:
        0 auto;

}


.happy-final-cta .section-tag {

    display: inline-block;

    padding:
        8px 18px;

    margin-bottom: 20px;

    background: white;

    border-radius:
        999px;

    color: var(--happy-accent-dark);

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.happy-final-cta h2 {

    margin:
        0 0 20px;

    color: var(--happy-accent-dark);

    font-size:
        clamp(2rem, 4vw, 3rem);

}


.happy-final-cta p {

    max-width: 650px;

    margin:
        0 auto 30px;

    color: #666;

    line-height: 1.9;

}


/* =========================================================
   FOOTER
   These are the rounded buttons you were missing
========================================================= */

.site-footer {

    padding:
        70px 40px 50px;

    background: white;

    border-top:
        1px solid #ececec;

    text-align: center;

}


.site-footer h2 {

    margin-bottom: 20px;

    color:
        var(--happy-accent-dark);

}


.site-footer p {

    max-width: 700px;

    margin:
        0 auto 30px;

    color: #666;

    line-height: 1.8;

}


.social-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 35px;

}


.social-links a {

    display: inline-block;

    padding:
        14px 28px;

    background:
        var(--happy-accent);

    color: white;

    border-radius:
        999px;

    text-decoration: none;

    transition:
        .3s;

}


.social-links a:hover {

    background:
        var(--happy-accent-dark);

    transform:
        translateY(-3px);

}


.copyright {

    color: #888;

    font-size: .9rem;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .happymail-hero {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .happymail-hero .hero-content {

        max-width: 700px;

        margin:
            0 auto;

    }


    .happymail-hero .hero-content p {

        margin-left: auto;

        margin-right: auto;

    }


    .happy-mail-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .membership-grid {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    max-width: 850px;

}


    .featured-membership {

        transform: none;

    }


    .collection-content {

        grid-template-columns:
            1fr;

        max-width: 800px;

    }


    .steps-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .happymail-hero {

        padding:
            50px 25px;

    }


    .happymail-hero .hero-image {

        order: 1;

    }


    .happymail-hero .hero-content {

        order: 2;

    }


    .happymail-hero h1 {

        font-size:
            2.4rem;

    }


    .happymail-hero h2 {

        font-size:
            1.2rem;

    }


    .about-section {

        padding:
            0 25px 60px;

    }


    .section-header h2 {

        font-size:
            2rem;

    }


    .happy-mail-grid {

        grid-template-columns:
            1fr;

    }


    .steps-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .collection-themes {

        grid-template-columns:
            1fr;

    }


    .quote-section {

        padding:
            70px 30px;

    }


    .contact-banner {

        margin:
            60px 25px;

        padding:
            45px 25px;

    }


    .happy-final-cta {

        margin:
            60px 25px;

        padding:
            45px 25px;

    }


    .mail-illustration {

        transform:
            scale(.82);

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 500px) {

    .mail-illustration {

        transform:
            scale(.70);

    }


    .collection-themes {

        grid-template-columns:
            1fr;

    }


    .membership-card {

        padding:
            35px 25px;

    }


    .site-footer {

        padding:
            60px 25px 45px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {

        animation:
            none !important;

        transition:
            none !important;

    }

}