* { box-sizing: border-box; }

html { min-width: 320px; background: var(--gn-colour-canvas); }

body.legal-page {
  min-height: 100vh;
  margin: 0;
  background: var(--gn-colour-canvas);
  color: var(--gn-colour-text);
  font: 400 16px/1.65 var(--gn-font-body);
  text-rendering: optimizeLegibility;
}

.legal-page a { color: var(--gn-colour-brand-strong); text-underline-offset: 3px; }
.legal-page a:hover { color: var(--gn-colour-brand); }
.legal-page a:focus-visible { border-radius: 3px; outline: 0; box-shadow: var(--gn-focus-ring); }

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-4);
  border-bottom: 1px solid var(--gn-colour-line);
  background: color-mix(in srgb, var(--gn-colour-surface) 90%, transparent);
  padding: 8px max(var(--gn-page-gutter), var(--gn-safe-right)) 8px max(var(--gn-page-gutter), var(--gn-safe-left));
  box-shadow: var(--gn-shadow-xs);
  backdrop-filter: blur(16px) saturate(1.08);
}

.legal-topbar-brand {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  color: var(--gn-colour-text);
  font-weight: 650;
  text-decoration: none;
}

.legal-topbar-brand picture,
.legal-topbar-brand img { display: block; width: 48px; height: 48px; }
.legal-topbar-brand img { border-radius: 11px; object-fit: cover; box-shadow: var(--gn-shadow-xs); }

.legal-topbar nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.legal-topbar nav a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--gn-radius-sm);
  padding: 8px 12px;
  color: var(--gn-colour-text-muted);
  font-size: 14px;
  font-weight: 540;
  text-decoration: none;
}
.legal-topbar nav a:hover { background: var(--gn-colour-surface-soft); color: var(--gn-colour-text); }
.legal-topbar nav .legal-topbar-primary { border: 1px solid color-mix(in srgb, var(--gn-colour-accent) 55%, transparent); background: var(--gn-gradient-brand); color: #2b1420; box-shadow: var(--gn-shadow-xs); }

.legal-shell { width: min(820px, calc(100% - (2 * var(--gn-page-gutter)))); margin: 0 auto; padding: clamp(36px, 7vw, 72px) 0 64px; }
.legal-header { margin-bottom: 28px; border-bottom: 1px solid var(--gn-colour-line); padding-bottom: 28px; }
.legal-header .eyebrow { margin: 0 0 9px; color: var(--gn-colour-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.legal-header h1 { margin: 0; font: 650 clamp(2.25rem, 7vw, 4.25rem)/0.98 var(--gn-font-display); letter-spacing: -0.05em; }
.legal-header > p:last-child { max-width: 720px; margin: 18px 0 0; color: var(--gn-colour-text-muted); font-size: clamp(1rem, 2vw, 1.14rem); }

.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.legal-nav a { display: inline-flex; min-height: 38px; align-items: center; border: 1px solid var(--gn-colour-line); border-radius: var(--gn-radius-pill); background: var(--gn-colour-surface); padding: 7px 12px; color: var(--gn-colour-text-muted); font-size: 13px; text-decoration: none; }

.legal-section { margin-top: 14px; border: 1px solid var(--gn-colour-line); border-radius: var(--gn-radius-md); background: var(--gn-colour-surface); box-shadow: var(--gn-shadow-xs); padding: clamp(20px, 4vw, 30px); }
.legal-section h2 { margin: 0 0 12px; font: 630 clamp(1.28rem, 3vw, 1.65rem)/1.15 var(--gn-font-display); letter-spacing: -0.025em; }
.legal-section h3 { margin: 24px 0 8px; font: 620 1.05rem/1.25 var(--gn-font-display); }
.legal-section p { margin: 0; color: var(--gn-colour-text-muted); }
.legal-section p + p { margin-top: 13px; }
.legal-section ul,
.legal-section ol { display: grid; gap: 9px; margin: 13px 0 0; padding-left: 22px; color: var(--gn-colour-text-muted); }
.legal-section li::marker { color: var(--gn-colour-brand); }

.legal-page .launch-footer { border-top: 1px solid var(--gn-colour-line); background: var(--gn-colour-surface); padding: 22px max(var(--gn-page-gutter), var(--gn-safe-right)) max(22px, var(--gn-safe-bottom)) max(var(--gn-page-gutter), var(--gn-safe-left)); }
.legal-page .launch-footer-inner { display: flex; max-width: 1120px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; }
.legal-page .launch-footer-inner > div:first-child { display: grid; gap: 2px; }
.legal-page .launch-footer-inner strong { font-size: 14px; }
.legal-page .launch-footer-inner .launch-muted { color: var(--gn-colour-text-subtle); font-size: 12px; }
.legal-page .launch-footer nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legal-page .launch-footer a { display: inline-flex; min-height: 38px; align-items: center; color: var(--gn-colour-text-muted); font-size: 13px; }

html[data-theme="dark"] body.legal-page { background: var(--gn-colour-canvas); color: var(--gn-colour-text); }
html[data-theme="dark"] .legal-topbar { background: color-mix(in srgb, var(--gn-colour-surface) 90%, transparent); }

@media (max-width: 640px) {
  .legal-topbar { align-items: stretch; flex-direction: column; padding-top: max(8px, var(--gn-safe-top)); }
  .legal-topbar-brand { align-self: flex-start; }
  .legal-topbar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .legal-topbar nav a { min-width: 0; padding-inline: 7px; font-size: 12px; text-align: center; }
  .legal-shell { width: min(100% - 28px, 820px); padding-top: 30px; }
  .legal-header { margin-bottom: 20px; padding-bottom: 22px; }
  .legal-section { border-radius: var(--gn-radius-sm); padding: 19px 17px; }
  .legal-page .launch-footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-page * { scroll-behavior: auto; }
}