/* Cultum web — the legal pages (/terms, /privacy)
   ---------------------------------------------------------------------------
   Long-form reading, so none of the landing page's stage: no intro, no light,
   no reveal, nothing waiting on script. The same tokens and the same lockup,
   on the plainer --paper ground, because a document is read rather than looked
   at and the page green behind 4,000 words is tiring. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: 1.6;
}

.doc { max-width: 720px; margin: 0 auto; padding: 0 var(--space-16) var(--space-48); }

/* ---- the lockup, linking home ----
   The landing page's markup and geometry, without its animation hooks. */
.doc-top { padding: var(--space-32) 0 var(--space-48); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tile-gap);
  text-decoration: none;
  color: var(--ink);
}
.brand-tile {
  position: relative;
  flex: none;
  width: var(--tile); height: var(--tile);
  border-radius: var(--tile-radius);
  background: var(--green);
  color: var(--green-ink);
  overflow: hidden;
}
.mark {
  position: absolute;
  left: 12.594%; top: 14.573%;
  width: 79.024%; height: 70.866%;
  overflow: visible;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: var(--weight-high);
  font-size: var(--size-brand);
  line-height: var(--leading-snug);
  letter-spacing: -.01em;
}

/* ---- type ---- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-high);
  color: var(--ink);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(30px, 4.4vw, 40px); line-height: var(--leading-tight); margin: 0 0 var(--space-8); }
h2 { font-size: 22px; line-height: var(--leading-snug); margin: var(--space-48) 0 var(--space-8); scroll-margin-top: var(--space-16); }
h3 { font-size: 17px; line-height: var(--leading-snug); font-weight: var(--weight-med); color: var(--ink); margin: var(--space-24) 0 var(--space-4); }

.meta { color: var(--ink-3); font-size: var(--size-note); margin: 0 0 var(--space-24); }

a { color: var(--green-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

ul { padding-left: 22px; }
li { margin: var(--space-4) 0; }
strong { color: var(--ink); font-weight: var(--weight-med); }

/* ---- blocks ---- */
.summary {
  background: var(--background-brand);
  border-radius: var(--radius-16);
  padding: var(--space-16) var(--space-20);
  margin: var(--space-24) 0;
}
.summary h2 { margin: var(--space-4) 0 var(--space-8); font-size: 18px; }
.summary ul { margin: 0; }

/* The auto-renewal terms. California's ARL wants them "clear and conspicuous",
   so they are boxed apart from the prose around them rather than set inline. */
.notice {
  border: 2px solid var(--green-deep);
  border-radius: var(--radius-16);
  padding: var(--space-4) var(--space-20) var(--space-8);
  margin: var(--space-16) 0;
}
.notice h3 { margin-top: var(--space-16); }
.notice ul ul { margin: 6px 0; }

nav.toc { font-size: 15px; }
nav.toc ol { padding-left: 22px; columns: 2; column-gap: var(--space-32); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--space-12) 0; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: var(--divider) solid var(--border-secondary); }
th { color: var(--ink); font-weight: var(--weight-med); }

.doc-foot {
  margin-top: 56px;
  padding-top: var(--space-16);
  border-top: var(--divider) solid var(--border-secondary);
  color: var(--ink-3);
  font-size: var(--size-note);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}
.doc-foot a { color: var(--ink-3); }

@media (max-width: 560px) {
  nav.toc ol { columns: 1; }
  .doc-top { padding-bottom: var(--space-32); }
}