/* QMax × Visionary — client document pages.
   Design tokens lifted verbatim from the proposal portal (qmax.visionary.technology)
   so these read as the same publication. Do not re-derive; change there first. */

:root {
  --pp-bg: #fafaf8;
  --pp-bg-dark: #0b0b0d;
  --pp-ink: #0b0b0d;
  --pp-ink-soft: #4d4d52;
  --pp-ink-on-dark: #fafaf8;
  --pp-ink-soft-on-dark: #a3a3ab;
  --pp-accent: #3b5bff;
  --pp-accent-ink: #2745d8;
  --pp-success: #1a9e63;
  --pp-success-ink: #0f7a4a;
  --pp-line: #e3e2dd;
  --pp-line-on-dark: #26262c;
  --pp-card: #fff;
  --pp-card-dark: #141418;
  --pp-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pp-font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --pp-text-xs: .75rem;
  --pp-text-sm: .875rem;
  --pp-text-base: 1.0625rem;
  --pp-text-lg: 1.375rem;
  --pp-text-xl: 2rem;
  --pp-text-2xl: 3rem;
  --pp-text-hero: clamp(2.75rem, 6.5vw, 5.25rem);
  --pp-space-1: .5rem;
  --pp-space-2: 1rem;
  --pp-space-3: 1.5rem;
  --pp-space-4: 2.5rem;
  --pp-space-5: 4rem;
  --pp-space-6: 7rem;
  --pp-radius: 12px;
  --pp-radius-sm: 8px;
  --pp-shadow: 0 2px 8px #0b0b0d0f, 0 20px 48px #0b0b0d1a;
  --pp-focus: 2px solid var(--pp-accent);
  --doc-max: 70.625rem; /* ~1130px */
}

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

/* No `scroll-behavior: smooth` here on purpose. Chrome silently refuses to
   animate very long scrolls, which killed every nav link near the end of the
   document. doc.js animates fragment jumps itself; scroll-padding-top is the
   no-JS fallback for the native jump. */
html { scroll-padding-top: 64px; }

body {
  margin: 0;
  font-family: var(--pp-font-text);
  font-size: var(--pp-text-base);
  line-height: 1.6;
  color: var(--pp-ink);
  background: var(--pp-bg);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: var(--pp-focus); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- nav ---- */

.pp-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--pp-space-2);
  width: 100%; min-height: 52px;
  padding: 0 var(--pp-space-3);
  border-bottom: 1px solid var(--pp-line);
  background: var(--pp-bg);
}
.pp-nav__brand { display: flex; align-items: baseline; gap: var(--pp-space-1); white-space: nowrap; text-decoration: none; color: inherit; }
.pp-nav__agency { font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-sm); letter-spacing: -.01em; text-transform: uppercase; }
.pp-nav__for { font-size: var(--pp-text-xs); color: var(--pp-ink-soft); }
.pp-nav__list { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pp-nav__list::-webkit-scrollbar { display: none; }
.pp-nav__list li { flex-shrink: 0; }
.pp-nav__link {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border-radius: var(--pp-radius-sm);
  color: var(--pp-ink-soft);
  font-family: var(--pp-font-display); font-weight: 500;
  text-decoration: none;
  transition: color .15s, background-color .15s;
}
.pp-nav__link:hover { color: var(--pp-ink); background: #0b0b0d0a; }
.pp-nav__link[aria-current="true"] { color: var(--pp-ink); font-weight: 700; }
.pp-nav__num { font-size: var(--pp-text-sm); font-variant-numeric: tabular-nums; transition: color .15s; }
.pp-nav__link[aria-current="true"] .pp-nav__num { color: var(--pp-accent-ink); }
.pp-nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pp-line); overflow: hidden; }
.pp-nav__progress-fill { width: 0; height: 100%; background: var(--pp-accent); transition: width .3s; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0);
}

/* ----------------------------------------------------------- sections ---- */

.pp-section {
  position: relative;
  padding: var(--pp-space-6) var(--pp-space-4);
  border-bottom: 1px solid var(--pp-line);
}
.pp-section:last-child { border-bottom: none; }
.pp-section__inner { max-width: var(--doc-max); margin: 0 auto; }

.pp-section[data-num]::before {
  content: attr(data-num);
  position: absolute; top: var(--pp-space-3); right: var(--pp-space-3);
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: clamp(6rem, 12vw, 11rem); line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--pp-line);
  pointer-events: none; user-select: none;
}

.pp-section--dark {
  background: var(--pp-bg-dark);
  color: var(--pp-ink-on-dark);
  border-bottom-color: var(--pp-line-on-dark);
}
.pp-section--dark[data-num]::before { -webkit-text-stroke-color: var(--pp-line-on-dark); }
.pp-section--dark .pp-eyebrow { color: var(--pp-accent); }
.pp-section--dark .pp-sub,
.pp-section--dark .pp-note { color: var(--pp-ink-soft-on-dark); }
.pp-section--dark a { color: #9db0ff; }

/* --------------------------------------------------------- typography ---- */

.pp-eyebrow {
  margin: 0 0 var(--pp-space-2);
  font-family: var(--pp-font-display); font-weight: 600;
  font-size: var(--pp-text-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-accent-ink);
}
.pp-eyebrow::before {
  content: ""; display: inline-block;
  width: 1.5rem; height: 2px; margin-right: .6rem; vertical-align: .28em;
  background: var(--pp-accent);
}

.pp-hero { padding-top: var(--pp-space-5); }
.pp-hero__headline {
  margin: 0;
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: var(--pp-text-hero); letter-spacing: -.03em; line-height: 1.02;
  max-width: 14em;
}
.pp-hero__headline .dot { color: var(--pp-accent); }
.pp-hero__meta {
  margin: var(--pp-space-4) 0 0;
  font-family: var(--pp-font-display); font-weight: 600;
  font-size: var(--pp-text-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-ink-soft);
}

.pp-heading {
  margin: 0;
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: var(--pp-text-2xl); letter-spacing: -.02em; line-height: 1.08;
}
.pp-heading--sm { font-size: var(--pp-text-xl); }

.pp-sub { max-width: 38em; margin: var(--pp-space-3) 0 0; font-size: var(--pp-text-lg); line-height: 1.5; color: var(--pp-ink-soft); }

.pp-body { max-width: 46em; }
.pp-body > * { margin: 0; }
.pp-body > * + * { margin-top: var(--pp-space-2); }
.pp-body strong { font-weight: 600; }

.pp-subhead {
  margin: var(--pp-space-4) 0 var(--pp-space-2);
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: var(--pp-text-lg); letter-spacing: -.01em;
}
.pp-note { font-size: var(--pp-text-sm); color: var(--pp-ink-soft); }

/* -------------------------------------------------------------- lists ---- */

.pp-list { max-width: 46em; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--pp-space-1); }
.pp-list li { position: relative; padding-left: 1.35em; }
.pp-list li::before { content: "—"; position: absolute; left: 0; color: var(--pp-accent); }
.pp-section--dark .pp-list li::before { color: var(--pp-accent); }

/* numbered variant — same rhythm, blue tabular numerals instead of the dash */
.pp-list--num { counter-reset: ppnum; }
.pp-list--num li { padding-left: 1.9em; counter-increment: ppnum; }
.pp-list--num li::before {
  content: counter(ppnum) ".";
  font-family: var(--pp-font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- quotes ---- */

.pp-quoteblock {
  max-width: 46em;
  margin: var(--pp-space-3) 0;
  padding: var(--pp-space-3) var(--pp-space-4);
  border-left: 3px solid var(--pp-accent);
  background: var(--pp-card);
  border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0;
  font-size: var(--pp-text-lg); line-height: 1.5;
}
.pp-quoteblock p { margin: 0; }
.pp-quoteblock cite { display: block; margin-top: var(--pp-space-1); font-style: normal; font-size: var(--pp-text-sm); color: var(--pp-ink-soft); }
.pp-section--dark .pp-quoteblock { background: var(--pp-card-dark); }
.pp-section--dark .pp-quoteblock cite { color: var(--pp-ink-soft-on-dark); }

.pp-formula {
  display: block; margin: var(--pp-space-3) 0;
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
  background: var(--pp-card);
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: var(--pp-text-lg); letter-spacing: -.01em;
}
.pp-section--dark .pp-formula { background: var(--pp-card-dark); border-color: var(--pp-line-on-dark); }

/* -------------------------------------------------------------- cards ---- */

.pp-card {
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
  background: var(--pp-card);
  box-shadow: var(--pp-shadow);
}
.pp-section--dark .pp-card { background: var(--pp-card-dark); border-color: var(--pp-line-on-dark); box-shadow: none; }

.pp-cards { display: grid; gap: var(--pp-space-3); margin-top: var(--pp-space-4); }
.pp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.pp-cards--3 { grid-template-columns: repeat(3, 1fr); }

.pp-card__num { font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-sm); color: var(--pp-accent-ink); font-variant-numeric: tabular-nums; }
.pp-section--dark .pp-card__num { color: var(--pp-accent); }
.pp-card__title { margin: var(--pp-space-1) 0 var(--pp-space-2); font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-lg); letter-spacing: -.01em; }

/* item = one workflow / one surface */
.pp-item { margin-top: var(--pp-space-4); }
.pp-item + .pp-item { margin-top: var(--pp-space-5); }
.pp-item__head { display: flex; align-items: baseline; gap: var(--pp-space-2); }
.pp-item__num {
  font-family: var(--pp-font-display); font-weight: 700;
  font-size: var(--pp-text-xl); letter-spacing: -.02em;
  color: var(--pp-accent); font-variant-numeric: tabular-nums;
}
.pp-item__title { margin: 0; font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-xl); letter-spacing: -.02em; line-height: 1.1; }
.pp-item__lede { max-width: 46em; margin: var(--pp-space-2) 0 0; font-size: var(--pp-text-lg); color: var(--pp-ink-soft); line-height: 1.5; }
.pp-section--dark .pp-item__lede { color: var(--pp-ink-soft-on-dark); }

/* ------------------------------------------------------ person index ---- */

.pp-who { display: grid; gap: var(--pp-space-2); margin-top: var(--pp-space-4); grid-template-columns: repeat(3, 1fr); }
.pp-who__card {
  display: flex; flex-direction: column;
  padding: var(--pp-space-3);
  border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
  background: var(--pp-card);
}
.pp-section--dark .pp-who__card { background: var(--pp-card-dark); border-color: var(--pp-line-on-dark); }
.pp-who__name { margin: 0; font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-lg); letter-spacing: -.01em; }
.pp-who__role { margin: 2px 0 0; font-size: var(--pp-text-sm); color: var(--pp-ink-soft); line-height: 1.45; }
.pp-section--dark .pp-who__role { color: var(--pp-ink-soft-on-dark); }
.pp-who__nums { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--pp-space-2) 0 0; padding-top: var(--pp-space-2); border-top: 1px solid var(--pp-line); }
.pp-section--dark .pp-who__nums { border-top-color: var(--pp-line-on-dark); }
.pp-who__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border: 1px solid var(--pp-accent); border-radius: 99px;
  color: var(--pp-accent-ink); background: transparent;
  font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-base);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.pp-who__num:hover { background: var(--pp-accent); color: #fff; }
.pp-section--dark .pp-who__num { color: var(--pp-accent); }
.pp-section--dark .pp-who__num:hover { color: #fff; }

@media (max-width: 900px) { .pp-who { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pp-who { grid-template-columns: 1fr; } }

/* an item that keeps its place in the numbered run but carries no detail —
   the muted number plus the dashed note read as deliberate, not missing */
.pp-item--held .pp-item__num { color: var(--pp-ink-soft); }
.pp-held-note {
  max-width: 46em;
  margin: var(--pp-space-2) 0 0;
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-radius);
  color: var(--pp-ink-soft);
  font-size: var(--pp-text-base);
}
.pp-section--dark .pp-held-note { border-color: var(--pp-line-on-dark); color: var(--pp-ink-soft-on-dark); }

/* ---------------------------------------------- definition (two-col) ---- */

.pp-def { margin: var(--pp-space-3) 0 0; padding: 0; border-top: 1px solid var(--pp-line); max-width: 52em; }
.pp-def__row { display: grid; grid-template-columns: 12rem 1fr; gap: var(--pp-space-3); padding: var(--pp-space-2) 0; border-bottom: 1px solid var(--pp-line); }
.pp-def__key { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--pp-ink-soft); }
.pp-def__val { margin: 0; }
.pp-section--dark .pp-def, .pp-section--dark .pp-def__row { border-color: var(--pp-line-on-dark); }
.pp-section--dark .pp-def__key { color: var(--pp-ink-soft-on-dark); }

/* ------------------------------------------------------------- tables ---- */

.pp-tablewrap { margin-top: var(--pp-space-3); overflow-x: auto; border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: var(--pp-card); box-shadow: var(--pp-shadow); }
.pp-section--dark .pp-tablewrap { background: var(--pp-card-dark); border-color: var(--pp-line-on-dark); box-shadow: none; }

.pp-table { width: 100%; border-collapse: collapse; font-size: var(--pp-text-sm); }
.pp-table th, .pp-table td { padding: .85rem var(--pp-space-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--pp-line); }
.pp-table thead th {
  font-family: var(--pp-font-display); font-weight: 600;
  font-size: var(--pp-text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-ink-soft); white-space: nowrap;
}
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table td strong { font-weight: 600; }
.pp-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pp-accent-ink); font-family: var(--pp-font-display); font-weight: 700; }
.pp-section--dark .pp-table th, .pp-section--dark .pp-table td { border-color: var(--pp-line-on-dark); }
.pp-section--dark .pp-table thead th { color: var(--pp-ink-soft-on-dark); }
.pp-section--dark .pp-table .num { color: var(--pp-accent); }

/* --------------------------------------------------------------- pill ---- */

.pp-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 99px;
  background: var(--pp-accent); color: #fff;
  font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.pp-pill--quiet { background: transparent; color: var(--pp-ink-soft); border: 1px solid var(--pp-line); }
.pp-section--dark .pp-pill--quiet { color: var(--pp-ink-soft-on-dark); border-color: var(--pp-line-on-dark); }

/* ------------------------------------------------------------ callout ---- */

.pp-callout {
  max-width: 52em;
  margin-top: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px solid var(--pp-line); border-left: 3px solid var(--pp-accent);
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  background: var(--pp-card);
}
.pp-callout__title {
  margin: 0 0 var(--pp-space-1);
  font-family: var(--pp-font-display); font-weight: 600;
  font-size: var(--pp-text-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-accent-ink);
}
.pp-callout > *:last-child { margin-bottom: 0; }
.pp-section--dark .pp-callout { background: var(--pp-card-dark); border-color: var(--pp-line-on-dark); border-left-color: var(--pp-accent); }
.pp-section--dark .pp-callout__title { color: var(--pp-accent); }

/* ------------------------------------------------------- click paths ---- */

.pp-path {
  display: inline-block;
  font-family: var(--pp-font-display); font-weight: 500;
  font-size: var(--pp-text-sm); line-height: 1.5;
  color: var(--pp-accent-ink);
}
.pp-section--dark .pp-path { color: var(--pp-accent); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .9em;
  padding: .1em .35em;
  border-radius: 4px;
  background: #0b0b0d0a;
}
.pp-section--dark code { background: #fafaf814; }

/* --------------------------------------------------------------- cta ----- */

.pp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--pp-space-4);
  border: 1px solid var(--pp-accent); border-radius: 99px;
  background: var(--pp-accent); color: #fff;
  font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-lg);
  letter-spacing: -.01em; text-decoration: none;
  transition: filter .15s;
}
.pp-btn:hover { filter: brightness(1.1); }
.pp-btn--ghost { background: transparent; color: var(--pp-ink); border-color: var(--pp-line); font-size: var(--pp-text-base); min-height: 44px; }
.pp-btn--ghost:hover { border-color: var(--pp-accent); filter: none; }
.pp-section--dark .pp-btn--ghost { color: var(--pp-ink-on-dark); border-color: var(--pp-line-on-dark); }

/* ------------------------------------------------------------- footer ---- */

.pp-footer {
  padding: var(--pp-space-4);
  border-top: 1px solid var(--pp-line-on-dark);
  background: var(--pp-bg-dark); color: var(--pp-ink-soft-on-dark);
  font-size: var(--pp-text-sm);
}
.pp-footer__inner { max-width: var(--doc-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--pp-space-3); justify-content: space-between; align-items: baseline; }
.pp-footer a { color: var(--pp-ink-on-dark); text-decoration: none; border-bottom: 1px solid var(--pp-line-on-dark); }
.pp-footer a:hover { border-bottom-color: var(--pp-accent); }

/* --------------------------------------------------------------- index --- */

.pp-index { display: grid; gap: var(--pp-space-3); margin-top: var(--pp-space-5); grid-template-columns: repeat(3, 1fr); }
.pp-index__card {
  display: flex; flex-direction: column; gap: var(--pp-space-2);
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
  background: var(--pp-card); box-shadow: var(--pp-shadow);
  color: inherit; text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.pp-index__card:hover { border-color: var(--pp-accent); transform: translateY(-3px); }
.pp-index__num { font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-sm); color: var(--pp-accent-ink); }
.pp-index__title { margin: 0; font-family: var(--pp-font-display); font-weight: 700; font-size: var(--pp-text-lg); letter-spacing: -.01em; }
.pp-index__body { margin: 0; font-size: var(--pp-text-sm); color: var(--pp-ink-soft); line-height: 1.6; }
.pp-index__go { margin-top: auto; font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-sm); color: var(--pp-accent-ink); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .pp-cards--2, .pp-cards--3, .pp-index { grid-template-columns: 1fr; }
  .pp-def__row { grid-template-columns: 1fr; gap: 2px; }
  .pp-section { padding: var(--pp-space-5) var(--pp-space-3); }
  .pp-section[data-num]::before { font-size: 5rem; opacity: .8; }
  .pp-nav__for { display: none; }
}

/* --------------------------------------------------------------- print --- */

@media print {
  .pp-nav, .pp-footer { display: none; }
  html { scroll-behavior: auto; }
  body { background: #fff; font-size: 10.5pt; }
  .pp-section { padding: 1.2rem 0; border-bottom: 1px solid #ddd; break-inside: auto; }
  .pp-section--dark { background: #fff !important; color: #0b0b0d !important; }
  .pp-section--dark .pp-sub, .pp-section--dark .pp-item__lede, .pp-section--dark .pp-def__key { color: #4d4d52 !important; }
  .pp-section--dark .pp-card, .pp-section--dark .pp-tablewrap, .pp-section--dark .pp-callout, .pp-section--dark .pp-quoteblock, .pp-section--dark .pp-formula { background: #fff !important; border-color: #ddd !important; }
  .pp-section[data-num]::before { display: none; }
  .pp-card, .pp-tablewrap { box-shadow: none; }
  .pp-hero__headline { font-size: 26pt; }
  .pp-heading { font-size: 17pt; }
  .pp-item, .pp-tablewrap, .pp-callout { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}