[data-legal-funnel] {
--lfp-burgundy: #800020;
--lfp-burgundy-2: #99213d;
--lfp-text: #231f20;
--lfp-muted: #5e5758;
--lfp-line: #eadfe1;
--lfp-surface: #ffffff;
--lfp-surface-soft: #faf7f8;
--lfp-success: #2d7a3e;
--lfp-warning: #b7791f;
--lfp-error: #b42318;
max-width: 980px;
width: 100%;
margin: 42px auto;
padding: 42px;
box-sizing: border-box;
background: var(--lfp-surface);
border: 1px solid var(--lfp-line);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(35, 31, 32, 0.08);
font-family: 'Roboto Condensed', 'Segoe UI', sans-serif;
color: var(--lfp-text);
position: relative;
overflow: hidden;
}
[data-legal-funnel]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--lfp-burgundy) 0%, var(--lfp-burgundy-2) 100%);
}
[data-legal-funnel] [hidden] {
display: none !important;
}
.legal-funnel-logo {
display: block;
max-width: 120px;
margin: 0 auto 22px;
}
.legal-funnel-header {
text-align: center;
margin-bottom: 34px;
}
.legal-funnel-title {
margin: 0 0 10px;
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(1.7rem, 3vw, 2.15rem);
font-weight: 400;
line-height: 1.28;
color: var(--lfp-burgundy);
}
.legal-funnel-subtitle {
max-width: 680px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.7;
color: var(--lfp-muted);
}
.legal-funnel-progress {
position: relative;
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 34px;
padding: 0 10px;
}
.legal-funnel-progress::before,
.legal-funnel-progress-line {
content: '';
position: absolute;
top: 18px;
left: 28px;
right: 28px;
height: 3px;
border-radius: 999px;
}
.legal-funnel-progress::before {
background: #ece4e6;
}
.legal-funnel-progress-line {
background: linear-gradient(90deg, var(--lfp-burgundy) 0%, var(--lfp-burgundy-2) 100%);
transition: width .35s ease;
z-index: 1;
}
.legal-funnel-step {
position: relative;
z-index: 2;
width: 38px;
height: 38px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 2px solid #d9c9cd;
color: #8e7f82;
font-size: .9rem;
font-weight: 700;
transition: transform .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.legal-funnel-step.active {
background: var(--lfp-burgundy);
border-color: var(--lfp-burgundy);
color: #fff;
box-shadow: 0 0 0 6px rgba(128, 0, 32, 0.12);
transform: scale(1.08);
}
.legal-funnel-step.completed {
background: var(--lfp-success);
border-color: var(--lfp-success);
color: #fff;
}
.legal-funnel-question {
animation: lfpFadeUp .28s ease;
}
.legal-funnel-question-text {
margin: 0 0 20px;
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(1.15rem, 2.3vw, 1.45rem);
font-weight: 400;
line-height: 1.45;
color: var(--lfp-text);
}
.legal-funnel-answers {
display: grid;
gap: 14px;
}
[data-legal-funnel] .legal-funnel-answer,
[data-legal-funnel] button.legal-funnel-answer {
width: 100%;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 16px;
margin: 0;
padding: 18px 22px;
box-sizing: border-box;
border: 1px solid #e7dbde !important;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #fcf8f9 100%) !important;
color: var(--lfp-text) !important;
font: inherit;
font-family: 'Roboto Condensed', 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.55;
letter-spacing: normal;
text-transform: none;
text-decoration: none !important;
text-align: left !important;
white-space: normal;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
[data-legal-funnel] .legal-funnel-answer::after,
[data-legal-funnel] button.legal-funnel-answer::after {
content: none !important;
display: none !important;
}
[data-legal-funnel] .legal-funnel-answer:hover,
[data-legal-funnel] .legal-funnel-answer:focus-visible,
[data-legal-funnel] .legal-funnel-answer:active {
background: linear-gradient(180deg, #fffefe 0%, #f8eef1 100%);
background: linear-gradient(180deg, #fffefe 0%, #f8eef1 100%) !important;
border-color: rgba(128, 0, 32, 0.45) !important;
box-shadow: 0 10px 22px rgba(128, 0, 32, 0.08) !important;
transform: translateY(-2px);
color: var(--lfp-text) !important;
text-decoration: none !important;
outline: none;
}
[data-legal-funnel] .legal-funnel-answer:hover > span,
[data-legal-funnel] .legal-funnel-answer:focus-visible > span,
[data-legal-funnel] .legal-funnel-answer:active > span {
color: var(--lfp-text) !important;
}
[data-legal-funnel] .legal-funnel-answer-label {
display: block !important;
flex: 1 1 auto;
min-width: 0;
margin: 0;
font: inherit;
font-size: 1rem;
line-height: 1.55;
font-weight: 400;
color: var(--lfp-text) !important;
text-align: left;
text-transform: none;
white-space: normal;
}
[data-legal-funnel] .legal-funnel-answer:hover .legal-funnel-answer-label,
[data-legal-funnel] .legal-funnel-answer:focus-visible .legal-funnel-answer-label,
[data-legal-funnel] .legal-funnel-answer:active .legal-funnel-answer-label,
[data-legal-funnel] .legal-funnel-answer:visited .legal-funnel-answer-label {
color: var(--lfp-text) !important;
}
[data-legal-funnel] .legal-funnel-answer-arrow {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto;
align-self: center;
margin-left: auto;
padding-left: 12px;
font-size: 1.15rem;
line-height: 1;
font-weight: 700;
color: var(--lfp-burgundy) !important;
white-space: nowrap;
}
[data-legal-funnel] .legal-funnel-answer:hover .legal-funnel-answer-arrow,
[data-legal-funnel] .legal-funnel-answer:focus-visible .legal-funnel-answer-arrow,
[data-legal-funnel] .legal-funnel-answer:active .legal-funnel-answer-arrow,
[data-legal-funnel] .legal-funnel-answer:visited .legal-funnel-answer-arrow {
color: var(--lfp-burgundy) !important;
}
.legal-funnel-result {
animation: lfpFadeUp .3s ease;
}
.legal-funnel-result-panel,
.legal-funnel-redirect-message {
padding: 28px;
border-radius: 18px;
border: 1px solid var(--lfp-line);
background: linear-gradient(180deg, #ffffff 0%, #fbf8f9 100%);
}
.legal-funnel-result-title {
margin: 0 0 12px;
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(1.35rem, 2.6vw, 1.8rem);
font-weight: 400;
line-height: 1.35;
color: var(--lfp-burgundy);
text-align: center;
}
.legal-funnel-result-text {
max-width: 720px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.8;
color: var(--lfp-muted);
text-align: center;
}
.legal-funnel-signal-box {
margin: 24px 0 0;
padding: 18px 20px;
border-radius: 14px;
border: 1px solid #f0d7d9;
background: #fff7f7;
}
.legal-funnel-signal-title {
margin-bottom: 12px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #8d2337;
}
.legal-funnel-signal-list {
display: grid;
gap: 10px;
}
.legal-funnel-signal-item {
padding: 12px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid #efd6d9;
color: #6e313d;
line-height: 1.55;
}
.legal-funnel-cta-group {
display: grid;
gap: 12px;
margin-top: 26px;
}
.legal-funnel-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
width: 100%;
padding: 14px 22px;
border-radius: 12px;
background: linear-gradient(135deg, var(--lfp-burgundy) 0%, var(--lfp-burgundy-2) 100%);
color: #fff;
text-decoration: none;
font-size: .95rem;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
box-shadow: 0 14px 26px rgba(128, 0, 32, 0.16);
transition: transform .22s ease, box-shadow .22s ease, background-position .22s ease;
}
.legal-funnel-cta:hover,
.legal-funnel-cta:focus-visible {
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 18px 30px rgba(128, 0, 32, 0.2);
outline: none;
}
.legal-funnel-cta.secondary {
background: #fff;
color: var(--lfp-burgundy);
border: 1px solid #d8c2c8;
box-shadow: none;
}
.legal-funnel-cta.secondary:hover,
.legal-funnel-cta.secondary:focus-visible {
color: var(--lfp-burgundy);
background: #fcf7f8;
box-shadow: none;
}
.legal-funnel-back {
display: inline-block;
margin-top: 20px;
color: #7a6c6f;
font-size: .92rem;
text-decoration: none;
}
.legal-funnel-back:hover,
.legal-funnel-back:focus-visible {
color: var(--lfp-burgundy);
text-decoration: underline;
outline: none;
}
.legal-funnel-alert {
padding: 18px 20px;
border-radius: 14px;
font-size: .95rem;
line-height: 1.65;
}
.legal-funnel-alert strong,
.legal-funnel-alert span {
display: block;
}
.legal-funnel-alert span {
margin-top: 6px;
}
.legal-funnel-alert-error {
border: 1px solid #f0c9ce;
background: #fff6f7;
color: #7b2231;
}
@keyframes lfpFadeUp {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
[data-legal-funnel] {
margin: 28px auto;
padding: 28px 20px;
border-radius: 16px;
}
.legal-funnel-progress {
padding: 0 4px;
}
.legal-funnel-progress::before,
.legal-funnel-progress-line {
left: 18px;
right: 18px;
}
.legal-funnel-step {
width: 34px;
height: 34px;
font-size: .82rem;
}
.legal-funnel-answer {
padding: 16px 18px;
}
.legal-funnel-result-panel,
.legal-funnel-redirect-message {
padding: 22px 18px;
}
}
@media (max-width: 560px) {
[data-legal-funnel] {
padding: 24px 16px;
border-radius: 14px;
box-shadow: 0 16px 36px rgba(35, 31, 32, 0.08);
}
.legal-funnel-logo {
max-width: 100px;
margin-bottom: 18px;
}
.legal-funnel-subtitle,
.legal-funnel-result-text,
.legal-funnel-answer-label {
font-size: .96rem;
}
.legal-funnel-progress {
gap: 8px;
}
.legal-funnel-step {
width: 30px;
height: 30px;
font-size: .78rem;
}
.legal-funnel-progress::before,
.legal-funnel-progress-line {
top: 15px;
left: 16px;
right: 16px;
}
.legal-funnel-cta {
min-height: 48px;
font-size: .9rem;
padding: 13px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.legal-funnel-answer,
.legal-funnel-cta,
.legal-funnel-step,
.legal-funnel-progress-line {
transition: none;
}
.legal-funnel-question,
.legal-funnel-result {
animation: none;
}
}