:root {
  --brand-primary: #0e71ff;
  --brand-secondary: #1c2333;
  --brand-accent: #cfe1fc;
  --brand-light: #cfe1fc;
  --brand-surface: #e7f0fd;
  --brand-ink: #090d11;
}

html {
  font-size: 15.5px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.font-sf-pro {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.font-rounded {
  font-family: "SF Pro Rounded", ui-rounded, "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, sans-serif;
}

.font-geometric {
  font-family: "Avenir Next", Avenir, Montserrat, Futura, -apple-system, BlinkMacSystemFont, sans-serif;
}

.font-editorial {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white);
  outline-offset: 2px;
}

button, a, input, select, textarea {
  touch-action: manipulation;
}

.brand-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 92%, black), var(--brand-secondary));
}

.brand-ring {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

.agency-hero {
  isolation: isolate;
}

.agency-hero__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.agency-hero--aurora {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-secondary) 94%, black), var(--brand-secondary));
}

.agency-hero--aurora .agency-hero__art {
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--brand-primary) 78%, transparent) 0, transparent 36%),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--brand-accent) 48%, transparent) 0, transparent 34%),
    linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--brand-primary) 30%, transparent));
  filter: saturate(1.1);
}

.agency-hero--mesh {
  background: color-mix(in srgb, var(--brand-secondary) 92%, black);
}

.agency-hero--mesh .agency-hero__art {
  background:
    linear-gradient(30deg, transparent 24%, color-mix(in srgb, var(--brand-primary) 35%, transparent) 25%, transparent 26%) 0 0 / 74px 74px,
    linear-gradient(150deg, transparent 24%, color-mix(in srgb, var(--brand-accent) 22%, transparent) 25%, transparent 26%) 0 0 / 74px 74px,
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand-primary) 70%, transparent), transparent 34%);
}

.agency-hero--contours {
  background: linear-gradient(135deg, var(--brand-secondary), color-mix(in srgb, var(--brand-primary) 50%, var(--brand-secondary)));
}

.agency-hero--contours .agency-hero__art {
  background:
    repeating-radial-gradient(ellipse at 82% 105%, transparent 0 35px, color-mix(in srgb, var(--brand-accent) 25%, transparent) 37px 39px, transparent 41px 76px),
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand-primary) 75%, transparent), transparent 35%);
}

.agency-hero--prism {
  background: linear-gradient(125deg, color-mix(in srgb, var(--brand-secondary) 94%, black), color-mix(in srgb, var(--brand-primary) 42%, var(--brand-secondary)));
}

.agency-hero--prism .agency-hero__art {
  background:
    conic-gradient(from 205deg at 78% 50%, transparent 0 10deg, color-mix(in srgb, var(--brand-primary) 64%, transparent) 11deg 28deg, transparent 29deg 42deg, color-mix(in srgb, var(--brand-accent) 24%, transparent) 43deg 58deg, transparent 59deg 360deg),
    linear-gradient(145deg, transparent 45%, color-mix(in srgb, var(--brand-primary) 24%, transparent));
}

.agency-hero--horizon {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 96%, black), color-mix(in srgb, var(--brand-secondary) 72%, var(--brand-primary)));
}

.agency-hero--horizon .agency-hero__art {
  background:
    radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--brand-primary) 86%, transparent) 0, transparent 56%),
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--brand-accent) 18%, transparent) 48px 49px),
    linear-gradient(105deg, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 46%);
}

.agency-hero--orbit {
  background: radial-gradient(circle at 76% 48%, color-mix(in srgb, var(--brand-primary) 45%, var(--brand-secondary)), color-mix(in srgb, var(--brand-secondary) 94%, black) 58%);
}

.agency-hero--orbit .agency-hero__art {
  background:
    radial-gradient(circle at 76% 48%, transparent 0 70px, color-mix(in srgb, var(--brand-accent) 32%, transparent) 72px 74px, transparent 76px 128px, color-mix(in srgb, var(--brand-primary) 55%, transparent) 130px 133px, transparent 135px 205px, color-mix(in srgb, var(--brand-accent) 18%, transparent) 207px 209px, transparent 211px),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--brand-primary) 60%, transparent), transparent 26%);
}

.money {
  white-space: nowrap;
}

.prose-lite p + p {
  margin-top: 1rem;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-open {
  overflow: hidden;
}

[data-property-previous]:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (max-width: 640px) {
  .table-scroll table {
    min-width: 720px;
  }

  .table-scroll::after {
    content: "Swipe horizontally to see more";
    display: block;
    padding: .65rem 1rem;
    color: #64748b;
    font-size: .75rem;
    background: #f8fafc;
  }
}