.plans-body{
    display:flex;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
}

.plans-page{
    width:100%;
    min-height:100%;
    padding:0;
    background:
        radial-gradient(circle at 20% 10%, rgba(37,99,235,0.24), transparent 34%),
        radial-gradient(circle at 90% 0%, rgba(34,211,238,0.14), transparent 30%),
        transparent;
    color:#e5edf9;
}

.plans-main{
    background:
        radial-gradient(circle at 18% 8%, rgba(37,99,235,0.22), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(34,211,238,0.12), transparent 30%),
        #020817;
}

.plans-main .sidebar svg,
.plans-hero span svg,
.plan-eyebrow svg,
.quote-actions svg{
    width:18px;
    height:18px;
    flex:0 0 auto;
}

.plans-hero span,
.plan-eyebrow{
    align-items:center;
    gap:7px;
}

.plans-hero{
    width:100%;
    min-height:190px;
    padding:26px 28px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:22px;
    background:linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,138,0.42));
    box-shadow:0 26px 80px rgba(0,0,0,0.28);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.plans-hero span,
.plan-eyebrow{
    display:inline-flex;
    margin-bottom:10px;
    color:#86efac;
    background:rgba(16,185,129,0.12);
    border:1px solid rgba(16,185,129,0.25);
    border-radius:999px;
    padding:6px 11px;
    font-size:12px;
    font-weight:900;
}

.plans-hero h1,
.plan-card h2{
    margin:0;
    color:#fff;
}

.plans-hero h1{
    font-size:clamp(32px, 4vw, 54px);
    line-height:1.02;
    max-width:760px;
}

.plans-hero p,
.plan-card p,
.plan-card li{
    color:#9fb0c9;
    line-height:1.65;
}

.plans-hero p{
    max-width:780px;
    margin:14px 0 0;
}

.plans-hero-actions,
.plan-action-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.plans-hero-actions{
    justify-content:flex-end;
    min-width:270px;
}

.plans-hero-actions a,
.plan-action-row a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:14px;
    padding:12px 15px;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    background:linear-gradient(135deg,#2563eb,#10b981);
}

.plans-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    margin-top:18px;
}

.plans-grid.overview{
    grid-template-columns:minmax(260px, .9fr) minmax(320px, 1.15fr) minmax(300px, .95fr);
    align-items:stretch;
}

.plans-grid.lower{
    grid-template-columns:minmax(0, 1.7fr) minmax(320px, .8fr);
}

.plan-card{
    padding:22px;
    border:1px solid rgba(148,163,184,0.16);
    border-radius:24px;
    background:rgba(15,23,42,0.84);
    box-shadow:0 18px 58px rgba(0,0,0,0.22);
}

.plan-card.highlight{
    background:linear-gradient(145deg, rgba(37,99,235,0.32), rgba(15,23,42,0.9));
    border-color:rgba(59,130,246,0.45);
}

.plan-actions-card{
    background:linear-gradient(145deg, rgba(37,99,235,0.2), rgba(15,23,42,0.9));
    border-color:rgba(96,165,250,0.26);
}

.quote-card{
    border-color:rgba(52,211,153,0.34);
    background:linear-gradient(145deg, rgba(6,95,70,0.28), rgba(15,23,42,0.9));
}

.quote-metrics{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:16px 0 8px;
}

.quote-metrics div{
    padding:12px;
    border:1px solid rgba(148,163,184,0.14);
    border-radius:16px;
    background:rgba(2,6,23,0.38);
}

.quote-metrics span{
    display:block;
    color:#93a4bc;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:6px;
}

.quote-metrics strong{
    display:block;
    color:#bbf7d0;
    font-size:18px;
}

.quote-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.quote-actions a,
.quote-active{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    border-radius:14px;
    padding:11px 14px;
    font-weight:900;
}

.quote-actions a{
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,#2563eb,#10b981);
}

.quote-active{
    color:#bbf7d0;
    background:rgba(16,185,129,0.13);
    border:1px solid rgba(52,211,153,0.28);
}

.plan-card.accent{
    background:linear-gradient(145deg, rgba(14,165,233,0.14), rgba(15,23,42,0.9));
}

.plan-card ul{
    padding-left:18px;
}

.plan-card button,
.plan-card a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    border:0;
    border-radius:14px;
    padding:12px 16px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    cursor:pointer;
}

.plan-action-row button,
.plan-action-row a{
    margin-top:0;
}

.plan-card button.secondary{
    background:rgba(148,163,184,0.12);
}

.plan-card button:disabled{
    cursor:not-allowed;
    opacity:.68;
}

.span-2{
    grid-column:span 1;
}

.plan-section-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
}

.plan-table-wrap{
    overflow:auto;
}

.plan-table-wrap table{
    width:100%;
    border-collapse:collapse;
}

.plan-table-wrap th,
.plan-table-wrap td{
    text-align:left;
    padding:12px;
    border-bottom:1px solid rgba(148,163,184,0.12);
}

.plan-table-wrap th{
    color:#93c5fd;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.usage-suggestion-list{
    display:grid;
    gap:10px;
}

.usage-suggestion-list div{
    padding:12px;
    border-radius:14px;
    background:rgba(2,6,23,0.5);
    border:1px solid rgba(148,163,184,0.12);
}

.usage-suggestion-list b{
    display:block;
    color:#fff;
    margin-bottom:4px;
}

@media (max-width: 980px){
    .plans-grid,
    .plans-grid.overview,
    .plans-grid.lower,
    .quote-metrics{
        grid-template-columns:1fr;
    }

    .plans-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .plans-hero-actions{
        justify-content:flex-start;
        min-width:0;
    }
}

@media (max-width:900px){
    .plans-body{
        display:block;
        height:auto;
        overflow:auto;
    }

    .plans-main{
        min-height:calc(100vh - 72px);
        overflow:visible;
    }
}