{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/css/shipping.css' }}">
{{ endblock }}

{{ block content }}
<div class="r-page">

    <div class="intro-card">
        <h2>Choosing a shipping company</h2>
        <p>
            In this study, we ask you to imagine placing an online order at an online store. Since
            the store offers two shipping companies at checkout, your task is to choose the one you
            think is faster.
        </p>
        <p class="bonus-callout">
            If you choose the company that is, in fact, faster, you will receive an additional bonus
            of $2.00.
        </p>
    </div>

    <div class="intro-card">
        <h2>What happens next</h2>
        <ul class="step-list">
            <li><span class="step-num">1</span> Look at what delivery history is available for each company.</li>
            <li><span class="step-num">2</span> Say your choice aloud. The recorder starts on its own.</li>
            <li><span class="step-num">3</span> Answer a follow-up question about a guaranteed alternative to the bonus, also spoken aloud.</li>
        </ul>
    </div>

    <div class="btn-center">
        {{ next_button }}
    </div>
</div>
{{ endblock }}