:root {
  color-scheme: light;
  --ink: #11191d;
  --muted: #56605a;
  --line: #dfe5dc;
  --accent: #85f336;
  --accent-active: #54c914;
  --accent-deep: #216c0d;
  --focus-ring: #124a16;
  --panel: #fff;
  --soft: #f3f6f0;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--soft); color: var(--ink); font: 16px/1.65 system-ui, sans-serif; }

.skip-link { position: absolute; left: -999px; }

.skip-link:focus { left: 1rem; top: 1rem; z-index: 4; background: #fff; padding: .7rem; }

header, footer, main { width: min(72rem, calc(100% - 2rem)); margin: auto; }

header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }

.brand { display: block; width: 7.35rem; height: 2.6rem; background: url("/assets/logos/7fabs-logo-real.png") center / contain no-repeat; color: transparent; font-size: 0; text-decoration: none; }

nav { display: flex; gap: .85rem; flex-wrap: wrap; }

nav a, a { color: var(--accent-deep); }

main { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.1rem, 4vw, 3rem); box-shadow: 0 14px 42px #10182012; }

.document-state { border-left: 5px solid #9b6b00; background: #fff7db; padding: 1rem; margin-bottom: 2rem; }

.document-state.effective { border-left-color: var(--accent-active); background: #bcf493; }

.meta, .legal-index span, footer { color: var(--muted); }

.meta { font-size: .9rem; }

.legal-document { max-width: 76ch; }

.legal-document h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }

.legal-document h2 { margin-top: 2rem; }

.legal-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 0; list-style: none; }

.legal-index a { display: block; font-weight: 750; }

.legal-index li { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }

@media (max-width: 960px) {
  nav a,
  .legal-index a { display: inline-flex; min-height: 44px; align-items: center; }
}

footer { padding: 2rem 0; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 2px #fff; }

@media (max-width: 44rem) {
  header { align-items: flex-start; flex-direction: column; }
  main { width: 100%; border-radius: 0; border-right: 0; border-left: 0; }
  .legal-index { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}