/* PunchyPass · legal pages — shared stylesheet.
   One source for the nav/typography/footer of every page under /legal/,
   so layout fixes land once instead of per-page. Loaded after tokens.css. */

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; min-height: 100vh; }
  body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex; flex-direction: column;
  }
  a { color: inherit; }

  .legal-nav {
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }
  /* Same 720px column as .legal-main so the brand aligns with the text. */
  .legal-nav__inner { max-width: 720px; margin: 0 auto; padding: 24px; }
  .legal-nav__brand { display: inline-flex; align-items: center; }
  .legal-nav__lockup { height: 44px; width: auto; display: block; }

  .legal-main {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 80px;
  }

  .legal-meta {
    margin: 0 0 32px;
    font-size: var(--text-supporting);
    color: var(--fg-2);
  }

  .legal-main h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
  }
  .legal-main h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin: 40px 0 12px;
  }
  .legal-main p,
  .legal-main li {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--fg-1);
    margin: 0 0 14px;
  }
  .legal-main ul {
    margin: 0 0 14px;
    padding-left: 22px;
  }
  .legal-main li { margin: 0 0 8px; }
  .legal-main a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .legal-main strong { font-weight: var(--weight-semibold); }

  .legal-divider {
    margin: 48px 0 24px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }

  .legal-footer {
    padding: 28px 32px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    background: color-mix(in srgb, var(--color-surface) 40%, transparent);
    font-size: 0.85rem;
    color: var(--fg-2);
  }
  .legal-footer__inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
  }
  .legal-footer__links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
  .legal-footer a {
    color: inherit;
    text-decoration: none;
  }
  .legal-footer a:hover { color: var(--fg-1); }

  @media (max-width: 480px) {
    .legal-nav__inner { padding: 20px; }
    .legal-main { padding: 32px 20px 64px; }
    .legal-main h2 { margin-top: 32px; }
  }

  /* Light theme override (mirror landing) */
  html[data-theme="light"] {
    --color-bg:            #fffcf9;
    --color-surface:       #ffffff;
    --color-border:        #e8e1d4;
    --color-text:          #152f5a;
    --color-text-secondary:#5f6b85;
    --color-primary:       #6d28d9;
  }