/* Shared stylesheet for the UrusFamily legal and landing pages. Tokens mirror web/r/index.html. */
:root {
  --bg: #fbf8f5; --surface: #ffffff; --text: #1d1b1a; --muted: #6b6461; --border: #ece5df;
  --primary: #c4552b; --on-primary: #ffffff; --link: #a8441f; --soft: #fdeee7;
  --radius-base: 12px; --radius-control: var(--radius-base); --radius-card: calc(var(--radius-base) + 4px);
  --weight-regular: 400; --weight-strong: 600;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --measure: 65ch;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f0f11; --surface: #1a1a1d; --text: #f4f1ee; --muted: #a8a19c; --border: #2a2a2e; --primary: #f28a63; --on-primary: #1d1b1a; --link: #f5a283; --soft: #2b1d17; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--weight-regular) 1rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.top, main, .foot { max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.brand { font-weight: var(--weight-strong); font-size: 1.0625rem; color: var(--text); text-decoration: none; }
.lang { font-size: .9375rem; }
main { padding-bottom: var(--space-12); }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); line-height: 1.2; font-weight: var(--weight-strong); letter-spacing: -.01em; margin: var(--space-4) 0 var(--space-3); text-wrap: balance; }
h2 { font-size: 1.3125rem; line-height: 1.3; font-weight: var(--weight-strong); margin: var(--space-12) 0 var(--space-3); text-wrap: balance; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: var(--weight-strong); margin: var(--space-8) 0 var(--space-2); }
p, ul, ol { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: var(--space-2); }
.lead { font-size: 1.125rem; line-height: 1.55; }
.muted { color: var(--muted); font-size: .9375rem; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3) var(--space-6); margin: var(--space-6) 0 0; padding: var(--space-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta dt { font-size: .8125rem; color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.table { overflow-x: auto; margin: 0 0 var(--space-4); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border); }
thead th { font-size: .8125rem; color: var(--muted); font-weight: var(--weight-strong); }
tbody th { font-weight: var(--weight-strong); width: 38%; }
.toc { margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.toc ol { margin: 0; }
.toc li + li { margin-top: var(--space-1); }
.notice h3 { scroll-margin-top: var(--space-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--space-6); border-radius: var(--radius-control); background: var(--primary); color: var(--on-primary); font-weight: var(--weight-strong); text-decoration: none; transition: filter .15s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.94); }
@media (max-width: 40rem) { .btn { display: flex; width: 100%; } }
.links { list-style: none; padding: 0; margin-top: var(--space-8); }
.foot { padding-top: var(--space-6); padding-bottom: var(--space-8); border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-3); }
.foot p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }