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

.plan-hero{
background:#0b1320;
color:#ffffff;
padding:160px 0 140px;
}

.plan-hero-grid{
display:grid;
grid-template-columns:420px 1fr;
gap:80px;
align-items:start;
}


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

.plan-pricing-card{
background:#111b2c;
padding:48px;
border-radius:16px;
border:1px solid rgba(255,255,255,.06);
}

.plan-title{
font-family:"Cormorant Garamond",serif;
font-size:56px;
margin-bottom:12px;
}

.plan-subtitle{
font-size:18px;
opacity:.8;
line-height:1.6;
margin-bottom:36px;
}


/* ============================================================
PRICE
============================================================ */

.plan-price{
display:flex;
align-items:baseline;
gap:10px;
margin-top:26px;
}

.price-value{
font-size:64px;
font-weight:700;
letter-spacing:-1px;
}

.price-period{
font-size:24px;
opacity:.7;
}

.billing{
font-size:14px;
opacity:.6;
margin-top:6px;
}


/* ============================================================
YEARLY SUMMARY
============================================================ */

.yearly-summary{
display:flex;
align-items:center;
gap:12px;
margin-top:14px;
margin-bottom:32px;
font-size:15px;
flex-wrap:wrap;
}

.yearly-old{
text-decoration:line-through;
opacity:.35;
}

.yearly-final{
font-weight:500;
}

.yearly-save{
color:#c9a84c;
font-weight:500;
}


/* ============================================================
TERMS CHECKBOX
============================================================ */

.plan-terms{
margin-top:10px;
margin-bottom:26px;
}

.terms-check{
display:flex;
align-items:flex-start;
gap:12px;
font-size:14px;
opacity:.85;
line-height:1.5;
}

.terms-check input{
margin-top:3px;
transform:scale(1.05);
cursor:pointer;
}

.terms-check a{
color:#c9a84c;
text-decoration:none;
}

.terms-check a:hover{
text-decoration:underline;
}


/* ============================================================
CTA + TRUST
============================================================ */

.plan-cta{
margin-top:8px;
margin-bottom:14px;
width:100%;
text-align:center;
}

.plan-trust{
margin-top:22px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:13px;
opacity:.65;
}

.plan-trust .material-symbols-outlined{
font-size:16px;
color:#c9a84c;
}


/* ============================================================
RIGHT COLUMN
============================================================ */

.plan-details{
background:#111b2c;
padding:42px;
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
}

.plan-details h3{
font-size:20px;
margin-bottom:18px;
font-weight:600;
}


/* ============================================================
FEATURE LIST
============================================================ */

.plan-feature-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 22px;
margin-bottom:32px;
}

.plan-feature-list li{
list-style:none;
position:relative;
padding-left:18px;
opacity:.9;
font-size:15px;
}

.plan-feature-list li::before{
content:"•";
position:absolute;
left:0;
color:#c9a84c;
font-weight:700;
}


/* ============================================================
PLAN LIMITS
============================================================ */

.plan-limits{
margin-top:6px;
margin-bottom:28px;
}

.plan-limits ul{
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 24px;
}

.plan-limits li{
opacity:.65;
font-size:14px;
}


/* ============================================================
IDEAL FOR
============================================================ */

.plan-ideal p{
opacity:.75;
line-height:1.6;
font-size:15px;
}

/* ============================================================
PAYMENT METHODS
============================================================ */

.payment-methods{
display:flex;
align-items:center;
gap:14px;
margin-top:22px;
flex-wrap:wrap;
}

.payment-methods img{
height:26px;
opacity:.85;
transition:opacity .2s ease, transform .2s ease;
}

.payment-methods img:hover{
opacity:1;
transform:translateY(-1px);
}

/* ============================================================
PAYMENT DISCLAIMER
============================================================ */

.payment-disclaimer{
margin-top:12px;
font-size:12px;
opacity:.55;
line-height:1.4;
}

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

@media (max-width:1024px){

.plan-hero-grid{
grid-template-columns:1fr;
gap:60px;
}

.plan-feature-list{
grid-template-columns:1fr;
}

}

@media (max-width:768px){

.plan-limits ul{
grid-template-columns:1fr;
}

}