/* =========================
   MEMBERSHIP PAGE
   (extends tokens from about.css)
========================= */


.secondary-button{

    display:inline-block;
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--line);
    padding:14px 26px;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    transition:border-color .2s ease, background .2s ease;

}


.secondary-button:hover{

    border-color:var(--ink);
    background:rgba(0,0,0,.03);

}




/* COMPARE BAR */


.compare-bar{

    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--pad);

    display:flex;
    justify-content:center;

}


.compare-button{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:var(--paper);
    border:1.5px solid var(--line);

    padding:12px clamp(20px, 3vw, 28px);
    border-radius:100px;

    font-size:15px;
    font-weight:600;

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

}


.compare-button:hover{

    border-color:var(--blue);
    color:var(--blue);
    transform:translateY(-2px);

}




/* MEMBERSHIP GRID */


.membership-grid{

    max-width:var(--container);
    margin:auto;
    padding:clamp(30px, 5vw, 50px) var(--pad) clamp(50px, 8vw, 90px);

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:clamp(20px, 3vw, 30px);
    align-items:stretch;

}


.membership-card{

    position:relative;

    background:var(--paper);
    border-radius:var(--radius-lg);
    border:1.5px solid var(--line);

    padding:clamp(28px, 3.5vw, 38px) clamp(24px, 3vw, 32px);

    display:flex;
    flex-direction:column;

    box-shadow:var(--shadow-soft);
    transition:transform .25s ease, box-shadow .25s ease;

}


.membership-card:hover{

    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);

}


.membership-card.featured{

    border-color:var(--blue);
    box-shadow:0 20px 50px rgba(56,103,255,.15);

}


.tier-badge{

    position:absolute;
    top:-14px;
    left:clamp(24px, 3vw, 32px);

    background:var(--blue);
    color:white;

    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;

    padding:6px 14px;
    border-radius:100px;

}


.tier-icon{

    width:52px;
    height:52px;
    border-radius:14px;

    background:rgba(56,103,255,.1);

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

    font-size:24px;
    margin-bottom:18px;

}


.membership-card h2{

    font-size:clamp(22px, 2.6vw, 26px);
    letter-spacing:-.5px;
    margin-bottom:10px;

}


.tier-price{

    font-size:15px;
    color:#4a4a4a;
    margin-bottom:14px;

}


.tier-price span{

    font-size:clamp(26px, 3vw, 32px);
    font-weight:800;
    color:var(--ink);
    letter-spacing:-1px;

}


.tier-blurb{

    font-size:15px;
    line-height:1.6;
    color:#4a4a4a;
    margin-bottom:22px;

}


.tier-teaser{

    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-bottom:28px;
    flex-grow:1;

}


.tier-teaser li{

    position:relative;
    padding-left:24px;
    font-size:14.5px;
    line-height:1.5;

}


.tier-teaser li::before{

    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--blue);
    font-weight:700;

}


.tier-actions{

    display:flex;
    flex-direction:column;
    gap:12px;

}


.tier-actions .primary-button,
.tier-actions .secondary-button{

    text-align:center;
    width:100%;

}





/* =========================
   MODALS (shared shell)
========================= */


.tier-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.6);

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

    padding:clamp(20px, 5vh, 60px) var(--pad);

    overflow-y:auto;

    z-index:3000;

}


.tier-modal.active{

    display:flex;

}


.tier-modal-panel{

    position:relative;

    width:100%;
    max-width:520px;

    background:var(--paper);
    border-radius:var(--radius-lg);

    padding:clamp(32px, 5vw, 48px);

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

}


.tier-modal-close{

    position:absolute;
    top:18px;
    right:18px;

    width:38px;
    height:38px;

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

    border-radius:50%;
    font-size:18px;

    transition:background .2s ease;

}


.tier-modal-close:hover{

    background:rgba(0,0,0,.06);

}


.tier-modal-icon{

    width:52px;
    height:52px;
    border-radius:14px;

    background:rgba(56,103,255,.1);

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

    font-size:24px;
    margin-bottom:18px;

}


.tier-modal .eyebrow{

    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:10px;

}


.tier-modal-panel h2{

    font-size:clamp(24px, 3vw, 30px);
    letter-spacing:-.5px;
    margin-bottom:10px;

}


.tier-modal-price{

    font-size:15px;
    color:#4a4a4a;
    margin-bottom:24px;

}


.tier-modal-price span{

    font-size:clamp(24px, 2.8vw, 28px);
    font-weight:800;
    color:var(--ink);

}


.tier-full-list{

    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;

    margin-bottom:30px;

}


.tier-full-list li{

    position:relative;
    padding-left:26px;
    font-size:15px;
    line-height:1.55;
    color:#333;

}


.tier-full-list li::before{

    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--blue);
    font-weight:700;

}


.tier-modal-panel > .primary-button{

    width:100%;
    text-align:center;

}





/* =========================
   COMPARE MODAL
========================= */


.compare-panel{

    max-width:960px;

}


.compare-table-wrapper{

    overflow-x:auto;
    margin:0 0 clamp(24px, 4vw, 34px);

    border:1px solid var(--line);
    border-radius:var(--radius-md);

}


.compare-table{

    width:100%;
    min-width:560px;
    border-collapse:collapse;

}


.compare-table th,
.compare-table td{

    padding:clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 18px);
    text-align:center;
    font-size:14px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;

}


.compare-table thead th{

    background:var(--cream);
    font-size:15px;
    font-weight:700;
    line-height:1.5;

}


.compare-table thead th span{

    display:block;
    font-size:12px;
    font-weight:600;
    color:#8a8a8a;

}


.compare-feature-col,
.compare-table th[scope="row"]{

    text-align:left;
    font-weight:600;
    white-space:normal;

}


.compare-table tbody th[scope="row"]{

    background:var(--cream);

}


.compare-highlight{

    background:rgba(56,103,255,.06);

}


.compare-table .check{

    color:var(--blue);
    font-weight:800;
    font-size:16px;

}


.compare-table .cross{

    color:#c2c2c2;

}


.compare-cta-row{

    display:flex;
    flex-wrap:wrap;
    gap:12px;

}


.compare-cta-row .primary-button{

    flex:1 1 200px;
    text-align:center;

}


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

    .membership-card,
    .compare-button{
        transition:none;
    }

}