<div id="HIW-banner">
   <p><img class="__mce_add_custom__" title="how-it-works-top-banner.png"       src="http://mapyourprogress.com/product_images/uploaded_images/how-it-works-top-banner.png" alt="Shows four identical Creative Progress Map designs, each at different stages of being colored in to illustrate how one maps their progress using the maps" width="100%"/></p>
</div>

<div id="HIW-intro">
<h2>Look at your goals in a whole new way.</h2>
<p>Introducing <a href="http://mapyourprogress.com/creative-progress-maps/">Creative Progress Maps</a>; a beautiful way to track the goals that matter to you.</p>
</div>

<div id="HIW-start">
<h3>[ 1 ] Start by choosing the goal you want to track.</h3>
<p>You can track just about any goal—the important thing is that your goal matters to YOU. I recommend choosing something that seems ambitious or particularly important. For example: I created a map for my credit card debt, which I'd been dragging around my entire adult life. It was a big goal for me. Overwhelming, actually. That made it the perfect goal to track—visually.</p>
<p><a href="http://mapyourprogress.com/ideas/">Not sure what to track? Here are a bunch of ideas to help you choose.</a></p>
</div>

<div id="HIW-decide">
  <h3>[ 2 ] Decide what number of swirls would best help you track your goal.</h3>
    <div class="decide-intro">
    <p>You'll see that the Creative Progress Maps are organized by the numbers of swirls in the design. This is so on purpose. Because depending on your goal, some maps will support your tracking easier than others. What do I mean by that?</p>
    </div>

    <div class="marin-img">
      <p><img class="__mce_add_custom__" title="how-it-works-100-swirl.png" src="http://mapyourprogress.com/product_images/uploaded_images/how-it-works-100-swirl.png" alt="" width="100%"/></p>
    </div>

    <div class="marin-p">  
      <p>Let's say you also wanted to set a financial goal—whether it's paying off debt or saving for a down payment—it's much easier to track with 100 swirls. You simply take your goal amount and divide it by 100. That result is the amount each swirl represents. Each time you pay that amount of money, you color in the swirl.</p>
    </div>

    <div class="abstract-p">
<p>But what if you have a monthly goal? Say you want to create a new habit—like meditating once a day (honestly it could be anything). A map with 30 swirls would be a great fit, with one swirl for each day. Special shout out to those persnickety folks like me who want to know what the plan is for those months with 31 days. I hear you, I see you, and I answer that here.</p>
    </div>

    <div class="abstract-img">
      <p><img class="__mce_add_custom__" title="how-it-works-100-swirl.png" src="http://mapyourprogress.com/product_images/uploaded_images/how-it-works-100-swirl.png" alt="" width="100%"/></p>
    </div>

    <div class="bump-p">
      <p>Super pumped to track your pregnancy? I just so happen to have a special one for that, at 40 swirls.</p>
      <p>Those are just some examples to get your wheels turning. Bottom line, I am not the boss of you and you can get whatever map you like and use it however you like. Just please tell me all about it.</p>
    </div>  

    <div class="bump-img">
      <p><img class="__mce_add_custom__" title="how-it-works-100-swirl.png" src="http://mapyourprogress.com/product_images/uploaded_images/how-it-works-100-swirl.png" alt="" width="100%"/></p>
    </div>
</div>

<div id="HIW-purchase">
  <h3>[ 3 ] Purchase your Creative Progress Map.</h3>
    <p>So not trying to insult your intelligence here, but it is the next logical step. Go on and peruse to your heart's content; ask me any questions you like, though I will try and answer them in the FAQ section. You get to choose from the available designs, pick a size and the material you want your map printed on (that would be poster or canvas). Then I highly recommend you take a look at Map Like A Champ: The Particular Person's Creative Progress Map Guide.*</p>
    <p>P/S There is no wrong way to map. I just want you to enjoy the experience and be glad you did it.</p>
    <p> </p>
    <p>Happy Mapping!</p>
    <p> </p>
    <p>Amy</p>
    <p>Cartographer</p>
</div>

<div id="HIW-disclaimer">
<p style="border-top:1px;border-color:#E51D76">*Designed with great love for the Particular and/or Type A/Slightly Controlling/Very Responsible/Overachiever persons like me who want to know exactly how to be successful at everything and do things "the right way." This is entirely optional (and maybe overkill) for people who are comfortable figuring it out on their own or relish in the mystery of new experiences.</p>
</div>

```and the relevant CSS

/* PAGE: HOW IT WORKS
****************************************/

#HIW-banner p {
    margin: 30px 0 50px;
}

#HIW-intro h2 {
    margin: 0 0 15px 0;
}

#HIW-intro p {
    margin: 0 0 40px 0;
}

#HIW-start {
    margin: 0 0 40px 0;
}

#HIW-decide .decide-intro {
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: .01em;
    margin-bottom: 15px;
}

#HIW-decide .marin-img,
#HIW-decide .marin-p {
    width: 45%;
    margin: 2.5%;
}


#HIW-decide .marin-img {
    float: left;
    width: 45%;
}

#HIW-decide .marin-p {
    float: right;
    width: 45%;
    margin-bottom: 425px;
}

#HIW-decide .abstract-p {
    float: left;
    width: 45%;
    margin-bottom: 425px;
}

#HIW-decide .abstract-img {
    float: left;
    width: 45%;
}

#HIW-decide .bump-img {
    float: left;
    width: 45%;
}

#HIW-decide .bump-p {
    float: right;
    width: 45%;
    margin-bottom: 525px;
}

#HIW-purchase {
    margin: 0 0 40px 0;
}

#HIW-disclaimer {
    border-top: 1px #E51D76;
}