/* =======================================================================
   LEGAL DOCUMENT PAGE — shared component
   =======================================================================
   The policy-document layout: hero, sticky table of contents, prose, CTA
   strip. Previously each of the five legal subpages carried its own full
   copy of this, and the copies were 97-99% the same file — legal-privacy
   and legal-cookie-policy differed by a single line, and that line was
   itself drift (a hardcoded font stack where the other said var(--body)).
   Any change to the legal layout had to be made five times; the #22
   contrast pass made the same edit five times for that reason.

   Used by:
     legal/biometric.html        legal/privacy.html
     legal/cookie-policy.html    legal/terms.html
     legal/data-protection.html

   Loads BETWEEN base.css and the page sheet, so a page keeps its own
   delta: legal-terms.css its .legalese block, legal-data-protection.css
   its tables and a smaller h3. The other three pages have no delta at all
   and no longer have a stylesheet.

   What did NOT move here: the reset, :root, html/body, `a` and `.mono`.
   base.css already owns all of those, and the copies were redundant — one
   drifted (.mono at .22em against base's .24em) and the rest were subsets.
   A component layer that re-declares the reset is the same bug one level
   up. The dead @keyframes pulse went too: these pages animate .dot with
   pulse-olive, defined below, and never referenced pulse at all.
   ===================================================================== */

.hero {
  position: relative; min-height: 56vh;
  padding: 22vh 0 10vh;
  border-bottom: 1px solid var(--hair);
  overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(15,15,15,.05) 0 1px, transparent 1px 88px);
  mask-image: linear-gradient(to bottom, transparent 0, black 22%, black 75%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: ""; position: absolute;
  left: 65%; top: 50%; width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(121,152,45,.12), rgba(121,152,45,0) 60%);
  filter: blur(40px);
  pointer-events: none; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center;
  color: var(--accent-ink); gap: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(121,152,45,.18);
  animation: pulse-olive 2.6s ease-in-out infinite;
}
@keyframes pulse-olive {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(121,152,45,.5); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(121,152,45,0); }
}
.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.012em; line-height: .96;
  font-size: clamp(48px, 7vw, 120px);
  max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-deck {
  max-width: 62ch; color: var(--dim);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5; margin-top: 6px;
}
.hero-deck strong { color: var(--text); font-weight: 500; }
.hero-meta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 36px;
  border-top: 1px solid var(--hair);
  padding-top: 24px;
  max-width: 980px;
}
.hero-meta dt {
  color: var(--dim-2); margin-bottom: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
.hero-meta dd {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; font-size: 20px;
  letter-spacing: -0.005em;
}
.hero-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  transition: color .2s var(--ease);
  margin-bottom: -8px;
}
.hero-back:hover { color: var(--accent); }
.hero-back .arrow { transition: transform .2s var(--ease); display: inline-block; }
.hero-back:hover .arrow { transform: translateX(-3px); }

.policy-body {
  padding: 10vh 0 16vh;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.policy-body-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
  display: grid;
  grid-template-columns: minmax(220px, 28%) 1fr;
  gap: 80px; align-items: start;
}
.policy-toc {
  position: sticky; top: 14vh;
  border-top: 1px solid var(--hair-strong);
  padding-top: 22px;
  max-height: calc(100vh - 18vh);
  overflow-y: auto;
}
.policy-toc-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim-2);
  margin-bottom: 16px;
}
.policy-toc ol { list-style: none; display: flex; flex-direction: column; counter-reset: toc; }
.policy-toc li { counter-increment: toc; border-bottom: 1px solid var(--hair); }
.policy-toc a {
  display: flex; gap: 10px;
  padding: 12px 0 12px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--dim);
  border-left: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.policy-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; color: var(--dim-2);
  flex-shrink: 0; padding-top: 1px;
}
.policy-toc a:hover { color: var(--text); background: rgba(15,15,15,.03); }
.policy-toc a.is-active {
  color: var(--text); border-left-color: var(--accent);
  font-weight: 500;
}
.policy-toc a.is-active::before { color: var(--accent); }

.policy-prose { max-width: 64ch; }
.policy-prose > .policy-intro {
  color: var(--dim);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hair);
}
.policy-prose > .policy-intro p + p { margin-top: 16px; }
.policy-prose h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.005em; line-height: 1.05;
  margin: 56px 0 18px;
  scroll-margin-top: 14vh;
  color: var(--text);
}
.policy-prose h2:first-of-type { margin-top: 0; }
.policy-prose h2 .num {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; color: var(--accent);
  margin-right: 14px; vertical-align: middle;
  padding-right: 14px;
  border-right: 1px solid var(--hair-strong);
}
/* h3 is the 17px/36px value used by cookie-policy, privacy and terms.
   data-protection wants 16px/32px and keeps that override in its own
   sheet — that one is a real per-document delta, not drift. */
.policy-prose h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0;
  margin: 36px 0 14px;
  color: var(--text);
}
.policy-prose .addr {
  display: block;
  font-family: var(--mono); font-size: 13px;
  line-height: 1.7; letter-spacing: .02em;
  color: var(--text);
  padding: 18px 22px;
  border: 1px solid var(--hair);
  background: var(--bg-2);
  margin: 22px 0;
  white-space: pre-line;
}
.policy-prose p {
  font-size: 17px; line-height: 1.6;
  color: var(--dim); margin-bottom: 18px;
}
.policy-prose ul, .policy-prose ol {
  margin: 0 0 22px 18px;
  font-size: 17px; line-height: 1.6;
  color: var(--dim);
}
.policy-prose li { margin-bottom: 8px; }
.policy-prose li::marker { color: var(--accent); }
.policy-prose a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.policy-prose strong { color: var(--text); font-weight: 500; }

.cta-strip {
  padding: 14vh 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 50% 50%, rgba(182,245,0,.10), transparent 60%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.cta-strip .mono { color: var(--accent); display: inline-block; margin-bottom: 22px; }
.cta-strip h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.012em; line-height: .96;
  font-size: clamp(40px, 6vw, 96px);
  max-width: 18ch; margin: 0 auto 34px;
}
.cta-strip h2 em { font-style: normal; color: var(--accent); }
.cta-actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) {
  .policy-body-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Let the stacked columns shrink — without this a long token (a URL in
     the prose, a wide table) pushes the grid wider than the viewport.
     Only legal-terms.css had it; it belongs to the layout, not to one
     document. See the grid rule in AGENTS.md. */
  .policy-toc, .policy-prose { min-width: 0; }
  .policy-toc { position: static; max-height: none; padding-top: 16px; }
  .policy-toc ol { max-height: 220px; overflow-y: auto; border: 1px solid var(--hair); }
}
@media (max-width: 720px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Small green text — WCAG AA (#22). Brand green is 3.02:1 on cream and small
 text needs 4.5:1, so these use --accent-ink (green-900, 7.26:1). The token
 and the full reasoning live in base.css; it resolves back to brand green on
 dark sections, so this is only darker where it was failing. */
.policy-prose h2 .num { color: var(--accent-ink); }
.policy-prose a { color: var(--accent-ink); }