/*
  The site's shared look, for the pages that are not the landing page:
  privacy, terms, sub-processors and support, and the account console's
  fonts. The tokens are the landing page's own (pages/landing/src/styles/
  tokens.css, the dark ground), so every page reads as one product. Served
  same-origin at /site/, because these pages' policy admits no other.

  Fonts: Ranade (display) and Satoshi (body) from Fontshare, ITF Free Font
  Licence; Share Tech Mono and Instrument Serif from Google Fonts, SIL OFL.
*/
@font-face { font-family: "Ranade"; src: url("fonts/Ranade-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("fonts/Ranade-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("fonts/ShareTechMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Upright, for the Witness wordmark only. */
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --h: 275; --c: 0.13;
  --r: 12px; --r-s: 6px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-display: "Ranade", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Share Tech Mono", "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);

  --bg: oklch(15% calc(var(--c) * 0.32) var(--h));
  --bg-2: oklch(19% calc(var(--c) * 0.36) var(--h));
  --bg-3: oklch(24% calc(var(--c) * 0.4) var(--h));
  --fg: oklch(96% 0.012 var(--h));
  --fg-2: oklch(80% calc(var(--c) * 0.35) var(--h));
  --fg-3: oklch(64% calc(var(--c) * 0.35) var(--h));
  --accent: oklch(74% var(--c) var(--h));
  --accent-2: oklch(86% calc(var(--c) * 0.55) calc(var(--h) + 18));
  --accent-ink: oklch(16% calc(var(--c) * 0.4) var(--h));
  --line: oklch(60% calc(var(--c) * 0.5) var(--h) / 0.28);
  --line-2: oklch(70% calc(var(--c) * 0.5) var(--h) / 0.5);
  --glow: oklch(74% var(--c) var(--h) / 0.35);
  --ok: oklch(80% 0.14 150);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  accent-color: var(--accent);
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-s); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: currentColor; }
img { display: block; max-width: 100%; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The lockup: the f/∞ mark, "Witness", and "by" the Apertrue wordmark. The
   brand images are masks, so the mark and "true" take the button's lilac. */
.wordmark { --lk: 1; display: inline-flex; align-items: baseline; gap: calc(8px * var(--lk)); text-decoration: none; color: var(--fg); }
.wordmark-mark { align-self: center; height: calc(19px * var(--lk)); aspect-ratio: 346 / 199; flex-shrink: 0; --mask: url("brand/f-infinity.png"); }
.wordmark-text { font-family: "Instrument Serif", var(--font-display), serif; font-size: calc(27px * var(--lk)); line-height: 1; }
.wordmark-by { display: inline-flex; align-items: baseline; gap: calc(6px * var(--lk)); font-size: calc(11px * var(--lk)); color: var(--fg-3); margin-left: 2px; }
.wordmark-apertrue { position: relative; display: inline-block; height: calc(13px * var(--lk)); aspect-ratio: 790 / 229; transform: translateY(calc(2px * var(--lk))); flex-shrink: 0; }
.wordmark-apertrue img { height: 100%; width: 100%; }
.wordmark-apertrue .tinted { position: absolute; inset: 0; --mask: url("brand/apertrue-true.png"); }
/* The stacked lockup, as on the landing page: "Apertrue" with the f/∞ raised
   at its end and "Witness" beneath, right-aligned; the words take the text
   colour, "true" and the f/∞ the lilac. Box = the outlines' own proportion. */
.stacked-lockup { position: relative; display: block; height: var(--stack-h, 40px); aspect-ratio: 3605 / 1577; width: calc(var(--stack-h, 40px) * 3605 / 1577); flex-shrink: 0; }
.stacked-part { position: absolute; inset: 0; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.stacked-base { background: var(--fg); --mask: url("brand/lockup-stacked-base.png"); }
.stacked-accent { --mask: url("brand/lockup-stacked-accent.png"); }
.nav-lockup { --stack-h: 40px; align-items: center; }
.tinted { display: inline-block; background: linear-gradient(180deg, var(--accent-2), var(--accent)); -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }

/* The bar along the top, as on the landing page. */
.site-nav { position: sticky; top: 0; z-index: 40; }
.nav { display: flex; align-items: center; gap: 24px; height: 60px; padding-inline: var(--gutter); background: color-mix(in oklch, var(--bg) 62%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); }
.nav-links { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: 14px; }
.nav-links a, .nav-signin { text-decoration: none; color: var(--fg-2); font-size: 14px; white-space: nowrap; }
.nav-links a:hover, .nav-signin:hover { color: var(--fg); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-signin { margin-left: auto; } }
@media (max-width: 560px) { .nav .wordmark-by { display: none; } }

/* The lilac pill. The landing page's rim is WebGL; this is the same chrome
   drawn in CSS, for pages that run no script. */
@property --rim-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 999px; isolation: isolate; text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.35), 0 9px 9px -4px oklch(0% 0 0 / 0.14), 0 10px 30px -14px var(--glow); transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out); }
.pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--rim-angle), oklch(100% 0 0 / 0.95), oklch(80% 0.03 var(--h) / 0.3) 60deg, oklch(100% 0 0 / 0.15) 140deg, oklch(100% 0 0 / 0.9) 200deg, oklch(70% 0.03 var(--h) / 0.25) 260deg, oklch(100% 0 0 / 0.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: rim-turn 7s linear infinite; }
@keyframes rim-turn { to { --rim-angle: 360deg; } }
@media (hover: hover) and (pointer: fine) { .pill:hover { filter: brightness(1.06); } }
.pill:active { transform: translateY(1px) scale(0.98); }
@media (prefers-reduced-motion: reduce) { .pill::before { animation: none; } }

/* A document: the legal pages and support. */
.doc { flex: 1; width: 100%; max-width: calc(44rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 8vh, 88px) var(--gutter) clamp(56px, 10vh, 112px); background: radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 70%); }
.doc h1, .doc h2, .doc h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; color: var(--fg); }
.doc h1 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.05; margin: 0 0 .9rem; }
.doc h2 { font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.2; margin: 3rem 0 .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.doc h3 { font-size: 1.1rem; line-height: 1.3; margin: 1.75rem 0 .4rem; }
.doc p, .doc li { color: var(--fg-2); margin: 0 0 .9rem; }
.doc ul, .doc ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.doc li { margin-bottom: .5rem; }
.doc li::marker { color: var(--fg-3); }
.doc strong { color: var(--fg); font-weight: 500; }
.doc a { color: var(--accent); text-decoration-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.doc a:hover { text-decoration-color: currentColor; }
.doc code { font-family: var(--font-mono); font-size: .92em; color: var(--fg); }
.doc .lede { font-size: 1.15rem; line-height: 1.55; color: var(--fg-2); margin-bottom: 2.25rem; }
.doc .dated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 1.25rem; }
.doc .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem 1.35rem; margin: 0 0 1rem; }
.doc .card p:last-child { margin-bottom: 0; }
.doc .contact { font-size: 1.15rem; }
.doc .scroll { overflow-x: auto; margin: 0 0 1rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.doc th { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* The footer, as on the landing page. */
.site-footer { padding-block: clamp(48px, 8vh, 80px) clamp(28px, 4vh, 44px); border-top: 1px solid var(--line); background: radial-gradient(35% 80% at 30% 0%, color-mix(in oklch, var(--accent) 10%, transparent), transparent), var(--bg); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 28px; align-items: start; }
.foot-brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.foot-lockup { --stack-h: clamp(64px, 7vw, 88px); }
.foot-line { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: var(--fg); letter-spacing: -0.01em; }
.foot-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-head { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.foot-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; line-height: 1.5; }
.foot-group a { color: var(--fg-2); text-decoration: none; }
.foot-group a:hover { color: var(--fg); }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 11px; color: var(--fg-3); padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; } .foot-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The explainer at /how: a numbered journey with one schematic per stage,
   drawn as inline SVG and styled here, since the page admits no inline
   style. Hairline lilac for the path the proof reads, amber for the ways
   around it. */
.how { --warn: oklch(82% 0.12 75); }
.how h3 { margin-top: 0; }
.how .journey { list-style: none; padding: 0; margin: 1.75rem 0 0; counter-reset: stage; }
.how .stage { position: relative; counter-increment: stage; padding: 0 0 2.5rem 3rem; margin: 0; color: var(--fg-2); }
.how .stage::before { content: counter(stage); position: absolute; left: 0; top: -.15rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg); color: var(--accent); font: 400 .95rem/1.9rem var(--font-mono); text-align: center; }
.how .stage::after { content: ""; position: absolute; left: calc(1rem - .5px); top: 2.1rem; bottom: .5rem; width: 1px; background: linear-gradient(var(--line-2), var(--line)); }
.how .stage:last-child { padding-bottom: 0; }
.how .stage:last-child::after { display: none; }
.how .stage ul { margin-bottom: .9rem; }
.how .ways { padding-left: 1.5rem; }
.how .ways li::marker { color: var(--warn); font-family: var(--font-mono); }

.how .dia-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.how .dia { position: relative; z-index: 1; margin: 1.25rem 0 1.4rem; padding: clamp(12px, 3vw, 22px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); }
.how .dia svg { display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; overflow: visible; }
.how .dia figcaption { margin-top: .85rem; font-size: .9rem; line-height: 1.45; color: var(--fg-3); text-align: center; text-wrap: balance; }
.how .dia-bound svg { max-width: 26rem; }
@media (max-width: 560px) { .how .stage { padding-left: 2.6rem; } .how .stage .dia { margin-left: -2.6rem; } .how .stage ul { padding-left: 1rem; } }

.how .dia .t { fill: var(--fg); font-family: var(--font-body); font-size: 14px; }
.how .dia .s { fill: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
.how .dia .n { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1; }
.how .dia .n-a { stroke: var(--accent); }
.how .dia .n-out { fill: none; stroke-dasharray: 4 4; }
.how .dia .w, .how .dia .flags line, .how .dia .link line, .how .dia .way line, .how .dia .way path { fill: none; stroke: var(--fg-3); stroke-width: 1.25; }
.how .dia .w-a { stroke: var(--accent); }
.how .m { fill: var(--fg-3); }
.how .m-a { fill: var(--accent); }
.how .m-w { fill: var(--warn); }
.how .dia .slots rect { fill: var(--accent); opacity: .7; }
.how .dia .flags path { fill: var(--accent); }
.how .dia .flags line { stroke: var(--accent); }
.how .dia .win rect { fill: var(--bg-3); stroke: var(--line-2); }
.how .dia .link line { stroke: var(--accent); stroke-width: 2; }
.how .dia .face circle, .how .dia .face path { fill: none; stroke: var(--fg-2); stroke-width: 1.25; }
.how .dia .face-a circle, .how .dia .face-a path { stroke: var(--accent-2); }
.how .dia .frame { fill: var(--bg); stroke: var(--line-2); }
.how .dia .dots circle { fill: var(--line-2); }
.how .dia .tick circle { fill: none; stroke: var(--ok); }
.how .dia .tick path { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.how .dia .ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.how .dia .way circle { fill: none; stroke: var(--warn); }
.how .dia .way line, .how .dia .way path { stroke: var(--warn); }
.how .dia .way .wn { fill: var(--warn); font-family: var(--font-mono); font-size: 12px; }

.how .how-end { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }