/* ---------------------------------------------------------------------------
   Legal pages + cookie consent.
   The block above is lifted verbatim from index.html so tokens, nav, buttons
   and the theme switch behave identically across the site.
   --------------------------------------------------------------------------- */

.legal { padding: 128px 0 96px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 60px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.01em; margin-bottom: 10px; }
.legal .updated { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.legal .klabel { font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 16px; }

.legalnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 44px;
  padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legalnav a { font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); padding: 8px 14px; }
.legalnav a:hover { border-color: var(--line-strong); color: var(--ink); }
.legalnav a.on { border-color: var(--seal); background: var(--seal-soft); color: var(--seal); }

.legal h2 { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.01em;
  margin: 44px 0 14px; max-width: none; }
.legal p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 0; padding-left: 0; list-style: none; }
.legal li { color: var(--ink-2); font-size: 15.5px; margin-bottom: 9px; padding-left: 20px;
  position: relative; }
.legal li::before { content: "-"; position: absolute; left: 0; color: var(--seal); font-weight: 700; }
.legal a { color: var(--seal); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal code { font-family: var(--mono); font-size: 13px; background: var(--card-2); padding: 2px 6px; }
.legal b { color: var(--ink); }

.callout { border: 1px solid var(--seal); background: var(--seal-soft); padding: 20px 22px;
  font-size: 15.5px; color: var(--ink-2); margin-bottom: 8px; }
.callout b { color: var(--seal); }

.ph { font-family: var(--mono); font-size: 13px; background: var(--amber-soft); color: var(--amber);
  padding: 2px 7px; white-space: nowrap; }

.tablescroll { overflow-x: auto; border: 1px solid var(--line); margin-bottom: 18px; }
table.legaltable { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
table.legaltable th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--seal); background: var(--card-2); text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.legaltable td { padding: 13px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); vertical-align: top; }
table.legaltable tr:last-child td { border-bottom: none; }

  padding: 0; cursor: pointer; }

@media (max-width: 760px) {
  .legal { padding: 104px 0 72px; }
}

/* Footer - lifted from index.html so the legal pages match the home page exactly. */
.footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--dim);font-size:13px}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer .logo{height:18px;opacity:.75}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer nav a:hover{color:var(--ink)}
.footer nav .linklike{font:inherit;font-size:13px;color:inherit;padding:0;cursor:pointer}
.footer nav .linklike:hover{color:var(--ink)}
.fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.copyright{font-size:12.5px;color:var(--dim);margin:0}