:root {
--thanks-navy: #002040;
--thanks-navy-light: #003366;
--thanks-lime: #CCFF00;
--thanks-lime-dark: #b3e600;
--thanks-text-dark: #1A1A1A;
--thanks-text-muted: #4A5565;
--thanks-bg-light: #f8fafb;
}
.thanks {
padding: 96px 16px 120px;
background: linear-gradient(180deg, #ffffff 0%, var(--thanks-bg-light) 100%);
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
}
.thanks__inner {
max-width: 640px;
width: 100%;
text-align: center;
}
.thanks__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--thanks-lime);
color: var(--thanks-text-dark);
margin-bottom: 32px;
}
.thanks__check svg {
width: 40px;
height: 40px;
}
.thanks__heading {
font-size: 48px;
color: var(--thanks-text-dark);
margin: 0 0 4px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.04em;
text-align: center !important;
}
.thanks__heading span {
display: block;
font-family: Helvetica, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
font-size: 16px;
color: var(--thanks-text-muted);
margin-top: 8px;
letter-spacing: 0.08em;
text-align: center !important;
}
.thanks__divider {
width: 48px;
height: 2px;
background: var(--thanks-lime);
margin: 24px auto 32px;
}
.thanks__text {
font-size: 16px;
line-height: 1.9;
color: var(--thanks-text-dark);
margin: 0 0 48px;
text-align: center;
}
.thanks__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 320px;
margin: 0 auto;
}
.thanks__btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all 0.2s;
}
.thanks__btn--primary {
background: var(--thanks-lime);
color: var(--thanks-navy);
border: 2px solid var(--thanks-lime);
}
.thanks__btn--primary:hover {
background: var(--thanks-lime-dark);
border-color: var(--thanks-lime-dark);
}
.thanks__btn--secondary {
background: var(--thanks-navy);
color: #fff;
border: 2px solid var(--thanks-navy);
}
.thanks__btn--secondary:hover {
background: var(--thanks-navy-light);
border-color: var(--thanks-navy-light);
} @media only screen and (max-width: 640px) {
.thanks {
padding: 64px 16px 80px;
}
.thanks__heading {
font-size: 36px;
}
.thanks__text {
font-size: 15px;
}
}