<h2>Super Power Interviewee Form</h2>
<form class="form">
    <fieldset class="fieldset">
        <legend class="fieldset__legend">What is your name?</legend>
        <div class="grid">
            <div class="grid__row grid__row--padded">
                <div class="grid__col--sm-6 grid__col--xs-12">
                    <label class="label" for="verbose-alias">Super Power Alias</label>
                    <input class="input" type="text" id="verbose-alias" />
                </div>
                <div class="grid__col--sm-6 grid__col--xs-12">
                    <label class="label" for="verbose-name">Real Name</label>
                    <input
                        class="input"
                        placeholder="We promise not to tell"
                        type="text"
                        id="verbose-name"
                    />
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">Good, Bad Or Somewhere In Between?</legend>
        <div class="grid">
            <div class="grid__row grid__row--padded">
                <div class="grid__col--md-6 grid__col--xs-12">
                    <p>Do You Use Your Powers For Good?</p>
                    <div role="radiogroup">
                         <label class="label label--inline label--light" for="powers-good">
                            <input class="radio" type="radio" name="good-powers" id="powers-good" />
                            Always!
                        </label>
                        <label class="label label--inline label--light" for="powers-never">
                            <input class="radio" type="radio" name="good-powers" id="powers-never" />
                            Never!
                        </label>
                        </label>
                        <label class="label label--inline label--light" for="powers-sometimes">
                            <input class="radio" type="radio" name="good-powers" id="powers-sometimes"/>
                            Sometimes...
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">Please turn on your super powers.</legend>
        <div class="toggle toggle--lg" id="toggle-verbose-switch">
            <input type="checkbox" id="toggle-verbose" class="toggle__input">
            <label class="toggle__label" for="toggle-verbose">
                <span class="toggle__screenreader-message">Toggle this option</span>
                <span class="toggle__switch" aria-hidden="true">
                <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
                    <svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
                </span>
                <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
                    <svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
                </span>
                </span>
            </label>
        </div>
    </fieldset>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">What Compensation Do You Expect for Using Your Powers?</legend>
        <div class="grid">
            <div class="grid__row grid__row--padded">
                <div class="grid__col--md-6 grid__col--xs-12">
                    <div class="grid__row grid__row--padded">
                        <div class="grid__col grid__col--xs-12">
                            <label class="label label--inline label--light" for="verbose-money">
                                <input class="checkbox" type="checkbox" id="verbose-money" />
                                Money Money... MONEY!
                            </label>
                        </div>
                    </div>
                    <div class="grid__row grid__row--padded">
                        <div class="grid__col grid__col--xs-12">
                            <label class="label label--inline label--light" for="verbose-compensation">
                                <input class="checkbox" type="checkbox" id="verbose-compensation" />
                                My contribution to society is enough compensation.
                            </label>
                        </div>
                    </div>
                    <div class="grid__row grid__row--padded">
                        <div class="grid__col grid__col--xs-12">
                            <label class="label label--inline label--light" for="verbose-access">
                                <input class="checkbox" type="checkbox" id="verbose-access" />
                                Access to secrets and elite members of society wouldn't hurt.
                            </label>
                        </div>
                    </div>
                    <div class="grid__row grid__row--padded">
                        <div class="grid__col grid__col--xs-12">
                            <label class="label label--inline label--light" for="famous">
                                <input class="checkbox" type="checkbox" id="famous" />
                                I WANA BE FAMOUS!
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">What is your preffered costume colors?</legend>
        <div class="grid">
            <div class="grid__row grid__row--padded">
                <div class="grid__col--xs-12">
                    <label class="label" for="verbose-select">Select Costume Color Scheme</label>
                    <select class="select select--full-width" id="verbose-select">
                        <optgroup label="Standard">
                            <option value="rnb">Red and Blue</option>
                            <option value="bng">Black and Grey</option>
                        </optgroup>
                        <optgroup label="Screaming For Attention">
                            <option value="hp">Hot Pink</option>
                            <option value="ny">Neon Yellow</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">How Did You Get Your Super Powers</legend>
        <label for="verbose-textarea" class="label">Please be honest</label>
        <textarea class="textarea textarea--full-width" rows="4" id="verbose-textarea">A hero can be anyone. Someone like you. Someone who'll rattle the cages. I seek the means to fight injustice. To turn fear against those who prey on the fearful. My anger outweights my guilt. I will go back to Gotham and I will fight people Iike this but I will not become an executioner.</textarea>
    </fieldset>
    <button class="button button--primary">Submit</button>
</form>