.legalPage {
  --legalPageWidth: 920px;
  --legalContentWidth: var(--legalPageWidth);
  --legalSectionSpacing: 3.5rem;
  --legalBlockSpacing: 1.5rem;
  --legalDataLineHeight: 2rem;
  width: 100%;
  padding: 8.5rem 0 7rem;
  color: var(--fg);
}
.legalPage a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.legalPage a:hover {
  color: inherit;
}
.legalPage a:focus-visible {
  border-radius: 4px;
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 4px;
}
.legalPage code {
  padding: 0.16rem 0.42rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cardBg) 78%, var(--bgColor));
  color: var(--fgColor);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  white-space: nowrap;
}

.legalHeroInner {
  display: grid;
  width: min(var(--legalPageWidth), 100% - 48px);
  margin: 0 auto;
  padding: 4rem 0 var(--legalSectionSpacing);
  gap: var(--legalBlockSpacing);
}
.legalHeroInner > * {
  margin: 0;
}

.legalHero h1 {
  max-width: 980px;
  color: var(--fgColor);
  font-size: clamp(3rem, 6vw, 5.25rem);
  font-weight: 750;
  line-height: 1.02;
  text-wrap: balance;
}

.legalLead {
  max-width: 780px;
  color: var(--fg2);
  font-size: clamp(1.12rem, 1.9vw, 1.45rem);
  line-height: 1.6;
}

.legalVersion {
  color: var(--fg3);
  font-size: 0.95rem;
  line-height: 1.5;
}

.legalNavigation {
  display: flex;
  width: min(var(--legalPageWidth), 100% - 48px);
  margin: 0 auto;
  padding: var(--legalBlockSpacing) 0;
  gap: 0.75rem 2rem;
  flex-wrap: wrap;
}
.legalNavigation a {
  color: var(--fgColor);
  font-size: 0.96rem;
  font-weight: 650;
  text-decoration: none;
}
.legalNavigation a:hover {
  color: var(--fgColor);
  text-decoration: underline;
}

.legalContent {
  width: min(var(--legalContentWidth), 100% - 48px);
  margin: 0 auto;
}
.legalContent > .legalNotice {
  margin: var(--legalSectionSpacing) 0 0;
}

.legalSection {
  display: flex;
  flex-direction: column;
  padding: var(--legalSectionSpacing) 0;
  border-bottom: 1px solid var(--cardBorder);
  gap: var(--legalBlockSpacing);
  scroll-margin-top: 7rem;
}
.legalSection:last-child {
  border-bottom: 0;
}
.legalSection > * {
  margin-block: 0;
}
.legalSection h2 {
  color: var(--fgColor);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 720;
  line-height: 1.2;
  text-wrap: balance;
}
.legalSection h3 {
  color: var(--fgColor);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}
.legalSection p {
  color: var(--fgColor);
  font-size: 1.03rem;
  line-height: 1.72;
}
.legalSection ul,
.legalSection ol {
  color: var(--fgColor);
  font-size: 1.03rem;
  line-height: 1.72;
}
.legalSection ul {
  padding-left: 1.35rem;
}
.legalSection li {
  padding-left: 0.35rem;
}
.legalSection li::marker {
  color: var(--fgColor);
  font-weight: 700;
}
.legalSection li + li {
  margin-top: 0.5rem;
}

.legalAddress {
  margin: 0;
  color: var(--fgColor);
  font-size: 1.05rem;
  font-style: normal;
  line-height: var(--legalDataLineHeight);
}
.legalAddress strong {
  color: var(--fgColor);
  font-weight: 700;
}

.legalFacts {
  display: grid;
  margin: 0;
  gap: 0;
}
.legalFacts div {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  min-height: var(--legalDataLineHeight);
  align-items: start;
  gap: 1rem 2rem;
}
.legalFacts dt,
.legalFacts dd {
  min-width: 0;
  color: var(--fgColor);
  line-height: var(--legalDataLineHeight);
  overflow-wrap: anywhere;
}
.legalFacts dt {
  font-size: 0.95rem;
  font-weight: 600;
}
.legalFacts dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.legalClauses {
  margin: 0;
  padding-left: 1.6rem;
  counter-reset: legalClause;
}
.legalClauses > li {
  padding-left: 0.65rem;
}
.legalClauses > li + li {
  margin-top: 1rem;
}
.legalClauses ol {
  margin: var(--legalBlockSpacing) 0 0;
  padding-left: 1.5rem;
  list-style-type: lower-alpha;
}
.legalClauses ul {
  margin: var(--legalBlockSpacing) 0 0;
}

.legalNotice {
  margin: 0;
  padding: 1.5rem 1.65rem;
  border-radius: var(--borderRadius);
  background: color-mix(in srgb, var(--accentLight) 58%, var(--cardBg));
  color: var(--fgColor);
}
.legalNotice strong {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--fgColor);
  font-size: 1.05rem;
  font-weight: 750;
}
.legalNotice p {
  margin: 0;
  color: var(--fgColor);
  font-size: 1rem;
  line-height: 1.7;
}

.legalNoticeEmphasis {
  background: color-mix(in srgb, var(--accentLight) 78%, var(--cardBg));
}

.legalTableWrap {
  width: 100%;
  margin: 0;
  border-radius: var(--borderRadius);
  overflow-x: auto;
}
.legalTableWrap:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 4px;
}

.legalTable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  border-radius: var(--borderRadius);
  background: color-mix(in srgb, var(--cardBg) 72%, transparent);
  overflow: hidden;
}
.legalTable th,
.legalTable td {
  padding: 1.1rem 1.25rem;
  color: var(--fgColor);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.legalTable th {
  background: color-mix(in srgb, var(--accentLight) 48%, var(--cardBg));
  font-size: 0.92rem;
  font-weight: 750;
}
.legalTable td {
  font-size: 0.96rem;
}
.legalTable td:first-child {
  font-weight: 650;
}
.legalTable tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--cardBg) 58%, transparent);
}

.legalRetention {
  display: grid;
  margin: 0;
  gap: var(--legalBlockSpacing);
}
.legalRetention dt {
  margin: 0 0 0.5rem;
  color: var(--fgColor);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
}
.legalRetention dd {
  margin: 0;
  color: var(--fgColor);
  font-size: 1rem;
  line-height: 1.72;
}

.legalVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .legalPage {
    --legalSectionSpacing: 2.75rem;
    --legalBlockSpacing: 1.25rem;
    --legalDataLineHeight: 1.85rem;
    padding: 6.5rem 0 4rem;
  }
  .legalHeroInner {
    width: min(100% - 32px, var(--legalPageWidth));
    padding-top: 2.75rem;
  }
  .legalHero h1 {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
    line-height: 1.06;
  }
  .legalLead {
    font-size: 1.08rem;
    line-height: 1.62;
  }
  .legalNavigation {
    display: grid;
    width: min(100% - 32px, var(--legalPageWidth));
    gap: 0.75rem;
  }
  .legalNavigation a {
    padding: 0;
  }
  .legalContent {
    width: min(100% - 32px, var(--legalContentWidth));
  }
  .legalSection h2 {
    font-size: 1.65rem;
  }
  .legalSection p,
  .legalSection ul,
  .legalSection ol {
    font-size: 1rem;
  }
  .legalFacts {
    gap: 1rem;
  }
  .legalFacts div {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 0.125rem;
  }
  .legalNotice {
    padding: 1.3rem;
  }
  .legalTableWrap {
    margin-right: -16px;
    width: calc(100% + 16px);
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
  }
}
@media (max-width: 420px) {
  .legalPage {
    --legalSectionSpacing: 2.35rem;
    --legalBlockSpacing: 1.15rem;
    --legalDataLineHeight: 1.75rem;
    padding-top: 5.75rem;
  }
  .legalHeroInner,
  .legalNavigation,
  .legalContent {
    width: calc(100% - 24px);
  }
  .legalHero h1 {
    font-size: 2.45rem;
  }
  .legalFacts dt {
    font-size: 0.9rem;
  }
  .legalFacts dd {
    font-size: 0.95rem;
  }
  .legalClauses {
    padding-left: 1.35rem;
  }
  .legalClauses > li {
    padding-left: 0.35rem;
  }
}
@media print {
  .legalPage {
    --legalSectionSpacing: 1.8rem;
    --legalBlockSpacing: 1rem;
    --legalDataLineHeight: 1.6rem;
    padding: 0;
    color: #000;
  }
  .legalHeroInner,
  .legalContent {
    width: 100%;
  }
  .legalHeroInner {
    padding-top: 0;
  }
  .legalHero h1 {
    font-size: 2.7rem;
  }
  .legalNavigation {
    display: none;
  }
  .legalSection {
    border-bottom-color: #b5b5b5;
    break-inside: avoid;
  }
  .legalNotice,
  .legalTable,
  .legalTable th,
  .legalTable tbody tr:nth-child(even) td {
    background: transparent;
  }
  .legalPage,
  .legalPage a,
  .legalHero h1,
  .legalLead,
  .legalVersion,
  .legalSection h2,
  .legalSection h3,
  .legalSection p,
  .legalSection ul,
  .legalSection ol,
  .legalAddress,
  .legalAddress strong,
  .legalFacts dt,
  .legalFacts dd,
  .legalNotice,
  .legalNotice strong,
  .legalNotice p,
  .legalRetention dt,
  .legalRetention dd,
  .legalTable td,
  .legalTable th {
    color: #000;
  }
}