/* ==========================================================
LITHE PLANS PAGE
========================================================== */

.plans-page{

    padding:160px 8% 100px;

    min-height:100vh;

}

/* ==========================================================
ENTRANCE
========================================================== */

.plans-entrance{

    text-align:center;

    max-width:760px;

    margin:0 auto 120px;

}

.plans-eyebrow{

    color:var(--gold);

    font-size:13px;

    letter-spacing:8px;

    text-transform:uppercase;

    margin-bottom:26px;

}

.plans-entrance h1{

    font-family:"Cormorant Garamond",serif;

    font-size:76px;

    line-height:1.05;

    color:white;

    margin-bottom:28px;

}

.plans-subtitle{

    font-size:19px;

    color:var(--text);

    line-height:1.8;

}

/* ==========================================================
GRID
========================================================== */

.plans-grid{

    display:grid;

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

    gap:32px;

    max-width:1300px;

    margin:0 auto;

}

/* ==========================================================
CARD
========================================================== */

.plan-card{

    position:relative;

    padding:55px 40px;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(199,168,74,.14);

    backdrop-filter:blur(18px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

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

}

.plan-card:hover{

    border-color:rgba(199,168,74,.4);

    box-shadow:
        0 35px 80px rgba(0,0,0,.45),
        0 0 30px rgba(199,168,74,.1);

}

.plan-featured{

    border-color:rgba(199,168,74,.35);

    background:rgba(199,168,74,.03);

    transform:scale(1.03);

}

.plan-featured:hover{

    transform:scale(1.03) translateY(-6px);

}

.plan-tag{

    position:absolute;

    top:-13px;

    left:50%;

    transform:translateX(-50%);

    background:var(--gold);

    color:#111;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    padding:6px 18px;

    font-family:"Poppins",sans-serif;

    font-weight:500;

}

.plan-tier-label{

    color:var(--gold);

    font-size:13px;

    letter-spacing:6px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.plan-price{

    font-family:"Cormorant Garamond",serif;

    font-size:56px;

    color:white;

    margin-bottom:18px;

}

.plan-price span{

    font-family:"Poppins",sans-serif;

    font-size:15px;

    color:var(--text);

    letter-spacing:1px;

}

.plan-description{

    color:var(--text);

    font-size:15px;

    line-height:1.7;

    margin-bottom:38px;

    min-height:44px;

}

.plan-features{

    list-style:none;

    margin-bottom:44px;

}

.plan-features li{

    color:var(--text);

    font-size:14.5px;

    letter-spacing:.3px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    position:relative;

    padding-left:22px;

}

.plan-features li::before{

    content:"✦";

    position:absolute;

    left:0;

    color:var(--gold);

    font-size:11px;

}

.plan-features li:last-child{

    border-bottom:none;

}

.plan-button{

    width:100%;

    padding:18px;

    background:transparent;

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

    color:white;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.4s;

}

.plan-button:hover{

    background:var(--gold);

    color:#111;

    box-shadow:0 0 30px rgba(199,168,74,.25);

}

.plan-featured .plan-button{

    background:var(--gold);

    color:#111;

}

.plan-featured .plan-button:hover{

    background:var(--gold-light);

    box-shadow:0 0 35px rgba(199,168,74,.35);

}

/* ==========================================================
FOOTER NOTE
========================================================== */

.plans-footer-note{

    text-align:center;

    margin-top:90px;

}

.plans-footer-note p{

    color:#8d8d8d;

    font-size:13px;

    letter-spacing:1px;

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:1000px){

    .plans-grid{

        grid-template-columns:1fr;

        max-width:480px;

    }

    .plan-featured{

        transform:none;

    }

    .plan-featured:hover{

        transform:translateY(-6px);

    }

    .plans-entrance h1{

        font-size:52px;

    }

}

@media(max-width:768px){

    .plans-page{

        padding:130px 20px 80px;

    }

    .plans-entrance h1{

        font-size:42px;

    }

    .plan-card{

        padding:40px 28px;

    }

}