{{ block styles }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { background: #f4f4f8 !important; color: #111118; font-family: 'DM Sans', sans-serif; }
.container { max-width: 660px !important; }
</style>
{{ endblock }}

{{ block content }}

<div class="transition-page">

    <div class="page-header">
        <p class="page-label">Part 1 complete</p>
        <h1 class="page-title">Well done!</h1>
        <p class="page-subtitle">You have recorded all {{ C.NUM_STATEMENTS }} neutral expressions. The second part works the same way, with one difference.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">What's new</div>
        <p>You will now read each expression <strong>twice</strong> — each time with a specific instruction about how strongly to convey a preference for Option A. The colour of the page will indicate which condition you are in.</p>
    </div>

    <div class="condition-cards">
        <div class="condition-card sky-card">
            <div class="condition-dot sky-dot"></div>
            <div>
                <strong>Slight preference</strong>
                <p>Convey that you prefer Option A slightly more than Option B, and that the difference between both options is small.</p>
            </div>
        </div>
        <div class="condition-card amber-card">
            <div class="condition-dot amber-dot"></div>
            <div>
                <strong>Strong preference</strong>
                <p>Convey that you prefer Option A much more than Option B, and that Option A stands out clearly compared to Option B.</p>
            </div>
        </div>
    </div>

    <div class="begin-row">
        <button type="submit" class="begin-btn">Begin Part 2 &rarr;</button>
    </div>

</div>

<style>
.transition-page { padding: 32px 0 60px; }

.page-header { margin-bottom: 28px; }
.page-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #a0a0b8; margin-bottom: 6px;
}
.page-title  { font-size: 32px; font-weight: 700; color: #111118; margin: 0 0 8px; }
.page-subtitle { font-size: 16px; color: #4a4a60; line-height: 1.6; margin: 0; }

.info-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.info-card-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #a0a0b8; margin-bottom: 10px;
}
.info-card p { color: #4a4a60; line-height: 1.65; margin: 0; }
.info-card strong { color: #111118; }

/* Condition cards */
.condition-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

.condition-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.sky-card   { border: 1px solid rgba(14,165,233,0.25); border-left: 3px solid #0ea5e9; }
.amber-card { border: 1px solid rgba(217,119,6,0.25);  border-left: 3px solid #d97706; }

.condition-dot {
    flex-shrink: 0; width: 10px; height: 10px;
    border-radius: 50%; margin-top: 5px;
}
.sky-dot   { background: #0ea5e9; }
.amber-dot { background: #d97706; }

.condition-card strong { color: #111118; display: block; margin-bottom: 4px; font-size: 15px; }
.condition-card p { color: #4a4a60; font-size: 14px; line-height: 1.55; margin: 0; }

/* Begin button */
.begin-row { display: flex; justify-content: flex-end; }
.begin-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 600;
    background: #111118; color: #ffffff;
    border: none; border-radius: 8px;
    padding: 12px 28px; cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.begin-btn:hover  { background: #2a2a38; transform: translateY(-1px); }
.begin-btn:active { transform: translateY(0); }
</style>

{{ endblock }}