html body #faq.vp-faq{
--fq-pad: 32px;
--fq-row: 28px;
--fq-line: 26px;
--fq-icon: 28px;
--fq-icon-gap: 20px;
--fq-chip-col: 142px;
--fq-ink: #0A0A0A;
--fq-paper: #F7F5F1;
--fq-rule: #E5DFD9;
--fq-mute: #5B5B5B;
--fq-on-dark-1: #FAFAFA;
--fq-on-dark-2: #D4D2CD;
--fq-on-dark-3: #B8B6B1;
--fq-coral: #C73E2A;
--fq-coral-dk: #E05A42;
--fq-hair: rgba(255,255,255,.12);
}
html body #faq .vp-faq__head{ margin: 0 0 40px !important; }
html body #faq .vp-faq__h2{
font-weight: 700 !important;
letter-spacing: -.022em !important;
line-height: 1.12 !important;
margin: 14px 0 0 !important;
}
html body #faq .vp-faq__list{ border-top: 1px solid var(--fq-rule) !important; }
html body #faq .vp-faq__item{
border-bottom: 1px solid var(--fq-rule) !important;
position: relative !important;
box-sizing: border-box !important;
}
html body #faq .vp-faq__item .vp-faq__trigger{
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: var(--fq-icon-gap) !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 44px !important;
padding: var(--fq-row) var(--fq-pad) var(--fq-row) var(--fq-pad) !important;
font-family: var(--vp-sans) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: var(--fq-line) !important;
letter-spacing: -.008em !important;
color: var(--fq-ink) !important;
text-align: left !important;
text-transform: none !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #faq .vp-faq__item .vp-faq__trigger span:first-child{
flex: 1 1 auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding-right: var(--fq-chip-col) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: var(--fq-line) !important;
letter-spacing: -.008em !important;
}
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item::before{
content: counter(vpfaq, decimal-leading-zero);
position: absolute !important;
left: 0 !important;
right: auto !important;
top: var(--fq-row) !important;
height: var(--fq-line) !important;
display: flex !important;
align-items: center !important;
font-family: var(--vp-sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .1em !important;
font-variant-numeric: tabular-nums lining-nums !important;
color: var(--fq-mute) !important;
pointer-events: none;
z-index: 1;
}
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item[data-cat]::after{
content: attr(data-cat);
position: absolute !important;
left: auto !important;
right: calc(var(--fq-pad) + var(--fq-icon) + var(--fq-icon-gap)) !important;
top: var(--fq-row) !important;
box-sizing: border-box !important;
height: var(--fq-line) !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 10px !important;
font-family: var(--vp-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
text-transform: none !important;
color: var(--fq-mute) !important;
background: transparent !important;
border: 1px solid var(--fq-rule) !important;
border-radius: 0 !important;
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
html body #faq .vp-faq__item .vp-faq__icon{
flex: 0 0 auto !important;
box-sizing: border-box !important;
align-self: flex-start !important;
margin-top: calc((var(--fq-line) - var(--fq-icon)) / 2) !important;
width: var(--fq-icon) !important;
height: var(--fq-icon) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--vp-sans) !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: var(--fq-ink) !important;
background: var(--fq-paper) !important;
border: 1px solid var(--fq-rule) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: background .18s ease-out, color .18s ease-out, transform .2s ease-out, border-color .18s ease-out;
}
html body #faq .vp-faq__item:not(.is-open):not(.open):hover{
background: var(--fq-paper) !important;
box-shadow: none !important;
}
html body #faq .vp-faq__item:not(.is-open):not(.open):hover .vp-faq__trigger span:first-child{
color: var(--fq-coral) !important;
}
html body #faq .vp-faq__item:not(.is-open):not(.open):hover .vp-faq__icon{
border-color: var(--fq-coral) !important;
color: var(--fq-coral) !important;
}
html body #faq .vp-faq__item.is-open,
html body #faq .vp-faq__item.open{
background: var(--fq-ink) !important;
border-top: 2px solid var(--fq-coral) !important;
border-bottom: 2px solid var(--fq-coral) !important;
box-shadow: none !important;
}
html body #faq .vp-faq__item.is-open .vp-faq__trigger,
html body #faq .vp-faq__item.open .vp-faq__trigger,
html body #faq .vp-faq__item.is-open .vp-faq__trigger span:first-child,
html body #faq .vp-faq__item.open .vp-faq__trigger span:first-child{
color: var(--fq-on-dark-1) !important;
transform: none !important;
}
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item.is-open::before,
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item.open::before{
color: var(--fq-on-dark-3) !important;
}
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item.is-open[data-cat]::after,
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item.open[data-cat]::after{
color: var(--fq-on-dark-3) !important;
border-color: var(--fq-hair) !important;
background: transparent !important;
}
html body #faq .vp-faq__item.is-open .vp-faq__icon,
html body #faq .vp-faq__item.open .vp-faq__icon{
background: var(--fq-coral) !important;
border-color: var(--fq-coral) !important;
color: #FFFFFF !important;
transform: rotate(45deg) !important;
}
html body #faq .vp-faq__panel{
padding: 0 !important;
margin: 0 !important;
}
html body #faq .vp-faq__panel .vp-faq__a-grid{
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 340px !important;
gap: 48px !important;
align-items: start !important;
padding-top: 4px !important;
padding-right: var(--fq-pad) !important;
padding-bottom: var(--fq-pad) !important;
padding-left: var(--fq-pad) !important;
}
html body #faq .vp-faq__panel .vp-faq__a-body{
min-width: 0 !important;
padding: 0 !important;
}
html body #faq .vp-faq__a-body p{
max-width: 640px !important;
margin: 0 0 16px !important;
font-family: var(--vp-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 28px !important;
letter-spacing: 0 !important;
color: var(--fq-on-dark-2) !important;
}
html body #faq .vp-faq__a-body p:last-of-type{ margin-bottom: 0 !important; }
html body #faq .vp-faq__a-body strong,
html body #faq .vp-faq__a-body b{
color: var(--fq-on-dark-1) !important;
font-weight: 700 !important;
}
html body #faq .vp-faq__a-body a.law-ref,
html body #faq .vp-faq__a-body a[href*="zakon.rada"],
html body #faq .vp-faq__a-body a[href*="legalaid"]{
color: var(--fq-coral-dk) !important;
border-bottom: 1px solid rgba(224,90,66,.45) !important;
text-decoration: none !important;
}
html body #faq .vp-faq__a-body a.law-ref:hover,
html body #faq .vp-faq__a-body a[href*="zakon.rada"]:hover,
html body #faq .vp-faq__a-body a[href*="legalaid"]:hover{
border-bottom-color: var(--fq-coral-dk) !important;
}
html body #faq .vp-faq__cutout{
box-sizing: border-box !important;
margin: 0 !important;
padding: 24px 24px 24px 21px !important;
background: var(--fq-paper) !important;
border: 0 !important;
border-left: 3px solid var(--fq-coral) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #faq .vp-faq__cutout p{ max-width: none !important; }
html body #faq .vp-faq__cutout-src{
margin: 0 0 8px !important;
font-family: var(--vp-sans) !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--fq-mute) !important;
text-transform: none !important;
}
html body #faq .vp-faq__cutout-art{
margin: 0 0 12px !important;
font-family: var(--vp-sans) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: .01em !important;
font-variant-numeric: tabular-nums lining-nums !important;
color: var(--fq-coral) !important;
}
html body #faq .vp-faq__cutout-txt{
margin: 0 0 12px !important;
font-family: var(--vp-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #2A2A2A !important;
}
html body #faq .vp-faq__cutout-note{
margin: 0 !important;
font-family: var(--vp-sans) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.35 !important;
letter-spacing: .02em !important;
color: var(--fq-mute) !important;
}
html body #faq a.vp-faq__inline-cta{
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 24px 0 0 !important;
padding: 14px 22px !important;
min-height: 48px !important;
background: transparent !important;
border: 1px solid var(--fq-coral-dk) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--vp-sans) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 18px !important;
letter-spacing: 0 !important;
color: var(--fq-on-dark-1) !important;
text-decoration: none !important;
transition: background .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
html body #faq a.vp-faq__inline-cta .vp-faq__inline-phone{
font-family: var(--vp-sans) !important;
font-weight: 500 !important;
color: var(--fq-coral-dk) !important;
font-variant-numeric: tabular-nums lining-nums !important;
white-space: nowrap !important;
}
html body #faq a.vp-faq__inline-cta:hover{
background: var(--fq-coral) !important;
border-color: var(--fq-coral) !important;
color: #FFFFFF !important;
}
html body #faq a.vp-faq__inline-cta:hover .vp-faq__inline-phone{ color: #FFFFFF !important; }
html body #faq .vp-faq__footer-cta{
box-sizing: border-box !important;
margin: 32px 0 0 !important;
padding: var(--fq-pad) var(--fq-pad) var(--fq-pad) calc(var(--fq-pad) - 3px) !important;
background: var(--fq-ink) !important;
border: 0 !important;
border-left: 3px solid var(--fq-coral) !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 32px !important;
align-items: center !important;
}
html body #faq .vp-faq__footer-cta-eyebrow{
margin: 0 0 10px !important;
font-family: var(--vp-sans) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: .02em !important;
text-transform: none !important;
color: var(--fq-coral-dk) !important;
}
html body #faq .vp-faq__footer-cta-h{
margin: 0 0 8px !important;
font-family: var(--vp-sans) !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -.012em !important;
color: var(--fq-on-dark-1) !important;
}
html body #faq .vp-faq__footer-cta-sub{
max-width: 560px !important;
margin: 0 !important;
font-family: var(--vp-sans) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: var(--fq-on-dark-3) !important;
}
html body #faq a.vp-faq__footer-cta-link{
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 48px !important;
padding: 14px 24px !important;
font-family: var(--vp-sans) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 18px !important;
letter-spacing: .01em !important;
font-variant-numeric: tabular-nums lining-nums !important;
color: var(--fq-coral-dk) !important;
background: transparent !important;
border: 1px solid var(--fq-coral-dk) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
html body #faq a.vp-faq__footer-cta-link span{ margin: 0 !important; }
html body #faq a.vp-faq__footer-cta-link:hover{
background: var(--fq-coral) !important;
border-color: var(--fq-coral) !important;
color: #FFFFFF !important;
}
html body #faq .vp-faq__trigger:focus-visible{
outline: 2px solid var(--fq-coral) !important;
outline-offset: -4px !important;
border-radius: 0 !important;
}
html body #faq .vp-faq__item.is-open .vp-faq__trigger:focus-visible,
html body #faq .vp-faq__item.open .vp-faq__trigger:focus-visible{
outline: 2px solid var(--fq-coral-dk) !important;
outline-offset: -4px !important;
}
html body #faq a.vp-faq__inline-cta:focus-visible,
html body #faq a.vp-faq__footer-cta-link:focus-visible{
outline: 2px solid var(--fq-coral-dk) !important;
outline-offset: 3px !important;
}
@media (max-width: 1100px){
html body #faq.vp-faq{ --fq-pad: 28px; --fq-chip-col: 132px; }
html body #faq .vp-faq__panel .vp-faq__a-grid{
grid-template-columns: minmax(0, 1fr) 300px !important;
gap: 36px !important;
}
}
@media (max-width: 960px){
html body #faq .vp-faq__panel .vp-faq__a-grid{
grid-template-columns: minmax(0, 1fr) !important;
gap: 24px !important;
}
html body #faq .vp-faq__a-body p{ max-width: none !important; }
}
@media (max-width: 720px){
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item[data-cat]::after{
display: none !important;
}
html body #faq .vp-faq__item .vp-faq__trigger span:first-child{ padding-right: 0 !important; }
}
@media (max-width: 640px){
html body #faq.vp-faq{ --fq-pad: 24px; --fq-row: 22px; --fq-icon-gap: 14px; }
html body #faq .vp-faq__list .vp-faq__item.vp-faq__item.vp-faq__item::before{
display: none !important;
}
html body #faq .vp-faq__item .vp-faq__trigger,
html body #faq .vp-faq__item .vp-faq__trigger span:first-child{
font-size: 17px !important;
line-height: 25px !important;
}
html body #faq .vp-faq__a-body p{ font-size: 16px !important; line-height: 27px !important; }
html body #faq .vp-faq__panel .vp-faq__a-grid{ padding-bottom: 28px !important; }
html body #faq .vp-faq__cutout{ padding: 20px 20px 20px 17px !important; }
html body #faq .vp-faq__footer-cta{
grid-template-columns: minmax(0, 1fr) !important;
gap: 20px !important;
align-items: start !important;
padding: 28px 24px 28px 21px !important;
}
html body #faq a.vp-faq__footer-cta-link{ justify-self: start !important; }
html body #faq a.vp-faq__inline-cta{ width: 100% !important; justify-content: center !important; }
}
@media (max-width: 400px){
html body #faq.vp-faq{ --fq-pad: 20px; }
html body #faq .vp-faq__footer-cta{ padding: 24px 20px 24px 17px !important; }
}
@media (prefers-reduced-motion: reduce){
html body #faq .vp-faq__icon,
html body #faq a.vp-faq__inline-cta,
html body #faq a.vp-faq__footer-cta-link{ transition: none !important; }
}