{{ 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="instructions-page">

    <div class="page-header">
        <p class="page-label">Before you begin</p>
        <h1 class="page-title">Study Instructions</h1>
    </div>

    <!-- Overview -->
    <div class="info-card">
        <div class="info-card-eyebrow">Your task</div>
        <p>You will record yourself reading <strong>{{ C.NUM_STATEMENTS }} short expressions</strong> aloud — one at a time.
        Read each expression in a <strong>neutral tone</strong>.</p>
    </div>

    <!-- Scenario -->
    <div class="info-card">
        <div class="info-card-eyebrow">Scenario</div>
        <p>As you record, imagine you are a <strong>customer who has just been asked to choose between two options</strong> — for example, selecting a dish at a restaurant, picking a product at a store, or deciding between two plans on a customer hotline. Speak as if you are naturally expressing your preference in that moment.</p>
    </div>

    <!-- Audio quality -->
    <div class="info-card quality-card">
        <div class="info-card-eyebrow">Audio quality</div>
        <p>Please listen back to each recording before submitting. Make sure your voice is <strong>clear and audible</strong> with no significant background noise. If you are not satisfied, re-record until you are.</p>
    </div>

    <!-- How to record -->
    <div class="info-card">
        <div class="info-card-eyebrow">How to record</div>
        <div class="recorder-steps">
            <div class="recorder-step">
                <div class="recorder-icon rec">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                        <line x1="12" y1="19" x2="12" y2="23"/>
                        <line x1="8" y1="23" x2="16" y2="23"/>
                    </svg>
                </div>
                <div>
                    <strong>Record</strong>
                    <p>Tap the red microphone button to start, tap again to stop. You can re-record as many times as you like.</p>
                </div>
            </div>
            <div class="recorder-step">
                <div class="recorder-icon play">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <polygon points="5 3 19 12 5 21 5 3"/>
                    </svg>
                </div>
                <div>
                    <strong>Listen back</strong>
                    <p>Use the play button to review your recording. If you are not satisfied, tap the microphone button again to record a new take.</p>
                </div>
            </div>
            <div class="recorder-step">
                <div class="recorder-icon next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14"/><path d="M12 5l7 7-7 7"/>
                    </svg>
                </div>
                <div>
                    <strong>Submit</strong>
                    <p>Once you are satisfied with the recording, tap the arrow button to move to the next expression.</p>
                </div>
            </div>
        </div>
    </div>

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

</div>

<style>
.instructions-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; }

.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; }
.info-card em { color: #3a3a50; font-style: normal; }


/* Recorder steps */
.recorder-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.recorder-step { display: flex; gap: 14px; align-items: flex-start; }
.recorder-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.recorder-icon svg { width: 16px; height: 16px; }
.recorder-icon.rec  { background: #ef4444; color: #fff; }
.recorder-icon.play { background: #f0f0f5; color: #5a5a70; }
.recorder-icon.next { background: #f0f0f5; color: #5a5a70; }
.recorder-step > div:last-child strong { color: #111118; display: block; margin-bottom: 2px; }
.recorder-step > div:last-child p { color: #4a4a60; font-size: 14px; line-height: 1.5; margin: 0; }

/* Begin button */
.begin-row { display: flex; justify-content: flex-end; margin-top: 28px; }
.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 }}