                        <div class="page-header">
                            <div>
                                <h1>Setup wizard</h1>
                                <p class="subtitle">A multi-step form pattern with progress indicator and validation.</p>
                            </div>
                        </div>

                        <div class="wizard">
                            <ol class="wizard__steps">
                                <li class="wizard__step is-active" data-step="1">
                                    <span class="wizard__circle">1</span>
                                    <span class="wizard__label">Account<span class="wizard__sublabel">Basics</span></span>
                                </li>
                                <li class="wizard__step" data-step="2">
                                    <span class="wizard__circle">2</span>
                                    <span class="wizard__label">Workspace<span class="wizard__sublabel">Team setup</span></span>
                                </li>
                                <li class="wizard__step" data-step="3">
                                    <span class="wizard__circle">3</span>
                                    <span class="wizard__label">Plan<span class="wizard__sublabel">Pick a tier</span></span>
                                </li>
                                <li class="wizard__step" data-step="4">
                                    <span class="wizard__circle">4</span>
                                    <span class="wizard__label">Done<span class="wizard__sublabel">Confirm</span></span>
                                </li>
                            </ol>

                            <form class="wizard__panel" id="wizard-form" onsubmit="event.preventDefault();">
                                <!-- Step 1 -->
                                <fieldset class="wizard__pane is-active" data-pane="1" style="border:0;padding:0;margin:0;">
                                    <h2 style="font-size:18px;font-weight:600;color:var(--m-text);margin:0 0 4px;">Tell us about you</h2>
                                    <p style="font-size:13.5px;color:var(--m-text-muted);margin:0 0 20px;">We&rsquo;ll use these to personalize your dashboard.</p>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="w-fname">First name</label>
                                            <input id="w-fname" type="text" class="form-control" required>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="w-lname">Last name</label>
                                            <input id="w-lname" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="w-email">Work email</label>
                                        <input id="w-email" type="email" class="form-control" autocomplete="email" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="w-role">Your role</label>
                                        <select id="w-role" class="form-select" required>
                                            <option value="">Choose one…</option>
                                            <option>Founder / CEO</option>
                                            <option>Engineering lead</option>
                                            <option>Product manager</option>
                                            <option>Designer</option>
                                            <option>Marketer</option>
                                            <option>Other</option>
                                        </select>
                                    </div>
                                </fieldset>

                                <!-- Step 2 -->
                                <fieldset class="wizard__pane" data-pane="2" style="border:0;padding:0;margin:0;display:none;">
                                    <h2 style="font-size:18px;font-weight:600;color:var(--m-text);margin:0 0 4px;">Set up your workspace</h2>
                                    <p style="font-size:13.5px;color:var(--m-text-muted);margin:0 0 20px;">This is what your teammates will see.</p>
                                    <div class="form-group">
                                        <label for="w-org">Organization name</label>
                                        <input id="w-org" type="text" class="form-control" placeholder="Acme Corp">
                                    </div>
                                    <div class="form-group">
                                        <label for="w-team-size">Team size</label>
                                        <select id="w-team-size" class="form-select">
                                            <option>Just me</option>
                                            <option selected>2–10</option>
                                            <option>11–50</option>
                                            <option>51–200</option>
                                            <option>200+</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Invite teammates (comma-separated emails)</label>
                                        <textarea class="form-control" placeholder="diane@example.com, john@example.com"></textarea>
                                    </div>
                                </fieldset>

                                <!-- Step 3 -->
                                <fieldset class="wizard__pane" data-pane="3" style="border:0;padding:0;margin:0;display:none;">
                                    <h2 style="font-size:18px;font-weight:600;color:var(--m-text);margin:0 0 4px;">Choose your plan</h2>
                                    <p style="font-size:13.5px;color:var(--m-text-muted);margin:0 0 20px;">You can change this any time from billing settings.</p>
                                    <div class="row row-tight" style="margin-top:8px;">
                                        <div class="col-md-4">
                                            <label style="display:block;cursor:pointer;">
                                                <input type="radio" name="plan" value="starter" style="display:none;" checked>
                                                <div class="m-card pricing-card" style="text-align:center;cursor:pointer;border-color:var(--m-accent);box-shadow:0 0 0 3px rgba(var(--m-accent-rgb),0.10);padding:22px 18px;">
                                                    <p class="pricing-card__tier">Starter</p>
                                                    <p class="pricing-card__price" style="font-size:24px;">Free</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="col-md-4">
                                            <label style="display:block;cursor:pointer;">
                                                <input type="radio" name="plan" value="pro" style="display:none;">
                                                <div class="m-card pricing-card" style="text-align:center;cursor:pointer;padding:22px 18px;">
                                                    <p class="pricing-card__tier">Pro</p>
                                                    <p class="pricing-card__price" style="font-size:24px;">$24<small>/mo</small></p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="col-md-4">
                                            <label style="display:block;cursor:pointer;">
                                                <input type="radio" name="plan" value="enterprise" style="display:none;">
                                                <div class="m-card pricing-card" style="text-align:center;cursor:pointer;padding:22px 18px;">
                                                    <p class="pricing-card__tier">Enterprise</p>
                                                    <p class="pricing-card__price" style="font-size:24px;">Custom</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>

                                <!-- Step 4 -->
                                <fieldset class="wizard__pane" data-pane="4" style="border:0;padding:0;margin:0;display:none;">
                                    <div style="text-align:center;padding:16px 0;">
                                        <div style="width:72px;height:72px;border-radius:50%;background:var(--m-success-soft);color:var(--m-success);display:inline-flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:16px;">
                                            <i class="fa-solid fa-circle-check"></i>
                                        </div>
                                        <h2 style="font-size:20px;font-weight:600;color:var(--m-text);margin:0 0 6px;">All set!</h2>
                                        <p style="font-size:14px;color:var(--m-text-muted);margin:0 0 24px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.5;">Your workspace is ready. We&rsquo;ll redirect you to the dashboard in a moment.</p>
                                        <a href="index.html" class="m-btn m-btn--primary">Go to dashboard <i class="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                </fieldset>

                                <div class="wizard__nav" id="wizard-nav">
                                    <button type="button" class="m-btn m-btn--ghost" id="w-prev"><i class="fa-solid fa-arrow-left"></i> Back</button>
                                    <button type="button" class="m-btn m-btn--primary" id="w-next">Continue <i class="fa-solid fa-arrow-right"></i></button>
                                </div>
                            </form>
                        </div>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
