:root{--sidebar-width: 320px}.hosting-app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:2.5rem;margin-top:2rem}.hosting-preview-notice{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface-2);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;max-width:52rem}.hosting-preview-notice strong{color:var(--color-text);font-weight:600}.filter-sidebar{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.5rem;height:fit-content;position:sticky;top:6rem}.filter-group{margin-bottom:2rem}.filter-label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:1rem}.billing-toggle{display:flex;background:var(--color-surface-2);padding:.25rem;border-radius:var(--radius-full);border:1px solid var(--color-border)}.billing-btn{flex:1;border:none;background:transparent;padding:.6rem;border-radius:var(--radius-full);color:var(--color-text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.billing-btn.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}.type-grid{display:grid;gap:.5rem}.type-btn{background:var(--color-surface-2);border:1.5px solid var(--color-border);padding:.75rem 1rem;border-radius:var(--radius-lg);color:var(--color-text);font-size:.9rem;text-align:left;cursor:pointer}.type-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.hosting-grid{display:flex;flex-direction:column;gap:1.5rem}.plan-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:border-color .2s}.plan-card:hover{border-color:var(--color-primary)}.plan-main{padding:1.5rem;display:grid;grid-template-columns:240px 1fr 180px 180px;align-items:center;gap:2rem}.plan-specs{display:flex;gap:2rem;align-items:center}.spec-item{display:flex;flex-direction:column;min-width:0}.spec-label{font-size:.7rem;text-transform:uppercase;color:var(--color-text-muted);font-weight:700;margin-bottom:.25rem}.spec-value{font-size:1rem;font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plan-info-main{display:flex;flex-direction:column}.plan-provider-name{font-size:1.1rem;font-weight:800;margin-bottom:.2rem}.plan-tier-name{font-size:.9rem;font-weight:600;color:var(--color-text);opacity:.9}.plan-type-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;background:var(--color-surface-2);padding:.2rem .5rem;border-radius:var(--radius-sm);display:inline-block;margin-top:.4rem;color:var(--color-text-muted);border:1px solid var(--color-border)}.plan-details{background:var(--color-surface-2);border-top:1px solid var(--color-border);padding:2rem;display:none;grid-template-columns:1.2fr 1fr;gap:2.5rem}.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1rem}.detail-box{background:var(--color-surface);padding:1rem;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.detail-box-label{font-size:.65rem;text-transform:uppercase;font-weight:800;color:var(--color-primary);margin-bottom:.5rem;letter-spacing:.05em}.detail-box-value{font-size:.9rem;color:var(--color-text);line-height:1.4;word-break:break-word}.plan-details.active{display:grid}.intro-price{font-size:1.5rem;font-weight:800;color:var(--color-primary)}.renewal-label{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}.cta-btn{background:var(--color-primary);color:#fff;text-decoration:none;padding:.8rem 1.2rem;border-radius:var(--radius-lg);font-weight:700;font-size:.9rem;text-align:center;display:block;transition:transform .2s}.cta-btn:hover{transform:translateY(-2px)}.details-toggle{background:transparent;border:none;color:var(--color-text-muted);font-size:.85rem;font-weight:600;cursor:pointer;margin-top:.75rem;width:100%;transition:color .2s}.details-toggle:hover{color:var(--color-text)}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:var(--color-surface-2);border-radius:5px;background-image:linear-gradient(var(--color-primary),var(--color-primary));background-size:0% 100%;background-repeat:no-repeat}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:20px;width:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 0 10px #0000004d;transition:background .3s ease-in-out;border:3px solid var(--color-surface)}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}@media(max-width:1024px){.plan-main{grid-template-columns:1fr 1.2fr;gap:1.5rem}.plan-specs{grid-row:2;grid-column:1;gap:1.5rem}.plan-info-main{grid-row:1;grid-column:1}.plan-details{grid-template-columns:1fr;gap:1.5rem}.plan-main>div:nth-child(3){grid-row:1;grid-column:2;text-align:right}.plan-main>div:nth-child(4){grid-row:2;grid-column:2}}@media(max-width:640px){.hosting-app{grid-template-columns:1fr}.filter-sidebar{position:relative;top:0;margin-bottom:2rem}.plan-main{grid-template-columns:1fr;text-align:center}.plan-main>div:nth-child(3){text-align:center}.plan-specs{flex-wrap:wrap;gap:.75rem;justify-content:center}.spec-item{min-width:120px}.plan-info-main{align-items:center}}