.wp-block-hub-step-demo { padding:clamp(22px,5vw,40px);border:1px solid var(--hub-line);border-radius:24px;background:var(--hub-paper);box-shadow:var(--hub-shadow-card);min-width:0; }
.wp-block-hub-step-demo .demo-status-row { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px; }
.wp-block-hub-step-demo .demo-badge,.wp-block-hub-step-demo .saved-card { padding:7px 12px;border-radius:999px;color:var(--hub-green-text);background:var(--hub-green-soft);font-size:13px;font-weight:800; }
.wp-block-hub-step-demo [data-hub-progress] { color:var(--hub-muted);font-variant-numeric:tabular-nums;font-weight:800; }
.wp-block-hub-step-demo .demo-steps { display:grid;gap:14px; }
.wp-block-hub-step-demo .demo-step { display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--hub-line);border-radius:var(--hub-radius-small);background:rgb(244 240 231 / 55%); }
.wp-block-hub-step-demo .step-number { display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--hub-line);border-radius:50%;color:var(--hub-accent);background:var(--hub-paper);font-size:12px;font-weight:900; }
.wp-block-hub-step-demo .demo-step :is(h3,h4,p) { margin-top:0; }
.wp-block-hub-step-demo .demo-step h3 { margin-bottom:8px;font-size:19px; }
.wp-block-hub-step-demo .demo-step p { margin-bottom:0;color:var(--hub-muted); }
.wp-block-hub-step-demo .file-card { display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--hub-green);border-radius:var(--hub-radius-small);background:var(--hub-green-soft); }
.wp-block-hub-step-demo .file-icon { display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:10px;color:#fffdf8;background:var(--hub-green);font-family:var(--hub-font-paper);font-weight:800; }
.wp-block-hub-step-demo .file-card :is(strong,small) { display:block; }
.wp-block-hub-step-demo .file-card small { color:var(--hub-muted); }
.wp-block-hub-step-demo .summary-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:16px; }
.wp-block-hub-step-demo .summary-grid section { padding:14px;border-radius:12px;background:var(--hub-paper); }
.wp-block-hub-step-demo .summary-grid h4 { margin-bottom:6px;font-size:14px; }
.wp-block-hub-step-demo .summary-grid section:last-child { border:1px solid rgb(139 83 74 / 30%); }
.wp-block-hub-step-demo .saved-card { display:inline-flex;gap:7px;margin-top:16px; }
.wp-block-hub-step-demo .demo-controls { display:flex;flex-wrap:wrap;gap:10px;margin-top:22px; }
.wp-block-hub-step-demo .demo-controls button { display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:11px 20px;border:1px solid transparent;border-radius:999px;color:#fffdf8;background:var(--hub-accent);cursor:pointer;font:inherit;font-weight:800;line-height:1.2; }
.wp-block-hub-step-demo .demo-controls [data-hub-reset] { color:var(--hub-ink);border-color:var(--hub-line);background:rgb(255 253 248 / 68%); }
.wp-block-hub-step-demo .hub-demo-live { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.wp-block-hub-step-demo [hidden] { display:none!important; }
@media(min-width:760px) { .wp-block-hub-step-demo .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }