/* SPYDER theme: red + white, spider webs and a hanging spider. */
:root {
  --bg: #ffffff; --card: #ffffff; --fg: #1a1a1d; --muted: #6e6e76; --line: #f0d4d6;
  --accent: #d0141f; --accent-dark: #a50f18; --accent-soft: #fdeced;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 17px; line-height: 1.6; }

/* Faint webs in two corners, fixed behind the content */
body::before, body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: min(420px, 70vw); aspect-ratio: 400 / 420;
  background: url("/web.svg") no-repeat center / contain; opacity: .16;
}
body::before { top: 0; right: 0; }
body::after { bottom: 0; left: 0; transform: rotate(180deg); opacity: .1; }

/* Crawling spiders (spiders.js) — fixed layer behind the content boxes */
.crawlers { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.crawler { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; will-change: transform; }
.crawler svg { width: 100%; height: 100%; display: block; overflow: visible; }
.crawler .legs-a, .crawler .legs-b { transform-origin: 13px 13px; }
.crawler.walking .legs-a { animation: legs .22s ease-in-out infinite alternate; }
.crawler.walking .legs-b { animation: legs .22s ease-in-out infinite alternate-reverse; }
@keyframes legs { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

.wrap { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; padding: 2.5rem 16px 4rem; }

header.top { position: relative; margin-bottom: 1.25rem; padding-right: 3rem; }
/* Hanging spider: its thread starts above the page top, so only the drop shows */
header.top::after {
  content: ""; position: absolute; right: .25rem; top: calc(-2.5rem - 40px);
  width: 30px; height: 98px; background: url("/spider.svg") no-repeat center / contain;
  transform-origin: top center; animation: dangle 3.2s ease-in-out infinite alternate;
}
header.top.sub::after { display: none; } /* one spider per page */
@keyframes dangle { from { transform: translateY(-4px) rotate(-3deg); } to { transform: translateY(10px) rotate(3deg); } }

.brand { display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-bottom: .4rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); font-weight: 800; line-height: 1.15; margin: 0 0 .3rem; }
.meta { font-size: .85rem; color: var(--muted); }

nav.tabs { display: flex; gap: .5rem; margin: 0 0 1.5rem; }
nav.tabs a { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--muted); padding: .45rem .95rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
nav.tabs a[aria-current="page"] { color: #fff; background: var(--accent); border-color: var(--accent); }

section.doc { display: grid; gap: .9rem; }
section.doc > p.lede { font-size: 1.05rem; margin: 0 0 .4rem; padding-left: .9rem; border-left: 3px solid var(--accent); }
.clause { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; display: grid; gap: .45rem; }
.clause h2 { font-size: 1.05rem; font-weight: 700; margin: 0; display: flex; gap: .55rem; align-items: center; }
.clause h2 .n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; flex: none; }
.clause p, .clause ul { margin: 0; }
.clause ul { padding-left: 1.15rem; display: grid; gap: .35rem; }
.clause li::marker { color: var(--accent); }

/* Animated list on the policy pages: hidden only once anim.js has run, so
   the text always shows without JavaScript. */
html.anim section.doc > .lede, html.anim section.doc > .clause {
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1.15);
}
html.anim section.doc > .in { opacity: 1; transform: none; }
.clause { transition: border-color .2s ease, box-shadow .2s ease; }
.clause:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(208,20,31,.12); }

a { color: var(--accent); }
footer { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); text-align: center; }
.links { display: grid; gap: .6rem; margin: 1rem 0 0; }
.links a { display: block; padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 600; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.links a:hover { border-color: var(--accent); background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) { header.top::after { animation: none; } }