/* Plan widget for product-plans-v4.js. Do not load full /styles.css on marketing pages. */
.product-plan-shell{margin-top:8px}
.product-plan-shell .commerce-plan-grid{width:100%}
.product-plan-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px}

.plan-cycle-tabs{display:flex;gap:6px;padding:5px;border:1px solid rgba(129,151,181,.16);border-radius:12px;background:#090e15}

.plan-cycle-tabs button{border:0;background:transparent;color:#8799b0;border-radius:8px;padding:10px 14px;cursor:pointer;font:700 .76rem Inter,sans-serif}

.plan-cycle-tabs button small{display:block;font-size:.55rem;color:#55ddcf;margin-top:3px}

.plan-cycle-tabs button.is-active{background:#172433;color:#fff;box-shadow:inset 0 0 0 1px rgba(94,226,220,.2)}

.plan-currency{display:flex;align-items:center;gap:9px;color:#8094ad;font-size:.72rem;font-weight:700}

.plan-currency select{background:#0a1018;color:#eaf3ff;border:1px solid rgba(129,151,181,.2);border-radius:9px;padding:9px 30px 9px 10px}

.commerce-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}

.commerce-plan{position:relative;display:flex;flex-direction:column;min-height:410px;padding:22px;border-radius:16px;background:linear-gradient(180deg,#0d141e,#090e15);border:1px solid rgba(128,151,180,.17);overflow:hidden}

.commerce-plan.is-popular{border-color:rgba(94,226,220,.55);box-shadow:0 20px 60px rgba(35,220,205,.08)}

.commerce-plan-top{display:flex;justify-content:space-between;min-height:24px}

.plan-index{font:700 .66rem Space Mono,monospace;color:#617694}

.plan-popular{font:700 .58rem Space Mono,monospace;text-transform:uppercase;letter-spacing:.1em;color:#62e6d9}

.commerce-plan h3{font-size:2rem;margin:18px 0 4px;text-align:left;padding-left:0}

.plan-cpu{color:#8296ae;margin:0}

.commerce-price{display:flex;align-items:end;justify-content:flex-start;gap:6px;margin:24px 0 5px;padding-left:0;text-align:left;width:100%}

.commerce-price strong{font-size:2rem;color:#fff;text-align:left;margin-left:0;padding-left:0}

.commerce-price span{color:#7e93ad;font-size:.72rem;padding-bottom:6px}

.commerce-billing-note{min-height:34px;color:#6f839c;font-size:.69rem;line-height:1.45}

.commerce-plan ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px;color:#a9bbcf;font-size:.74rem;line-height:1.4}

.commerce-plan li:before{content:'✓';color:#55dfd2;margin-right:7px}

.commerce-order{margin-top:auto;justify-content:space-between}

.plans-explorer{padding:74px 0 96px}

.plans-explorer-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:20px 0 24px}

.plans-explorer-head h2{font-size:clamp(2rem,3.5vw,3.5rem);margin:.35rem 0}

.plans-explorer-head p{max-width:720px;color:#8da1ba;line-height:1.65}

@media(max-width:1150px){
.commerce-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:850px){
.commerce-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-pricing-head,.plans-explorer-head{display:block}
.product-plan-controls{align-items:flex-start;flex-direction:column}
}

@media(max-width:560px){
.commerce-plan-grid,.game-plan-tabs{grid-template-columns:1fr}
.plan-cycle-tabs{width:100%;overflow-x:auto}
.plan-cycle-tabs button{flex:1}
.commerce-plan{min-height:0}
}

.commerce-plan h3{overflow-wrap:anywhere}

.payg-ram-control{margin:1rem 0 1.25rem}
.payg-ram-control label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:.5rem}
.payg-ram-row{display:flex;align-items:center;gap:.65rem}
.payg-ram-row input[type=range]{flex:1;accent-color:#2dd4bf}
.payg-ram-row button{width:2rem;height:2rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:inherit;cursor:pointer}
.payg-ram-row strong{min-width:3.5rem;text-align:right}
.commerce-plan.payg-plan{max-width:28rem}
.plan-cycle-tabs button[data-cycle=payg].is-active{box-shadow:0 0 0 1px rgba(45,212,191,.45)}
