.webapp-studio .studio-steps {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.webapp-studio .studio-step {
    padding: 10px 18px; border-radius: 100px; font-size: 0.85rem; font-weight: 600;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted);
    text-decoration: none; transition: var(--transition);
}
.webapp-studio .studio-step.active,
.webapp-studio .studio-step:hover {
    background: rgba(108,99,255,0.15); border-color: var(--primary); color: var(--primary-light);
}
.studio-step--locked {
    opacity: 0.55; cursor: not-allowed; padding: 10px 18px; border-radius: 100px;
    background: var(--card-bg); border: 1px dashed var(--border); font-size: 0.85rem;
}
.page-hero-content a.btn { position: relative; z-index: 2; }
.studio-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start;
}
@media (max-width: 960px) {
    .studio-layout { grid-template-columns: 1fr; }
    .studio-preview-col { order: -1; }
}
.webapp-plans {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}
.plan-card.plan-featured { border-color: rgba(108,99,255,0.5); box-shadow: 0 0 30px rgba(108,99,255,0.15); }
.plan-price { font-size: 1.4rem; font-weight: 800; color: var(--primary-light); margin: 14px 0; }
.plan-features { list-style: none; padding: 0; margin: 0 0 18px; font-size: 0.85rem; color: var(--text-muted); }
.plan-features li { padding: 4px 0; }
.plan-features li::before { content: '✓ '; color: var(--success); }
.phone-mockup {
    width: 280px; height: 520px; margin: 0 auto; background: #1a1a2e; border-radius: 36px; padding: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.phone-notch { width: 90px; height: 20px; background: #0f0f23; border-radius: 0 0 12px 12px; margin: 0 auto 8px; }
.phone-screen { background: #ffffff; border-radius: 22px; overflow: hidden; height: calc(100% - 28px); }
.phone-screen { position: relative; }
.phone-screen iframe { width: 100%; height: 100%; border: 0; }
.phone-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: #888; font-size: 0.9rem; }
.preview-mode-tabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.preview-mode-btn {
    padding: 6px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 600;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
}
.preview-mode-btn.active {
    background: rgba(108,99,255,0.2); border-color: var(--primary); color: var(--primary-light);
}
.preview-open-tab { font-size: 0.8rem; color: var(--primary); margin-inline-start: auto; }
.preview-hint { margin-bottom: 12px; font-size: 0.78rem; }
.preview-fallback {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; padding: 16px;
    background: #1a1a2e; text-align: center; font-size: 0.85rem; color: #aaa;
    z-index: 5;
}
.preview-fallback.is-hidden,
.preview-fallback[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.studio-preview-frame {
    width: 100%; height: 100%; border: 0;
    visibility: visible; opacity: 1;
}