.page-legal {
--legal-ink: #252526;          
--faq-ink: #0b0920;            
--faq-line-open: #fbd4bd;      
--faq-orange-hover: #d45100;   
}
.page-hero--legal {
--strip-visible: 171px;
--strip-gap: 56px;
min-block-size: 0;
padding-block:
calc(var(--header-h) + clamp(48px, calc(48px + 31 * (100vw - 390px) / 1050), 79px))
calc(var(--strip-visible) + var(--strip-gap));
}
.page-hero--faq { --strip-gap: 41px; }
@media (max-width: 767.98px) {
.page-hero--legal { --strip-visible: 104px; }   
}
.page-hero--legal .page-hero__title,
.page-hero--legal .page-hero__text { max-inline-size: 712px; }
.page-hero--legal .page-hero__strip { inset-block-end: -27px; transform: scaleX(-1); }
[dir='rtl'] .page-hero--legal .page-hero__strip { transform: none; }
@media (max-width: 767.98px) {
.page-hero--legal .page-hero__content { gap: 16px; }
.page-hero--legal .page-hero__strip { inset-block-end: -16px; }
}
.side-nav { display: flex; flex-direction: column; gap: 8px; }
.side-nav__item {
display: block; inline-size: 100%;
padding: 14px 20px;
background: var(--c-white); color: var(--c-black);
font-size: 14px; font-weight: 600; line-height: 1.5; text-align: start;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.side-nav__item[aria-current='true'],
.side-nav__item[aria-selected='true'] { background: var(--c-orange-50); color: var(--c-orange); }
.side-nav__item:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
.side-nav__item:hover { color: var(--c-orange); }
}
.legal { padding-block: 64px 56px; }   
.legal__layout {
display: grid; align-items: start;
grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
column-gap: 24px;
}
.legal__article { grid-column: 2; grid-row: 1; min-inline-size: 0; }
.legal__block + .legal__block { margin-block-start: 40px; }   
.legal__title { font-size: 24px; font-weight: 700; line-height: 34px; color: var(--c-black); }
.legal__title[tabindex='-1']:focus { outline: none; }   
.legal__text {
padding-block-start: 12px; max-inline-size: var(--w, none);
font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--legal-ink);
}
.legal__link {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
@media (hover: hover) {
.legal__link:hover { color: var(--c-orange); text-decoration-color: currentColor; }
}
.toc { grid-column: 1; grid-row: 1; position: sticky; inset-block-start: calc(var(--header-h) + 16px); }
.toc__toggle { display: none; }
.toc .side-nav__item { padding: 12px 16px; }
@media (max-width: 1279.98px) {
.legal__layout { grid-template-columns: 220px minmax(0, 720px); column-gap: 48px; justify-content: center; }
.legal__article { grid-column: 2; }
}
@media (max-width: 1023.98px) {
.legal { padding-block: 0 var(--section-y); }
.legal__layout { display: block; }
.toc {
inset-block-start: 64px; z-index: 5;
margin-inline: calc(-1 * var(--gutter)); margin-block-end: 32px;
background: var(--c-white);
border-block-end: 1px solid var(--c-line-footer);
box-shadow: 0 12px 24px -20px rgba(8, 16, 22, 0.35);
}
.toc__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
inline-size: 100%; min-block-size: 56px; padding: 8px var(--gutter);
text-align: start; color: var(--c-black);
}
.toc__toggle:focus-visible { outline-offset: -3px; }
.toc__toggle-text { display: flex; flex-direction: column; min-inline-size: 0; }
.toc__label { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--c-neutral-600); }
.toc__current { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--c-orange); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc__toggle .icon { inline-size: 20px; block-size: 20px; flex: none; color: var(--c-black); transition: rotate var(--dur) var(--ease); }
.toc__toggle[aria-expanded='true'] .icon { rotate: 180deg; }
.toc__panel {
position: absolute; inset-inline: 0; inset-block-start: 100%;
display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease);
}
.toc__panel.is-open { grid-template-rows: 1fr; }
.toc__inner {
min-block-size: 0; overflow: hidden; visibility: hidden;
background: var(--c-white);
box-shadow: 0 24px 32px -24px rgba(8, 16, 22, 0.4);
transition: visibility 0s linear 320ms;
}
.toc__panel.is-open .toc__inner {
visibility: visible; transition-delay: 0s;
max-block-size: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain;
border-block-end: 1px solid var(--c-line-footer);
}
.toc__list { gap: 4px; padding: 8px var(--gutter) 16px; }
.toc .side-nav__item { padding: 10px 16px; }
html:has(.toc) { scroll-padding-top: 64px; }          
.legal__block { scroll-margin-top: 89px; }            
.legal__block + .legal__block { margin-block-start: 32px; }
.legal__text { max-inline-size: none; }
}
@media (max-width: 767.98px) {
.legal__title { font-size: 20px; line-height: 1.4; }
}
@media (max-width: 1023.98px) { html:not(.js) .toc { display: none; } }
.faq {
padding-block:
clamp(40px, calc(40px + 24 * (100vw - 390px) / 1050), 64px)
clamp(56px, calc(56px + 40 * (100vw - 390px) / 1050), 96px);
}
.faq__layout { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.faq__tabs { flex: 0 0 279px; position: sticky; inset-block-start: calc(var(--header-h) + 16px); }
.faq__panels { flex: 0 1 816px; min-inline-size: 0; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
background: var(--c-white);
border: 1px solid var(--c-neutral-200);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-item:has(.faq-item__btn[aria-expanded='true']) { background: var(--c-orange-50); border-color: var(--faq-line-open); }
.faq-item__head { font: inherit; }
.faq-item__btn {
display: flex; align-items: center; gap: 16px;
inline-size: 100%; padding: 19px;          
color: var(--faq-ink); text-align: start;
-webkit-tap-highlight-color: transparent;
}
.faq-item__btn:focus-visible { outline-offset: -3px; }
.faq-item__q { flex: 1 1 auto; min-inline-size: 0; font-size: 20px; font-weight: 600; line-height: 1.5; }
.faq-item__btn[aria-expanded='true'] .faq-item__q { font-weight: 700; }
.faq-item__icon {
display: grid; place-items: center; flex: none;
inline-size: 40px; block-size: 40px;
background: var(--c-orange); color: var(--c-white);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-item__icon .icon { inline-size: 24px; block-size: 24px; }
.faq-item__icon path:last-of-type { transform-box: fill-box; transform-origin: center; transition: transform var(--dur) var(--ease); }
.faq-item__btn[aria-expanded='true'] .faq-item__icon { background: var(--c-white); color: var(--c-orange); }
.faq-item__btn[aria-expanded='true'] .faq-item__icon path:last-of-type { transform: rotate(90deg); }
.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-item__panel.is-open { grid-template-rows: 1fr; }
.faq-item__inner { min-block-size: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur); }
.faq-item__panel.is-open .faq-item__inner { visibility: visible; transition-delay: 0s; }
.faq-item__answer {
margin-block-start: -3px; padding: 0 19px 19px;
font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--c-neutral-950);
}
.faq-item__answer--missing { color: var(--c-neutral-600); }
@media (hover: hover) {
.faq-item:not(:has(.faq-item__btn[aria-expanded='true'])):hover { border-color: var(--faq-line-open); }
.faq-item__btn[aria-expanded='false']:hover .faq-item__icon { background: var(--faq-orange-hover); }
}
.faq-panel:not([hidden]) { animation: faq-panel-in 360ms var(--ease-out) both; }
@keyframes faq-panel-in { from { opacity: 0; translate: 0 10px; } }
.faq-empty {
padding: 19px; border: 1px dashed var(--c-neutral-200);
font-size: 16px; line-height: 1.5; color: var(--c-neutral-600);
}
.faq-panel__title { margin-block-end: 12px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--c-black); }
html.js .faq-panel__title {
position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html:not(.js) .faq__tabs { display: none; }
html:not(.js) .faq__panels { margin-inline: auto; }
html:not(.js) .faq-panel[hidden] { display: block !important; margin-block-start: 32px; }
html:not(.js) .faq-item__panel { grid-template-rows: 1fr; }
html:not(.js) .faq-item__inner { visibility: visible; }
@media (max-width: 1199.98px) {
.faq__tabs { flex-basis: 240px; }
.faq__layout { gap: 32px; }
}
@media (max-width: 1023.98px) {
.faq__layout { flex-direction: column; align-items: stretch; gap: 24px; }
.faq__tabs { position: static; flex: none; margin-inline: calc(-1 * var(--gutter)); }
.faq__tablist {
flex-direction: row; gap: 8px; overflow-x: auto;
padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
}
.faq__tablist::-webkit-scrollbar { display: none; }
.faq__tablist .side-nav__item {
flex: none; inline-size: auto; white-space: nowrap;
padding: 9px 16px; border: 1px solid var(--c-neutral-200);
}
.faq__tablist .side-nav__item[aria-selected='true'] { border-color: var(--faq-line-open); }
.faq__panels { flex: none; }
}
@media (max-width: 767.98px) {
.faq-list { gap: 12px; }
.faq-item__btn { gap: 12px; padding: 15px; }
.faq-item__q { font-size: 16px; }
.faq-item__icon { inline-size: 32px; block-size: 32px; }
.faq-item__icon .icon { inline-size: 20px; block-size: 20px; }
.faq-item__answer { padding: 0 15px 15px; font-size: 14px; }
.faq-empty { padding: 15px; font-size: 14px; }
}
.page-legal .cta-band__copy { max-inline-size: 634px; }
.page-legal .cta-band__text { max-inline-size: none; }
.page-legal .cta-band .btn { padding-block: 15px; }
.page-legal:lang(ar) .cta-band__copy { max-inline-size: 600px; }
@media (min-width: 768px) {
.page-legal .cta-band__title { line-height: 1.5; }
.page-legal:lang(ar) .cta-band__title { line-height: normal; }
}
@media (prefers-reduced-motion: reduce) {
.faq-item__panel, .faq-item__inner, .toc__panel, .toc__inner, .faq-item__icon path { transition: none; }
}