/* Legal pages: privacy policy, cookie policy, legal notice */
.od-legal { background: var(--od-white); padding: 200px var(--od-inset); }
.od-legal__container { max-width: var(--od-content); margin-inline: auto; display: flex; flex-direction: column; gap: 80px; }

/* Header */
.od-legal__header { position: relative; display: flex; flex-direction: column; gap: 32px; }
.od-legal__header::before,
.od-legal__header::after { content: ""; position: absolute; top: 11px; width: 9px; height: 9px; border-top: 2px solid var(--od-brand); pointer-events: none; }
.od-legal__header::before { left: 1px; border-left: 2px solid var(--od-brand); }
.od-legal__header::after { right: 1px; border-right: 2px solid var(--od-brand); }
.od-legal__title { margin: 0; font-size: var(--od-fs-h1); font-weight: 600; line-height: 1.2; letter-spacing: var(--od-track); color: var(--od-black); text-align: center; }
.od-legal__updated { margin: 0; display: flex; justify-content: center; gap: 8px; font-size: var(--od-fs-b3); font-weight: 500; line-height: 1.6; }
.od-legal__updated > * { flex: 1 0 0; }
.od-legal__updated-label { text-align: right; color: var(--od-grey-500); }
.od-legal__updated-date { text-align: left; color: var(--od-grey-700); }

.od-legal__divider { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--od-grey-200); }

/* Body: quick access + content */
.od-legal__body { display: grid; grid-template-columns: 300px minmax(0, 750px); justify-content: space-between; align-items: start; }
.od-legal__nav { display: flex; flex-direction: column; gap: 40px; }
.od-legal__nav-label { margin: 0; display: flex; align-items: center; gap: 12px; font-size: var(--od-fs-b2); font-weight: 500; line-height: 1.6; color: var(--od-grey-500); }
.od-legal__nav-icon { width: 24px; height: 24px; flex: none; }
ul.od-legal__nav-list { list-style: none; margin: 0; padding: 0 0 0 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.od-legal__nav-link { display: inline-block; font-size: var(--od-fs-btn); font-weight: 500; line-height: 1.6; white-space: nowrap; color: var(--od-grey-900); text-decoration: none; transition: color 0.2s var(--od-ease); }
.od-legal__nav-link:hover { color: var(--od-brand); }
.od-legal__nav-link:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 4px; }
.od-legal__nav-link[aria-current="page"] { color: var(--od-disabled); pointer-events: none; }

.od-legal__content { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.od-legal__block { display: flex; flex-direction: column; gap: 12px; max-width: 800px; scroll-margin-top: calc(var(--od-header-h) + 24px); }
.od-legal__block-title { margin: 0; text-wrap: balance; overflow-wrap: anywhere; font-size: var(--od-fs-h6); font-weight: 500; line-height: 1.4; color: var(--od-grey-900); }
.od-legal__block-text { overflow-wrap: anywhere; font-size: var(--od-fs-b2); font-weight: 400; line-height: 1.6; color: var(--od-grey-700); }
.od-legal__block-text p { margin: 0; }
.od-legal__block-text ul { list-style: disc; margin: 0; padding-left: 1.5em; }
.od-legal__block-text li { margin: 0; }
.od-legal__block-text a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.od-legal__block-text a:hover { color: var(--od-brand); }
.od-legal__block-text a:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 2px; }

@media (max-width: 1024px) {
  .od-legal { padding: 180px 32px 200px; }
  .od-legal__container { gap: 64px; }
  .od-legal__header { gap: 28px; }
  .od-legal__body { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .od-legal { padding: 160px 20px 200px; }
  .od-legal__container { gap: 48px; }
  .od-legal__header { gap: 20px; }
  .od-legal__body { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .od-legal__nav { flex-direction: row; align-items: flex-start; gap: 20px; }
  .od-legal__nav > * { flex: 1 0 0; min-width: 0; }
  .od-legal__nav-label { gap: 8px; }
  .od-legal__nav-icon { width: 20px; height: 20px; }
  ul.od-legal__nav-list { padding-left: 0; }
  .od-legal__header::before,
  .od-legal__header::after { top: 6px; width: 8px; height: 8px; }
}
@media (max-width: 340px) {
  .od-legal__nav { flex-direction: column; gap: 24px; }
  .od-legal__nav-link { white-space: normal; }
}