:root {
--fl-purple: #C9A0DC;
--fl-blue: #A7C7E7;
--fl-pink: #FFD1DC;
--fl-text: #374151;
--fl-muted: #6b7280;
--fl-border: #e5e7eb;
}

body {
background: #fff;
color: var(--fl-text);
}

/* Hero */

.whitelist-hero {
min-height: 430px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.whitelist-hero > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.whitelist-hero-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, .82);
}

.whitelist-hero-content {
position: relative;
z-index: 1;
width: 100%;
max-width: 700px;
padding: 90px 24px;
text-align: center;
}

.whitelist-hero-eyebrow {
margin-bottom: 10px;
color: #8b6a9a;
font-size: .95rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}

.whitelist-hero h1 {
margin: 0;
color: #303642;
font-size: clamp(2.6rem, 6vw, 4.5rem);
font-weight: 800;
line-height: 1.05;
}

.whitelist-hero p {
max-width: 650px;
margin: 24px auto 0;
color: #596273;
font-size: 1.08rem;
line-height: 1.7;
}

/* Application */

.application-main {
padding: 70px 24px 100px;
}

.application-container {
width: 100%;
max-width: 900px;
margin: auto;
}

.intro {
max-width: 680px;
margin: 0 auto 60px;
text-align: center;
}

.intro h2 {
margin-bottom: 12px;
color: #303642;
font-size: 2rem;
font-weight: 800;
}

.intro p {
color: var(--fl-muted);
line-height: 1.7;
}

/* Sections */

.form-section + .form-section {
margin-top: 55px;
padding-top: 55px;
border-top: 1px solid #eee;
}

.section-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 28px;
}

.section-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
}

.section-icon svg {
width: 22px;
height: 22px;
}

.section-icon-purple {
background: var(--fl-purple);
}

.section-icon-blue {
background: var(--fl-blue);
}

.section-icon-pink {
background: var(--fl-pink);
}

.section-heading h3 {
margin: 0;
color: #303642;
font-size: 1.35rem;
font-weight: 800;
}

.section-heading p {
margin-top: 4px;
color: var(--fl-muted);
font-size: .9rem;
}

/* Inputs */

.input,
.select,
.textarea {
width: 100%;
border: 1px solid #dedfe3;
border-radius: 12px;
background: #fff;
color: var(--fl-text);
transition: border-color .2s, box-shadow .2s;
}

.input:hover,
.select:hover,
.textarea:hover {
border-color: #cfcfd4;
}

.input:focus,
.select:focus,
.textarea:focus {
border-color: var(--fl-purple);
outline: none;
box-shadow: 0 0 0 3px rgba(201, 160, 220, .18);
}

.textarea {
resize: vertical;
}

/* Options */

.option-card {
border: 1px solid #e4e5e8;
border-radius: 14px;
background: #fff;
transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}

.option-card:hover,
.option-card:has(input:checked) {
border-color: var(--fl-purple);
background: rgba(201, 160, 220, .06);
}

.option-card:hover {
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(0, 0, 0, .04);
}

.radio,
.checkbox {
border-color: #cfd1d6;
}

.radio:checked,
.checkbox:checked {
border-color: var(--fl-purple);
background-color: var(--fl-purple);
}

/* Conditional fields */

.conditional-section {
display: none;
}

/* Character counter */

.character-count {
margin-top: 6px;
color: var(--fl-muted);
font-size: .75rem;
text-align: right;
}

/* Error */

.error-message {
display: none;
margin-top: 24px;
padding: 14px 16px;
border: 1px solid #f0c5ce;
border-radius: 12px;
background: #fff5f7;
color: #7f3545;
}

.input.field-error,
.select.field-error,
.textarea.field-error,
.radio.field-error,
.checkbox.field-error {
border-color: #e21a56;
background: #fff5f7;
box-shadow: 0 0 0 3px rgba(226, 26, 86, .1);
}

.input.field-error:focus,
.select.field-error:focus,
.textarea.field-error:focus {
border-color: #e21a56;
box-shadow: 0 0 0 3px rgba(226, 26, 86, .15);
}

.option-card.field-error {
border-color: #e21a56;
background: #fff5f7;
}

.field-error-message {
margin-top: 6px;
color: #b4234d;
font-size: .8rem;
}

/* Submit */

.application-submit {
display: flex;
justify-content: center;
margin-top: 55px;
}

#submitButton {
min-height: 52px;
padding: 0 32px;
border: 1px solid var(--fl-purple);
border-radius: 14px;
background: var(--fl-purple);
color: #fff;
font-weight: 700;
transition: background .2s, transform .2s, box-shadow .2s;
}

#submitButton:hover {
background: #b98dd0;
border-color: #b98dd0;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(201, 160, 220, .3);
}

#submitButton:active {
transform: translateY(0);
}

#submitButton:disabled {
opacity: .65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* Submission */

.submission-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 24px;
}

.submission-content {
width: 100%;
max-width: 850px;
display: flex;
align-items: center;
gap: 70px;
margin: 0 auto;
}

.submission-llama {
width: 250px;
flex-shrink: 0;
display: flex;
justify-content: center;
}

.submission-llama img {
display: block;
width: 100%;
max-width: 220px;
height: auto;
object-fit: contain;
}

.submission-message {
flex: 1;
}

.submission-eyebrow {
margin-bottom: 8px;
color: #8b6a9a;
font-size: .9rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}

.submission-message h1 {
margin: 0 0 16px;
color: #303642;
font-size: clamp(2.4rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.05;
}

.submission-message > p {
max-width: 520px;
margin: 0;
color: var(--fl-muted);
line-height: 1.7;
}

.submission-message strong {
color: #303642;
}

.submission-countdown {
margin-top: 22px !important;
font-size: .9rem;
}

.submission-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
margin-top: 25px;
padding: 0 28px;
border: 1px solid var(--fl-purple);
border-radius: 14px;
background: var(--fl-purple);
color: #fff;
font-weight: 700;
text-decoration: none;
transition: background .2s, transform .2s, box-shadow .2s;
}

.submission-button:hover {
background: #b98dd0;
border-color: #b98dd0;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(201, 160, 220, .3);
}

/* Mobile */

@media (max-width: 640px) {
.whitelist-hero {
min-height: 380px;
}

```
.whitelist-hero-content {
    padding: 75px 20px;
}

.whitelist-hero p {
    font-size: 1rem;
}

.application-main {
    padding: 50px 20px 70px;
}

.intro {
    margin-bottom: 45px;
}

.form-section + .form-section {
    margin-top: 42px;
    padding-top: 42px;
}

.section-heading h3 {
    font-size: 1.2rem;
}

.application-submit {
    margin-top: 45px;
}

#submitButton {
    width: 100%;
}

.submission-main {
    padding: 60px 20px 70px;
}

.submission-content {
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.submission-llama {
    width: 170px;
}

.submission-llama img {
    max-width: 160px;
}

.submission-message {
    width: 100%;
}

.submission-message h1 {
    font-size: 2.3rem;
}

.submission-message > p {
    margin-right: auto;
    margin-left: auto;
}

.submission-button {
    width: 100%;
}
```

}
