.legal-main{background:var(--color-surface-tint);padding:var(--spacing-4xl) var(--spacing-2xl);}
.legal-card{width:100%;max-width:900px;margin:0 auto;background:var(--color-surface);padding:clamp(28px,5vw,64px);border-radius:var(--border-radius-card);box-shadow:var(--shadow-level-1);color:var(--color-on-surface);}
.legal-card h1{font-family:var(--font-family-heading);font-size:clamp(38px,5vw,56px);line-height:1.15;margin:0 0 12px;color:var(--color-primary);}
.legal-updated{font-size:13px;color:var(--color-on-surface-secondary);margin:0 0 28px;}
.legal-intro{font-size:18px;line-height:1.7;margin:0 0 40px;max-width:760px;}
.legal-section{padding:26px 0;border-top:1px solid color-mix(in srgb,var(--color-border) 25%,transparent);background:transparent!important;overflow:visible!important;}
.legal-section h2{font-family:var(--font-family-heading);font-size:28px;line-height:1.25;margin:0 0 12px;color:var(--color-primary);}
.legal-section p{font-size:16px;line-height:1.75;margin:0 0 14px;color:var(--color-on-surface);}
.legal-section p:last-child{margin-bottom:0}.legal-back{margin-top:28px;}
@media(max-width:767px){.legal-main{padding:48px 18px}.legal-card{padding:28px 20px}.legal-card h1{font-size:36px;text-align:center}.legal-intro{text-align:left;font-size:16px}.legal-section h2{font-size:24px;text-align:center}.legal-section p{font-size:15px}.legal-back{width:100%;}}


/* FIX: Legal pages — mobile text overflow */

@media (max-width: 480px) {
  .legal-main {
    width: 100%;
    padding: 36px 12px;
    box-sizing: border-box;
  }

  .legal-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .legal-card h1 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(26px, 8vw, 32px);
    line-height: 1.15;
    text-align: center;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .legal-section,
  .legal-section h2,
  .legal-section h3,
  .legal-section p,
  .legal-intro,
  .legal-updated {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .legal-section h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  .legal-section h3 {
    font-size: 19px;
    line-height: 1.3;
  }

  .legal-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  .legal-section p {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media (max-width: 360px) {
  .legal-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .legal-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .legal-card h1 {
    font-size: 26px;
  }

  .legal-section h2 {
    font-size: 20px;
  }
}