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

{{ block content }}
<div class="platform-shell narrow-shell">
    <section class="panel hero-panel">
        <div class="eyebrow">Study Overview</div>
        <h1 class="page-heading">How the Study Works</h1>
        <p class="lead">
            You will evaluate the initiatives of humanitarian organizations as presented on their social media platforms.
        </p>
    </section>

    <section class="panel">
        <div class="section-header">
            <h2>Your Task</h2>

        </div>
        <div class="timeline-list">
            <div class="timeline-item">
                <span class="timeline-step">1</span>
                <p>Review each organization’s most recent social media post.</p>
            </div>
            <div class="timeline-item">
                <span class="timeline-step">2</span>
                <p>Complete brief evaluation items for each organization.</p>
            </div>
            <div class="timeline-item">
                <span class="timeline-step">3</span>
                <p>Receive a <strong>{{ bonus_endowment }}</strong> bonus and decide how much to donate across organizations or keep for yourself.</p>
            </div>
        </div>
    </section>

    <section class="panel">
        <div class="section-header">
            <h2>Bonus Allocation</h2>
        </div>
        <p style="margin: 4px 0 0;">
            At the end of the study, you may allocate any portion of your $3 bonus across the organizations you reviewed.
            The amounts that you allocate, out of the $3 bonus, will be donated on your behalf to the humanitarian organizations that engage in the real-world initiatives you were shown.
            You may keep any remaining amount for yourself.
        </p>
    </section>

    <div class="action-row">
        {{ next_button }}
    </div>
</div>
{{ endblock }}