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

    <div class="page-header">
        <p class="page-label">Almost done</p>
        <h1 class="page-title">About You</h1>
    </div>

    <div class="info-card">
        {{ formfields }}
    </div>

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

</div>

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

.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 }}