*,
    ::before,
    ::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --navy: #0B1D36;
      --gold-dark: #D4AF37;
      --teal: #00C2B2;
      --white: #fff;
      --text-primary: #E8E6E1;
      --text-secondary: #A0A0A0;
      --text-muted: #6B7280;
      --border-subtle: rgba(201, 168, 76, .12);
      --border-light: rgba(255, 255, 255, .08);
      --font-heading: "DM Sans", sans-serif;
      --font-body: "Open Sans", sans-serif;
      --container-narrow: 820px
    }

    html {
      scroll-behavior: smooth
    }

    html,
    body {
      overflow-x: hidden;
      position: relative;
      width: 100%
    }

    body {
      background: var(--navy);
      color: var(--text-primary);
      font: 16px/1.7 var(--font-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    a {
      color: var(--teal);
      text-decoration: none;
      transition: color .3s ease
    }

    a:hover {
      color: var(--gold-dark)
    }

    p {
      font-family: var(--font-body);
      font-size: clamp(1rem, 1.5vw, 1.125rem);
      line-height: 1.7
    }

    .component-frame {
      display: block;
      width: 100%;
      border: 0;
      background: transparent;
      overflow: hidden
    }

    .component-frame--nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      height: 82px
    }

    .component-frame--footer {
      min-height: 300px
    }

    .component-shell {
      position: relative;
      width: 100%;
      overflow: hidden
    }

    .legal-hero {
      padding: 140px 2rem 60px;
      text-align: center;
      border-bottom: 1px solid var(--border-subtle)
    }

    .legal-hero__version {
      display: inline-block;
      margin-bottom: 1rem;
      padding: 4px 14px;
      background: rgba(201, 168, 76, .12);
      color: var(--gold-dark);
      font: 600 .75rem/1.2 var(--font-heading);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .legal-hero h3 {
      margin-bottom: .75rem;
      color: var(--white);
      font: 800 clamp(2rem, 4vw, 2.75rem)/1.2 var(--font-heading)
    }

    .legal-hero__effective {
      margin-bottom: .5rem;
      color: var(--text-secondary);
      font-size: .9rem
    }

    .legal-body {
      max-width: var(--container-narrow);
      margin: 0 auto;
      padding: 3.5rem 2rem 5rem
    }

    .legal-body h2 {
      margin: 2.75rem 0 1rem;
      padding-bottom: .5rem;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--gold-dark);
      font: 700 1.35rem/1.2 var(--font-heading)
    }

    .legal-body h2:first-child {
      margin-top: 0
    }

    .legal-body p {
      margin-bottom: 1rem;
      color: var(--text-primary);
      line-height: 1.75
    }

    .legal-body ul {
      margin-bottom: 1rem;
      padding-left: 1.5rem
    }

    .legal-body li {
      margin-bottom: .5rem;
      color: var(--text-primary);
      line-height: 1.65
    }

    .legal-body li::marker {
      color: var(--teal)
    }

    .legal-body strong {
      color: var(--white);
      font-weight: 600
    }

    .legal-body a {
      text-decoration: underline;
      text-underline-offset: 3px
    }

    .legal-body address {
      margin-bottom: 1rem;
      font-style: normal
    }

    .retention-table {
      width: 100%;
      margin: 1.25rem 0 1.5rem;
      border-collapse: collapse
    }

    .retention-table th,
    .retention-table td {
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--border-light);
      text-align: left;
      font-size: .9rem
    }

    .retention-table th {
      background: rgba(201, 168, 76, .06);
      color: var(--gold-dark);
      font: 600 .8rem/1.7 var(--font-heading);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .retention-table td {
      color: var(--text-primary)
    }

    .retention-table tr:last-child td {
      border-bottom: 0
    }

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

    @media (max-width:768px) {
      .component-frame--nav {
        height: 64px
      }

      .legal-hero {
        padding: 120px 1.5rem 40px
      }

      .legal-body {
        padding: 2.5rem 1.5rem 4rem
      }

      .retention-table th,
      .retention-table td {
        padding: .6rem .75rem
      }
    }