/* Utility pages: Contact, General enquiry, their two "received" pages, the four legal documents and the 404.
   One calm dark template, linked on pages that declare <!--@group:doc-->. Built to sit with the company pages
   (assets/pages/company): the same void ground and blue wash, the same eyebrow with its dot, the same light
   display heading and the same index rows.

   Markup
   <main id="main"><section class="doc doc--<variant>" aria-labelledby="doc-h"><div class="wrap doc__in">
     <header class="doc__lede">
       <p class="doc__k rv">Legal</p>                                eyebrow: the page name, with the dot
       <h1 class="doc__h rv" id="doc-h">Privacy Policy</h1>
       <p class="doc__p rv">One line.</p>                            optional
     </header>
     ...the variant's parts...
   </div></section></main>

   Variants
   .doc--legal   lede across the top; then a sticky side column (.doc__side: the four legal documents as
                 .doc__index, then the page's contents as .doc__toc, a <details> that is open on wide screens
                 and folds away on narrow ones) and the document itself (.doc__body, about 70 characters a line).
                 Inside .doc__body: h2 (with id) / h3 / p / ul > li / a; numbered clauses as
                 <p class="doc-cl doc-cl--1|2|3"><span class="doc-cl__m">1. </span><span class="doc-cl__t">..</span></p>;
                 the effective-date line as <p class="doc-eff">; .doc-caps on a heading set in capitals shows it in
                 sentence case (the words are unchanged).
   .doc--form    Contact and General enquiry: lede and .doc__info on the left, the form on the right (on narrow
                 screens the form comes straight after the lede). The form reuses the shared contact section's
                 field classes (.contact__form, .contact__field, .contact__tick, .contact__send: assets/shared/
                 contact.css), so the two forms always look alike; .doc-form supplies the tokens they read.
   .doc--note    the received pages and the 404: lede, one or two actions (.doc__acts), and a quiet field of
                 dots (.doc-field) where one dot is lit (received) or missing (404). Top-aligned like every
                 other page, with a minimum height so the footer keeps its place.

   Motion: the site's .rv reveal (the page's inline script); the contents marker steps to the section being
   read; the lit dot pings twice on arrival. Without JS, or with reduced motion, everything is drawn complete and still. */

body:has(.doc) { background: var(--void); }

.doc {
  --dc-ink: var(--paper);
  --dc-text: rgb(247 247 245 / .76);
  --dc-soft: #ffffffb8;
  --dc-mute: var(--mute-dark);
  --dc-line: #ffffff1c;
  --dc-acc: #8fb4ff;
  --dc-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  isolation: isolate;
  background: var(--void);
  color: var(--dc-ink);
  color-scheme: dark;
  padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(3.5rem, 6vw, 5rem);
}
/* the company pages' wash of brand blue from the top left */
.doc::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72rem 44rem at 0% 0%, rgb(0 98 254 / .09), rgb(0 98 254 / .062) 22%, rgb(0 98 254 / .034) 45%, rgb(0 98 254 / .012) 70%, rgb(0 98 254 / 0));
}
.doc ::selection { background: var(--blue); color: #fff; }
.doc :focus-visible { outline-color: var(--dc-acc); }

.doc__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }

/* ---------- Lede ---------- */
.doc__k {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: #ffffffa8;
}
.doc__k::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--dc-acc); }
.doc__h {
  margin-top: 1.5rem; max-width: 14ch;
  font-size: var(--step-display); font-weight: 300; line-height: 1; letter-spacing: -.045em;
  color: var(--dc-ink);
  text-wrap: balance;
}
.doc__p {
  margin-top: 1.5rem; max-width: 40ch;
  font-size: var(--step-1); font-weight: 300; line-height: 1.5; color: var(--dc-soft);
  text-wrap: pretty;
}
/* a date under a document title: set like the eyebrow, quieter */
.doc__p--date {
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dc-mute);
}

/* small mono label, as the company pages' group heads */
.doc__lab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dc-mute);
}
.doc__n { color: #ffffff59; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* ---------- Index of the legal documents (as the company pages' index) ---------- */
.doc__index { display: grid; max-width: 22rem; }
.doc__index .doc__lab { padding-bottom: .75rem; }
.doc__index a {
  display: flex; align-items: center; gap: .875rem; min-height: 2.875rem;
  border-top: 1px solid var(--dc-line);
  color: var(--dc-soft); font-size: .9375rem; line-height: 1.3; text-decoration: none;
  transition: color .2s;
}
.doc__index a:last-child { border-bottom: 1px solid var(--dc-line); }
.doc__index a::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ffffff4d; transition: box-shadow .2s, background-color .2s;
}
.doc__index a:hover { color: var(--dc-ink); }
.doc__index a:hover::before { box-shadow: inset 0 0 0 1px var(--dc-ink); }
.doc__index a[aria-current] { color: var(--dc-ink); }
.doc__index a[aria-current]::before { background: var(--dc-acc); box-shadow: none; }
.doc__index a:focus-visible { outline-offset: -2px; }

/* ---------- Legal: layout ---------- */
.doc--legal .doc__h { max-width: 16ch; }
.doc__side { display: grid; gap: 2rem; min-width: 0; align-content: start; }
@media (width < 960px) {
  /* the four documents as a compact two-by-two grid above the contents */
  .doc--legal .doc__index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; max-width: none; }
  .doc--legal .doc__index .doc__lab { grid-column: 1 / -1; }
  .doc--legal .doc__index a:nth-last-child(2) { border-bottom: 1px solid var(--dc-line); }
}
@media (width >= 960px) {
  .doc--legal .doc__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "lede lede" "side body";
    column-gap: clamp(3rem, 5vw, 4.5rem);
    row-gap: clamp(3rem, 5vw, 4.25rem);
  }
  .doc--legal .doc__lede { grid-area: lede; }
  .doc--legal .doc__side { grid-area: side; }
  .doc--legal .doc__body { grid-area: body; }
  /* the side column stays in view while the document scrolls; a long contents list scrolls inside it */
  .doc__side {
    position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start;
    max-height: calc(100dvh - var(--nav-h) - 3rem);
    overflow-y: auto; overscroll-behavior: contain;
    margin-right: -.75rem; padding-right: .75rem;
    scrollbar-width: thin; scrollbar-color: #ffffff26 transparent;
  }
}
@media (width >= 1280px) { .doc--legal .doc__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* while more of the side column lies below its foot, the foot fades out (doc.js sets .is-more) */
@media (width >= 960px) {
  .doc__side.is-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
  }
}

/* ---------- Legal: contents ---------- */
.doc__toc { min-width: 0; }
.doc__toc summary {
  display: flex; align-items: center; gap: .75rem; min-height: 2.75rem;
  border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line);
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.doc__toc summary::-webkit-details-marker { display: none; }
.doc__toc summary .doc__lab { flex: 1 1 auto; }
/* a plus that turns into a minus: shown only where the contents fold away */
.doc__toc-ic { position: relative; flex: none; width: .75rem; height: .75rem; }
.doc__toc-ic::before, .doc__toc-ic::after {
  content: ""; position: absolute; left: 0; top: calc(50% - .5px); width: 100%; height: 1px; background: var(--dc-soft);
  transition: transform .25s var(--dc-ease);
}
.doc__toc-ic::after { transform: rotate(90deg); }
.doc__toc[open] .doc__toc-ic::after { transform: rotate(0deg); }
.doc__toc summary:hover .doc__lab { color: var(--dc-soft); }
.doc__toc summary:focus-visible { outline-offset: -2px; }

/* the list hangs from a hairline track; the current section is marked by a blue dot on the track */
.doc__toc ol {
  position: relative;
  display: grid; margin: 1rem 0 .5rem; padding: 0 0 0 1.125rem; list-style: none;
  border-left: 1px solid var(--dc-line);
  margin-left: 3px;
}
.doc__toc li { position: relative; }
.doc__toc a {
  display: block; padding: .3125rem 0;
  color: var(--dc-mute); font-size: .875rem; line-height: 1.35; letter-spacing: -.005em; text-decoration: none;
}
.doc__toc a:hover { color: var(--dc-ink); }
.doc__toc a[aria-current] { color: var(--dc-ink); }
.doc__toc a::before {
  content: ""; position: absolute; left: calc(-1.125rem - 4px); top: calc(.3125rem + .675em - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dc-acc); box-shadow: 0 0 0 3px var(--void);
  opacity: 0;
}
/* the marker moves with the reader: an instant step, so it is never caught half-drawn */
.doc__toc a[aria-current]::before { opacity: 1; }
.doc__toc a:focus-visible { outline-offset: 2px; }
/* touch screens: taller rows, so a tap lands on the section meant (they were 29px, stacked edge to edge) */
@media (width < 960px) {
  .doc__toc a { padding-block: .625rem; }
  .doc__toc a::before { top: calc(.625rem + .675em - 3.5px); }
}

@media (width >= 960px) {
  /* on wide screens doc.js keeps the contents open and the summary is a plain label (without JS it stays a
     toggle, folded until opened) */
  html.js .doc__toc summary { min-height: 0; padding-bottom: .75rem; border-top: 0; cursor: default; pointer-events: none; }
  html.js .doc__toc summary:focus-visible { outline: none; }
  html.js .doc__toc-ic { display: none; }
  .doc__toc { max-width: 22rem; }
  .doc__toc ol { margin-top: 1.25rem; }
}

/* ---------- Legal: the document ---------- */
/* 68ch of Geist's wide "0" is about 100 characters of text, so the measure is capped at 36rem: 70 to 78
   characters a line on average */
.doc__body {
  min-width: 0; max-width: min(68ch, 36rem);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); font-weight: 300; line-height: 1.7; letter-spacing: -.006em;
  color: var(--dc-text);
  overflow-wrap: break-word;
}
.doc__body > * + * { margin-top: 1.05em; }
.doc__body h2 {
  margin-top: clamp(2.75rem, 5vw, 3.75rem); padding-top: clamp(1.5rem, 2.6vw, 2rem);
  border-top: 1px solid var(--dc-line);
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); font-weight: 300; line-height: 1.15; letter-spacing: -.028em;
  color: var(--dc-ink);
  text-wrap: balance;
}
.doc__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc__body h3 {
  margin-top: 2.25rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 400; line-height: 1.3; letter-spacing: -.015em;
  color: var(--dc-ink);
}
.doc__body :is(h2, h3) + * { margin-top: 1.125rem; }
/* a heading set in capitals in the source reads in sentence case (the words themselves are unchanged) */
.doc-caps { text-transform: lowercase; }
.doc-caps::first-letter { text-transform: uppercase; }
.doc__toc .doc-caps { display: block; }

.doc__body ul { display: grid; gap: .625rem; padding: 0; list-style: none; }
.doc__body li { position: relative; padding-left: 1.5rem; }
/* bullets are the brand's dot */
.doc__body li::before {
  content: ""; position: absolute; left: .25rem; top: calc(.85em - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--dc-acc); opacity: .85;
}
.doc__body li > p + p { margin-top: .5em; }
.doc__body a {
  color: var(--dc-ink);
  text-decoration: underline 1px rgb(255 255 255 / .38); text-underline-offset: .2em;
  overflow-wrap: anywhere;
  transition: text-decoration-color .18s;
}
.doc__body a:hover { text-decoration-color: var(--dc-ink); text-decoration-thickness: 2px; }
.doc__body strong { font-weight: 500; color: var(--dc-ink); }

.doc-eff {
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dc-mute);
}
.doc-eff + * { margin-top: 1.5rem; }

/* numbered clauses: a hanging mono marker, nested by level */
.doc-cl { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); }
.doc-cl__m {
  padding-top: .22em; white-space: nowrap;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.6; letter-spacing: .02em;
  color: var(--dc-mute); font-variant-numeric: tabular-nums;
}
.doc-cl--1 .doc-cl__m { color: var(--dc-acc); }
.doc-cl--2 { margin-left: 2.25rem; grid-template-columns: 2rem minmax(0, 1fr); }
.doc-cl--3 { margin-left: 4.25rem; grid-template-columns: 2.25rem minmax(0, 1fr); }
.doc__body .doc-cl + .doc-cl:not(.doc-cl--1) { margin-top: .55em; }
@media (width < 600px) {
  .doc-cl { grid-template-columns: 1.875rem minmax(0, 1fr); }
  .doc-cl--2 { margin-left: 1rem; grid-template-columns: 1.75rem minmax(0, 1fr); }
  .doc-cl--3 { margin-left: 2rem; grid-template-columns: 2.25rem minmax(0, 1fr); }
}

/* ---------- Form pages (Contact, General enquiry) ---------- */
/* tokens the shared contact field styles read (they are set on .contact in contact.css) */
.doc-form {
  --c-acc: #8fb4ff;
  --c-ease: cubic-bezier(.22, .61, .36, 1);
  --c-text: rgb(255 255 255 / .72);
  --c-soft: rgb(255 255 255 / .6);
  --c-rule: rgb(255 255 255 / .34);
  --c-warn: #ff9b8a;
  min-width: 0;
}
.doc-form .contact__form { color: var(--dc-ink); }
.doc-form .contact__send { margin-top: .25rem; }
.doc--form .doc__h { max-width: 11ch; }

.doc__info { display: grid; gap: 2.25rem; align-content: start; max-width: 34rem; }
.doc__info-g { display: grid; gap: 1rem; }
.doc__info-g .doc__lab { padding-bottom: .875rem; border-bottom: 1px solid var(--dc-line); }
.doc__info-g p:not(.doc__lab),
.doc__addr {
  font-size: var(--step-0); font-weight: 300; line-height: 1.65; color: var(--dc-text);
  text-wrap: pretty;
}
.doc__addr { display: grid; font-style: normal; }

@media (width >= 1000px) {
  .doc--form .doc__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "lede form" "info form";
    column-gap: var(--gap-col);
    row-gap: clamp(2.5rem, 4vw, 3.5rem);
  }
  .doc--form .doc__lede { grid-area: lede; }
  .doc--form .doc__info { grid-area: info; }
  .doc--form .doc-form { grid-area: form; align-self: start; }
}

/* ---------- Links (a quiet arrow link, and rows of them) ---------- */
.doc__link {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem;
  color: var(--dc-ink); font-size: .9375rem; text-decoration: none;
}
.doc__link-t { border-bottom: 1px solid #ffffff40; padding-bottom: 1px; transition: border-color .2s; }
.doc__link-a { font-family: var(--mono); color: var(--dc-acc); transition: transform .3s var(--dc-ease); }
.doc__link:hover .doc__link-t { border-color: var(--dc-ink); }
.doc__link:hover .doc__link-a { transform: translateX(2px); }

/* a ghost pill, the shape of the site's buttons */
.doc-btn {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem;
  padding: .4375rem .4375rem .4375rem 1.25rem;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 999px;
  background: rgb(255 255 255 / .03);
  color: var(--dc-ink); font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; text-decoration: none;
  transition: background-color .2s var(--dc-ease), border-color .2s var(--dc-ease);
}
.doc-btn__disc {
  display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: rgb(255 255 255 / .1); font-size: .8125rem; line-height: 1;
  transition: background-color .2s var(--dc-ease), transform .3s var(--dc-ease);
}
.doc-btn:hover { background: var(--blue); border-color: var(--blue); }
.doc-btn:hover .doc-btn__disc { background: rgb(255 255 255 / .2); transform: translateX(2px); }

.doc-rows { display: grid; justify-self: stretch; max-width: 26rem; margin: 0; padding: 0; list-style: none; }
.doc-rows li + li .doc-row { border-top: 0; }
.doc-row {
  display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; column-gap: .875rem;
  min-height: 3.25rem; border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line);
  color: var(--dc-soft); font-size: 1rem; line-height: 1.3; text-decoration: none;
  transition: color .2s;
}
.doc-row::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ffffff4d; transition: box-shadow .2s, background-color .2s;
}
.doc-row__a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #ffffff33; color: var(--dc-soft); font-size: 1rem; line-height: 1;
  transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--dc-ease);
}
.doc-row:hover { color: var(--dc-ink); }
.doc-row:hover::before { background: var(--dc-acc); box-shadow: none; }
.doc-row:hover .doc-row__a { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateX(2px); }
.doc-row:focus-visible { outline-offset: -2px; }

/* ---------- Note pages (received, 404) ---------- */
.doc--note { min-height: max(30rem, calc(100svh - var(--nav-h) - 8rem)); }
.doc--note .doc__h { max-width: 13ch; }
.doc__acts { display: grid; gap: 1.5rem; justify-items: start; }
.doc__acts > p { max-width: 44ch; font-size: var(--step-0); font-weight: 300; line-height: 1.65; color: var(--dc-text); text-wrap: pretty; }
@media (width >= 960px) {
  .doc--note .doc__in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "lede field" "acts field";
    column-gap: var(--gap-col);
    row-gap: 2.5rem;
  }
  .doc--note .doc__lede { grid-area: lede; }
  .doc--note .doc__acts { grid-area: acts; align-self: start; }
  .doc--note .doc-field { grid-area: field; align-self: center; }
}

/* the field of dots: every dot one person; one is lit (received) or missing (404) */
.doc-field { margin: 0; min-width: 0; }
.doc-field svg {
  display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.doc-field .f-d { fill: #fff; opacity: .16; }
.doc-field .f-on { fill: var(--blue); }
.doc-field .f-halo { fill: none; stroke: var(--dc-acc); stroke-width: 1; opacity: .5; }
.doc-field .f-gap { fill: none; stroke: var(--dc-acc); stroke-width: 1.25; stroke-dasharray: 2.2 2.2; }
.doc-field .f-ping { fill: none; stroke: var(--dc-acc); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (width < 960px) {
  .doc-field svg { max-width: 22rem; margin-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .doc-field .f-ping { animation: doc-ping 2.4s ease-out .5s 2; }
}
@keyframes doc-ping {
  0% { transform: scale(.3); opacity: .85; }
  70% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .doc__index a, .doc__index a::before, .doc__toc-ic::before, .doc__toc-ic::after,
  .doc__link-t, .doc__link-a, .doc-btn, .doc-btn__disc, .doc-row, .doc-row::before, .doc-row__a { transition: none; }
  .doc__link:hover .doc__link-a, .doc-btn:hover .doc-btn__disc, .doc-row:hover .doc-row__a { transform: none; }
}
@media print {
  .doc { background: #fff; color: #000; padding-block: 0; }
  .doc::before, .doc__side, .doc-field { display: none; }
  .doc--legal .doc__in { display: block; }
  .doc__h, .doc__body, .doc__body h2, .doc__body h3, .doc__body a { color: #000; }
  .doc__body { max-width: none; }
}