/*
 * Valnivo Professional's documents — the product's own identity, on paper.
 *
 * **These pages are not the consumer site's.** They were published on
 * 2026-09-22 wearing `paper.css`, which is the consumer app's light half, and
 * the owner sent them back: a firm reading the terms it is about to accept
 * should be reading them in the product those terms are for. So this is the
 * modernist identity — plum ink on warm paper, one green accent, Archivo at two
 * weights, square corners, rules instead of shadows — laid out for reading
 * rather than for an application.
 *
 * **It is the third copy of that palette and the last one that may exist.**
 * `src/pro/pro.css` carries it for the application and `enterprise/index.html`
 * writes it out again because that page has no bundle. The same is true here:
 * these documents are static HTML with no JavaScript at all, so they cannot
 * import anything, and a stylesheet is the nearest thing to sharing available.
 * `tests/enterprise.test.ts` holds all three to the same values, in both
 * directions, so a colour that moves has to move everywhere or the build fails.
 *
 * Self-hosted Archivo, from `/fonts/`, for the reason every page here does it:
 * a privacy notice that fetches a font from Google is a privacy notice arguing
 * with itself.
 */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/archivo-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/archivo-800.woff2') format('woff2'); }

:root {
  --color-bg: #f6f5f1;
  --color-surface: #ecebe5;
  --color-text: #24203b;
  --color-accent: #1f7a5c;
  --color-divider: color-mix(in srgb, #24203b 40%, transparent);

  --color-neutral-100: #f7f5f6;
  --color-neutral-200: #e9e6ec;
  --color-neutral-300: #d5d1dc;
  --color-neutral-400: #b7b2c2;
  --color-neutral-500: #9791a5;
  --color-neutral-600: #787287;
  --color-neutral-700: #5b5569;
  --color-neutral-800: #413b50;
  --color-neutral-900: #2b2740;

  --color-accent-100: #e8f6ef;
  --color-accent-600: #1f7a5c;
  --color-accent-700: #175e47;
  --color-accent-800: #124535;

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: 'Archivo', system-ui, sans-serif;

  /* The same gutter the product uses, so its pages and its documents line up. */
  --pro-gutter: clamp(24px, 4vw, 72px);
  /*
   * **A reading measure, and it is this product's one exception.** The
   * application is full-bleed; a contract is not, because a clause read at 1440px
   * is a clause nobody finishes. 70ch is wider than prose usually wants because
   * these documents are full of `code` spans and article references that should
   * not wrap mid-citation.
   */
  --pro-measure: 70ch;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* ═══ The band ═══ */

.pg-band { border-bottom: 4px solid var(--color-text); }
.pg-band-inner { padding: 18px var(--pro-gutter); }
.pg-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pg-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; color: var(--color-text); text-decoration: none;
}
.pg-brand:hover { color: var(--color-accent); }
.pg-links { display: flex; gap: 20px; flex-wrap: wrap; margin-right: auto; }
.pg-links a, .pg-open {
  color: var(--color-text); text-decoration: none; font-size: 14px;
}
.pg-links a:hover { color: var(--color-accent); }
.pg-links a[aria-current='page'] { color: var(--color-accent); font-weight: 500; }
.pg-open {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; background: var(--color-accent); color: var(--color-bg);
  padding: 8px 14px; border-radius: 0;
}
.pg-open:hover { background: var(--color-accent-700); color: var(--color-bg); }

/* ═══ The document ═══ */

.pg-solo {
  max-width: var(--pro-measure);
  margin: 0 auto;
  padding: 56px var(--pro-gutter) 96px;
}

.stamp {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 12px;
}

h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 16px;
}

/*
 * **A 4px rule over every section**, which is the identity's own way of saying
 * where a break is: this design separates with weight rather than with space,
 * and a contract is mostly section breaks.
 */
h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 56px 0 16px; padding-top: 20px;
  border-top: 4px solid var(--color-text);
}
h3 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 18px; margin: 32px 0 10px;
}

p { margin: 0 0 16px; }
strong { font-weight: 600; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

.meta {
  font-size: 13px; color: var(--color-neutral-700);
  margin: 0 0 8px; padding-bottom: 24px;
}

hr {
  border: 0; border-top: 1px solid var(--color-divider);
  margin: 32px 0;
}

ul { margin: 0 0 18px; padding-left: 20px; }
li { margin: 0 0 10px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--color-surface);
  padding: 1px 5px; border-radius: 0;
}

/*
 * A table is rules and nothing else — no zebra, no fill, no border box. The
 * annexes in the processing agreement are all tables, and a shaded grid in the
 * middle of a contract reads as a screenshot of a spreadsheet.
 */
table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px;
}
th, td {
  text-align: left; vertical-align: top; padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
th {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid var(--color-text);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

@media (max-width: 640px) {
  .pg-solo { padding-top: 36px; }
  h2 { margin-top: 40px; }
}