/* =========================================================================
   LEGAL.CSS — shared design for the legal document pages
   /terms, /privacy, /hardwareterms (sources: src/site/pages/<slug>.html).
   The corporate LIGHT register (same family as /experiences/enterprise and
   /press): white stage, black ink, hairline rules, Fragment Mono labels, the
   bevel shape system, one violet signal (the contents rail's current marker).
   Long-form reading: ink runs a step off pure black, measure capped at 68ch.
   Classes namespaced .doc-*.
   ========================================================================= */

body { background: var(--white); }
.legal { position: relative; color: var(--paper); }
.legal > section:not(.doc-prefooter) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Page head -- */
.doc-head h1 { margin: .35em 0 0; max-width: 16ch; text-wrap: balance; }
.doc-meta { margin: 20px 0 0; font-family: var(--font-mono); font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.doc-head .container { padding-bottom: var(--s-40); border-bottom: 0; }

/* --------------------------------------------------------- Two-col shell -- */
/* The rail + document group centers in the container (a left-hugging column
   leaves the right third of a wide screen dead). Head and Also-see share the
   same grid so every part of the page keys to the same left edge. */
.doc-wrap { padding-top: var(--s-40); }
.doc-layout, .doc-head .container, .doc-also .container { display: grid;
  grid-template-columns: 264px minmax(0, 68ch);
  gap: clamp(48px, 6vw, 112px); justify-content: center; }
.doc-head .container > *, .doc-also .container > * { grid-column: 1 / -1; }
.doc-head .container { row-gap: 0; }
.doc-also .container { row-gap: 0; }
@media (max-width: 991px) {
  .doc-layout, .doc-head .container, .doc-also .container {
    grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- Contents rail -- */
/* Mono instrument index. Sticky on desktop (JS forces the details open and
   hides the summary); a collapsible "Contents" block on mobile. The current
   section carries the page's one violet signal: a small caliper tick. */
.doc-toc { align-self: start; }
@media (min-width: 992px) { .doc-toc { position: sticky; top: 112px; } }
.doc-toc summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--paper);
  padding: 14px 16px; border: 1px solid var(--hairline);
  border-radius: 2px 2px 12px 2px; corner-shape: round round bevel round; }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::after { content: "+"; color: var(--muted); }
.doc-toc details[open] summary::after { content: "\2212"; }
@media (min-width: 992px) {
  .doc-toc summary { display: none; }
}
.doc-toc ol { margin: 0; padding: 16px 0 0; list-style: none; }
@media (max-width: 991px) {
  .doc-toc ol { padding: 8px 16px 14px; border: 1px solid var(--hairline); border-top: 0;
    margin-top: -12px; border-radius: 0 0 12px 2px; corner-shape: round round bevel round; }
}
.doc-toc li { margin: 0; }
/* Fragment Mono is always set in caps (the label voice; see DESIGN.md) */
.doc-toc a { position: relative; display: block; padding: 7px 0 7px 18px;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.5;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  transition: color var(--dur-fast) var(--ease-signature); }
.doc-toc a:hover { color: var(--paper); }
/* the caliper tick: a violet dash that appears on the current section */
.doc-toc a::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 2px; margin-top: -1px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-signature); }
.doc-toc a.is-current { color: var(--paper); }
.doc-toc a.is-current::before { transform: scaleX(1); }
/* part breaks inside the index (Hardware Terms bundles several documents):
   a hairline + air above, and the entry itself set in uppercase */
.doc-toc li.doc-toc__break { margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline); }
.doc-toc li.doc-toc__break a { letter-spacing: .08em;
  color: color-mix(in srgb, var(--muted), var(--paper) 25%); }

/* ------------------------------------------------------------- Document -- */
/* Ink steps off pure black for long reading; headings stay full ink. */
.doc-body { --doc-ink: color-mix(in srgb, var(--paper) 78%, var(--white));
  font-size: 1.0625rem; line-height: 1.65; color: var(--doc-ink); }
.doc-body p { margin: 0 0 1.1em; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body a { color: var(--brand); border-bottom: 1px solid rgba(77,30,247,.4);
  transition: border-color var(--dur); overflow-wrap: anywhere; }
.doc-body a:hover { border-color: var(--brand); }
.doc-body ul, .doc-body ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.doc-body li { margin: 0 0 .55em; }
.doc-body li::marker { color: var(--muted); }
.doc-body ul ul, .doc-body ol ol { margin-top: .55em; }

/* Intro (preamble before the first section) */
.doc-intro { padding-bottom: var(--s-24); }

/* Sections: hairline-ruled rows, generous rhythm, anchor offset for the nav */
.doc-sec { padding: var(--s-32) 0 var(--s-40); border-top: 1px solid var(--hairline); }
.doc-sec > h2 { margin: 0 0 20px; font-weight: 500; font-size: 1.5rem;
  line-height: 1.25; letter-spacing: -.01em; color: var(--paper); text-wrap: balance; }
.doc-sec h3 { margin: 32px 0 12px; font-weight: 500; font-size: 1.1875rem;
  line-height: 1.3; color: var(--paper); }
.doc-sec h4 { margin: 28px 0 10px; font-weight: 500; font-size: 1.0625rem;
  line-height: 1.35; color: var(--paper); }

/* Part breaks (Hardware Terms bundles several documents on one page) */
.doc-part { padding-top: var(--s-64); }
.doc-part > h2 { font-size: clamp(1.75rem, 2.6vw, 2rem); }

/* ------------------------------------------------------------- Also see -- */
.doc-also { padding: var(--s-64) 0 var(--s-120); }
.doc-also .hairline { border-top-color: var(--hairline); }
.doc-also__label { margin: var(--s-32) 0 0; font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.doc-also__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-16); }
.doc-also__links a { display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: 0 20px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); border: 1px solid var(--hairline);
  border-radius: 2px 2px 14px 2px; corner-shape: round round bevel round;
  transition: border-color var(--dur) var(--ease-signature); }
.doc-also__links a:hover { border-color: var(--muted); }

/* ------------------------------- Prefooter circuit band (light register) --
   Same construction as /press and /experiences/enterprise: absolutely pinned
   line-art at the page foot, running up behind the content (z-index 1 above),
   settling into the white footer plate. Brighter layer wakes near the cursor. */
@property --doc-cr { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes doc-circuitWake { from { opacity: 0; } 55% { opacity: .18; } to { opacity: .14; } }
.doc-prefooter {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(380px, 40vw, 580px); overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(244,243,243,.5) 26%, var(--off-white) 58%, #E7E7EA 100%);
  --doc-cr: 0px; transition: --doc-cr .85s cubic-bezier(.16, 1, .3, 1); }
.doc-prefooter.is-probing { --doc-cr: 620px; }
.doc-prefooter::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/landing/assets/006-asset.svg") center center / cover no-repeat;
  filter: invert(1); opacity: .2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.doc-prefooter::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/landing/assets/007-asset.svg") center center / cover no-repeat;
  filter: invert(1); opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 62%, transparent 100%), radial-gradient(circle var(--doc-cr) at var(--cx) var(--cy), #000 0%, transparent 78%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 62%, transparent 100%), radial-gradient(circle var(--doc-cr) at var(--cx) var(--cy), #000 0%, transparent 78%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: opacity .6s ease; }
.doc-prefooter.is-probing::after { opacity: .14; animation: doc-circuitWake 1.05s cubic-bezier(.16, 1, .3, 1) both; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .doc-prefooter::after { opacity: 0; }
  .doc-prefooter { transition: none; }
}