{{ extends "global/Page.html" }}

{{ block title }}
    Accounts
{{ endblock }}

{{ block content }}

<style>
    .instructions-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    .dotted-line {
        border-top: 1px dotted #ccc;
        margin: 20px 0;
    }
    .card {
        background-color: #f8f9fa;
        margin: 20px 0;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .section-title {
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>

<hr class="dotted-line" />

<div class="instructions-container">

    <div class="card">

        <p class="section-title">Group Account</p>

        <p>
            Tokens contributed to the Group Account are added together to form a total amount.
        </p>

        <p>
            This total is multiplied by <strong>{{ C.MULTIPLIER }}</strong> and then evenly split among all
            <strong>{{ C.NUM_MEMBERS }}</strong> group members.
        </p>

    </div>

    <div class="card">

        <p class="section-title">Private Account</p>

        <p>
            Each member keeps the tokens remaining in their Private Account after contributing to the Group Account.
        </p>

        <p>
            These tokens are <strong>not multiplied</strong>.
        </p>

    </div>

</div>

{{ next_button label='>>' }}

{{ endblock }}