/* BestProps base: reset, type, layout utilities, focus, motion. Owned by L0.
   v2.0: the page ground is the drafting grid (8 px fine, 40 px major) with a film grain, on every page.
   v2 type classes: .bp-display, .bp-h1, .bp-h2, .bp-h3, .bp-lede, .bp-label, .bp-num. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  min-height: 100dvh;
  background-color: var(--ground, var(--bg));
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: center top;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
/* Film grain on the ground, behind content (z-index -1), so text keeps full contrast. Fixed, so it does not scroll. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { mix-blend-mode: multiply; filter: invert(1); }
@media print { body::after { display: none; } body { background-image: none; } }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: 600; overflow-wrap: break-word; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); }
[hidden] { display: none !important; }
::selection { background: var(--brand-tint-2); color: var(--text); }

/* Focus: one ring everywhere */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.focus-inset:focus-visible { outline-offset: -2px; }

/* Typography */
.display, .h1, .h2, .h3, .h4 { color: var(--text); font-weight: 600; }
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600; }
.h1 { font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: var(--track-display); }
.h2 { font-size: var(--fs-2xl); line-height: 1.14; letter-spacing: var(--track-tight); }
.h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: -0.018em; }
.h4 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.012em; }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.body-lg { font-size: var(--fs-md); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.text-2 { color: var(--text-2); }
.serif { font-family: var(--font-serif); font-style: normal; font-weight: inherit; letter-spacing: -0.01em; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.01em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted);
}
.eyebrow--brand { color: var(--brand-soft); }
.text-profit { color: var(--profit); }
.text-caution { color: var(--caution); }
.text-breach { color: var(--breach); }
.text-brand { color: var(--brand-soft); }
.balance { text-wrap: balance; }
.measure { max-width: 68ch; }

/* v2 type (frames): Geist for headings with tight tracking, Geist Mono for figures and labels. No serif, no italics. */
.bp-display, .bp-h1, .bp-h2, .bp-h3 { margin: 0; font-family: var(--font-sans); color: var(--ink); text-wrap: balance; }
.bp-display { font-size: var(--fs-v2-display); font-weight: 650; line-height: 1; letter-spacing: -0.045em; }
.bp-h1 { font-size: var(--fs-v2-h1); font-weight: 650; line-height: 1.02; letter-spacing: -0.04em; }
.bp-h2 { font-size: var(--fs-v2-h2); font-weight: 650; line-height: 1.02; letter-spacing: var(--track-v2); }
.bp-h3 { font-size: var(--fs-v2-h3); font-weight: 550; line-height: 1.12; letter-spacing: -0.03em; }
.bp-lede { margin: 0; max-width: 46ch; font-size: var(--fs-v2-lede); line-height: 1.55; color: var(--ink-2); }
.bp-body { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.6; }
.bp-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.bp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.01em; color: var(--ink); }
.bp-sheet { width: 100%; max-width: calc(var(--container-sheet) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Long-form content: lanes wrap article bodies in .prose */
.prose { font-size: var(--fs-md); line-height: 1.7; color: var(--text-2); max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-xl); color: var(--text); letter-spacing: -0.018em; line-height: 1.25; margin-top: 2.2em; }
.prose h3 { font-size: var(--fs-lg); color: var(--text); letter-spacing: -0.012em; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose a { color: var(--brand-soft); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t-fast); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--faint); }
.prose blockquote { border-left: 2px solid var(--brand); padding-left: var(--s-5); color: var(--text); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0.1em 0.35em; }

.link { color: var(--brand-soft); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t-fast); }
.link:hover { text-decoration-color: currentColor; }
.link-quiet { color: var(--muted); transition: color var(--t-fast); }
.link-quiet:hover { color: var(--text); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--band { background: var(--bg-elev); border-block: 1px solid var(--line); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack-2 { --stack-gap: var(--s-2); } .stack-3 { --stack-gap: var(--s-3); } .stack-6 { --stack-gap: var(--s-6); } .stack-8 { --stack-gap: var(--s-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }
.cluster-2 { --cluster-gap: var(--s-2); } .cluster-4 { --cluster-gap: var(--s-4); }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.grid { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.grid-auto { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr)); }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { --cols: 2; } }
@media (min-width: 960px) { .grid-3 { --cols: 3; } .grid-4 { --cols: 4; } }
.gap-2 { --grid-gap: var(--s-2); } .gap-3 { --grid-gap: var(--s-3); } .gap-4 { --grid-gap: var(--s-4); } .gap-8 { --grid-gap: var(--s-8); }
.span-2 { grid-column: span 2; }
@media (max-width: 639px) { .span-2 { grid-column: auto; } }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-10 { margin-top: var(--s-10); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--brand); color: var(--brand-ink); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); font-weight: 500; transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s-3); }

.hide-mobile { }
.show-mobile { display: none; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } .show-mobile { display: revert; } }

/* Reveal on scroll (shell.js adds .is-in). Content is only hidden once JS is confirmed. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}